// _______________________________________
//     Break Points For Media Queries
// _______________________________________
$bp-1600: 100em;
$bp-1500: 93.75em;
$bp-1350: 84.37em;
$bp-1200: 75em;
$bp-1150: 71.875em;
$bp-1100: 68.75em;
$bp-1050: 65.625em;
$bp-1000: 62.5em;
$bp-950: 59.375em;
$bp-900: 56.25em;
$bp-850: 53.125em;
$bp-800: 50em;
$bp-750: 46.875em;
$bp-700: 43.75em;
$bp-650: 40.625em;
$bp-600: 37.5em;
$bp-550: 34.375em;
$bp-500: 31.25em;
$bp-450: 28.125em;
$bp-400: 25em;
$bp-350: 21.875em;
$bp-300: 18.75em;


// ------------  [responsive ]  ------------


// _______________________________________
//        [__ =============================Home Page================ __]
// _______________________________________
@media only screen and (max-width: $bp-1600) {
    .footer {
        &__image {
            max-width: 45rem;
            width: 100%;

        }
    }
}

@media only screen and (max-width: $bp-1500) {
    .footer {
        margin-top: -56rem;
    }

    .cash__wrapper--box {
        max-width: 50rem;
        height: auto;
        width: 100%;

        &--content {
            flex-direction: column;

        }
    }

    .img-inline__container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .de {
        margin-top: -20rem;
        height: auto;
        background-size: cover;
        // padding-bottom: 5rem;
        margin-bottom: 30rem;
    }

}

@media only screen and (max-width: $bp-1350) {
    .footer {
        margin-top: -70rem;
    }

    .seu__play--video {
        max-width: 55rem;
        height: 40rem;
        width: 100%;
    }

    .seu__play--video {
        margin-top: 4rem;

        &--content {
            img {
                display: none;
            }

            button {
                top: 50%;
                margin-top: 4rem;

            }
        }
    }

    .cash {
        margin: 0 5rem;

        &__wrapper {
            display: flex;
            width: 100%;
            justify-content: space-between;



            &--card {
                max-width: 30rem;
                width: 100%;


            }

        }

        .voce {
            gap: 4rem;

            &__right {
                .black-girl {
                    max-width: 70%;
                    right: -25rem;
                }

                .card-1 {
                    display: none !important;
                }
            }

            &__left {
                padding: 0 2rem;

                &--heading {
                    br {
                        display: none !important;
                    }
                }
            }
        }

    }

    .cash__wrapper--box {
        margin-right: 10rem;
    }

    .percent__image {
        max-width: 45rem;
        width: 100%;
    }

    .percent__content--heading {
        display: flex;
        flex-direction: column;

        br {
            display: none;
        }
    }

    .header__content--right {
        max-width: 55rem !important;
        width: 100%;
    }
}

@media only screen and (max-width: $bp-1100) {

    .de {
        margin-bottom: 8rem !important;

    }

    .header__content {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        margin-bottom: 7rem;
    }

    .percent__content {
        &--heading {
            margin-bottom: 4rem;
        }
    }

    .cash {
        margin-left: 0;

        &__wrapper {
            flex-direction: column;
            align-items: center;
        }
    }

    .cash__wrapper--card {
        max-width: 40rem !important;
        width: 100%;
        margin: 0 auto;
        justify-self: center;

        img {
            transform: translateY(0);
            max-width: 45rem;
            width: 100%;
            margin: 0 auto;
        }
    }

    .de__content {
        flex-direction: column;
    }

    .voce {
        gap: 3rem;

        &__right {
            .card-1 {
                display: none;
            }

            .black-girl {
                max-width: 50rem;
                width: 100%;
            }



        }

        &__left {
            padding-right: 0;

            &--heading {
                br {
                    display: none;
                }
            }
        }
    }

    .seu {
        .card-2 {
            display: none;
        }
    }

}

