@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
body{
    padding: 0;
    margin: 0;
}

.preload{
    display: none;
}

.nav2{
	display:none;
}

.menu{
    display: none;
}

header img{
    width: 100px;
    border: 0px solid red;
}


header{
    position: fixed;
    top: 0;
    width: calc(100% - 10px);
    height: auto;
    background: #23262d;
    padding: 5px;
    border: 0px solid red;
    box-shadow: 0px 5px 8px rgb(0, 0, 0,0.5);
    z-index: 1;
}

header nav{
    float: right;
}

header ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

header ul li{
    float: left;
    width: 100px;
    line-height: 30px;
    font-family: arial;
    font: optional;
    text-align: center;
    font-size: 14px;
}

header ul li a{
    text-decoration: none;
    color: #f1f1f1;
    display: block;
    transition: .3s;
}

header ul li a:hover{
    background: #e7a720;
    color: #23262d;
}


.banner{
    width: 100%;
    height: 650px;
    float: left;
    background: url(image/banner5.jfif);
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: 40px;
}


.banner .cover{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(13,8,23,0.7);
    top: 0;
}

.banner .intro{
    position: absolute;
    margin-top: 160px;
    margin-left: 2%;
    transition: .3s;
    color: #fff;
    font-size: 70px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-left: 5px solid #ffc000;
    padding: 20px;
    width: auto;
}

.banner .intro span{
    font-size: 67px;
    font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
}

.banner .intro i{
    font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
    font-size: 19px;
    float: left;
    letter-spacing: 4px;
}


.archi{
    float: left;
    width: calc(100% - 10%);
    height: auto;
    background: #23262d;
    padding: 5%;
}

.archi h1{
    float: left;
    width: auto;
    height: auto;
    font-size: 50px;
    font-family: "roboto";
    border: 2px solid gray;
    color: #e7a720;
    text-align: center;
    padding: 30px;
    padding-right: 110px;
    position: relative;
}


.archi h1 span{
    position: absolute;
    font-size: 14px;
    color: #808080;
    left: 50%;
    top: 25%;
}

.archi .mid{
    float: left;
    width: auto;
    height: auto;
    border: 0px solid red;
    margin-left: 5%;
}

.archi .mid h4{
    font-family: 'roboto thin';
    color: #e7a720;
}

.archi .mid span{
    font-family: 'cocogoose';
    color: #fff;
    font-size: 30px;
    line-height: 40px;
}



.archi .about{
    float: right;
    width: 30%;
    height: auto;
    border: 0px solid red;
    font-family: 'roboto';
    color: grey;
}

.archi .about a{
    text-decoration: none;
    padding: 8px;
    background: #808080;
    color: #fff;
    float: left;
    margin: 15px 0 0 0;
    transition: 0.5s;
}

.archi .about a:hover{
    background: #e7a720;
}


.main{
    float: left;
    border: 0px solid red;
    height: auto;
    width: 100%;
    margin-top: 30px;
    background: #ffffff;
    padding-bottom: 30px;
}

.main-title{
    float: left;
    width: 100%;
    text-align: center;
    color: #23262d;
    border: 0px solid red;
}

.main-title h1{
    margin: 0;
    font-size: 25px;
    margin-top: 20px;
}


.explore-con{
    float: left;
    width: calc(100% - 20px);
    border: 0px solid red;
    margin: 20px 0 0 0;
    padding: 10px;
}


.hiddenContent{
    width: calc(80% - 20px);
    float: left;
    margin-left: 10%;
    background: #fff;
    border-radius: 10px;
    border: 0px solid red;
    color: grey;
    font-family: 'roboto';
    padding: 10px;
    font-size: 14px;
}


.img{
    width: calc(80% - 20px);
    float: left;
    margin-left: 10%;
    background: #fff;
    border-radius: 10px;
    border: 0px solid red;
    padding: 10px;
    margin-top: 15px;
    padding-bottom: 30px;
}

