:root {
    --main-color: #ffcb0f;
    --deep-color: #b38e0b;
}

* {box-sizing: border-box; padding: 0; margin: 0;}

html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    scroll-behavior: smooth;
}

.container {
	margin-left: 15px; margin-right: 15px;
}

.btn {
    padding: 8px 15px;
    background-color: var(--main-color);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
}

.btn:hover{opacity: 0.65;}

/* Start Header */
#head {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
}

header {
    background-color: var(--main-color);
}

header .container { padding: 5px 0px;}

header .container .contact, header .container .social {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-bottom: 5px;
}

header .contact span i{padding-right: 5px;}

header .contact span:not(:last-child) { display: flex; justify-content: center; align-items: center;}

header .contact span:first-child { width: 44%; }

header .contact span:nth-child(2) { width: 50%; }

header .contact span:last-child { width: 100%; display: flex; justify-content: center; align-items: center;}

header .container a { text-decoration: none; color: rgb(30, 48, 80); }
/* End Header */

/* Start Sec-0 */
#sec-0 {background-color: #222533;}

#sec-0 .container {display: flex; justify-content: space-between; align-items: center;}

#sec-0 .container .menu i {font-size: 1.4rem; color: var(--main-color);}

#sec-0 .links {display: none;}

#sec-0 .txt h1 {text-transform: uppercase; color: #fff; padding-top: 10px; font-size: 1.3rem;}

#sec-0 .txt p {color: #949497; font-size: 0.9rem; padding-bottom: 10px; margin-top: -5px;}

#sec-0 .txt h1 span { color: var(--main-color);}
/* Start Sec-0 */

/* Start Sec-1 */
#sec-1 {
    background: rgba(0, 0, 0, 0.65) url('../images/banner.jpg') no-repeat center center/cover;
    background-blend-mode: overlay;
    min-height: 100vh;
    text-align: center;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    padding-top: 90px;
}

#sec-1 h1 {
    font-size: 2.8rem;
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 10px;
}

#sec-1 h1:nth-child(3) {
    color: var(--main-color);
}

#sec-1 p {
    margin-bottom: 45px;
}

#sec-1 h3 {
    font-weight: lighter;
    font-size: 1.6rem;
    padding-bottom: 15px;
}

#sec-1 a {
    padding: 8px;
    margin-right: 5px;
    border: 1px solid var(--main-color);
    background-color: #000;
    color: var(--deep-color);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}

#sec-1 a:hover {color: var(--main-color);}
/* End Sec-1 */

/* Start Sec-2 */
#sec-2 h1 {
    color: var(--main-color);
    margin-top: 10px;
    text-transform: uppercase;
}

#sec-2 .txt { padding: 20px 0px; }

#sec-2 .txt h3 {
    color: #484848;
    margin-bottom: 20px;
}

#sec-2 .txt p:last-of-type {margin: 20px 0px;}

#sec-2 img { max-width: 100%; margin-top: 30px;}
/* End Sec-2 */

/* Start Sec-3 */
#sec-3 {background: rgba(0, 0, 0, 0.5) url('../images/bg4.jpg') no-repeat center center/cover; text-align: center; background-blend-mode: overlay;}
#sec-3 .container h1 {color: var(--main-color); font-size: 2rem; text-transform: uppercase; padding-bottom: 15px; padding-top: 50px;}
#sec-3 .container p {color: #fff; padding-bottom: 15px; margin-bottom: 30px;}
#sec-3 .container .cards {display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; padding-top: 50px;}
#sec-3 .container .cards .card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 75px;
    padding: 5px;
    width: 222px;
    height: 245px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.65);
}

#sec-3 .container .cards .card .c1,
#sec-3 .container .cards .card .c2,
#sec-3 .container .cards .card .c3,
#sec-3 .container .cards .card .c4 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 140px;
    background-color: var(--main-color);
    border-radius: 50%;
    left: 41px;
    top: -65px;
}

