@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



@font-face {
    font-family: 'ReplicaLL';
    src: url('../fonts/ReplicaLL-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ReplicaLL';
    src: url('../fonts/ReplicaLL-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ReplicaLL';
    src: url('../fonts/ReplicaLL-Light.otf') format('opentype');
    font-weight: 300; /* Light weight */
    font-style: normal;
}

@font-face {
    font-family: 'ReplicaLL';
    src: url('../fonts/ReplicaLL-RegularItalic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}


body {
    font-family: 'ReplicaLL';
    overflow-x: hidden;
    background-image: url(../images/black_bg.png);
    background-repeat: repeat-y;
    background-position: center -675px;
}

ul {
	list-style:none;
	padding:0;
	margin:0;
    font-family: 'ReplicaLL';
}
html {
      scroll-behavior: smooth;
    }
h1, h2, h3, h4, h5, h6 {
  font-family: 'ReplicaLL';
}

a:hover {
	text-decoration:none!important;
}
.container {
    max-width: 1250px!important;
	padding: 0 15px;
	position:relative;
	z-index:99;
}
header {
    width: 100%;
    padding: 0 0;
    z-index: 999;
    position: relative;
}
#myHeader {
    background-color: #fdf9f0;
    padding: 20px 15px 20px 0;
    border-bottom: solid 2px #fd4200;
    background-image: url(../images/header_bg.jpg);
    background-repeat: repeat-y;
    background-position: center;
	    background-size: 101% auto;
}
.menu_round {
    display: none;
}
.btn-toggle {
    position: fixed;
    left: 15px;
    top: 40px;
}
a.menu_round.btn-toggle img {
    width: 37px;
}
.main_menu {
    display: flex;
    margin: 0 0 0;
    padding: 0;
    transition: all .5s ease;
}
.main_menu li {
    margin: 0 10px;
    font-size: 16px;
    text-transform: uppercase;
}
.main_menu li a {
    font-weight: 400;
    color: #000;
	transition: all .5s ease;
	position:relative;
	display: block;
    padding: 3px 13px 1px;
}
.main_menu li.active a {
    display: block;
    padding: 3px 13px 1px;
    background-color: #f15b24;
    border-radius: 50px;
}
.mobile_menu {
	display:none;
}
.contact_menu {
    display: flex;
	justify-content:flex-end;
    margin: 0 0 0;
    padding: 0;
    transition: all .5s ease;
}
.contact_menu li {
    margin: 0;
    font-size: 22px;
	text-transform: uppercase;
}
.contact_menu li a {
    font-weight: 700;
    color: #000;
	transition: all .5s ease;
	position:relative;
	position:relative;
	display: block;
    padding: 3px 13px 1px;
}
.contact_menu li.active a {
    display: block;
    padding: 3px 13px 1px;
    color: #f15b24;
    border-radius: 50px;
}
/*ul.menu_bar li:hover a:after, ul.menu_bar li.active a:after {
    position: absolute;
    left: 0;
    bottom: -7px;
    content: "";
    width: 30px;
    height: 3px;
    background-color: #2E9AFF;
    border-radius: 30px;
}*/
.menu_bar li:hover a, .menu_bar li.active a {
    color: #ddd;
}
a.logo {
    display: block;
    width: 365px;
    margin: 0 auto;
}
a.logo img {
    width: 100%;
}
a.logo_mobile {
    display: none;
}


/*.banner_wrapper {
    background-image: url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 900px;
}*/
.banner_slider .owl-stage-outer {
    padding: 0;
}
.banner_wrapper .container {
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 100% !important;
    justify-content: center;
    align-items: center;
}
.banner_wrapper h1 {
    color: #fff;
    font-size: 56px;
	    letter-spacing: -2px;
}
.banner_wrapper .container article {
    width: 965px;
}



.intro_wrapper {
    background-color: #fdf9f0;
    border-top: solid 2px #fd4200;
	border-bottom: solid 2px #fd4200;
    padding: 50px 0;
    background-image: url(../images/welcome_bg.jpg);
    background-repeat: no-repeat;
    background-position: right center;
	background-size: 498px auto;
}
.intro_wrapper h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'ReplicaLL' !important;
}
.intro_wrapper article h3 {
    font-size: 35px;
    color: #5f6060;
    font-weight: 600;
    margin: 0;
}
.intro_wrapper article p {
    font-size: 34px;
    color: #5f6060;
    font-weight: 300;
    line-height: 40px;
}
.intro_wrapper ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 -10px;
}
.intro_wrapper li {
    font-size: 34px;
    color: #5f6060;
    font-weight: 300;
    line-height: 28px;
    padding: 0 10px;
    border-right: solid 4px #f04f14;
    margin: 10px 0;
}
.intro_wrapper li strong {
    font-size: 35px;
    color: #5f6060;
    font-weight: 600;
    margin: 0;
}
.intro_wrapper section label {
    font-size: 28px;
    color: #5f6060;
    font-weight: 300;
    line-height: 40px;
    display: block;
    margin: 25px 0 0;
    font-style: italic;
}







.home_image {
	background-image: url(../images/home_image.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 800px;
}
.testimonial_wrapper {
    background-color: #fdf9f0;
    padding: 50px 0;
}
.testimonial article {
    padding: 0 40px;
}
.testimonial article p {
    text-align: center;
    font-weight: 300;
    color: #000;
}
.testimonial article h4 {
    text-align: center;
    color: #f15b24;
    font-weight: 700;
}
.testimonial .owl-stage-outer {
    padding: 0;
}





footer {
    background-color: #f15b24;
}
.footer_inner {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    padding: 70px 30px 30px;
    background-image: url(../images/footer_bg.jpg);
    background-repeat: no-repeat;
    background-position: 30% center;
}
.footer_logo {
    display: block;
    width: 190px;
}
.footer_logo img {
    width: 100%;
}
ul.footer_menu {
    display: flex;
}
ul.footer_menu li {
    margin: 0 0 0 25px;
    text-transform: uppercase;
    font-size: 14px;
    opacity: 0.7;
}
ul.footer_menu li a {
    color: #fff;
    font-weight: 300;
}
ul.footer_social {
    display: flex;
    justify-content: end;
    margin: 15px 0 0;
}
ul.footer_social li {
    margin: 0 0px 0 12px;
    opacity: 0.7;
}
ul.footer_social li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 30px;
    font-size: 12px;
	color:#f15b24;
}
ul.footer_social li a.social_tag {
    width: auto;
    height: auto;
    background-color: transparent;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 300;
}
a.x_icon {
    background-image: url(../images/twitter.png);
    background-size: 11px auto;
    background-position: center;
    background-repeat: no-repeat;
}
.copyright {
    width: 100%;
    margin: 0;
}
.copyright p {
    margin: 0;
    font-size: 14px;
    text-align: center;
    color: #f15b24;
    padding: 10px 0;
    background-color: #faaa82;
}











.about_banner {
    background-image: url(../images/about_banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 635px;
}



.about_content {
    background-color: #fdf9f0;
    border-top: solid 2px #fd4200;
    border-bottom: solid 2px #fd4200;
    padding: 50px 0;
    background-image: url(../images/about_bg.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 464px auto;
}
.about_content h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'ReplicaLL' !important;
}
.about_content section p {
    font-size: 34px;
    color: #5f6060;
    font-weight: 300;
    line-height: 40px;
    margin: 35px 0 0;
}

.about_image {
	background-image: url(../images/about_bottom_banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 925px;
}









.project_banner {
	background-image: url(../images/project_banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 635px;
}

.project_content {
    background-color: #fdf9f0;
    border-top: solid 2px #fd4200;
    padding: 50px 0;
    background-image: url(../images/project_bg.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 464px auto;
}
.project_content h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'ReplicaLL' !important;
}
.project_content h3 {
    font-size: 35px;
    color: #5f6060;
    font-weight: 600;
    margin: 0;
}
.project_content section p {
    font-size: 34px;
    color: #5f6060;
    font-weight: 300;
    line-height: 40px;
    margin: 35px 0 0;
}
.project_content article {
    margin: 45px 0 0;
}
.project_content article p {
    margin: 20px 0 0;
}
ul.btn_wrapper {
    display: flex;
    margin: 15px 0 0;
}
ul.btn_wrapper li {
    padding: 1px 10px 0 0;
    margin: 0 10px 0 0;
    border-right: solid 2px #f15b24;
}
ul.btn_wrapper li:last-child {
    border-right: none;
}
ul.btn_wrapper li a {
    color: #f15b24;
    font-size: 34px;
    font-weight: 300;
    line-height: 30px;
    display: block;
    margin: -4px 0 0;
    min-height: 34px;
}


.projects_list {
    margin: 0 0 30px;
    border-top: solid 2px #fd4200;
    border-bottom: solid 2px #fd4200;
}
.projects_list article {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 670px;
}
.projects_list img {
    width: auto;
    transition: all .5s ease;
    height: 105%;
}
.projects_list section {
	position:relative;
}
.projects_list section:hover img {
    width: auto;
	height: 100%;
}
.more_btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 15px 0;
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.more_btn h6 {
    width: 100%;
    color: #fff;
    font-size: 30px;
    margin: 0 0 20px;
    text-transform: uppercase;
    font-weight: 700;
}
.more_btn a {
    display: block;
    padding: 7px 28px;
    background-color: #f15b24;
    color: #fff;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 15px;
    border-radius: 35px;
}
.project_content section ul {
    margin: 35px 0 0;
}
.project_content section li {
    font-size: 30px;
    color: #5f6060;
    font-weight: 300;
    line-height: 40px;
    margin: 10px 0 0;
}
.project_content h2 span {
    display: inline-block;
    font-size: 24px;
    padding: 7px 28px;
    background-color: #f15b24;
    color: #fff;
    text-transform: uppercase;
    border-radius: 35px;
    margin: 0 0 0 15px;
    position: relative;
    top: -5px;
}








.contact_banner {
    background-image: url(../images/contact_banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 635px;
}
.contact_content {
    background-color: #fdf9f0;
    border-top: solid 2px #fd4200;
    border-bottom: solid 2px #fd4200;
    padding: 200px 0;
    background-image: url(../images/contact_bg.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 466px auto;
}
.contact_content h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'ReplicaLL' !important;
}
.contact_content section p {
    font-size: 34px;
    color: #6f6f70;
    font-weight: 400;
    line-height: 40px;
    margin: 35px 0 0;
}
.contact_content form {
    padding: 0 10px;
    margin: 170px 0 0;
}
.contact_content form input {
    border: solid 1px #fd4200 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    height: 45px !important;
    padding: 0 15px !important;
    text-align: center;
    font-weight: 400 !important;
    text-transform: uppercase;
    font-size: 15px !important;
}
.contact_content form textarea {
    border: solid 1px #fd4200 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    height: 100px !important;
    padding: 15px !important;
    text-align: center;
    font-weight: 400 !important;
    text-transform: uppercase;
    font-size: 15px !important;
}
.field_wrap {
    margin: 20px 0 0;
    padding: 0 10px;
}
.contact_content form button.btn.btn-primary {
    background-color: #f15b24;
    border: none;
    padding: 8px 30px;
    font-size: 22px;
    border-radius: 30px;
    margin: 20px 0 0 -10px;
    font-weight: 700;
}



.error-form {
    color:red;
}
.response-messages {
    text-align:center;
}

.success-form {
    display: block;
    padding: 5px;
    width: 100%;
    background-color: green;
    color: #fff;
    margin-top: 10px;
    border-radius: 6px;
}

.error-response {
    display: block;
    padding: 5px;
    width: 100%;
    background-color: red;
    color: #fff;
    margin-top: 10px;
    border-radius: 6px;
}










@media (min-width:250px) and (max-width: 1370px) {
.about_content {
    background-size: 310px auto;
}
.project_content {
    background-size: 365px auto;
}
.contact_content {
    background-size: 310px auto;
}
}



@media (min-width:250px) and (max-width: 1260px) {
/*#myHeader {
    background-size: 1030px auto;
}*/
a.logo {
    width: 280px;
}
.footer_logo {
    width: 140px;
}
.intro_wrapper h2, .about_content h2, .project_content h2, .contact_content h2 {
    font-size: 30px;
	margin: 0 0 20px;
}
.intro_wrapper article h3, .project_content h3 {
        font-size: 26px;
        margin: 0 0 5px;
}
.intro_wrapper article p, .about_content section p, .project_content section p, ul.btn_wrapper li a, .contact_content section p {
    font-size: 26px;
	line-height: 30px;
	        margin: 0 0 35px;
}
.intro_wrapper li strong {
    font-size: 26px;
}	
.intro_wrapper li {
    font-size: 26px;
    line-height: 22px;
    border-right: solid 1px #f04f14;
}
.intro_wrapper section label {
    font-size: 24px;
}
.home_image {
    height: 490px;
}

.about_banner, .project_banner, .contact_banner {
    height: 400px;
}
.about_image {
    height: 530px;
}
}




@media (min-width:250px) and (max-width: 1150px) {
.main_menu li {
    margin: 0 7px;
    font-size: 14px;
}	
.main_menu li a {
    padding: 3px 10px 1px;
    font-size: 14px;
}	
.banner_wrapper h1 {
    font-size: 40px;
}
}




@media (min-width:250px) and (max-width: 1024px) {
.contact_content {
    padding: 65px 0;
}	
}


@media (min-width:250px) and (max-width: 900px) {
.menu_round {
    display: block;
}	
#sidebar.active {
        left: 0;
}
#sidebar {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #fdf9f0;
        left: 100%;
        top: 0;
        transition: all 500ms ease;
        justify-content: normal;
        padding: 112px 0 0;
}
    #sidebar ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: block;
        width: 100%;
    }
    #sidebar ul li {
        padding: 10px 18px;
        color: #000;
        border-bottom: solid 1px #fd4200;
    }
	#sidebar ul li.active {
		background-color: #f15b24;
	}
	#sidebar ul li a {
        display: block;
        padding: 10px 0px;
    }	
.logo_wrapper {
    display: none;
}
a.logo_mobile {
    display: block;
    width: 230px;
    margin: 0 auto;
}
a.logo_mobile img {
    width: 100%;
}
.col-12.col-sm-12.col-md-6.col-lg-4.d-flex.align-items-center.menu_wrapper {
    max-width: 100%;
    flex: 0 0 100%;
}	
}



@media (min-width:250px) and (max-width: 991px) {
.header_right {
    display: none !important;
}
a.logo {
    width: 280px;
    margin: 0;
}
.mobile_menu {
    display: block;
}
.about_content {
    background-size: 250px auto;
	    background-position: left 0;
}
.contact_content {
    background-size: 245px auto;
}
}



@media (min-width:250px) and (max-width: 767px) {
#myHeader {
    border-bottom: solid 1px #fd4200;
}	
.intro_wrapper {
    background-image: none;
	border-top: solid 1px #fd4200;
}
.intro_wrapper h2, .about_content h2, .project_content h2, .contact_content h2 {
    font-size: 24px;
}
.intro_wrapper article h3, .project_content h3 {
    font-size: 20px;
}
.intro_wrapper article p, .about_content section p, .project_content section p, ul.btn_wrapper li a, .contact_content section p {
    font-size: 20px;
    line-height: 27px;
}
.intro_wrapper li strong {
    font-size: 20px;
}
.intro_wrapper li {
    font-size: 20px;
    line-height: 18px;
}
.intro_wrapper section label {
        font-size: 20px;
        line-height: 25px;
}
.home_image {
        height: 270px;
}
.footer_inner {
    background-position: 0% -90px;
}

.about_banner, .project_banner, .contact_banner {
    height: 300px;
}
.about_image {
    height: 400px;
}
.about_content {
    border-top: solid 1px #fd4200;
    border-bottom: solid 1px #fd4200;
    background-image: none;
}
.project_content {
    background-image: none;
	border-top: solid 1px #fd4200;
    border-bottom: solid 1px #fd4200;
	    margin: 0 0 10px;
}
.contact_content {
	background-image: none;
	border-top: solid 1px #fd4200;
    border-bottom: solid 1px #fd4200;
}
.projects_list {
    margin: 0;
    border-top: none;
    border-bottom: none;
}
.projects_list section {
    border: solid 2px #fd4200;
    padding: 10px;
    margin: 10px 20px;
}
.contact_content form {
    padding: 0 7px;
    margin: 15px 0 0;
}
.contact_content form input {
    text-align: left;
}
.contact_content form textarea {
    text-align: left;
}
.banner_wrapper h1 {
        font-size: 30px;
    }
}
.error-form {
    color:red;
}
.response-messages {
    text-align:center;
}

.success-form {
    display: block;
    padding: 5px;
    width: 100%;
    background-color: green;
    color: #fff;
    margin-top: 10px;
    border-radius: 6px;
}

.error-response {
    display: block;
    padding: 5px;
    width: 100%;
    background-color: red;
    color: #fff;
    margin-top: 10px;
    border-radius: 6px;
}


@media (min-width:250px) and (max-width: 576px) {
    a.logo_mobile {
        width: 160px;
    }	
	.btn-toggle {
    top: 28px;
}
.about_banner, .project_banner, .contact_banner {
    height: 250px;
}	
.footer_inner {
    display: block;
    text-align: center;
    padding: 30px;
	background-position: -70px bottom;
}
.footer_logo {
        width: 140px;
        margin: 0 auto 30px;
}
ul.footer_menu {
    justify-content: center;
}
ul.footer_social {
    justify-content: center;
    flex-wrap: wrap;
}
ul.footer_social li:last-child {
    width: 100%;
    margin: 5px 0 0;
}
.banner_wrapper h1 {
        font-size: 24px;
    }
}