@media screen and (min-width: 1500px) {
.site-container {width: 100%;max-width: 1400px;}
.hero-graphic{width: 100%;}
}





@media screen and (max-width: 767px) {
    :root{
        --site-title-h1: 35px;
        --section-block-space-big: 58px;
        --site-title-h2: 26px;
        --site-title-h4: 18px;
        --body-text: 14px;
        --caption: 14px;
        --site-line-height: 1.4;
        --section-block-space-medium: 40px;
        --site-gutters-big: 20px;
    }

    .for-desktop{display: none;}
    .for-mobile{display: block;}

    header{
        padding-block: var(--site-gutters);
        z-index: 99;
        position: relative;
        padding: 0;

        & .site-container{
            padding: 0;
        }
    }

    a.mobile-menu-close{opacity: 1;}

    a.site-logo, a.mobile-menu{padding: var(--site-gutters);}

    .main-hero .site-container{position: relative; z-index: 1;}

    .header-wrap{
        justify-content: space-between;
    }

    .mobile-menu{
        display: block;
        order: 3;
    }

    .site-icon-box-wrap .site-icon-box, .site-iconTop-box{
        padding: var(--site-gutters);
    }

    nav{
        position: fixed;
        width: 100%;
        height: 100vh;
        right: -100%;
        top: 0;
        z-index: 20;
        flex-direction: column;
        align-items: flex-start;
        padding: var(--site-gutters);
        padding-top: 80px;
        gap: 0;
        background: var(--black-color);
    }

    .site-menu{
        flex-direction: column;
        width: 100%;
        gap: var(--site-gutters);
    }

    .site-menu>li{
        text-align: left;
        justify-content: space-between;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        position: relative;
    }

    header .site-btn{
        display: none;
    }

    .mobile-menu-close{
        position: absolute;
        right: var(--site-gutters);
        top: var(--site-gutters-2);
    }

    .site-menu>li:has(.site-sub-menu)::after{
        position: absolute;
        right: 0;
        top: 10px;
    }

    .site-sub-menu h3{
        font-size: 16px;
    }

    .site-sub-menu {
        --site-gutters: 5px;
    }

    .site-sub-menu .site-row-wrap{width: 100%;}

    .site-sub-menu .site-row, .site-sub-menu .site-row-wrap{
        margin: 0;
    }

    .site-sub-menu .site-row a, .site-sub-menu .site-row-wrap a{
        padding-block: 5px;
    }

    .site-sub-menu .site-row .site-col, .site-sub-menu .site-row-wrap .site-col-3{
        padding-block: 0;
    }

    .site-sub-menu {
        position: relative;
        left: 0;
        top: 0;
        transform: initial;
        opacity: 1;
        visibility: visible;
        height: 0;
        padding: 0;
        width: 100%;
    }

    .sub-menu-open::after{
        transform: rotate(-180deg);
    }

    .site-col-1, .site-col-2, .site-col-3, .site-col-4{width: 100%;}

    .subscribe-wrap{
        padding-block: 40px;
    }

    .footer-bottom, footer .text-right{
        text-align: center;
    }

    body{
        overflow-x: hidden;
    }

    .section-bottom-center-content{
        font-size: 14px;
        text-align: left;
        line-height: 1.7;
        margin-top: 20px;
    }

    .tab-button{
        padding: 8px 18px;
        font-size: 14px;
    }

    .site-big-cta {
        font-size: 16px;
        padding: 12px 32px;
    }
    
    li.sub-menu-open .site-sub-menu{height: auto !important;}

    .contact-wrap-outer{
        flex-wrap: wrap;
    }

    .subscribe-wrap form p{
        flex-direction: column;
    }

    .subscribe-wrap form input{
        width: 100%;
    }

    .problem-graphic{
        max-width: 100%;
    }
    
    a.mobile-menu-close{opacity: 1;}

    .wpcf7 form .wpcf7-response-output{
        font-size: 12px;
        padding: 6px 10px !important;
    }

    .home-section-2-right .problem-graphic, .home-section-2 .problem-graphic{margin-top: var(--site-gutters); max-width: 300px;}
    .section-head.text-center{text-align: left;}
    .story-link{font-size: 18px;}
    .site-iconTop-box{flex-direction: initial;}
    .subscribe-wrap form input[type="submit"]{width: 100%;}
    .form-caption{font-size: 12px; line-height: 1.7;}
    .body-text{ line-height: 1.7;}

    .subscribe-section .body-text.text-white{color: var(--body-text-color);}
    .footer-bottom .site-row{flex-direction: column-reverse;--site-gutters: 8px;}
    .footer-links a{white-space: nowrap;}
    .footer-links{gap: 16px; justify-content: center;}

    .footer-top .site-row{flex-wrap: wrap; flex-direction: initial;}
    .footer-top .site-row .site-col:first-child{width: 100%;display: flex;align-items: center;justify-content: space-between;}
    .footer-top .site-row .site-col:first-child .socials{margin-top: 0;}
    .footer-top {border-bottom: 1px solid var(--placeholder-color);}
    footer h3{font-size: 16px;}
    .socials li a{--social-size: 26px;}
    .socials li a img{height: 14px;}    
    .site-row, .site-row-wrap, .subscribe-wrap form{flex-direction: column;}
    .inner-head{padding-block: 50px;background: url(../images/inner-head-bg.svg) no-repeat;background-size: cover;background-position: center;}
    .vault-hero{background: url(../images/vault-hero-bg-mobile.svg) no-repeat;background-size: cover;background-position: center;}
    .inner-head .site-content{gap: 10px;}
    .ellips-left-bottom::before, .key-benifets-bg::before{display: none;}
    .tab-buttons{justify-content: flex-start; gap: 8px;}
    .tab-button{padding: 8px 14px;}
    a.site-big-cta.bg-main.text-white {width: 100%;}
    .site-row-wrap:has(.site-border-box) {flex-wrap: wrap;flex-direction: row;--site-gutters: 8px;}
    .site-row-wrap:has(.site-border-box) .site-col-3 {width: 50%;}
    .site-row-wrap:has(.site-border-box) .site-col-4:first-child {width: 100%;}
    .site-row-wrap:has(.site-border-box) .site-col-4 {width: calc(100% / 3);}
    .site-row-wrap:has(.site-border-box) .site-col-3 .site-border-box{padding: 12px; gap: 16px;}
    .site-row-wrap:has(.site-border-box) .site-col-3 .site-border-box .ib-icon img{height: 40px;}
    .site-section-medium.key-benifets-bg .site-common-content.text-center{text-align: left;}
    .pricing-section{--site-gutters: 16px;}
    .pricing-section .site-border-box{padding: 14px;}
    .pricing-section .site-border-box h4{font-size: 14px;}
    .pricing-section .site-border-box img{width: 14px;}
    .pricing-content {display: flex;flex-direction: column;gap: 14px;}
    .pricing-box:has(.pricing-content) .site-btn{padding-block: 14px;}
    .site-row-wrap:has(.site-border-box) .site-col-4:first-child .site-border-box{border: none; background: transparent;}

    .pricing-section .site-row-wrap:not(.table-row) .site-col-4:first-child{order: 3;}
    .pricing-section .site-row-wrap:not(.table-row) .site-col-4:first-child h4{font-size: 18px;}
}


@media screen and (max-width: 575px) {
    
    
}