*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
:root{
    --color1:#0A5573; /*blue*/
    --color2:#AEB9B7; /*gray*/
    --color3:white;
}

.banner{
    background:url("../images/project1.png")no-repeat right/cover;
    width:100%;
    height:500px;
    box-shadow:0 2px 10px var(--color1);
}
h5{
    font-size:50px!important;
    color:var(--color1)!important;
}

/*project css*/
.myproject{
        background:linear-gradient(rgba(10,85,115,0.7),rgba(10,85,115,0.7),rgba(10,85,115,0.7));
}
.top-city-item{
    /*height:300px;*/
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    margin-bottom: 20px;
}

.top-city-item:hover .top-city-img::before {
    opacity: 1;
    background: radial-gradient(44.97% 44.97% at 50% 55.03%,rgba(10,85,115,.5) 1%,rgba(10,85,115,.8) 72.92%);
    position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .5s;
}


.top-city-item .top-city-text{
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    transition: all .5s;
}
.top-city-item:hover .top-city-text{
    bottom: 43%;
}
.top-city-item .top-city-text h4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 28px;
    transition: all .5s;
}


/*end here*/

/*footer css */
footer{
    color:var(--color3);
    background:var(--color1);
}