@media (min-width: 1024px) and (max-width: 1350px) {
    .testimonial-carousel{
        margin-right: 5%;
    }

}

@media only screen and (max-width:1600px) {
    .contact-gradient img{
        object-position: top;
        object-fit: cover;
    }

}
@media only screen and (max-width:1250px) {
    /*----- Header Text Start -------*/
    .center-image-1{
        max-width: 260px;
        padding: 10px;
    }
    .top-img{
        margin-left: 30px;
    }
    /*----- Header Text End -------*/

    /*------- Benefits Start ------*/
    .benefits-wrapper{
        padding: 50px 40px;
    }
    /*------- Benefits End ------*/

    .common-gradient{
        bottom: 300px;
    }
}
@media only screen and (max-width:1199px) {
    /*----- Header Text Start -------*/
    .header-text-left {
        padding-right: 30px;
    }
    .center-image-1{
        max-width: 300px;
    }
    .top-img{
        margin-left: 30px;
        max-width: 350px;
    }
    .top-img .arrow-cursor{
        width: 35px;
        height: 35px;
    }
    .center-image-2 .arrow-cursor{
        top: -27px;
        left: -27px;
        width: 35px;
        height: 35px;
    }
    .bottom-img .bottom-image-1{
        max-width: 240px;
    }
    .center-img .center-image-2{
        margin-bottom: 20px;
        max-width: 250px;
        margin-bottom: 30px;
    }

    .bottom-image-2 .arrow-cursor{
        width: 35px;
        height: 35px;
        bottom: -20px;
    }
    /*----- Header Text End -------*/

    /*----- Contact Start -------*/
    .contact-left {
        padding-right: 50px;
    }
    /*----- Contact End -------*/

    /*----- why-it-works Start ----*/
    .why-it-works-left{
        padding-right: 30px;
    }
    /*----- why-it-works End ----*/

    .main-navigation ul li{
        margin-right: 30px;
    }
    .site-branding img {
        max-width: 240px;
    }
}
@media only screen and (max-width:1024px) {
    .gradient-header{
        height: 700px;
    }
    .site-main{
        padding-top: 140px;
    }
    /*------ Header Start ------*/
    .header-right {
        overflow: hidden;
        top: 0;
        display: unset;
        width: 100%;
    }
    .menu-open .main-navigation {
        padding: 23px 0 0;
        opacity: 1;
        transform: scale(1);
        height: auto;
    }

    .main-navigation {
        opacity: 0;
        width: auto;
        display: block;
        transform: scale(.95);
        height: 0;
    }
    .main-navigation {
        flex-direction: column;
        align-items: flex-start;
    }
    .button-wrap{
        position: relative;
    }

    .menu-open{
        overflow: hidden;
    }
    .menu-open .header-right {
        opacity: 1;
        visibility: visible;
    }
    .mobile-menu-icon {
        display: flex;
        align-items: center;
    }
    .mobile-menu-icon img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .mobile-menu-icon .humbger-box{
        display: block;
        width: 24px;
        height: 24px;
    }
    .mobile-menu-close{
        display: none;
    }
    .menu-open .mobile-menu-close{
        display: block;
    }
    .menu-open .mobile-menu-open{
        display: none;
    }
    .site-branding img {
        width: 230px;
    }
    .site-branding,.mobile-menu-icon{
        z-index: 99;
        position: relative;
    }
    .main-navigation ul{
        flex-direction: column;
    }
    .main-navigation ul li{
        margin-bottom: 40px;
        margin-right: 0px;
        width: max-content;
        text-align: left;
    }
    .main-navigation ul li:last-child{
        margin-bottom: 0px;
    }
    .mobile-menu-icon a + a {
        margin-left: 0px !important;
        margin-top: 0px;
    }
    .lang-btn::after{
        top: -2px;
        position: relative;
    }
    .header-inner {
        padding: 16px 20px;
        border-radius: 35px;
    }
    .main-navigation{
        width: 100%;
        text-align: center;
    }
    .header-right .button-wrap{
        width: 100%;
        flex-direction: column;
    }

    .header-left{
        display: none;
    }
    header .button-wrap{
        display: none;
    }
    .header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 99;
    }
    .mobile-contact{
        display: block;
        text-align: center !important;
    }
    /*------ Header End ------*/

    /*-------  Footer Start ----------*/
    .footer-bottom{
        padding: 17.5px 40px;
    }
    /*-------  Footer End ----------*/

    /*----- Header Text Start -------*/
    .top-img .arrow-cursor{
        bottom: -16px;
    }
    .bottom-img .bottom-image-1{
        max-width: 250px;
    }
    .center-image-1 {
        max-width: 230px;
    }
    .center-img .center-image-2{
        max-width: 130px;
    }
    /*----- Header Text End -------*/

    /*------ How it works End ---------*/
    .top-images{
        padding: 0px 40px;
    }
    /*------ How it works End ---------*/


}