.img div:nth-child(1){
    width: 30%;
    height: 280px;
    float: left;
    border: 0px solid red;
    background: url(image/urb1.jpeg);
    background-position: center;
    background-size: cover;
}
.img div{
    margin-left: 2%;
    margin-top: 15px;
    transition: 0.5s;
}
.img div:nth-child(2){
    width: 30%;
    height: 280px;
    float: left;
    border: 0px solid red;
    background: url(image/urb2.jpeg);
    background-position: center;
    background-size: cover;
}
.img div:nth-child(3){
    width: 30%;
    height: 280px;
    float: left;
    border: 0px solid red;
    background: url(image/urb3.jpeg);
    background-position: center;
    background-size: cover;
}
.img div:nth-child(4){
    width: 30%;
    height: 280px;
    float: left;
    border: 0px solid red;
    background: url(image/urb4.jpeg);
    background-position: center;
    background-size: cover;
}


.img .iCon1{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/int1.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .iCon2{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/int2.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .iCon3{
    width: 30%;
    height: 200px;
    margin-left: 2.5%;
    margin-top: 15px;
    float: left;
    background: url(image/int3.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .iCon4{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/int4.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .iCon5{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/int5.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .iCon6{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/int6.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .iCon7{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/int7.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .iCon8{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/int8.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .iCon9{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/int9.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
hr{
    float: left;
    width: 100%;
    margin-top: 20px;
    border: none;
    border: 1px solid grey;
}
.img .iCon10{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .iCon10 video{
    width: 100%;
    height: 100%;
}

.img .iCon11{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .iCon11 video{
    width: 100%;
    height: 100%;
}


/*PROJECT MANAGEMENT*/


.img .pCon1{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/1.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .pCon2{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/2.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .pCon3{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/3.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .pCon4{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/4.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .pCon5{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/5.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon6{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/6.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon7{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/7.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon8{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/8.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon9{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/9.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon10{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/10.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon11{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/11.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon12{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/12.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon13{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/13.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon14{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/14.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon15{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/15.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon16{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/16.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon17{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/17.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon18{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/18.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .pCon19{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/19.jpg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}



/*ARCHITECTURE DESIGN*/
.img .ACon1{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/A1.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .ACon2{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/A2.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .ACon3{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/A3.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .ACon4{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/A4.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}
.img .ACon5{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/A5.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .ACon6{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/A6.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}

.img .ACon7{
    width: 30%;
    height: 200px;
    float: left;
    margin-left: 2.5%;
    margin-top: 15px;
    background: url(image/A7.jpeg);
    background-position: center;
    background-size: cover;
    transition: 0.5s;
}









.explore-title{
   float: left;
   width: 100%;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 25px;
   color: #262626;
   margin-bottom: 20px;
}

.explore-con .exp1{
    width: calc(15% - 20px);
    height: auto;
    float: left;
    padding: 10px;
    background: #f1f1f1;
    border: padding solid red;
    border-radius: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

.explore-con .exp1:hover{
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.explore-con b{
    float: left;
    margin-top: 10px;
    color: rgb(3, 4, 92);
    font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
    width: 100%;
    text-align: center;
    font-size: 14px;
}


.explore-con img{
    width: 50%;
}


.explore-con .exp2{
    width: calc(15% - 20px);
    height: auto;
    float: left;
    margin-left: 2%;
    padding: 10px;
    background: #f1f1f1;;
    border: padding solid red;
    border-radius: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

.explore-con .exp2:hover{
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}




.explore-con .exp3{
    width: calc(15% - 20px);
    height: auto;
    margin-left: 2%;
    float: left;
    padding: 10px;
    background: #f1f1f1;
    border: padding solid red;
    border-radius: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

.explore-con .exp3:hover{
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}



.explore-con .exp4{
    width: calc(15% - 20px);
    height: auto;
    float: left;
    margin-left: 2%;
    padding: 10px;
    background: #f1f1f1;
    border: padding solid red;
    border-radius: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

.explore-con .exp4:hover{
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.explore-con .exp5{
    width: calc(15% - 20px);
    height: auto;
    float: left;
    margin-left: 2%;
    padding: 10px;
    background: #f1f1f1;
    border: padding solid red;
    border-radius: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

.explore-con .exp5:hover{
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.explore-con .exp6{
    width: calc(15% - 20px);
    height: auto;
    float: left;
    margin-left: 2%;
    padding: 10px;
    background: #f1f1f1;
    border: padding solid red;
    border-radius: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

.explore-con .exp6:hover{
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.explore-con .exp7{
    width: calc(15% - 20px);
    height: auto;
    margin-left: 2%;
    float: left;
    padding: 10px;
    background: #f1f1f1;
    border: 0px solid red;
    border-radius: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

.explore-con .exp7:hover{
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}




.works{
    float: left;
    width: 100%;
    height: auto;
    background: #23262d;
    padding-top: 40px;
    padding-bottom: 40px;
}

.works .cv{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0,0.5);
    z-index: 1;
    top: -100%;
    transition: .5s;
}

.works h1{
    color: #fff;
    font-family: "cocogoose";
    margin-left: 5px;
    margin-top: 50%;
    font-size: 30px;
}

.works span:hover .cv{
    top: 0%;
}


.works span:nth-child(1){
    float: left;
    border: 0px solid red;
    width: 20%;
    height: 300px;
    background: url(image/p1.jfif);
    background-size: cover;
    position: relative;
    overflow: hidden;
    margin-left: 3.7%;
    transition: 0.5s;
}


.works span:nth-child(2){
    float: left;
    border: 0px solid red;
    width: 20%;
    height: 300px;
    background: url(image/p2.jfif);
    background-size: cover;
    position: relative;
    overflow: hidden;
    margin-left: 3.7%;
    transition: 0.5s;
}

.works span:nth-child(3){
    float: left;
    border: 0px solid red;
    width: 20%;
    height: 300px;
    background: url(image/p3.jfif);
    background-size: cover;
    position: relative;
    overflow: hidden;
    margin-left: 3.7%;
    transition: 0.5s;
}


.works span:nth-child(4){
    float: left;
    border: 0px solid red;
    width: 20%;
    height: 300px;
    background: url(image/p4.jfif);
    background-size: cover;
    position: relative;
    overflow: hidden;
    margin-left: 3.7%;
    transition: 0.5s;
}

.wcu{
    float: left;
    width: calc(100% - 20px);
    height: auto;
    padding: 10px;
    background: #23262d;
    border: 0px solid red;
}

.wcu .title{
    color: #e7a720;
    font-family: "cocogoose thin";
    margin-top: 20px;
}

.wcu span{
    float: left;
    color: #fff;
    font-family: "cocogoose";
    font-size: 35px;
    margin-top: 20px;
}


.wcuc{
    float: left;
    width: 100%;
    height: auto;
    padding-top: 30px;
    padding-bottom: 50px;
    background: #23262d;
}

.wcuc div{
    float: left;
    width: calc(20% - 5px);
    height: auto;
    padding: 10px;
    font-family: "roboto thin";
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-left: 2.5%;
    transition: 0.5s;
    border: 0px solid red;
}

.wcuc div h6{
    font-size: 15px;
    font-family: "roboto regular";
    margin-bottom: 10px;
}



/*
.works div{
    margin-left: 3.7%;
}

.works div:nth-child(1){
    float: left;
    border: 0px solid red;
    width: 20%;
    height: 300px;
    background: url(image/p1.jfif);
    background-size: cover;
    position: relative;
}
.works div:nth-child(2){
    float: left;
    border: 0px solid red;
    width: 20%;
    height: 300px;
    background: url(image/p2.jfif);
    background-size: cover;
}
.works div:nth-child(3){
    float: left;
    border: 0px solid red;
    width: 20%;
    height: 300px;
    background: url(image/p3.jfif);
    background-size: cover;
}
.works div:nth-child(4){
    float: left;
    border: 0px solid red;
    width: 20%;
    height: 300px;
    background: url(image/p4.jfif);
    background-size: cover;
}

*/



footer{
    width: calc(100% - 10px);
    height: auto;
    padding: 5px;
    float: left;
    background: #fff;
    padding-bottom: 30px;
}


footer h4{
    width: 100%;
    font-size: 15px;
    font-family: 'roboto';
    text-align: center;
}


footer img{
    width: 150px;
    border-bottom-right-radius: 5px;
}

































@media screen and (max-width:950px){
    .wrapper{
        display: none;
    }
    
    .preload{
        display: block;
    }
    .load-in{
        border: 0px solid red;
        position: absolute;
        width: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }



    header{
        border: 0px solid green;
    }
    nav{
        display: none;
    }

    .menu{
        display: block;
		float: right;
		margin: 10px 25px 0 0;
		border: 0px solid red;
		width: 5px;
		height: auto;
		cursor: pointer;
	}
	
	.menu span{
		width:4px;
		height: 4px;
		background: #fff;
		float: left;
		margin-top: 3px;
		border-radius: 50%;
	}

    .nav2{
		display: block;
		width: 0;
		height: 100%;
		background: #fff;
		position: fixed;
		right: 0;
		top: 0;
		padding-top: 60px;
		transition: .5s;
        z-index: 1;
	}
	
	.nav2 ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	.nav2 li{
		padding: 10px 10px 10px 20px;
		line-height: 20px;
		font-family: tahoma;
        border: 0px solid red;
        width: unset;
        float: unset;
        text-align: unset;
	}
	
	
	.nav2 li a{
		text-decoration: none;
		color: #23262d;
		transition: .5s;
	}
	
	.nav2 li a:hover{
		margin-left:20px;
        background: unset;
        color: #e7a720;
        border-right: 2px solid #e7a720;
	}
	
	.nav2 .closebtn{
		display: block;
		font-size: 36px;
		margin-top: -50px;
		margin-left: 10px;
		text-decoration: none;
		color: grey;
	}
	
	
	.nav2 .closebtn:hover{
		color: red;
	}


    .banner{
        width: 100%;
        height: 500px;
        float: left;
        background: url(image/banner5.jfif);
        background-size: cover;
        position: relative;
        margin-top: 40px;
    }

    .banner .intro{
        font-size: 60px;
    }
    
    .banner .intro span{
        font-size: 57px;
        font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
    }
    
    .banner .intro i{
        font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
        font-size: 14.5px;
        float: left;
        letter-spacing: 4px;
    }

    .hiddenDiv {
        width: calc(100% - 0px);
        padding: 0;
        border: 0px solid red;
    }

    .hiddenContent{
        width: calc(96% - 20px);
        float: left;
        margin-left: 2%;
        background: #fff;
        border-radius: 10px;
        border: 0px solid red;
        color: grey;
        font-family: 'roboto';
        padding: 10px;
        font-size: 14px;
    }
    
    
    .img{
        width: calc(96% - 20px);
        float: left;
        margin-left: 2%;
        background: #fff;
        border-radius: 10px;
        border: 0px solid red;
        padding: 10px;
        margin-top: 15px;
    }
    
	
}



@media screen and (max-width:800px){

    header{
        border: 0px solid red;
    }

    .archi .mid span{
        font-family: 'cocogoose';
        color: #fff;
        font-size: 20px;
        line-height: 30px;
    }
    
}










@media screen and (max-width:750px){

header{
    border: 0px solid red;
}


.archi .mid{
    float: right;
    width: 50%;
    height: auto;
    border: 0px solid red;
    margin-left: 0;
}

.archi .mid h4{
    font-family: 'roboto thin';
    color: #e7a720;
}

.archi .mid span{
    font-family: 'cocogoose';
    color: #fff;
    font-size: 20px;
    line-height: 30px;
}


.archi .about{
    float: right;
    width: 100%;
    height: auto;
    border: 0px solid red;
    font-family: 'roboto';
    color: grey;
}


.img div:nth-child(1){
    width: 45%;
    height: 240px;
    float: left;
    border: 0px solid red;
    background: url(image/urb1.jpeg);
    background-position: center;
    background-size: cover;
}
.img div{
    margin-left: 3.5%;
    margin-top: 15px;
}
.img div:nth-child(2){
    width: 45%;
    height: 240px;
    float: left;
    border: 0px solid red;
    background: url(image/urb2.jpeg);
    background-position: center;
    background-size: cover;
}
.img div:nth-child(3){
    width: 45%;
    height: 240px;
    float: left;
    border: 0px solid red;
    background: url(image/urb3.jpeg);
    background-position: center;
    background-size: cover;
}
.img div:nth-child(4){
    width: 45%;
    height: 240px;
    float: left;
    border: 0px solid red;
    background: url(image/urb4.jpeg);
    background-position: center;
    background-size: cover;
}

.img .iCon1{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .iCon2{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .iCon3{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .iCon4{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .iCon5{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .iCon6{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .iCon7{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .iCon8{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .iCon9{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .iCon10{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .iCon11{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}


.img .pCon1{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .pCon2{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .pCon3{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .pCon4{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .pCon5{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon6{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon7{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon8{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon9{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon10{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon11{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon12{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon13{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon14{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon15{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon16{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon17{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon18{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .pCon19{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}



.img .ACon1{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .ACon2{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .ACon3{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .ACon4{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}
.img .ACon5{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .ACon6{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}

.img .ACon7{
    width: 48%;
    height: 200px;
    float: left;
    margin-left: 1.3%;
}





















.explore-con img{
    width: 50%;
}

.explore-con .exp1{
    width:calc(30% - 20px);
    margin-left: 0;
}

.explore-con .exp2{
    width:calc(30% - 20px);
    margin-left: 5%;
}

.explore-con .exp3{
    width:calc(30% - 20px);
    margin-left: 5%;
}
.explore-con .exp4{
    width:calc(30% - 20px);
    margin-left: 0;
    margin-top: 18px
}
.explore-con .exp5{
    width:calc(30% - 20px);
    margin-left: 5%;
    margin-top: 18px
}
.explore-con .exp6{
    width:calc(30% - 20px);
    margin-left: 5%;
    margin-top: 18px;
}
.explore-con .exp7{
    width:calc(30% - 20px);
    margin-left: 5%;
    margin-top: 18px;
}

.explore-con img{
    width: 35%;
}


.works h1{
    margin-top: 50%;
    font-size: 20px;
}

.works span:nth-child(1){
    width: 45%;
    margin-left: 3.1%;
    height: 340px;
    margin-top: 15px;
    float: left;
}
.works span:nth-child(2){
    width: 45%;
    margin-right: 3.1%;
    height: 340px;
    margin-top: 15px;
    float: right;
}
.works span:nth-child(3){
    width: 45%;
    margin-left: 3.1%;
    height: 340px;
    margin-top: 15px;
    float: left;
}
.works span:nth-child(4){
    width: 45%;
    margin-right: 3.1%;
    height: 340px;
    margin-top: 15px;
    float: right;
}

.wcuc div{
    float: left;
    width: 96%;
    height: auto;
    padding: 0;
    font-family: "roboto thin";
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-left: 2%;
    margin-top: 20px;
    transition: 0.5s;
    border: 0px solid red;
}

.wcuc div h6{
    font-size: 15px;
    font-family: "roboto regular";
    margin-bottom: 10px;
}


}




















@media screen and (max-width:550px){
    header{
        border: 0px solid red;
    }

    .banner{
        background: url(image/banner5.jfif);
        background-size: cover;
        background-position: center;
    }


    .archi .mid{
        float: right;
        width: 100%;
        height: auto;
        border: 0px solid red;
        margin-left: 0;
    }
    
    .archi .mid h4{
        font-family: 'roboto thin';
        color: #e7a720;
    }
    
    .archi .mid span{
        font-family: 'cocogoose';
        color: #fff;
        font-size: 20px;
        line-height: 30px;
    }
    
    
    .archi .about{
        float: right;
        width: 100%;
        height: auto;
        border: 0px solid red;
        font-family: 'roboto';
        color: grey;
        margin-top: 15px;
    }
    


    .banner .intro{
        font-size: 50px;
    }
    
    .banner .intro span{
        font-size: 48.3px;
        font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
    }
    
    .banner .intro i{
        font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
        font-size: 10.5px;
        float: left;
        letter-spacing: 4px;
    }
    .explore-title{
        font-size: 20px;
    }

    .explore-con img{
        width: 50%;
    }

    .explore-con .exp1{
        width:calc(45% - 20px);
        margin-left: 0;
    }

    .explore-con .exp2{
        width:calc(45% - 20px);
        margin-left: 10%;
    }

    .explore-con .exp3{
        width:calc(45% - 20px);
        margin-left: 0%;
        margin-top: 18px
    }
    .explore-con .exp4{
        width:calc(45% - 20px);
        margin-left: 10%;
        margin-top: 18px
    }
    .explore-con .exp5{
        width:calc(45% - 20px);
        margin-left: 0%;
        margin-top: 18px
    }
    .explore-con .exp6{
        width:calc(45% - 20px);
        margin-left: 0%;
        margin-top: 18px;
    }
    .explore-con .exp7{
        width:calc(45% - 20px);
        margin-left: 10%;
        margin-top: 18px;
    }

    .explore-con img{
        width: 35%;
    }

    .img div:nth-child(1){
        width: 98%;
        height: 240px;
        float: left;
        border: 0px solid red;
        background: url(image/urb1.jpeg);
        background-position: center;
        background-size: cover;
    }
    .img div{
        margin-left: 1%;
        margin-bottom: 20px;
        border: 0px solid red;
    }
    .img div:nth-child(2){
        width: 98%;
        height: 240px;
        float: left;
        border: 0px solid red;
        background: url(image/urb2.jpeg);
        background-position: center;
        background-size: cover;
    }
    .img div:nth-child(3){
        width: 98%;
        height: 240px;
        float: left;
        border: 0px solid red;
        background: url(image/urb3.jpeg);
        background-position: center;
        background-size: cover;
    }
    .img div:nth-child(4){
        width: 98%;
        height: 240px;
        float: left;
        border: 0px solid red;
        background: url(image/urb4.jpeg);
        background-position: center;
        background-size: cover;
    }

    .img .iCon1{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .iCon2{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .iCon3{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .iCon4{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .iCon5{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .iCon6{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .iCon7{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .iCon8{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .iCon9{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }

    .img .iCon10{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .iCon11{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }






    .img .pCon1{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .pCon2{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .pCon3{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .pCon4{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .pCon5{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon6{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon7{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon8{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon9{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon10{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon11{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon12{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon13{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon14{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon15{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon16{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon17{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon18{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .pCon19{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }




    .img .ACon1{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .ACon2{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .ACon3{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .ACon4{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    .img .ACon5{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .ACon6{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }
    
    .img .ACon7{
        width: 100%;
        height: 300px;
        float: left;
        margin-left: 0%;
    }





    



    .wcu span{
        float: left;
        color: #fff;
        font-family: "cocogoose";
        font-size: 20px;
        margin-top: 20px;
    }


    .works h1{
        margin-top: 50%;
        font-size: 17px;
    }

    .works span:nth-child(1){
        width: 96%;
        margin-left: 2%;
        height: 480px;
        margin-top: 20px;
        float: left;
    }
    .works span:nth-child(2){
        width: 96%;
        margin-left: 2%;
        height: 480px;
        margin-top: 20px;
        float: left;
    }
    .works span:nth-child(3){
        width: 96%;
        margin-left: 2%;
        height: 480px;
        margin-top: 20px;
        float: left;
    }
    .works span:nth-child(4){
        width: 96%;
        margin-left: 2%;
        height: 480px;
        margin-top: 20px;
        float: left;
    }
    
}
    
    


@media screen and (max-width:450px){
    .banner .intro{
        font-size: 30px;
    }
    
    .banner .intro span{
        font-size: 28.3px;
        font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
    }
    
    .banner .intro i{
        font-family: 'Franklin Gothic small', 'Arial Narrow', Arial, sans-serif;
        font-size: 10.5px;
        float: left;
        letter-spacing: 4px;
    }
}