@media only screen and (max-width: $bp-1050) {
    .seu {
        padding-top: 7rem 2rem;
        height: 100%;
        height: 1200px;
        background-size: cover;
        background-position: top;

        &__heading {
            padding: 4rem 2rem;
        }
    }

    .percent {


        &__content {
            margin-top: 0;

            &--heading {
                font-size: 4rem !important;
                text-align: center;
                padding-top: 8rem;

                br {
                    display: none !important;
                }
            }
        }

        &__image {
            margin-top: 30rem;
            transform: translateX(-5rem);

            img {
                display: flex;


            }
        }
    }

    .footer {
        margin-top: -50rem;
        height: auto;

        &__content {
            transform: translateY(-10rem);
        }

    }
}

@media only screen and (max-width: $bp-850) {
    .percent {
        display: flex;
        flex-direction: column;

        &__content {
            padding: 0 2rem !important;
            margin-top: 0rem;

            &--text {
                max-width: 100%;
            }
        }
    }

    .plane {
        &__container {
            display: flex !important;
            flex-direction: column;

            &--rent {
                display: flex;
                margin: 0 auto;
                flex-direction: column;

                img {
                    margin-top: 0;
                    max-width: 57rem;
                    width: 100%;

                }
            }

        }
    }

    .cash__wrapper--box {
        margin-right: 0;
    }

    .benefits {
        margin-top: 0;
        background-size: cover;
        padding-bottom: 10rem;
        height: 140rem;
        display: flex;

        &__container {
            display: flex;
            flex-direction: column;
            padding: 0 2rem;
            align-items: center;

            &--left {
                img {

                    margin-top: 3rem !important;

                }
            }

            &--right {
                transform: translateY(-17rem);
            }
        }
    }

    .voce {
        display: grid;
        grid-template-columns: 1fr;

        &__right {
            .black-girl {
                display: none;
            }
        }

    }

    .footer {
        &__content {
            z-index: 10;
            position: relative;
            padding: 0 2rem;

        }

        &__image {
            max-width: 30rem;
            width: 100%;
            bottom: 0;
        }
    }
}

@media only screen and (max-width: $bp-600) {


    .de__content {

        padding-left: 2rem;
        padding-right: 2rem;

        &--heading {
            h1 {
                font-size: 4rem;
            }
        }
    }

    .header {
        &__content {
            &--left {
                .heading {
                    padding: 0 !important;

                    &__main {
                        font-size: 4.5rem !important;

                    }

                    &__sub {
                        br {
                            display: none;
                        }
                    }
                }

                &-card {
                    height: auto !important;

                    .img {

                        img {
                            margin: 0 auto;
                            margin-bottom: 2rem;
                        }
                    }

                    .card-text {
                        margin: 0 !important;

                    }

                    .btn-primary {
                        margin-top: 2rem;
                    }
                }
            }
        }
    }

    .card-text {
        max-width: 100%;

    }

    .cash {
        &__heading--main {
            font-size: 3rem;
        }

        &__wrapper {
            &--box {
                &--content {
                    h3 {
                        font-size: 3.2rem !important;
                    }
                }
            }
        }

    }

    .benefits__container--left {
        img {
            transform: translateY(-4rem);
        }
    }

    .benefits__container--right--heading {
        font-size: 3.5rem !important;
        transform: translateY(-6rem);
    }

    .footer {
        &__content {
            &--text {}
        }

        &__image {
            display: none;
        }
    }
}