/*Tablet*/
@media only screen and (max-width:991px) {


    .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) {
        line-height: normal !important;
        min-height: auto !important;
    }
}
@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 991px) {
    .gradient-header{
        height: 800px;
    }
    .site-main{
        padding-top: 130px;
    }

    /*------ Common Style Start -------*/
    h1,.h1{font-size: 40px;line-height: 110%;letter-spacing: -0.9px;margin: 0 0 10px;}
    h2,.h2{font-size: 40px;line-height: 110%;letter-spacing: -0.9px;margin: 0 0 10px;}
    h3,.h3{font-size: 30px;line-height: normal;letter-spacing: -0.72px;margin: 0 0 10px;}
    h4,.h4{font-size: 25px;line-height: normal;letter-spacing: -0.66px;margin: 0 0 10px;}

    .pb-80 {
        padding-bottom: 60px;
    }
    .mb-80 {
        margin-bottom: 60px;
    }
    .site-branding img {
        width: 200px;
    }
    header.site-header{
        padding-top: 18px;
    }

    /*------ Error Start -------*/
    .error-404{
        padding: 70px 0px 50px 0px;
    }
    /*------ Error End -------*/


    /*----- Header Text Start -------*/
    .header-text-left {
        padding-right: 15px;
    }
    .top-img{
        max-width: 450px;
    }
    .center-image-1 {
        width: 350px;
        max-width: 100%;
    }
    .header-text-right {
        padding-left: 15px;
        padding-bottom: 30px;
    }
    .center-img .center-image-2 {
        width: 210px;
        max-width: 100%;
    }
    .bottom-img .bottom-image-1 {
        max-width: 500px;
    }

    .top-img .arrow-cursor {
        bottom: -5px;
    }
    .header-text{
        padding-bottom: 60px;
    }
    .top-img,.center-image-1,.bottom-img .bottom-image-1{
        border-radius: 22px;
    }
    .bottom-img .bottom-image-1 img{
        border-radius: 15px;
    }
    .header-text .row{
        flex-direction: column-reverse;
    }
    .top-img::before{
        border-radius: 22px;
    }
    /*----- Header Text End -------*/

    /*------- Benefits Start ------*/
    .benefits-wrapper{
        padding: 40px 30px;
    }
    .benefits-item p {
        max-width: 300px;
    }
    .benefits{
        margin-bottom: 70px;
    }
    /*------- Benefits End ------*/

    /*----- Contact Start -------*/
    .contact-left {
        padding-right: 15px;
        margin-bottom: 40px;
    }
    .contact-right {
        padding-left: 15px;
    }
    .contact-form{
        border-radius: 40px;
        padding: 50px 20px;
    }
    .contact-sec{
        padding-top: 60px;
    }
    .contact-gradient{
        height: 50%;
        top: 0px;
        bottom: 0px;
    }
    .contact-gradient img{
        object-position: top;
        object-fit: cover;
    }
    /*----- Contact End -------*/

    /*------ How it works Start ---------*/
    .how-it-works-content .video-wrap {
        border-radius: 40px;
        max-width: 600px;
    }
    .top-images{
        padding: 0px 30px;
    }
    .shops-images .img-wrap {
        width: 180px;
    }
    .how-it-works-content .video-wrap video, .how-it-works-content .video-wrap iframe, .how-it-works-content .video-wrap img{
        border-radius: 40px;
    }
    .video-wrap img {
        min-height: 400px;
    }
    /*------ How it works End ---------*/


    /*----- why-it-works Start ----*/
    .why-it-works{
        background: unset;
    }
    .why-it-works-left{
        padding-right: 30px;
    }
    .why-it-works-left {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 16px 15px;
        background: #130E21;
    }
    .why-it-works-right {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-bottom: 70px;
    }
    .why-it-works .row{
        flex-direction: column-reverse;
    }
    .why-it-works{
        padding: 0px;
    }

    .why-it-works-right{
        position: relative;
    }
    .why-it-works-right::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 190px;
        background: linear-gradient(180deg, rgba(21, 196, 255, 0.00) 9.13%, rgba(39, 48, 112, 0.68) 68.27%, #130E21 100%);
        display: block;
        bottom: 0px;
        right: 0px;
    }
    .why-it-works-right::before{
        content: "";
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: url(images/bg-gradient-why-it-works.webp);
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right bottom;
        pointer-events: none;
    }
    .common-gradient{
        display: none;
    }
    /*----- why-it-works End ----*/

    /*----- Star Animation Start ----*/
    .content-overlay{
        transform: translateY(-51%);
    }
    .star-container{
        margin-top: 50px;
    }

    /*----- Star Animation End ----*/


    /*----- Context to clarity Start ----*/
    .steps-wrapper{
        flex-direction: column;
        align-items: center;
    }
    .step-item-1-img-wrap, .step-item-2-img-wrap, .step-item-3-img-wrap{
        flex-direction: column;
        height: auto;
    }
    .connect-1 img,.connect-3 img{
        transform: rotate(-270deg);
    }
    .star-noise-img {
        margin: 0px;
    }
    .connect-1 {
        max-width: 250px;
        margin-left: 0px;
        margin-bottom: 20px;
        margin-top: -40px;
    }
    .step-text p{
        max-width: 300px;
        text-align: center;
        margin: 0 auto;
    }
    .step-text{
        margin-bottom: 22px;
    }
    .connect-2 img{
        transform: rotate(90deg);
    }
    .step-item-star img{
        transform: rotate(90deg);
        margin: -90px 0px;
    }
    .connect-line .desktop-line{
        display: none;
    }
    .connect-line .mobile-line {
        display: block;
        transform: rotate(-270deg);
    }

    .connect-line{
        height: auto;
        margin-right: 0px;
    }
    .step-text span{
        max-width: 100%;
        margin-top: 10px;
    }
    .context-to-clarity .title{
        padding-bottom:25px;
    }
    .bottom-text{
        padding-top: 40px;
    }
    .context-to-clarity{
        padding: 40px 0px 80px 0px;
    }
    .step-item.step-2{
        margin-top: -20px;
    }
    .last-star{
        margin-top: -20px;
    }
    .step-item-3{
        align-items: center;
    }
    .contact-left h2 {
        max-width: 100%;
    }
    .contact-left{
        margin-top: 0px;
    }
    /*----- Context to clarity End ----*/
    .video-popup-inner{
        margin: 0 auto;
        text-align: center;
    }
    .video-popup-inner video, .mfp-iframe{
        max-width: 650px;
    }
}


