/***************** sm screens ****************/
@media (max-width: 576px){

    .p__section{
        padding: 3rem 0;
    }
    .footer fieldset {
        width: 90% !important;
    }

    /**************** home page ****************/
    .hero__sm, .hero__sm .h__sm-0{
        height: auto !important;
    }
    .hero__sm .cards__section{
        margin-top: 50px !important;
    }
    .hero__sm .cards__section .cards__bg{
        height: 280px !important;
        width: 280px !important;
    }
    .hero__sm .cards__section .phone__img img{
        height: 320px !important;
    }
    .hero__sm .cards__section .aside__card{
        bottom: 50px !important;
        right: 0 !important;
        transform: scale(0.8);
    }
    .hero__sm .cards__section .bottom__card{
        margin-top: -50px;
        margin-left: calc(100% - 240px) !important;
        transform: scale(0.7) !important;
    }

    .loyalty__sm .cards__section{
        height: 320px !important;
    }

    .loyalty__sm .phone__img img{
        height: 320px !important;
    }
    .loyalty__sm .left__card{
        top: 0 !important;
        right: -50px !important;
        transform: scale(0.6) !important;
    }
    .loyalty__sm .right__card{
        top: 30px !important;
        left: -50px !important;
        transform: scale(0.6) !important;
    }

    .features .features__card-1 .img__1{
        bottom: -35% !important;
        left: calc(50% - 35px);
        height: 260px;
    }
    .features .features__card-1 .img__2{
        bottom: -35% !important;
        left: calc(50% + 35px);
        height: 280px;
    }
    .features .features__card-2 .img{
        height: 160px;
    }
    .features .features__card-3 .img{
        height: 160px;
    }

    .how-it-works .img__phone{
        height: 330px !important;
    }
    .how-it-works .phone__card-body {
        height: 300px;
    }

    /**************** about page ****************/
    .shipping__margin-top{
        margin-top: -4rem
    }
    .mt_sm-60{
        margin-top: 10px !important;
    }
    .mt_sm-30{
        margin-top: 30px !important;
    }
    .mt_sm-50{
        margin-top: 50px !important;
    }
    .ms_sm-60{
        margin-left: -40px !important;
    }


    /**************** animation ****************/
    /********* card 1 *********/
    .features .features__card-1 .img__1 img {
        transform: rotate(-5deg) translateX(-10px);
    }
    .features .features__card-1 .img__2 img {
        transform: rotate(5deg) translateX(10px);
    }

    /********* card 2 *********/
    .features .features__card-2 .img__hover {
        bottom: 0;
    }
    .features .features__card-2 .comment__hover {
        opacity: 1;
        transform: translate(0, 0) scale(0.6);
    }

    /********* card 3 *********/
    .features .features__card-3 .img__hover {
        height: 140px;
        opacity: 1;
        transform: translate(0, 0);

    }

    /********* card 4 *********/
    .features .features__card-4 .svg__hover {
        bottom: 0;
    }
    .features .features__card-4 .negative__top{
        top: -180px
    }
    .features .features__card-4 .avatar__hover{
        bottom: 10px;
        opacity: 1;
    }

    /********* card 5 *********/
    .features .features__card-5 .svg-1__hover{
        opacity: 0;
    }
    .features .features__card-5 .svg-2__hover{
        opacity: 1;
    }
    .features .features__card-5 .text-1__hover {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }
    .features .features__card-5 .text-2__hover {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.5s;
    }

}