// _______________________________________
//        [__ Address page responsive __]
// _______________________________________
@media only screen and (max-width: $bp-1000){
    .form__group{
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }
   
    .grid-1fr{
        display: grid;
        grid-template-columns: 1fr !important ; 
        gap: 0 !important;
    }

}
@media only screen and (max-width: $bp-700){
    .personal__body--box{
        padding: 0 2rem;
       
    }
    .form__group{
    
        &--input{
            margin-top: 2rem;
            margin-bottom: 5rem !important;
            height: 5.5rem;
        }
    }
     .grid-half{
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .submit{
        margin-top: 5rem !important;
    }
}
// _______________________________________
//        [__ Approve page responsive __]
// _______________________________________
@media only screen and (max-width: $bp-1350){
   
    .approved__image{

        img{
            max-width: 40rem !important;
            width: 100%;
            object-fit: contain;
            display: flex;
            align-items: center;
            height: 100%;
        }
    }

}
@media only screen and (max-width: $bp-900){
    .grid-proof{
        display: flex;
        flex-direction: column;
        align-items: center;
        

        .approved__image{
            max-width: 100% !important;
            width: 100%;
            img{
                max-width: 100% !important;
                margin-top: 4rem;

            }
        }
    }
    .identity{
   
     
        &__file{
       
            width: 100%;
            .upload{
               
                width: 100%;

                label{
                    max-width: 100%;
                    width: 100%;
                    padding: 0 2rem;
                    
                }
            }
        }
        .approved{
            padding: 4rem 0;
            &__image{
                height: 30rem !important;
               
            }

        }
       
    }
    .bottom_text{
        padding-bottom: 3rem;
    }
}
// ------------  [approved cartoon]  ------------
@media only screen and (max-width: $bp-950){
    .approved3__img{
        width: 100%;
        max-width: 30rem;
        height: 100%;
        transform: translateY(1.1rem);
     
      
    }

}
@media only screen and (max-width: $bp-700){
    .grid{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
// _______________________________________
//        [__ selfie a face only selfie  __]
// _______________________________________
@media only screen and (max-width: $bp-1150){
 .grid-3fr{
        display: grid;
        grid-template-columns: 1fr 1fr;
       
 }
 .identity__id-card-img{
     margin-top: 0;
     margin-top: 3rem;
 } 
  .cartoon-card{
     transform: scale(1) !important;
     max-width: 35rem;
     width: 100%;
     height: 35rem !important;
     object-fit: contain;
 }  

}
@media only screen and (max-width: $bp-750){
    .grid-3fr{
        display: grid;
        grid-template-columns: 1fr ;
       
 }
 .identity__text{
     margin-top: 2rem;
     margin-bottom: 2rem;
    
 }
 .cartoon-card{
     max-width: 30rem;
     width: 100%;
 }  
 .selfie__box{

     padding:  2rem;
     height: auto !important;
 }
}

// _______________________________________
//        [__ login __]
// _______________________________________

@media only screen and (max-width: $bp-850){
    .login{
        grid-template-columns: 1fr;
        padding: 10rem 0;
        &__left{
            max-width: 40rem !important;
            width: 100%;
            margin: 0 auto;
            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
                margin: 0 auto;
            }

        }
    }

}
@media only screen and (max-width: $bp-500){
    .login{
        grid-template-columns: 1fr;
        padding: 10rem 2rem;
        padding-top: 2rem;
        &__left{
            max-width: 40rem !important;
            width: 100%;
            margin: 0 auto;
          

        }
        &__right{
            &--card{

                .social{
                    &__icon{
                        width: 5rem;
                        height: 5rem;
                    }
                }
            }
        }
    }
    .btn-toggle{
        display: flex;
        justify-content: center;


    }

}

// _______________________________________
//        [__ Personal information __]
// _______________________________________
@media only screen and (max-width: $bp-1000){
    .personal__body--box--content{
        gap: 2rem !important;
    }
}
@media only screen and (max-width: $bp-800){
    .personal__body--box--content{
        flex-direction: column;
        align-items: center;
    }
    .submit{
        margin: 4rem auto;
        margin-bottom: 4rem;
    }
}

// _______________________________________
//        [__ photos page __]
// _______________________________________
    @media only screen and (max-width: $bp-1100){
    .identity{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
     
    }
    }

    @media only screen and (max-width: $bp-1500){
        .identity__id-card {
            transform: none !important;
        }
    }
    @media only screen and (max-width: $bp-700){
        .content{
            flex-direction: column;
            align-items: center;
          
            &__card{
                height: 35rem;
                max-width: 35rem;
                width: 100%;
                transform: translateX(0);
          
            }
            &__girl{
                max-width: 35rem;
                width: 100%;
                height: 27rem;
                margin-top: 0;
                margin-bottom: 7rem;
            }
        }

        .personal__body--box{
            padding: 3rem 2rem;
        }
       
    }