/*Mobile Device*/
@media only screen and (max-width:767px) {
    .gradient-header {
        height: 500px;
    }
    .site-main{
        padding-top: 110px;
    }
    /*------ Common Style Start -------*/
    h1,.h1{font-size: 30px;line-height: 110%;letter-spacing: -0.9px;margin: 0 0 10px;}
    h2,.h2{font-size: 30px;line-height: 110%;letter-spacing: -0.9px;margin: 0 0 10px;}
    h3,.h3{font-size: 24px;line-height: normal;letter-spacing: -0.72px;margin: 0 0 10px;}
    h4,.h4{font-size: 22px;line-height: normal;letter-spacing: -0.66px;margin: 0 0 10px;}
    h5,.h5{font-size: 16px;line-height: 150%;letter-spacing: -0.48px;margin: 0 0 10px;}
    h6,.h6{font-size: 16px;line-height: 19px;margin: 0 0 20px;}
    .no-children {
        min-height: 300px;
    }
    p {
        font-size: 16px;
        line-height: 150%;
        letter-spacing: -0.48px;
        margin-bottom: 20px;
    }
    a + a {
        margin-left: 0px !important;
        margin-top: 16px;
    }

    body,p{
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.48px;

    }
    .pb-80 {
        padding-bottom: 50px;
    }
    .mb-80 {
        margin-bottom: 50px;
    }
    .inline-cta{
        width: 100%;
        justify-content: center;
    }

    .site-content ol li, .site-content ul li{
        font-size: 16px;
        line-height: 150%;
        letter-spacing: -0.48px;
    }
    .inline-cta{
        font-size: 14px;
        line-height: 20px;
    }
    .inline-cta::after{
        width: 18px;
     height: 18px;
    }

    .site-content ul.check-list li:before{
        top: 3px;
    }
    .subtitle{
        font-size: 16px;
        line-height: 150%;
        letter-spacing: -0.48px;
    }
    .mfp-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    /*------ Common Style Emd -------*/

    /*------ Header Start ------*/

    .site-branding img {
        width: 160px;
    }
    .main-navigation ul li{
        width: 100%;
    }
    .cta-wrapper{
        flex-direction: column;
    }
    a + a.btn.watch-video{
        margin-top: 16px;
    }
    header.site-header{
        padding-bottom: 15px;
    }
    /*------ Header End ------*/

    /*------- Gravity Form Start -------*/
    .gform_confirmation_message{
        border-radius: 12px;
    }
    /*------- Gravity Form End -------*/


    /*-------  Footer Start ----------*/
    .footer-logo {
        margin-bottom: 30px;
    }
    .footer-text{
        width: 100%;
        padding-right: 0px;
        margin-bottom: 4px;    
    }
    .footer-links {
        width: 100%;
        padding-left: 0px;
    }
    .footer-bottom ul{
        justify-content: center;
    }
    .footer-bottom{
        text-align: center;
    }
    .footer-text p,.footer-bottom ul li a {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: -0.36px;
    }
    .footer-bottom{
        padding: 7.5px 30px;
    }
    /*-------  Footer end ----------*/
    /*------ Error Start -------*/
    .error-404{
        padding: 50px 0px 24px 0px;
    }
    .error-404 .img-wrp{
        padding-bottom: 50px;
    }
    .sub-title{
        font-size: 16px;
        line-height: 150%;
        letter-spacing: -0.48px;
    }
    .error-text-wrap h1{
        font-size: 30px;
        line-height: 110%; 
        letter-spacing: -0.9px;
    }
    /*------ Error End -------*/

    /*----- Header Text Start -------*/
    .top-img {
        max-width: 68%;
        margin-left: 19px;
        border: 0.55px solid #FFF;
        box-shadow: 0 1.101px 5.503px 0 rgba(16, 47, 81, 0.10);
        backdrop-filter: blur(5px);
    }
    .top-img, .center-image-1, .bottom-img .bottom-image-1 {
        border-radius: 14px;
    }
    .bottom-img .bottom-image-1 {
        max-width: 132px;
    }
    .center-image-1 {
        max-width: 42%;
        border: 1px solid #FFF;
        box-shadow: 0 1.834px 9.172px 0 rgba(16, 47, 81, 0.10);
        backdrop-filter: blur(3px);
        padding: 2px;
        width: 100%;
    }
    .center-img{
        margin-top: -15px;
    }
    .center-img .center-image-2 {
        max-width: 30%;
        padding: 2px;
        border: 1px solid #fff;
        border-radius: 5px;
        margin-bottom: 13px;
        width: auto;
    }
    .bottom-img .bottom-image-1 {
        max-width: 55%;
        border: 1px solid #fff;
        padding: 2px;
    }
    .bottom-img{
        margin-top: -25px;
    }
    .top-img .arrow-cursor {
        width: 20px;
        height: 20px;
        left: 30px;
        bottom: -4px;
    }
    .center-image-2 .arrow-cursor{
        width: 20px;
        height: 20px;
        top: -15px;
        left: -15px;
    }
    .bottom-image-2 .arrow-cursor{
        width: 20px;
        height: 20px;
        bottom: -8px;
    }
    .bottom-img .bottom-image-2 {
        max-width: 115px;
    }
    .center-image-2 img {
        border-radius: 3px;
    }
    .bottom-img .bottom-image-1::before{
        border-radius: 10px;
    }
    .center-img .center-image-2 {
        margin-left: -18px;
    }
    .header-text-left .check-list{
        flex-direction: column;
    }
    .header-text-left .check-list li:not(:last-child) {
        margin-right: 0px;
    }
    .header-text-left .check-list li {
        margin-bottom: 10px;
    }
    .header-text {
        padding-bottom: 40px;
    }
    .top-img::before{
        border-radius: 14px;
    }
    /*----- Header Text End -------*/
    

    /*------- Benefits Start ------*/
    .benefits-wrapper{
        padding: 40px 30px;
        border-radius: 40px;
    }
    .benefits-item p {
        max-width: 100%;
    }
    .benefits-title{
        font-size: 18px;
        font-weight: 600;
        line-height: 150%;
        letter-spacing: -0.54px;
    }
    .benefits-item{
        width: 100%;
    }
    /*------- Benefits End ------*/

    .contact-form{
        padding: 30px 20px;
    }
    .contact-sec{
        padding-bottom: 0px;
    }

    /*------- How it Works Start ------*/
    .how-it-works .title{
        padding-bottom: 23px;
    }
    .top-images {
        padding: 0px 12px;
        margin-top: -118px;
    }
    .how-it-works-content{
        margin-top: 105px;
        margin-bottom: 120px;
    }
    .shops-images .img-wrap {
        border-radius: 7px;
        width: 130px;
    }
    .how-it-works-content .video-wrap{
        border-radius: 20px;
        max-width: 100%;
        margin: 0px 38px;
        padding: 6px;
    }
    .top-images .img-wrap:last-child {
        margin-top: 21px;
    }
    .bottom-images .img-wrap:last-child {
        margin-top: 0px;
    }
    .bottom-images .img-wrap:first-child {
        margin-top: 9px;
    }
    .bottom-images{
        margin-bottom: -105px;
    }
    .how-it-works {
        padding-bottom: 38px;
    }
    .video-wrap.iframe-add{
        padding-top: 45%;
    }
    .how-it-works-content .video-wrap video, .how-it-works-content .video-wrap iframe, .how-it-works-content .video-wrap img{
        border-radius: 15px;
    }
    .video-wrap img {
        min-height: 170px;
    }
    /*------- How it Works End ------*/

    /*----- why-it-works Start ----*/
    .why-it-works-images-left .avtar-img{
        width: 80px;
        height: 80px;
        border: 1px solid #FFF;
        padding: 2px;
        margin-bottom: -15px;
  
    }
    .why-it-works-images-right .img-wrap{
        border: 1px solid #FFF;
        padding: 2px;
        border-radius: 13px;
    }
    .why-it-works-images-right .img-wrap img{
        border-radius: 11px;
    }
    .why-it-works-images-left .img-wrap{
        border-radius: 9px;
    }
    .why-it-works-images-right {
        margin-left: -100px;
    }
    .why-it-works-images-left{
        margin-top: 11px;
    }
    .why-it-works h5 br{display: none;}
    .why-it-works h5{
        font-size: 18px;
        font-weight: 600;
        line-height: 150%; 
        letter-spacing: -0.54px;
    }
    .why-it-works-images-left .img-wrap {
        width: 100%;
    }
    /*----- why-it-works End ----*/

    /*----- Star Animation Start ----*/
    .content-overlay {
        transform: translateY(-50%);
        gap: 220px;
    }
    .top-content h2 br{
        display: none;
    }
    .stars-pivot {
        width: 200px;
        height: 200px;
        margin-top: -30px;
    }
    /*----- Star Animation End ----*/

    /*----- Context to clarity Start ----*/
    .star-noise-img {
        margin: 0px;
        padding: 0px 20px;
    }
    .connect-1 {
        margin-top: -40px;
        padding: 0px 40px;
    }
    .step-text span{
        font-size: 18px;
        font-weight: 600;
        line-height: 150%;
        letter-spacing: -0.54px;
    }
    .last-star {
        margin-top: -40px;
    }
    /*----- Context to clarity End ----*/
  
    /*----- Contact Start -------*/
    .contact-sec {
        padding-top: 40px;
    }
    .step-text p {
        max-width: 100%;
    }
    .contact-left .subtitle {
        font-size: 18px;
        line-height: 150%;
        letter-spacing: -0.54px;
    }
    .contact-gradient::before{
        bottom: 70px;
    }
    /*----- Contact End -------*/
}

