@media(min-width:1367px) {
    .banner {
        padding-bottom: 23.5%
    }
    .whiteimage {
        bottom: 2px;
        transform: skewY(-1deg)
    }
    .yellowball {
        bottom: 20px;
    }
    .roadmap-innerbox1 {
        margin-bottom: 108px
    }
}

@media(min-width:1600px) {
    .whiteimage {
        bottom: 5px;
        transform: skewY(0);
        width: 17%
    }
    .guideline-overview-section {
        background-size: 38%, 40px, 90px;
        background-position: -10% 280px, 80% 100px, 52% 86%
    }
    .guideline-color-section-inner,
    .guideline-typography-section-inner {
        background-size: 100%
    }
    .guideline-typography-section {
        background-size: 36%, 80px, 41%;
        background-position: 115% 320px, 56% 81%, 107% 95%
    }
}

@media(min-width:1800px) {
    .whiteimage {
        bottom: 15px;
        transform: skewY(0);
        width: 15%
    }
    .guideline-typography-section {
        background-position: 115% 320px, 56% 81%, 107% 93.2%
    }
}

@media(min-width:1200px) {
    body.modal-open .cookies-sec,
    body.modal-open .navbar {
        width: calc(100% - 17px) !important
    }
}

@media(max-width:1366px) {

    .aside-contact-form {
        top:105px;
    }
    .aside-contact-form .form-group {
        margin-bottom: 15px;
    }

    .aside-contact-form .h-30 {
        font-size:24px;
    }

}

    @media(max-width:1199px) {
        .bannerline {
            background-position: right 15% bottom 45%
        }

        .aboutrow {
            background-size: contain
        }

        .portfolio-banner {
            padding: 10% 0 350px
        }

            .portfolio-banner.adjust-project-banner {
                padding-bottom: 100px
            }

        .imprint-primary {
            background-position: 595px -530px;
            background-size: contain
        }

        .yellowball > img {
            width: 390px
        }

        .bannerAnimation .yellowball {
            width: 330px;
            transition-duration: 3s
        }

        .cookies-sec {
            left: 50%;
            width: calc(100% - 15px);
            transform: translateX(-50%)
        }

        .roadmapline-end {
            bottom: auto;
            width: 51.5%;
            height: 330px;
            top: -212.5%;
            margin-right: calc(-50%)
        }

        .webdesign-banner-bg .webdesign-banner-col {
            margin-bottom: 22px
        }

        .webdesign-banner-bg .web-banner-info {
            padding-top: 66px
        }

        .webdevelopment-banner .banner-inner-col {
            padding-bottom: 130px
        }
    }

    @media(max-width:1100px) {
        .roadmapline-end {
            top: -213.5%;
            margin-right: calc(-49.8%)
        }

        .guideline-banner {
            background-position: 100% 50%
        }

        .webdesign-banner-bg .webdesign-banner-col::after {
            top: 50%;
            background-position: 100% center;
            transform: translateY(-50%);
            background-size: contain
        }

        .blog-banner-info h4 {
            line-height: auto;
            font-size: 24px;
        }

        .blog-banner-inner {
            background-position: 110% -120px;
            background-size: 300px;
        }
    }

    @media(max-width:1024px) {
        .roadmapline-end {
            top: -214.5%;
            margin-right: calc(-49.7%)
        }

        .carousel-item.owl-carousel .owl-nav button.owl-prev {
            left: -15px
        }

        .carousel-item.owl-carousel .owl-nav button.owl-next {
            right: -15px
        }

        .webdesign-process .process-row:nth-child(2n) div img {
            margin-left: 0
        }
    }

    @media(min-width:768px) and (max-width:1024px) and (orientation:portrait) {
        .roadmapline-start {
            bottom: -6px;
            margin-left: -38%
        }

        .roadmapline-end {
            top: -217%;
            margin-right: calc(-49.1%)
        }
    }

    @media(min-width:900px) and (max-width:1024px) and (orientation:portrait) {
        .roadmapline-end {
            top: -215%;
            margin-right: calc(-49.5%)
        }
    }

    @media(min-width:768px) and (max-width:1024px) and (orientation:landscape) {
        .roadmapline-end {
            top: -214%;
            margin-right: calc(-49.7%)
        }
    }

    @media(min-width:992px) {
        .g-recaptcha {
            transform: scale(.8);
            margin-left: -30px
        }

        .navbar.des-navbar.scrolled .nav-link {
            color: var(--white)
        }
    }

    @media (max-width:991px) {
        .submenu .nav-pills {
            border-left: none
        }

            .submenu .nav-pills li {
                width: 100%;
                padding-left: 0;
                padding-right: 0
            }

            .submenu .nav-pills .submenu-pageicon {
                display: none
            }

        .guideline-logotype img {
            max-width: 200px
        }

        .guideline-safe-section {
            background-size: 400%
        }

        .des-client-mobile {
            transform: translateX(-50%)
        }

        .whiteimage {
            bottom: -32px;
            transform: skewY(-3deg)
        }

        .middlenav,
        .middlenav.fixed {
            top: 61px;
            height: auto
        }

        .bt-content-info p {
            font-size: 18px
        }

        .wrapper {
            padding-top: 60px
        }

        .roadmap-sec {
            padding-bottom: 108px
        }

        .roadmap-innerbox2 .discover1 {
            max-width: 34px
        }

        .roadmap-innerbox2 .discover4 {
            max-width: 40px
        }

        .roadmap-innerbox2 .discover2,
        .roadmap-innerbox2 .discover3 {
            max-width: 50px
        }

        .banner {
            padding-top: 58px
        }

        .portfolio-banner.adjust-project-banner {
            padding-bottom: 70px
        }

        .bt-content-info .content-info-title {
            font-size: 28px;
            line-height: 1.4
        }

        .yellowball > img {
            width: 330px
        }

        .bannerAnimation .yellowball {
            width: 280px;
            transition-duration: 3s
        }

        .portfolio-banner h1 {
            font-size: 34px
        }

        .doc-card-title {
            font-size: 22px;
            line-height: 1.5
        }

        .doc-card h2 {
            font-size: 28px;
            line-height: 1.4;
            bottom: 15px;
            left: 25px
        }

        .aboutrow {
            padding-bottom: 90px;
            background-size: 48% 100%;
            margin-bottom: 0
        }

        .portfolio-application h3 {
            font-size: 28px
        }

        .middlenav ul {
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden
        }

        .flip-card-adjust1,
        .flip-card-adjust1 .flip-card-front img {
            height: 375px
        }

        .flip-card-adjust2,
        .flip-card-adjust2 .flip-card-front img {
            height: 396px
        }

        .flip-card-back h3 {
            font-size: 24px
        }

        .flip-card-back {
            padding: 40px 10px
        }

        .head-content p,
        .skill-box h6,
        .tech-box h6 {
            font-size: 20px;
            line-height: inherit
        }

        .tech-box ul li {
            font-size: 16px
        }

        .head-content h3 {
            font-size: 32px
        }

        .devlopment-list .media h5,
        .wevdev h2 {
            font-size: 30px
        }

        .devlopment-list .media .media-body,
        .wevdev p {
            font-size: 20px
        }

        .wevdev h4 {
            font-size: 26px
        }

        .wevdev-title {
            font-size: 24px
        }

        .technology-col h5 {
            font-size: 18px
        }

        .technology-col h6 {
            font-size: 16px
        }

        .navbar .nav-link,
        .navbar.navactive .nav-link,
        .navbar.scrolled .navbar-nav > li > .nav-link {
            color: var(--white)
        }

        .navbar-nav .btn {
            background: var(--yellow-1);
            color: var(--black-2)
        }

        #asidenav {
            position: fixed;
            z-index: 1035;
            top: 0;
            right: -270px;
            width: 270px;
            height: 100%;
            display: block;
            background-color: var(--blue-4)
        }

        .mobileoverlay {
            background: rgba(0, 0, 0, .5);
            position: fixed;
            z-index: 1030;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none
        }

        .navbar-nav .nav-link {
            padding-left: 15px;
            color: var(--white);
            border: 0;
            margin-top: 10px
        }

        .multilevel > li {
            padding-top: 0;
            padding-bottom: 0;
            position: relative
        }

        .multilevel .submenu-navitem::after {
            content: '';
            display: inline-block;
            content: "\f067";
            font-family: FontAwesome;
            position: absolute;
            right: 15px;
            top: 21px;
            font-size: 14px;
            color: var(--white)
        }

        .multilevel .submenu-navitem.active::after {
            content: "\f068";
            color: var(--black-2)
        }

        .multilevel > li:hover .submenu {
            display: none
        }

        .multilevel > li.active > .submenu {
            display: block
        }

        .submenu {
            position: static;
            background-color: transparent;
            padding-left: 15px;
            margin-top: 0;
            min-height: auto
        }

            .submenu,
            .submenu::before {
                box-shadow: none
            }

        .multilevel > li > a {
            border: none;
            padding-top: 11px;
            padding-bottom: 11px
        }

        .multilevel > li.active > a,
        .navbar.scrolled .multilevel > li.active > a {
            background: var(--yellow-1);
            color: var(--black-2)
        }

        .multilevel > li.active.active-none > a,
        .navbar.scrolled .multilevel > li.active.active-none > a {
            background: inherit
        }

        .submenu .nav-pills .nav-link {
            margin-bottom: 0;
            margin-top: 8px;
            text-align: left
        }

            .submenu .nav-pills .nav-link.active {
                color: var(--white)
            }

        .submenu .nav-pills.active .nav-link {
            color: #6a6a6a
        }

        .submenu .nav-pills .nav-link:hover span {
            color: #fff
        }

        .bt-home-services .bt-services-one {
            left: -20px;
            max-width: 150px
        }

        .bt-home-services .bt-services-col .col-info span {
            font-size: 12px
        }

        .bt-home-services .bt-services-col .col-info2 span {
            font-size: 20px
        }

        .bt-home-services .bt-services-two {
            font-size: 11px;
            right: -27px;
            max-width: 225px
        }

            .bt-home-services .bt-services-two i {
                margin-bottom: 0
            }

        .aboutrow {
            background-image: none
        }

            .aboutrow .aboutrow-col {
                background-position: -25vw -11vh
            }

        .home-technology {
            background-position: -50vw 40vh
        }

        .technologyicon-width-adjust .technology-col img {
            width: 44px;
            height: 44px
        }

        .imprint-box address,
        .imprint-box p,
        .imprint-box ul li {
            font-size: 20px;
            line-height: 1.6
        }

        .web-quotes h3 {
            font-size: 22px;
            line-height: inherit
        }

        .development-banner {
            padding-bottom: 160px
        }

        .process-banner.development-banner {
            padding-bottom: 80px
        }

        .webdevelopment-banner-bg .web-banner-info::after {
            width: 44%;
            min-height: 222px
        }

        .webdevelopment-banner hgroup {
            padding-top: 18px
        }

        .process-banner hgroup {
            padding-top: 61px
        }

        .appdevelopment-banner-bg .web-banner-info hgroup {
            padding-top: 20px
        }

        .development-banner .web-banner-info h1 {
            font-size: 24px;
            line-height: 1.6
        }

        .development-banner .web-banner-info h6 {
            font-size: 18px
        }

        .h-38 {
            font-size: 26px
        }

        .web-development-section {
            background-position: -40vw -6vh
        }

        .h-52 {
            font-size: 30px
        }

        .customize-tab-item .nav-link {
            padding: 10px 0;
            width: calc(96% / 2)
        }

            .customize-tab-item .nav-link svg {
                width: 70px;
                height: 70px
            }

        .development-banner.appdevelopment-banner-bg,
        .development-banner.webdevelopment-banner-bg {
            padding-top: 125px
        }

        .apps-tab-content > img {
            border-radius: 25px
        }

        .banner-hire-info h1 {
            font-size: 72px
        }

        /*BLOG CSS HERE*/

        .blogdetails-content p,
        .blogdetails-col p {
            font-size: 16px;
        }

        .blogdetails-col h3 {
            line-height: 38px;
            font-size: 24px;
        }

        .blogdetails-content h2 {
            font-size: 24px;
        }


        .faq-section {
            padding: 45px 0;
        }

            .faq-section h2 {
                font-size: 40px;
            }
    }

    @media(min-width:768px) {
        .row-adjust {
            margin-left: -8px;
            margin-right: -8px
        }

        .has-top-margin {
            margin-top: 106px
        }

        .navbar-toggler .navbar-toggler-icon {
            line-height: 1.5
        }
    }