body{
    padding:0px;
    margin:0px;
    font-family: sans-serif;
}
p {
    font-size: 14px;
}

.header{
    width:calc(100% - 40px);
    max-width: 1170px;
    margin: 20px auto;
    padding:0px 20px;
}

.git{
    background-color: #ff4a15;
    border: 1px solid #00b39d;
    padding: 10px 15px;
    /*box-shadow: 1px 1px 1px #00b39d;*/
    color: #ffffff;
    font-weight: bold;
    /*margin-top: 15px;*/
    /*margin-left: 17%;*/
    cursor:pointer;
}

.git>i{
    vertical-align: text-top;
    margin-right: 5px;
    color: #ffffff;
}

.header>img{
    width:240px;cursor:pointer;
}

.nav{
    z-index: 100;
    position: relative;
    background-color: #3388e2
}

.nav>ul{
    width:calc(100% - 40px);
    max-width: 1170px;
    list-style: none;
    margin: 0px auto;
    background-color: #3388e2;
    color: #fff;
    z-index:100;
    cursor:pointer;
}

.nav>ul>li{
    display:inline-block;
    padding: 17px;
}

.nav>ul>li.active, .nav>ul>li:hover{
    background-color:#0e225f;
}

.nav>ul>.menu-toggle-container{
    display:none;
}

.menu-toggle{
    background-color: #3853a2;
    border: 1px solid #6378b5;
    font-size: 20px;
    margin-top: -8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor:pointer;
}

.menu-toggle:focus{
    outline:0;
}