@media only screen and (max-width: 575px){
    a.btn{
        width: 100%;
        justify-content: center;
        max-width: 100%;
        text-align: center;
    }
    body .gform_wrapper.gravity-theme .gform_fields {
        grid-column-gap: 0px;
        grid-row-gap: 20px;
    }
    .footer-cta-left{
        text-align: center;
    }
    a.btn.large-btn{
        min-width: 100%;
    }
    .error-text a.btn.large-btn {
        min-width: 100%;
    }

}
@media only screen and (max-width: 375px){
    /*------ How it works End ---------*/
    .shops-images .img-wrap {
        border-radius: 7px;
        width: 90px;
    }
    .how-it-works-content {
        margin-top: 72px;
        margin-bottom: 65px;
    }
    .bottom-images {
        margin-bottom: -65px;
    }
    .top-images{
        margin-top: -72px;
    }
    .video-wrap img {
        min-height: 150px;
    }
    /*------ How it works End ---------*/
    .contact-left .subtitle{
        font-size: 18px;
        line-height: 150%; 
    }

}
@media only screen and (max-width: 360px){
    .gradient-header {
        height: 430px;
    }
    /*----- why-it-works Start ----*/
    .why-it-works-images-left .avtar-img {
        width: 55px;
        height: 55px;
    }
    /*----- why-it-works End ----*/
}
@media only screen and (max-width: 320px){
    .first-step .gform_page_footer img.gform_ajax_spinner{
        right: 25%;
    }

    /*----- Header Text Start -------*/
    .top-img {
        max-width: 59%;
    }
    .top-img .arrow-cursor{
        left: 21px;
        bottom: -8px;
    }
    .center-img .center-image-2 {
        max-width: 28%;
    }

    .bottom-img .bottom-image-2 {
        max-width: 80px;
        margin-left: -15px;
    }
    .bottom-image-2 .arrow-cursor{
        bottom: -12px;
        margin-right: 5px;
    }
    .bottom-img {
        margin-top: -20px;
    }
    /*----- Header Text End -------*/
}