@media screen and (max-width: 1100px) {
    .SlideSec {
        display: inline;
        margin: 2em 2em;
        text-align: -webkit-center;
    }

        .SlideSec .buttons {
            margin-right: 2em;
            margin-top: 20vh;
            display: block;
            text-align: center;
            justify-content: center;
        }

            .SlideSec .buttons button {
                width: 18em;
                font-size: 1em;
            }

        .SlideSec .slide-container {
            overflow: hidden;
            margin-top: -10em;
            padding-top: 0;
        }

    .InfoSec {
        flex-direction: column;
    }

        .InfoSec .Box1 img {
            display: none;
        }

    .GetCurrencyTop div h3 {
        font-size: 1.4em;
    }

    .PriceSec h4::before {
        right: 42%;
    }

    .PriceSec h4::after {
        left: 42%;
    }

    .PriceSec h2, .FaqSec h2 {
        font-size: 1.6em;
    }

    .PriceSec .box {
        margin: 0.5em 0em;
    }

        .PriceSec .box .card {
            margin: 2em 0.5em;
        }

    .FaqSec .list {
        margin: 0em 6em;
    }

    .BlogSec .right .article a {
        padding-left: 10%;
    }

    .BlogSec .right .article {
        margin: 0;
    }

    .BlogSec .right .post {
        margin: 0;
    }

    .CtaSec {
        margin: 2em 2em;
    }

        .CtaSec .back-overaly {
            background-size:cover;
        }
}
@media screen and (max-width: 700px) {
    nav, .navActive {
        position: fixed;
        background-color: black;
        right: 0;
        left: 0;
        top: 6em;
        bottom: 0;
        max-width: 30em;
        padding: 3em;
        display: none;
    }

        nav a, .navActive a {
            padding: 1em 0;
            display: block;
            color: #000;
            border-bottom: 1px solid #d3d3d33b;
        }

    .navActive {
        top: 4.4em;
    }

    .bars {
        display: inline;
    }

    header {
        height: 120vh;
        padding-bottom: 0;
    }

    .SlideSec {
        display: inline;
        margin: 2em 2em;
        text-align: -webkit-center;
    }

        .SlideSec .buttons {
            margin-right: 0;
            display: flex;
        }

            .SlideSec .buttons button {
                width: 18em;
                font-size: 1em;
            }

        .SlideSec .slide-container {
            overflow: hidden;
            margin-top: -10em;
            padding-top: 0;
        }

        .SlideSec .show {
            transform: translateY(3em);
        }

    .TitleSec {
        flex-direction: column;
        margin: 100vh 5%;
        margin-top: 18vh;
    }

    .InfoSec {
        flex-direction: column;
        padding: 2em 1em;
    }

        .InfoSec .Box1 img {
            display: none;
        }

    .GetCurrencyTop div h3 {
        font-size: 1.4em;
    }

    .PriceSec h4::before, .FaqSec h4::before {
        right: 28%;
    }

    .PriceSec h4::after, .FaqSec h4::after {
        left: 28%;
    }

    .PriceSec h2 {
        font-size: 1.6em;
    }

    .PriceSec .box {
        margin: 0.5em 0em;
        flex-direction: column;
    }

        .PriceSec .box .card {
            margin: 2em 2em;
        }

    .FaqSec .list {
        margin: 0em 1em;
    }

    .GuidSec .steps {
        display: none;
    }

    .GuidSec .bubble-area {
        margin-right: -4em;
    }

    .GuidSec .video {
        margin: 0;
    }

    footer .footer-bottom {
        flex-direction: column;
    }

    footer p {
        padding: 0;
        font-size: 1.1em;
    }

    body {
        margin: 0;
    }

    .headerTop {
        left: 1em;
        right: 1em;
    }

    .BlogSec .right .article .imgBox {
        height: 14em;
    }

    .BlogSec .right .article p {
        font-size: 1em;
        line-height: 2;
        margin-bottom: 4em;
    }

    footer h3 {
        font-size: 1.5em;
    }

    footer .BottomDivFooter p {
        font-size: 1em;
    }

    .BlogSec .right .article {
        flex: 1;
        padding: 0;
        border-radius: 2em;
        margin: 0 0.4em;
        margin-bottom: 2em;
        padding-top: 4em;
    }

        .BlogSec .right .article a {
            padding: 0 2em;
        }

    .side-menu {
        position: fixed;
        top: 0;
        right: -320px;
        width: 320px;
        height: 100vh;
        background: linear-gradient(58deg, #8f8f8f, #F6F8FB);
        transition: right 0.45s ease;
        z-index: 1001;
        display: inline;
        padding-top: 8em;
    }

        .side-menu.open {
            display: inline;
            right: 0;
        }

    nav .navSub {
        display: block;
        border-bottom: none;
    }

    .AboutSec {
        display: flex;
        flex-direction: column-reverse;
        padding: 6em 2em 1em 2em;
        position: relative;
        overflow: hidden;
    }

        .AboutSec .Pic {
            width: 100%;
        }

            .AboutSec .Pic img {
                height: 40em;
                width: 100%;
                margin-top: 2em;
                object-fit: cover;
            }

        .AboutSec .Content {
            padding: 0em 0em 3em 0em;
        }

            .AboutSec .Content h2 {
                font-size: 2em;
            }

            .AboutSec .Content p {
                font-size: 1em;
                margin-bottom: 2em;
            }

    .ContactSec .box {
        flex-direction: column;
    }

    .ContactSec {
        margin: 0;
    }

        .ContactSec .box .Form h2 {
            font-size: 1.5em;
        }

        .ContactSec .box .Content h2 {
            font-size: 1.4em;
        }

        .ContactSec .box .Content p {
            font-size: 1em;
        }

    .LocationSec .box {
        flex-direction: column;
        margin-top: 2em;
    }

    .BlogSec .right {
        margin: 0 1em;
    }

    .BlogSec {
        margin-top: 10em;
        display: flex;
        flex-direction: column-reverse;
        gap: 1em;
        margin-bottom: 4em;
    }

        .BlogSec .right .article .portfolio-info .author_info {
            display: none;
        }

        .BlogSec .right .post a {
            flex-direction: column-reverse;
        }

            .BlogSec .right .post a .pic img {
                width: 100%;
                height: auto;
                object-fit: cover;
                border-radius: 1em;
            }

        .BlogSec .right .post {
            border-radius: 1em;
            box-shadow: none;
            border: 1px solid var(--gray-p-color);
        }

            .BlogSec .right .post a .info {
                margin-top: 2em;
            }

            .BlogSec .right .post a .author_info {
                color: darkgray;
                display: flex;
                align-items: center;
                gap: 0.5em;
            }

                .BlogSec .right .post a .author_info .infography {
                    display: flex;
                    flex-shrink: 0;
                    align-items: center;
                }

            .BlogSec .right .post a .info .square {
                display: none;
            }

        .BlogSec .left {
            display: inline-block;
            margin: 0 8em;
        }

        .BlogSec.Details {
            flex-direction: column-reverse !important;
            padding-bottom: 5em;
        }

    header .Top {
        margin: 2em 0em;
        border-radius: 0em;
        margin-top: 2em;
        padding: 12em 0;
        padding-bottom: 5em;
    }

        header .Top h3 {
            font-size: 2em;
            padding: 3em 0.2em;
        }

    .CtaSec {
        margin: 2em 0.5em;
        border-radius: 0.5em;
    }

        .CtaSec .back-overaly {
            filter: brightness(0.4) blur(1px);
        }

    .bubbleMouse {
        display: none !important;
    }

    .bg-layer {
        display: none !important;
    }

    .InfoSec .Box1 h2 {
        line-height:2em;
    }
    .InfoSec .Box2 div {
        position: relative;
        transform: none !important;
        opacity: 1 !important;
        max-width: 600px;
    }
    .InfoSec .Box2 {
        position: relative;
    }
    .InfoSec {
        height:100%;
        display: block;
    }.bg-layer{
         display:none !important;
     }
    #tsparticles{
        display:none;
    }
    .ProductSec .grid {
        grid-template-columns: repeat(1, 1fr);
    }

}
@media screen and (max-width: 500px) {
    .SliderBox h2 {
        top: 35%;
        font-size: 1.5em;
    }

    .SliderBox p {
        top: 45%;
        font-size: 1em;
    }

    .Header img {
        width: 5em;
    }

    .Header h1 {
        right: 7em;
        font-size: 1em;
    }

    .HeaderActive h1 {
        right: 7em !important;
        top: 0.8em;
        font-size: 1.2em !important;
        font-weight: bold;
    }

    .AboutSec .AboutSec-Content h2 {
        font-size: 1.5em;
    }

    .FaqSec .FaqSecContent p {
        padding: 1em 0;
    }

    .BlogSec .article {
        transform: scale(1);
    }

        .BlogSec h2 {
            font-size: 1.5em;
        }

    .InfoSec .Box2 div {
        flex: 100%;
    }

    .AdSec {
        padding: 4em 2em;
    }

        .AdSec .DSlike h3 {
            font-size: 1.3em;
        }

    .ContactSec .ContactSec-Content p {
        padding: 1em 0 4em 0.5em;
    }
    footer .BottomDivFooter {
        padding: 0.5em 0.5em;
        border-bottom: 1px solid #000
    }
    .E404Sec {
        height: 75vh;
    }

        .E404Sec img {
            width: 80%;
        }

        .E404Sec h2 {
            font-size: 1em;
            line-height: 2em;
        }

        .E404Sec p {
            font-size: 0.8em;
            line-height: 1.7em;
        }

        .E404Sec a {
            padding: 1em 9em 1em 9em;
            position: absolute;
            bottom: 1.5em;
            text-align: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            right: 0;
            left: 0;
        }
    .AboutSec .Pic img {
        height: 20em;
    }
    .ContactSec {
        right: 0em;
        left: 0em;
        padding: 8em 0.8em
    }
        .ContactSec .box {
            padding:0.5em;
        }
    .LocationSec {
        padding: 0;
    }
        .LocationSec .box {
            margin-top: 0;
            padding:0;
        }
        .LocationSec .box .Content {
            margin-top: 0;
        }
            .LocationSec .box .Cards {
                margin: 0
            }
                .LocationSec .box .Cards .Card .Note h3 {
                    font-size: 1.4em;
                }
    .BlogSec .left {
        display: inline-block;
        gap: 5em;
        margin: 0 2em;
    }
}