.container{
    max-width: 1170px;
    margin: 0px auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.banner{
    margin-top: -15px;
    position: relative;
    width: 100%;
    background-image: url(../image/banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    background-position: center;
    display:-webkit-box;
}

.banner>.container>.text{
    /*margin-top: 115px;*/
    margin-left: 85px;
    font-size: 36px;
    max-width: 335px;
    color: #253d83;
    display:inline-block;
}
.tagline {
    font-size: 12px;
    color: #5890cb;
    margin-left: 65px;
    margin-top: 5px;
}

.banner>.container>.text>button{
    margin-top: 25px;
    background-color: #ff4a15;
    padding: 14px 29px;
    border: 0px;
    color: #fff;
    font-size: 16px;
    cursor:pointer;
}

.blue-banner{
    margin-top: -15px;
    position: relative;
    width: 100%;
    /*background-image: url(../image/bluebanner.jpg);*/
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px;
    background-position: center;
    display:-webkit-box;
    position: relative;
    z-index: 100;
}
.img-search{
    width: 20%;
}
.img-search > img{
    margin: 0 auto;
    display: flex;
}
.blue-banner>.container>.text{
    width: 75%;
    /*margin-left: 5%;*/
    color: #000000;
    margin-top: 20px;
    line-height: 25px;
    display:inline-block;
}
.wrapper {
    background-color: #e6e6e6;
}
.grid{
    /*width: calc(100% - 30px);*/
    max-width: 1170px;
    width: auto;
    margin: 0px auto;
    background-color: #e6e6e6;
    padding: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.grid>div{
    width: calc(26% - 1px);
    display: inline-block;
    margin: 20px 20px;
    background-color: #ffffff;
    padding: 40px 20px;
}

.grid>div>img{
    width: 70%;
    display: block;
    margin: 0 auto;

}

.grid>div>.grid-title{
    margin-top: 12px;
    font-size: 20px;
    margin-left: 10px;
}

.grid>div>.grid-desc {
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    line-height: 20px;
    height: 70px;
}

.grid>div>button {
    background-color: #ff4a15;
    color: #fff;
    border: 0px;
    text-align: center;
    width: 190px;
    /*margin-left: calc(50% - 105px);*/
    padding: 12px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    /*width: 30%;*/
}

.footer{
    border-top: 1px solid #cecece;
    text-align: center;
    padding: 50px 0px;
}

.footer>ul{
    list-style:none;
    padding:0px;
}

.footer>ul>li{
    display: inline-block;
    padding: 0px 25px;
    margin-bottom: 12px;
    font-size: 14px;
    text-transform: uppercase;
}

.footer>ul>li>a{
    color:black;
    text-decoration:none;
}

.footer>.copyright{
    font-size: 13px;
    color: #5d5d5d;
}

.about{
    max-width: 1170px;
    margin: 20px auto;
}

.about-container{
    background-color: #f0f5fd;
    padding: 75px;
    margin-top: -25px;
    position:relative;
}

.about>.title{
    font-size: 40px;
    margin-bottom: 45px;
}

.about>.subtitle{
    font-size: 17px;
    line-height:25px;
}

.about>ul>li{
    font-size: 14px;
    line-height:25px;
}

.service-container{
    background-color: #f0f5fd;
    padding: 50px 75px;
    margin-top: -25px;
    position:relative;
}

.service{
    max-width: 1170px;
    margin: 20px auto;
}

.service>.title{
    font-size: 40px;
    margin-bottom: 30px;
}

.service-list{
    margin-left: 30px; 
    font-size:15px; 
    line-height:20px;
}

.contact-container{
    background-color: #f0f5fd;
    padding: 50px 75px;
    margin-top: -25px;
    position:relative;
}

.contact{
    max-width: 1170px;
    margin: 20px auto;
}

.contact>.title{
    font-size: 40px;
    margin-bottom: 30px;
}

.contact>.form-container{
    border: 1px solid #253d83; float: left;
    background-color: #d2d2d2;
    padding: 20px 20px 20px 20px;
    width: 500px;
    margin-bottom: 25px;
}

.contact>.form-container>.row{
    height:55px;
}

.contact>.form-container>.row>label{
    font-size: 14px;
    display: inline-block;
    margin-top: 12px;
    width: 150px;
    font-weight:bold;
}

.contact>.form-container>.row>input{
    height: 35px;
    padding-left: 5px;
    width: 330px;
}

.contact>.form-container>div:not(.row){
    text-align:right;
}

.contact>.form-container>div>.btn-send{
    background-color: #253d83;
    color: #fff;
    margin-right: 18px;
    border: 0px;
    padding: 10px 35px;
    cursor:pointer;
}

.contact>.contact-info{
    float: right;
    width: calc(100% - 585px);
}

.company_name{
    font-size:16px; 
    font-weight:bold;
}

.company_address{
    font-size:14px; 
    margin-top:20px;
}

.company_email{
    font-size:14px; 
    margin-top:20px;
}

@media screen and (max-width: 969px) {
    .banner {
        height: 275px;
    }

    .banner>.container>.text {
        margin-top: 40px;
    }
    .blue-banner {
        height: 280px;
    }
    .img-search {
        width: 0%;
    }
    .img-search > img {
        display : none;   
    }

    .blue-banner>.container>.text {
        width: calc(100% - 40px);
        padding:10px 20px;
        margin-left:0px;
    }

    .grid>div>.grid-desc {
        height: auto;
    }

    .contact>.form-container {
        float: none;
        width: calc(100% - 42px);
    }

    .contact>.form-container>.row>input {
        width: calc(100% - 172px);
    }

    .contact>.contact-info {
        float: none;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .nav>ul>li,.nav>ul>.menu-toggle-container {
        display: block;
    }

    .nav>ul>.menu-toggle-container:hover{
        background-color: #3388e2;
        cursor:auto;
    }

    .nav>ul {
        height: 52px;
        padding-left: 0px;
        width: 100%;
        z-index: 1;
    }
    .grid {
        width: auto;
        display: block;

    }
    .grid>div {
        width: auto; 
    }

    .banner {
        z-index: 100;
        margin-top: 0px;
    }

    .grid>div>.grid-desc {
        height: auto;
    }

    .grid>div>.grid-title {
        font-size: 17px;
    }

    .about-container{
        z-index:100;
        margin-top: 0px;
    }

    .service-container{
        z-index:100;
        margin-top: 0px;
    }


    .contact-container{
        z-index:100;
        margin-top: 0px;
    }
}

@media screen and (max-width: 697px) {
    .blue-banner {
        height: auto;
    }

    .grid>div {
        width: auto;
        display: block;
        margin: 0px;
        margin-bottom: 30px;
    }
    .grid {
        padding: 20px;
    }
    .grid>div>.grid-desc {
        height: auto;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 598px) {
    .banner {
        height: 175px;
    }

    .banner>.container>.text {
        margin-top: 5px;
        font-size: 27px;
        margin-left: 17px;
        width: 240px;
    }

    .banner>.container>.text>button {
        margin-top: 10px;
    }

    .contact>.form-container>.row>label {
        width: 105px;
    }

    .contact>.form-container>.row>input {
        width: calc(100% - 116px);
    }

    .about-container, .service-container, .contact-container {
        padding: 20px;
    }
}

@media screen and (max-width: 500px) {
    .git>i {
        display: none;
    }

    .header>img {
        width: 100%;
    }

    .git{
        float:none;
    }
}

@media screen and (max-width: 408px) {
    .contact>.form-container>.row>label {
        width: 100%;
    }
    .contact>.form-container>.row>input {
        width: 100%;
    }
    .contact>.form-container>.row {
        height: 63px;
    }

    .contact>.form-container>div>.btn-send {
        width:100%;
        margin:0px;
        margin-top:10px;
    }

    .header>img {
        width: 100%;
    }
}