/*-- Space-Class --*/

[class|=space] {
    display: block;
    width: 100%;
    overflow: hidden
}

.space-10 {
    height: 10px;
}

.space-20 {
    height: 20px;
}

.space-30 {
    height: 30px;
}

.space-40 {
    height: 40px;
}

.space-50 {
    height: 50px;
}

.space-60 {
    height: 60px;
}

.space-70 {
    height: 70px;
}

.space-80 {
    height: 80px;
}

.space-90 {
    height: 90px;
}

.space-100 {
    height: 100px;
}
.space-auto {
    height: 63%;
}

/* Medium Layout: 1280px. */

@media only screen and (min-width: 992px) and (max-width: 1280px) {
    .mainmenu-area ul.nav.navbar-nav li a {
        margin: 0 10px;
    }
    .feature-area,
    .testimonial-area,
    .video-area,
    .progress-area {
        background-image: none;
        margin-bottom: 0;
    }
    .testimonial-area {
        padding: 100px 0;
    }
    .team-slide .owl-controls .owl-nav {
        text-align: center;
    }
    .team-slide .owl-controls .owl-nav > div {
        position: static;
        display: inline-block;
        margin: 30px 15px 15px 15px;
    }
    .footer-bottom .footer-menu ul,
    .footer-area {
        text-align: center;
    }
    .angle:after {
        height: 80px;
    }
}