/***************** md screens ****************/
@media (min-width: 576px) and (max-width: 992px) {

    .p__section{
        padding: 3rem 0;
    }
    .footer fieldset {
        width: 75%;
    }

    /**************** home page ****************/
    .hero .aside__card {
        right: 0;
    }
    .testimonials .testimonials__card{
        height: 420px !important;
    }

    .features .features__card-1 .img__1{
        bottom: -45% !important;
        left: calc(50% - 35px);
        height: 320px;
    }
    .features .features__card-1 .img__2{
        bottom: -45% !important;
        left: calc(50% + 35px);
        height: 340px;
    }
    .features .features__card-2 .img{
        height: 180px;
    }
    .features .features__card-3 .img{
        height: 200px;
    }

    /**************** about page ****************/
    .shipping__margin-top{
        margin-top: -6rem
    }
    .mt_sm-60{
        margin-top: 0 !important;
    }
    .mt_sm-30{
        margin-top: 30px !important;
    }
    .mt_sm-50{
        margin-top: 50px !important;
    }


    /**************** animation ****************/
    /********* card 1 *********/
    .features .features__card-1 .img__1 img {
        transform: rotate(-5deg) translateX(-10px);
    }
    .features .features__card-1 .img__2 img {
        transform: rotate(5deg) translateX(10px);
    }

    /********* card 2 *********/
    .features .features__card-2 .img__hover {
        bottom: 0;
    }
    .features .features__card-2 .comment__hover {
        opacity: 1;
        transform: translate(0, 0) scale(0.6);
    }

    /********* card 3 *********/
    .features .features__card-3 .img__hover {
        opacity: 1;
        transform: translate(0, 0);

    }

    /********* card 4 *********/
    .features .features__card-4 .svg__hover {
        bottom: 0;
    }
    .features .features__card-4 .negative__top{
        top: -180px
    }
    .features .features__card-4 .avatar__hover{
        bottom: 60px;
        opacity: 1;
    }

    /********* card 5 *********/
    .features .features__card-5 .svg-1__hover{
        opacity: 0;
    }
    .features .features__card-5 .svg-2__hover{
        opacity: 1;
    }
    .features .features__card-5 .text-1__hover {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }
    .features .features__card-5 .text-2__hover {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.5s;
    }

}


/***************** lg screens ****************/
@media (min-width: 992px) and (max-width: 1200px) {

    .w-lg-50{
        width: 50% !important;
    }
    .w-lg-75{
        width: 75% !important;
    }
    .display-lg-6{
        font-size: calc(1.375rem + 1.5vw);
    }

    /**************** home page ****************/
    .features .features__card-1 .img__1{
        bottom: -45% !important;
        left: calc(50% - 35px);
        height: 280px;
    }
    .features .features__card-1 .img__2{
        bottom: -45% !important;
        left: calc(50% + 35px);
        height: 300px;
    }

    /**************** about page ****************/
    .shipping__margin-top{
        margin-top: -11rem
    }

    /**************** animation ****************/
    .features .features__card-5 .text-2__hover {
        top: 50px !important;
    }
    .features .features__card-4:hover .avatar__hover {
        bottom: 25px;
    }


}


/***************** xl screens ****************/
@media (min-width: 1200px) {

    .w-xl-50{
        width: 50% !important;
    }
    .w-xl-75{
        width: 75% !important;
    }
    .w-xl-100{
        width: 100% !important;
    }

    /**************** home page ****************/
    .features .features__card-1 .img__1{
        bottom: -45% !important;
        left: calc(50% - 35px);
        height: 280px;
    }
    .features .features__card-1 .img__2{
        bottom: -45% !important;
        left: calc(50% + 35px);
        height: 300px;
    }

    /**************** about page ****************/
    .shipping__margin-top{
        margin-top: -13rem
    }

}


/***************** lg to xxl screens ****************/
@media (min-width: 992px) and (max-width: 1400px){

    /**************** home page ****************/
    .features .features__card-2 .img{
        height: 140px;
    }
    .features .features__card-3 .img{
        height: 160px;
    }
    .loyalty .left__card {
        right: 50px;
    }

}


/***************** xl and xxl screens ****************/
@media (min-width: 1200px) and (max-width: 1400px){

    /**************** animation ****************/
    .features .features__card-5 .text-1__hover {
        top: 60px !important;
    }
    .features .features__card-5 .text-2__hover {
        top: 35px !important;
    }

}


/***************** xxl screens ****************/
@media (min-width: 1400px) {

    /**************** home page ****************/
    .features .features__card-1 .img__1{
        bottom: -45% !important;
        left: calc(50% - 35px);
        height: 320px;
    }
    .features .features__card-1 .img__2{
        bottom: -45% !important;
        left: calc(50% + 35px);
        height: 340px;
    }
    .features .features__card-2 .img{
        height: 180px;
    }
    .features .features__card-3 .img{
        height: 200px;
    }

}