#sec-3 .container .cards .card h2 {
    color: var(--main-color);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.05rem; 
    padding-top: 50px; 
    padding-top: 90px;
    padding-bottom: 10px;}
/* End Sec-3 */


/* Start Sec-4 */
#sec-4 .container:first-child h1{
    text-align: center; 
    text-transform: uppercase; 
    color: #484848; 
    font-size: 1.5rem;
    padding-top: 50px;
    padding-bottom: 30px;
}

#sec-4 .container:last-child figure div {position: relative; margin-bottom: 30px;}

#sec-4 .container:last-child figure {padding-bottom: 30px;}

#sec-4 .container:last-child img {width: 100%;}

#sec-4 .container:last-child figure:first-of-type div::after  {content: 'Construction Management';}
#sec-4 .container:last-child figure:nth-child(2) div::after  {content: 'Renovation';}
#sec-4 .container:last-child figure:last-of-type div::after  {content: 'Architectre';}

#sec-4 .container:last-child figure:first-of-type div::after,
#sec-4 .container:last-child figure:nth-child(2) div::after,
#sec-4 .container:last-child figure:last-of-type div::after {
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
    text-align: center;
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background-color: rgba(0, 0, 0, 0.5);
}

#sec-4 .container:last-child figure:first-of-type figcaption,
#sec-4 .container:last-child figure:nth-child(2) figcaption,
#sec-4 .container:last-child figure:last-of-type figcaption {padding-bottom: 30px;}
/* End Sec-4 */


/* Start Sec-5 */
#sec-5 {background: rgba(0, 0, 0, 0.65) url('../images/bg2.jpg') no-repeat center center/cover; background-blend-mode: overlay;}
#sec-5 .container .txt {padding-top: 50px; padding-bottom: 30px; text-align: center;}
#sec-5 .container .txt h1 {color: #fff; font-size: 2rem; text-transform: uppercase; padding-bottom: 20px;}
#sec-5 .container .txt p {color: #fff; padding-bottom: 25px;}
#sec-5 .container .txt ul li {display: inline-block; list-style-type: none; padding: 8px 5px; border-radius: 25px;}
#sec-5 .container .txt ul li a {text-decoration: none; color: #fff; padding: 10px 5px; font-size: 1.2rem; text-transform: uppercase;}
#sec-5 .container .txt ul li:first-of-type {background-color: rgba(0, 0, 0, 0.65);}

#sec-5 .container img {width: 100%; margin-bottom: 15px;}
/* End Sec-5 */

/* Start Sec-6 */
#sec-6 {background: url('../images/bg3.jpg') no-repeat center center/cover;}
#sec-6 .container {padding-bottom: 40px; }
#sec-6 .txt {text-align: center; padding-bottom: 65px;}
#sec-6 .txt h1 {color: #484848; font-size: 1.8rem; text-transform: uppercase; padding-top: 45px; padding-bottom: 25px;}
#sec-6 .txt p {color: #484848;}

#sec-6 .cards figure figcaption {display: flex; justify-content: space-between; padding: 25px; position: relative; background-color: #e5e5e5; text-align: justify;}
#sec-6 .cards figure:nth-child(2) figcaption {background-color: var(--main-color); color: #fff;}
#sec-6 .cards figure:nth-child(2) figcaption::after {content: url('../images/block-ico1.png');}
#sec-6 .cards figure figcaption::after {
    content: url('../images/block-ico2.png');
    position: absolute;
    bottom: -15px;
    left: 47%;
}
#sec-6 .cards figure {position: relative; margin-bottom: 120px;}
#sec-6 .cards figure figcaption+img {border-radius: 50%; position: absolute; bottom: -100px; left: 39%;}
#sec-6 .cards figure figcaption div img {padding-right: 15px;}
/* End Sec-6 */

/* Start Sec-7 */
#sec-7 { background-color: #ffcb0fa2; bottom:0; left: 0; width: 100%;}
#sec-7 .contact {padding-top: 25px;}
#sec-7 .contact h1 {text-transform: uppercase; font-size: 1.4rem; color: #484848; font-weight: bold;}
#sec-7 .contact h1:last-of-type {font-weight: lighter;}
#sec-7 form {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#sec-7 form input:not(:last-child) {width: 100%; padding: 15px; margin: 15px 0; border: none; outline: none; border-radius: 10px;}
#sec-7 form input:last-of-type {
    padding: 10px 25px; 
    background-color: #73757e; 
    color: #fff; 
    border: none; 
    outline: none; 
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 1.1rem;
}
/* End Sec-7 */

/* Start Sec-8 */
#sec-8 {
    background: rgba(0, 0, 0, 0.65) url('../images/bg4.jpg') no-repeat center center/cover; 
    background-blend-mode: overlay; 
    color: #fff; 
    padding: 50px 0px;
    text-align: center;
}
#sec-8 h3 {font-size: 1.6rem; font-weight: 500; padding-bottom: 10px;}
#sec-8 em {color: var(--main-color); font-size: 1.8rem; padding-bottom: 30px; text-transform: uppercase;}
#sec-8 h1+p {padding-bottom: 35px;} 
#sec-8 p:last-of-type {padding-bottom: 25px;}
#sec-8 .icons {display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px;}
#sec-8 .icons a {text-decoration: none;}
#sec-8 .icons i {
    background-color: var(--main-color); 
    color: #222533;
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

#sec-8 .links ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
#sec-8 .links ul, #sec-8 .posts ul, #sec-8 .contact ul {list-style-type: none;}
#sec-8 .links ul  details {color: #fff; padding: 10px 5px; text-align: left;}

#sec-8 .posts ul li p, #sec-8 .contact ul li p {display: inline-block; font-size: 1.1rem;}
#sec-8 .posts ul li i, #sec-8 .contact ul li i {font-size: 1.3rem; padding-right: 8px;}
#sec-8 .contact ul li i {display: flex; justify-content: center; align-items: center;}
/* End Sec-8 */

/* Start Footer */
footer {background-color: #1a1c27; color: #FFF; padding: 35px 0px; text-align: center;}
footer p span {color: var(--main-color);}

@media(min-width:576px){
	#sec-3 .container .cards {justify-content: space-between;}
    #sec-6 .cards figure figcaption+img {left: 42%;}
}

/*Mediumdevices(tablets,768pxandup)*/
@media(min-width:768px){
    .container {
        margin-left: auto; margin-right: auto;
		width: 720px;
	}
    
    /* Start Header */
    header .container .contact { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;}
    header .contact span:not(:last-child) {justify-content: flex-start; align-items: center;}
    header .contact span:first-child { width: 33.33%; }
    header .contact span:nth-child(2) { width: 33.33%; }
    header .contact span:last-child { width: 33.33%; display: flex; justify-content: center; align-items: center;}
    /* End Header */
    
    /* Start Sec-0 */
    #sec-0 .container {padding: 15px 0px;}
    #sec-0 .container .menu {display: none;}
    #sec-0 .container .links {display: block;}
    #sec-0 .container .links li {display: inline-block; padding: 0px 10px;}
    #sec-0 .container .links li a {color: #fff; text-decoration: none;}
    #sec-0 .container .links ul i {color: var(--main-color);}
    /* End Sec-0 */

    /* Start Sec-2 */
    #sec-2 .container { display: flex; justify-content: space-between; align-items: center;}
    #sec-2 .container .txt { max-width: 55%;}
    #sec-2 img { max-width: 40%; margin-top: 0px;}
    /* End Sec-2 */

    /* Start Sec-3 */
    #sec-3 .container .cards {justify-content: space-evenly;}
    /* End Sec-3 */
    
    /* Start Sec-4 */
    #sec-4 .container:last-child {display: flex; justify-content: space-between; align-items: center;}
    #sec-4 .container:last-child figure {width: calc((100%/3) - 15px);}
    /* End Sec-4 */
    
    /* Start sec-5 */
    #sec-5 .container img:first-of-type {width: 100%;}
    #sec-5 .container .box img {max-width: calc((100%/2) - 10px);}
    #sec-5 .container .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    #sec-5 .container .imgs {padding-bottom: 80px;}
    /* End Sec-5 */

    /* Start Sec-6 */
    #sec-6 .cards {display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap;}
    #sec-6 .cards figure:first-of-type, #sec-6 .cards figure:nth-child(2)  {width:calc((100%/2) - 20px);}
    #sec-6 .cards figure:last-of-type {width: 50%;}
    #sec-6 .cards figure figcaption+img {left: 38%;}
    /* End Sec-6 */

    /* Start Sec-7 */
    #sec-7 .container form {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    #sec-7 form input:first-of-type, #sec-7 form input:nth-child(2) {width: 49%;}
    #sec-7 form input:nth-child(3) { width: 80%;}
    #sec-7 form input:last-of-type {width: 18%;}
    /* End Sec-7 */

    /* Start Sec-8 */
    #sec-8 .container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #sec-8 .container div:first-of-type {width: 100%;}

    #sec-8 .container div {width: 50%;}

    /* End Sec-8 */
}

/*Largedevices(desktops,992pxandup)*/
@media(min-width:992px){
    .container {
		width: 930px;
	}

    /* Start Header */
    header .container .contact {width: 65%;}
    header .container .social {width: 15%;}
    header .container { display: flex; justify-content: space-between; align-items: center;}
    header .container .contact { display: flex; justify-content: flex-start; align-items: center;}
    header .container i { font-size: 1.1rem; }
    /* End Header */

    /* Start Sec-0 */
    #sec-0 .txt h1 {font-size: 1.8rem;}
    #sec-0 .container .links li a {font-size: 1.1rem;}
    /* End Sec-0 */

    /* Start Sec-3 */
    #sec-3 .container .cards {justify-content: space-between;}
    /* End Sec-3 */

    /* Start sec-5 */
    #sec-5 .container .imgs {display: flex; justify-content: space-between;}
    #sec-5 .container .imgs img[src*='gallery1'] {width: 49%;}
    #sec-5 .container .imgs .box {width: 50%; align-content: space-between;}
    /* End Sec-5 */

    /* Start Sec-6 */
    #sec-6 .cards {justify-content: space-between;}
    #sec-6 .cards figure:first-of-type, #sec-6 .cards figure:nth-child(2), #sec-6 .cards figure:last-of-type   {width:32%;}
    /* End Sec-6 */

    /* Start Sec-7 */
    #sec-7 .container {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
    #sec-7 .contact h1 {font-size: 1.6rem;}
    /* End Sec-7 */

    /* Start Sec-8 */
    #sec-8 .container div:nth-child(1) {width: 30%; text-align: left;}

    #sec-8 .container div {width: calc((100%/4) - 40px);}
    #sec-8 .links ul{flex-wrap: nowrap; flex-direction: column; align-items: flex-start; padding-left: 40px;}
    /* End Sec-8 */
}

/*Extralargedevices(largedesktops,1200pxandup)*/
@media(min-width:1200px){
    .container {
		width: 1140px;
	}

    /* Start Sec-1 */
    #sec-1 h3 {font-size: 2.4rem;}
    #sec-1 h1 {font-size: 4rem;}
    #sec-1 p {font-size: 1.2rem;}
    /* End Sec-1 */
    
    /* Start Sec-2 */
    #sec-2 .txt h1 {font-size: 2.7rem;}
    #sec-2 .txt h3 {font-size: 1.8rem;}
    #sec-2 p {font-size: 1.1rem;}
    /* End Sec-2 */
}