/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    html, body {
        font-size: 14px;
        height: 100%;
    }
    body {
        position: relative;
        min-height: 100%;
    }
    .footer-bottom {
        padding: 20px 0 10px;
        background-color: #000;
        border-top: 2px solid #4085fa;
        width: 100%;
        position: absolute;
    }
    .footer-area-1 {
        bottom: 0;
    }
    
    /*Home*/
    .home-area {
        padding: 100px 0;
        margin-bottom: 0;
    }
    .calculator {
        margin-top: 50px;
        margin-left: -90px;
        float: left;
        width: 55%;
        height: 100%;
    }
    .company {
        margin-top: -20px;
        margin-right: -100px;
        float: right;
        width: 70%;
    }
    .mainmenu-area ul.nav.navbar-nav li a {
        margin: 0 10px;
    }
    .video-area,
    .progress-area {
        background-image: none;
    }
    .mobile-image {
        display: none !important;
    }
    .feature-area,
    .video-area,
    .progress-area {
        background-image: none;
        margin-bottom: 0;
        margin-top: 0;
    }
    .testimonial-area {
        padding: 60px 0;
    }
    .video-photo {
        margin-bottom: 60px;
    }
    .team-slide .owl-controls .owl-nav {
        text-align: center;
    }
    .team-slide .owl-controls .owl-nav > div {
        position: static;
        display: inline-block;
        margin: 30px 15px 15px 15px;
    }
    .footer-bottom .footer-menu ul,
    .footer-area {
        text-align: center;
    }
    .angle:after {
        height: 80px;
    }
    .map-responsive {
        margin-top: 11px;
        overflow: hidden;
        padding-bottom: 87.5%;
        position: relative;
        height: 0;
    }
    .map-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
    
    /*Solutions*/
    .grid-1 {
        display: grid;
        grid-template-areas: "a a"
                            "b c";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.03fr 1.5fr;
        margin: 0 -80px;
    }
    .grid-1 h3 {
        grid-area: a;
    }
    .grid-1 .ongrid-1 {
        grid-area: b;
    }
    .grid-1 img {
        grid-area: c;
        padding: 30px 0 0 20px;
    }
    
    .grid-2 {
        display: grid;
        grid-template-areas: "a a"
                            "c b";
        grid-template-columns:  1fr 1fr;
        grid-template-rows: 0.03fr 1.5fr ;
        margin:0 -80px;
    }
    .grid-2 h3 {
        grid-area: a;
        text-align: right;
        margin-right: -15px;
        font-size: 31px;
    }
    .grid-2 .offgrid-1 {
        grid-area: b;
    }
    .grid-2 img {
        grid-area: c;
        padding: 30px 20px 0 0 ;
    }
    
    .grid-3 {
        display: grid;
        grid-template-areas: "a a"
                         "b c";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.03fr 1.5fr;
        margin: 0 -80px;
    }
    .grid-3 h3 {
        grid-area: a;
    }
    .grid-3 .pump-1 {
        grid-area: b;
    }
    .grid-3 img {
        grid-area: c;
        padding: 70px 0 0 20px;
    }
    
    /*Our Contribution*/
    .hs {
        display: grid;
        grid-gap: calc(var(--gutter) / 2);
        /*grid-template-columns: auto;*/
        grid-template-rows: minmax(120px, 1fr);
        grid-auto-flow: column;
        overflow-x: scroll;
        scroll-snap-type: x proximity;
        padding-bottom: calc(.75 * var(--gutter));
        margin-bottom: calc(-.25 * var(--gutter));
    }
    
    .hs:before,
    .hs:after {
        content: '';
        width: 5px;
    }
    
    .hs>li,
    .item {
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .no-scrollbar {
        scrollbar-width: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .questions-area ul .col {
        width: 215px;
    }
    .questions-area .no-scrollbar {
        padding-left: 0;
        width: 1fr;
        margin-right: -165px;
    }
    .questions-area .container {
        margin-left: 30px;
    }
    .questions-area .ourcontrib {
        margin-left: 195px;
    }
    
    /*Blogs*/
    .site-area h1 {
        margin-top: -230px;
    }
    
    /*Projects*/
    .site-area-1 h1 {
        margin-top: -230px;
    }
    
    /*Careers*/
    .site-area-2 h1 {
        margin-top: -230px;
    }
    
    /*Blogs*/
    .site-area {
        width: 100%;
        background: url('/asset/images/header-bg.jpeg') no-repeat scroll center bottom / cover;
        padding-top: 5vh;
        color: #ffffff;
        margin-bottom: 100px;
        height: 500px;
    }
    
    /*Projects*/
    .site-area-1 {
        width: 100%;
        background: url('/asset/images/header-bg.jpeg') no-repeat scroll center bottom / cover;
        padding-top: 5vh;
        color: #ffffff;
        margin-bottom: 100px;
        height: 500px;
    }
    
    /*Careers*/
    .site-area-2 {
        width: 100%;
        background: url('/asset/images/header-bg.jpeg') no-repeat scroll center bottom / cover;
        padding-top: 5vh;
        color: #ffffff;
        margin-bottom: 100px;
        height: 500px;
    }
    
    /*FAQ*/
    .questions-area-2 .container .margin-faq {
        margin: 0 -90px;
    }
    .toggole-boxs .toggle-2, .toggle-10 {
        max-height: 150px;
    }
    .toggole-boxs .toggle-3, .toggle-4 {
        max-height: 180px;
    }
    .toggole-boxs .toggle-6, .toggle-7 {
        max-height: 85px;
    }
    .toggole-boxs .toggle-10 {
        max-height: 120px;
    }
    .layout-project {
        padding: 0 15px;
        margin: 825px auto;
    }
    .layout-career {
        padding: 0 15px;
        margin: 675px auto;
    }
}
/* Mobile Layout: 320px. */

@media only screen and (max-width: 767px) {
    html, body {
        font-size: 14px;
        height: 100%;
    }
    body {
        position: relative;
        min-height: 100%;
    }
    .footer-bottom {
        padding: 20px 0 10px;
        background-color: #000;
        border-top: 2px solid #4085fa;
        width: 100%;
        position: absolute;
    }
    .footer-area-1 {
        bottom: 0;
    }
    h1 {
        font-size: 40px;
    }
    h3 {
        font-size: 22px;
    }
    .right-button{
        display: none;
    }
    .bttn-white {
        padding: 8px 30px;
    }
    .section-padding {
        margin-top: -40px;
        /*padding-top: 30px;*/
        padding-bottom: 30px;
    }
    .section-home {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .angle:after {
        height: 60px;
    }
    /*-- Main-Menu-Style --*/
    .mainmenu-area {
        padding: 15px 0;
    }
    .mainmenu-area:before {
        opacity: 0.9;
    }
    .mainmenu-area .navbar-toggle {
        border: 1px solid #ffffff;
        border-radius: 1px;
    }
    .mainmenu-area .navbar-toggle .icon-bar {
        background-color: #ffffff;
        height: 2px;
        border-radius: 0;
    }
    .mainmenu-area #primary_menu {
        overflow-y: auto;
        max-height: 80vh;
    }
    .mainmenu-area #primary_menu ul.nav.navbar-nav li {
        display: block;
    }
    .mainmenu-area #primary_menu ul.nav.navbar-nav li a {
        padding: 15px;
        border: none;
    }
    .mainmenu-area #primary_menu ul.nav.navbar-nav li.active a,
    .mainmenu-area #primary_menu ul.nav.navbar-nav li a:hover {
        background-color: #ffffff;
        color: #5e88fc;
    }
    /*-- Home-Area --*/
    .home-area {
        padding-top: 120px;
        padding-bottom: 20px;
        margin-bottom: 0;
    }
    .mobile-image {
        display: none !important;
    }
    .feature-area,
    .video-area,
    .progress-area {
        background-image: none;
        margin-bottom: 0;
        margin-top: 0;
    }
    .testimonial-area {
        padding: 60px 0;
    }
    .team-slide .owl-controls .owl-nav {
        text-align: center;
    }
    .team-slide .owl-controls .owl-nav > div {
        position: static;
        display: inline-block;
        margin: 30px 15px 15px 15px;
    }
    .gallery-slide {
        margin-bottom: 60px;
    }
    .gallery-slide .item {
        margin: 85px 25px 90px 30px;
    }
    .gallery-slide .owl-controls {
        position: static;
        margin-top: 30px;
        width: 100%;
        text-align: center;
    }
    .footer-bottom .footer-menu ul,
    .footer-area {
        text-align: center;
    }
    .subscribe-form {
        padding: 20px;
    }
    .subscribe-form form .bttn-white {
        position: static;
        margin-top: 20px;
    }
    .subscribe-form form .control {
        padding-right: 15px;
    }

    .post-single.sticky .post-media {
        margin-right: 0;
        float: none;
        width: 100%;
    }

    .form-double .box {
        width: 100%;
        float: none;
    }
    .post-single {
        padding: 1px;
    }
    .post-single h2 {
        font-size: 26px;
    }
    .post-single blockquote {
        padding: 10px;
        font-size: 14px;
    }
    .comments-list .comment {
        padding-left: 0;
    }
    .comments-list .comment .comment-pic {
        position: static;
        margin-bottom: 30px;
    }
    /*Solutions*/
    .grid-1 {
        display: grid;
        grid-template-areas: "a"
                            "c"
                            "b";
        grid-template-columns: 1fr;
        grid-template-rows: 0.005fr 0.3fr 0.3fr;
    }
    .grid-1 h3 {
        grid-area: a;
        margin: 0;
    }
    .grid-1 .ongrid-1 {
        grid-area: b;
    }
    .grid-1 img {
        grid-area: c;
        margin: 30px 0;
        padding: 0;
    }
    
    .grid-2 {
        display: grid;
        grid-template-areas: "a"
                            "c"
                            "b";
        grid-template-columns: 1fr;
        grid-template-rows: 0.005fr 0.3fr 0.3fr;
    }
    .grid-2 h3 {
        grid-area: a;
        margin: 0;
        text-align: left;
        font-size: 21px;
    }
    .grid-2 .offgrid-1 {
        grid-area: b;
    }
    .grid-2 img {
        grid-area: c;
        margin: 30px 0;
        padding: 0;
    }
    .grid-3 {
        display: grid;
        grid-template-areas: "a"
                            "c"
                            "b";
        grid-template-columns: 1fr;
        grid-template-rows: 0.005fr 0.3fr 0.3fr;
    }
    .grid-3 h3 {
        grid-area: a;
        margin: 0;
    }
    .grid-3 .pump-1 {
        grid-area: b;
    }
    .grid-3 img {
        grid-area: c;
        margin: 30px 0;
        padding: 0;
    }
    
    /*Our Contribution*/
    .hs {
        display: grid;
        grid-gap: calc(var(--gutter) / 2);
        /*grid-template-columns: auto;*/
        grid-template-rows: minmax(120px, 1fr);
        grid-auto-flow: column;
        overflow-x: scroll;
        scroll-snap-type: x proximity;
        padding-bottom: calc(.75 * var(--gutter));
        margin-bottom: calc(-.25 * var(--gutter));
    }
    
    .hs:before,
    .hs:after {
        content: '';
        width: 5px;
    }
    
    .hs>li,
    .item {
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .no-scrollbar {
        scrollbar-width: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .questions-area ul .col {
        width: 215px;
    }
    
    /*Blogs*/
    .site-area {
        width: 100%;
        background: url('/asset/images/header-bg.jpeg') no-repeat scroll center bottom / cover;
        padding-top: 4vh;
        color: #ffffff;
        margin-bottom: 100px;
        height: 300px;
    }
    
    /*Projects*/
    .site-area-1 {
        width: 100%;
        background: url('/asset/images/header-bg.jpeg') no-repeat scroll center bottom / cover;
        padding-top: 4vh;
        color: #ffffff;
        margin-bottom: 100px;
        height: 300px;
    }
    
    /*Careers*/
    .site-area-2 {
        width: 100%;
        background: url('/asset/images/header-bg.jpeg') no-repeat scroll center bottom / cover;
        padding-top: 4vh;
        color: #ffffff;
        margin-bottom: 100px;
        height: 300px;
    }
    
    /*FAQ*/
    .toggole-boxs .toggle-1 {
        max-height: 340px;
    }
    .toggole-boxs .toggle-2 {
        max-height: 400px;
    } 
    .toggole-boxs .toggle-3 {
        max-height: 500px;
    }
    .toggole-boxs .toggle-4 {
        max-height: 535px;
    }
    .toggole-boxs .toggle-6, .toggle-8 {
        max-height: 150px;
    }
    .toggole-boxs .toggle-7 {
        max-height: 245px;
    }
    .toggole-boxs .toggle-9 {
        max-height: 440px;
    }
    .toggole-boxs .toggle-10 {
        max-height: 375px;
    }
    .layout-project {
        padding-bottom: 50px;
    }
    
}
    

/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {}