/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */

/* ### general ### */
html,
body { font-family: 'Segoe UI', sans-serif; font-weight: normal; font-size: 16px; color: #fff; line-height: 1.5; }
body { background: #2c2c2c; }
img { display: block; border: 0; max-width: 100%; }
:focus { outline: none; }
a { text-decoration: none; }

.footerBox ul,
.menuBox ul { list-style: none; }

.welcomeBox.inner .content ul {
	padding-left: 20px;
}

h1 { font-size: 40px; font-weight: 600; }
h2 { font-size: 40px; font-weight: 600; }

h1 span,
h2 span { color: #599c7e; }

/* ### global classes ### */
.container { max-width: 1390px; }
.btn { padding: 11px 18px; font-size: 16px; font-weight: bold; display: inline-block; color: #fff; transition: all 0.3s; }
.btn-primary { background-color: #599c7e; border: 1px solid #599c7e; }
.btn-primary:hover { background-color: #4d9273; border: 1px solid #4d9273; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { padding-top: 24px; padding-bottom: 36px; position: fixed; top: 0; left: 0; z-index: 9; background-color: #2c2c2c; width: 100%; }
#headerCntr .site-logo { position: relative; z-index: 5; width: 70%; }
#headerCntr .hamburger-btn { width: 30%; }

/* ### hamburger container ### */
.hamburger { position: relative; font-weight: 600; color: #7c7b7b; background-color: #7c7b7b; transition: all 0.3s; height: 30px; width: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: auto;  }
.hamburger span { margin: 0 auto; position: absolute; display: block; width: 16px; background-color: #2c2c2c; transition: all 0.3s; }
.hamburger span:before,
.hamburger span:after { position: absolute; display: block; width: 100%; height: 2px; background-color: #2c2c2c; transition: all 0.3s; content: ''; }
.hamburger span:before { top: -4px; }
.hamburger span:after { bottom: -4px; }
.hamburger.active { background-color: #599c7e; z-index: 5; }
.hamburger.active span { background: none; }
.hamburger.active span:before { top: 0; width: 100%; transform: rotate(135deg); background-color: #fff; }
.hamburger.active span:after { bottom: -2px; width: 100%; transform: rotate(-135deg); background-color: #fff; }
.hamburger.active em { display: none; }
.hamburger em { text-transform: uppercase; font-size: 14px; font-weight: bold; font-style: normal; color: #7c7b7b; margin-right: 92px; }

/* ### menu box ### */
.menuBox { padding: 137px 60px 60px; position: absolute; top: 0; right: 0; left: 50%; margin-left: 432px; z-index: 2; background-color: rgba(89,156,126,0.95); border-radius: 0 0 0 5px; opacity: 0; visibility: hidden; transition: all 0.5s;  }
.menuBox.active { opacity: 1; visibility: visible; display: block !important; }
.menuBox ul > li { margin-bottom: 30px; }
.menuBox ul > li:first-child a:after { width: 9px; height: 9px; border-style: solid; border-width: 2px 2px 0 0; content: ''; display: inline-block; vertical-align: middle; transform: rotate(135deg); margin-left: 17px; margin-top: -6px; }
.menuBox ul > li:last-child { margin-bottom: 0; }
.menuBox ul > li > a { color: #fff; font-size: 21px; font-weight: bold; }
.menuBox ul > li > ul { margin-top: 12px; }
.menuBox ul > li > ul > li { margin-bottom: 10px;}
.menuBox ul > li > ul > li > a { display: flex; align-items: center; font-size: 16px; font-weight: 600; }
.menuBox ul > li > ul > li > a:after { display: none !important; }
.menuBox ul > li > ul > li > a > span { display: inline-block; margin-left: 13px; }

/* ### content container ### */
#contentCntr { width: 100%; }

/* ### banner box ### */
.bannerBox { position: relative; min-height: 1072px; margin-bottom: 100px; padding-bottom: 75px; }
.bannerBox:after { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 280px; content: ''; background:  linear-gradient(to bottom, rgba(44,44,44,0) 0%, rgba(44,44,44,1) 80%); }
.bannerBox:before { background: url('../images/banner-line.png') no-repeat; height: 100%; width: 100%; content: ''; position: absolute; top: 0; left: 0; z-index: 1; }
.bannerBox .banner-icons { position: relative; z-index: 2; max-width: 1050px; }
.bannerBox span { display: block; margin-left: 15px; font-size: 21px; font-weight: bold; }
.bannerBox .banner-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bannerBox .image { width: 100%; }
.bannerBox .image img { width: 100%; object-fit: cover; object-position: center center; height: 1072px; }
.bannerBox .slick-arrow { font-size: 0; background-color: transparent; border: 0; color: #fff; }
.bannerBox .slick-next,
.bannerBox .slick-prev { position: absolute; bottom: 93px; right: 50%; margin-right: -620px; width: 9px; height: 13px; border-style: solid; border-width: 2px 2px 0 0; content: ''; display: inline-block; vertical-align: middle; cursor: pointer; z-index: 2; }
.bannerBox .slick-next { transform: rotate(50deg); }
.bannerBox .slick-prev { transform: rotate(-135deg); margin-right: -560px; }
.bannerBox.inner { min-height: 540px; padding-bottom: 0; }
.bannerBox.inner .image img { height: 540px; }
.bannerBox.inner-1 { min-height: 760px; }
.bannerBox.inner-1 .image img { height: 760px; }
.bannerBox.inner-1 .slick-next,
.bannerBox.inner-1 .slick-prev { bottom: 200px; }
.bannerBox.inner-1 .slick-prev { margin-right: -590px; }
.bannerBox .scroll-down { position: absolute; right: 50%; bottom: 84px; margin-right: -593px; width: 19px; height: 33px; border: 2px solid #fff; border-radius: 50px; z-index: 2; }
.bannerBox .scroll-down:before { position: absolute; top: 10%; left: 50%; opacity: 1; width: 2px; height: 8px; border-radius: 50px; background-color: #fff; transform: translateX(-50%); -webkit-animation: wheel 2s infinite; animation: wheel 2s infinite; content: ''; }

/* ### copy box ### */
.welcomeBox { position: relative; z-index: 1; }
.welcomeBox .box { position: relative; margin-left: -176px; padding-right: 58px; }
.welcomeBox .box:before { height: 240px; width: 240px; background-color: #599c7e; content: ''; border-radius: 5px; position: absolute; top: 44%; left: 52%; transform: translate(-50%, -50%); z-index: -1; }
.welcomeBox .box .row { margin: 0 -10px 20px; }
.welcomeBox .item { padding: 0 10px; margin-bottom: 20px; }
.welcomeBox .image { position: relative; }
.welcomeBox .image img { object-position: center center; object-fit: cover; border-radius: 5px; }
.welcomeBox .image.first img { min-height: 442px; }
.welcomeBox .image.second img { min-height: 336px; }
.welcomeBox .image.third img { min-height: 402px; }
.welcomeBox .image.second { max-width: 390px; }
.welcomeBox .glass { position: absolute; top: -25px; right: 0; }
.welcomeBox .image.second .glass img { min-height: auto; }
.welcomeBox .content { padding-top: 111px; margin-left: -85px; max-width: 530px; }
.welcomeBox h1 { margin-bottom: 40px; }
.welcomeBox p { line-height: 1.85; margin-bottom: 30px; }
.welcomeBox p span { font-weight: bold; color: #599c7e; }
.welcomeBox .btn.d-lg-phone { display: none; }
.welcomeBox.inner { margin-top: -225px; }
.welcomeBox.inner .box { margin-left: 0; margin-right: -176px; padding-right: 0; padding-left: 58px; }
.welcomeBox.inner .content { margin-left: 0; margin-right: -85px; }

.js-project-slider .slick-track {margin: 0;}

.contactFormBox {    margin-top: -30px;
	margin-bottom: 80px;
	position: relative;
	z-index: 1;
}

.contactFormBox textarea {
	width: 100%;
	height: calc(100% - 29px);
	min-height: 200px;
}

.contactFormBox .btn-wrapper {
	padding-top: 60px;
}

.contactFormBox h2 {
	margin-bottom: 52px;
}

.form-label {
	color: #7c7b7b;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.form-control {
	background-color: #2c2c2c;
	border-radius: 5px;
	border: 1px solid #7c7b7b;
	color: #fff;
	padding: 10px 16px;
}

.form-control:focus {
	box-shadow: none;
	background-color: transparent;
	border-color: #7c7b7b;
	color: #fff;
}

.btn:focus {
	box-shadow: none!important;
}

.btn.btn-primary:focus {
	background-color: #599c7e;
}

select option {
	background-color: #fff;
	color: #2c2c2c;
}

/* ### usp box ### */
.uspBox { position: relative; padding-top: 189px; padding-bottom: 189px; margin-top: -100px; }
.uspBox .row { max-width: 1050px; padding-left: 130px; position: relative; z-index: 1; }
.uspBox .text { padding-left: 50px; position: relative; z-index: 1; font-size: 21px; font-weight: 600; }
.uspBox .text span { display: block; }
.uspBox .check { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.uspBox .image { position: absolute; top: 0; right: 0; width: 93%; height: 100%; z-index: -1; }
.uspBox .image img { height: 100%; width: 100%; object-position: center center; object-fit: cover; }
.uspBox.inner .check img { width: 40px; }

/* ### project box ### */
.projectBox { margin-top: -30px; margin-bottom: 80px; position: relative; z-index: 1; }
.projectBox h2 { max-width: 350px; margin-bottom: 52px; }
.projectBox .item { padding: 0 26px; }
.projectBox .image { position: relative; cursor: pointer; display: block;  border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); }
.projectBox img { width: 100%; min-height: 369px; object-fit: cover; object-position: center center; border-radius: 5px; }
.projectBox .image:hover:before,
.projectBox .image:hover:after,
.projectBox .image:hover .content  { opacity: 1; visibility: visible }
.projectBox .image:before,
.projectBox .image:after { height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; transition: all 0.3s; opacity: 0; visibility: hidden; }
.projectBox .image:before { background: url('../images/cover-img.png') no-repeat; z-index: 1; }
.projectBox .image:after { background-color: rgba(44,44,44,0.8);  }
.projectBox .content { z-index: 2; text-align: center; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; opacity: 0; visibility: hidden; }
.projectBox .content span { display: block; font-size: 72px; line-height: 0.9; font-weight: 300; margin-bottom: 30px; color: #fff; }
.projectBox .content .btn { font-style: normal; }
.projectBox .view { padding-top: 60px;}
.projectBox .slick-list { margin: 0 -26px; }
.projectBox .slick-arrow { font-size: 0; background-color: transparent; border: 0; color: #fff; }
.projectBox .slick-next,
.projectBox .slick-prev { position: absolute; bottom: -60px; width: 9px; height: 13px; border-style: solid; border-width: 2px 2px 0 0; content: ''; display: inline-block; vertical-align: middle; cursor: pointer; z-index: 2; }
.projectBox .slick-next { transform: rotate(50deg); right: 25px; }
.projectBox .slick-prev { transform: rotate(-137deg); left: 25px; }
.projectBox .project h2 { max-width: 100%; }

/* ### blog box ### */
.blogBox { margin-top: -180px; position: relative; z-index: 1; }
.blogBox .content { padding-top: 70px; }
.blogBox h1 { margin-bottom: 40px; }
.blogBox p { line-height: 1.85; margin-bottom: 40px; }
.blogBox .blogs { padding-left: 40px; }
.blogBox .blogs .row { margin: 0 -29px; }
.blogBox .item { padding: 0 29px; margin-bottom: 58px; }
.blogBox .image { position: relative; border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); cursor: pointer; }
.blogBox .image:hover .glass { opacity: 1; visibility: visible;  }
.blogBox img { border-radius: 5px; width: 100%; }
.blogBox .glass { position: absolute; top: -25px; right: -25px; opacity: 0; visibility: hidden; transition: all 0.3s; }
.blogBox .glass img { width: auto; }

/* ### cookies box ### */
.cookiesBox { bottom: 70px; right: 50%; margin-right: -640px; z-index: 5; display: flex; align-items: center; justify-content: center; }
.cookiesBox .box { margin: 0 auto; padding: 27px 27px 29px 28px; position: relative; width: 345px; height: 100%; border-radius: 5px; background-color: rgba(40,40,40,0.95); }
.cookiesBox h4 { margin-bottom: 15px; font-size: 21px; }
.cookiesBox .paragraph { margin-bottom: 30px; line-height: 1.7; color: #fff; }
.cookiesBox p { margin-bottom: 0; }
.cookiesBox .close-button { position: absolute; top: 15px; right: 15px; text-decoration: none; transition: all 0.3s; }

/* ### footer container ### */
#footerCntr { width: 100%; }

/* ### footer box ### */
.footerBox { margin-bottom: 52px; }
.footerBox .logo { margin-bottom: 24px; display: inline-block; }
.footerBox .item { width: 15%; }
.footerBox .item.contact { padding-left: 45px; width: 31%; }
.footerBox .item:last-child { width: 20%; }
.footerBox .title { color: #7c7b7b; font-weight: bold; display: block; margin-bottom: 5px; }
.footerBox em { font-style: normal; font-size: 12px; }
.footerBox address { margin-bottom: 0; color: #7c7b7b; line-height: 1.85; }
.footerBox li { color: #7c7b7b; line-height: 1.85; }
.footerBox li a { color: #599c7e; font-weight: bold; }
.footerBox li a:hover { text-decoration: underline; }

/* ### copyright box ### */
.copyrightBox { padding-top: 34px; padding-bottom: 34px; border-top: 1px solid #343434; }
.copyrightBox p { margin-bottom: 0; font-size: 14px; color: #7c7b7b; }
.copyrightBox li { display: inline-block; margin-right: 11px; }
.copyrightBox li:last-child { margin-right: 0; }
/* #Media Queries
================================================== */

@media only screen and (max-width: 1600px) {
	.uspBox .image { width: 100%; }
	.footerBox .item { width: 17%; }
	.footerBox .item.contact { width: 35%; }
}

@media only screen and (max-width: 1325px) {
	.menuBox { margin-left: 330px; }
	.bannerBox .banner-slide { max-width: 100%; }
	.bannerBox .slick-next,
	.bannerBox .slick-prev { right: 20px; left: auto; margin-right: 0; }
	.bannerBox .slick-prev { right: 70px; margin-right: 0; }
	.bannerBox .scroll-down { margin-right: 0; right: 40px;}
	.bannerBox.inner-1 .slick-prev { right: 70px; margin-right: 0; }

}

@media only screen and (max-width: 1199px) {
	.container { padding-left: 40px; padding-right: 40px; }
	#headerCntr { padding-top: 30px; padding-bottom: 34px; }
	#headerCntr .logo img { width: 255px; }
	.menuBox { width: 284px; padding: 129px 60px 60px; margin-left: 0; left: auto; }
	.bannerBox { padding-bottom: 20px;}
	.bannerBox .banner-slide img { width: auto !important; }
	.bannerBox .slick-next,
	.bannerBox .slick-prev { bottom: 80px; right: 40px; }
	.bannerBox .slick-prev { right: 90px; }
	.bannerBox .item { margin-bottom: 40px; }
	.bannerBox .scroll-down { bottom: 70px; right: 60px;}
	.welcomeBox .content { margin-left: 0; }
	.welcomeBox.inner .content { margin-right: 0; }
	.welcomeBox .box { padding-right: 0; }
	.welcomeBox.inner .box { padding-left: 0; }
	.uspBox { padding-top: 150px; padding-bottom: 150px; }
	.uspBox .row { padding-left: 0; max-width: 100%;  }
	.uspBox .text span { word-break: break-all; }
	.footerBox .item { width: 25%; }
	.footerBox .item.contact { width: 25%; padding-left: 0; }
	.footerBox .item.contact li span { display: none; }
	.footerBox .item:last-child { width: 25%; }
	.blogBox .blogs .row { margin: 0 -20px; }
	.blogBox .item { padding: 0 20px; margin-bottom: 40px; }
	.cookiesBox { right: 0; margin-right: 0; }


}

@media only screen and (max-width: 991px) {
	#headerCntr .logo img { width: 210px; }
	.bannerBox { min-height: 780px; }
	.bannerBox .image img { height: 780px; }
	.bannerBox.inner { min-height: 540px; }
	.bannerBox .item img { width: auto !important; }
	.welcomeBox .image.first img { min-height: 320px; }
	.welcomeBox .image.second { height: 320px; width: 320px; object-fit: cover; object-position: center; }
	.welcomeBox .image.second img { min-height: 280px; }
	.welcomeBox .image.third { max-width: 320px; margin: 0 auto; }
	.welcomeBox .image.third img { min-height: 320px; }
	.welcomeBox .glass { right: -33px; }
	.welcomeBox .btn { display: none; }
	.welcomeBox .btn.d-lg-phone { display: inline-block; }
}

@media only screen and (max-width: 979px) {
	.welcomeBox .item { width: 100%; }
	.welcomeBox .image.second { margin-left: auto; }
	.welcomeBox.inner .image.second { margin: 0; }
	.welcomeBox .content { padding-left: 40px; }
	.welcomeBox.inner .content { padding-left: 0; }
	.welcomeBox .box:before { width: 160px; height: 600px; left: 60%; }
	.welcomeBox.inner .box:before {  left: 36%; }
	.welcomeBox .image.third { margin-left: 170px; }
	.welcomeBox.inner .image {    margin-left: 100px!important;}
	.welcomeBox.inner .image.first { max-width: 320px; margin-left: 0; }
	.welcomeBox.inner .image.third { margin-left: 0;  }
	.uspBox { margin-top: 0; padding-top: 140px; padding-bottom: 70px; }
	.uspBox .item { width: 50%; margin-bottom: 40px; }
	.projectBox .content span { font-size: 48px; }
	.projectBox img { min-height: 320px; }
	.blogBox { margin-top: -240px; }
	.blogBox .left { width: 50%; }
	.blogBox .right { width: 50%; }
	.blogBox .item { width: 100%; }
	.blogBox .item.d-phone { display: none !important; }
	.blogBox .content { padding-top: 140px; }

	.footerBox .item { width: 33.3%; }
	.footerBox .item.contact { width: 33.3%; }
	.footerBox .item:last-child { width: 33.3%; display: none; }
	.copyrightBox ul { display: block !important; }
	.bannerBox.inner-1 .slick-next,
	.bannerBox.inner-1 .slick-prev { right: auto; left: 40px; bottom: 80px; }
	.bannerBox.inner-1 .slick-next { right: auto; left: 70px; }
}

@media only screen and (max-width: 767px) {
	h1,
	h2 { font-size: 30px; }
	.container { padding-left: 25px; padding-right: 25px; }
	#headerCntr { padding-top: 20px; padding-bottom: 27px; }
	#headerCntr .logo img { width: 160px; }
	.hamburger em { display: none; }
	.menuBox { width: 100%; height: 100vh; padding: 112px 30px 45px; overflow-y: scroll; border-radius: 0; }
	.bannerBox { margin-bottom: 50px; }
	.bannerBox.inner { min-height: 400px; }
	.bannerBox.inner .image img { height: 400px; }
	.bannerBox.inner-1 { min-height: 530px; }
	.bannerBox.inner-1 .image img { height: 530px; }
	.bannerBox span { font-size: 16px; }
	.bannerBox .box img { width: 40px !important; }
	.bannerBox .slick-prev { right: 70px; }
	.bannerBox.inner-1 .slick-next,
	.bannerBox.inner-1 .slick-prev { right: 40px; left: auto; bottom: 70px; }
	.bannerBox.inner-1 .slick-prev { right: 70px; left: auto; }
	.welcomeBox.inner { margin-top: -110px; }
	.welcomeBox .box { margin-left: 0; }
	.welcomeBox.inner .box { margin-right: 0; }
	.welcomeBox.inner .image.second,
	.welcomeBox .image.second { max-width: 100%; }
	.welcomeBox.inner .image.third,
	.welcomeBox .image.third { max-width: 100%; margin-left: 0; }
	.welcomeBox.inner .image.third { margin-left: 0; }
	.welcomeBox .image.first img,
	.welcomeBox .image.second img,
	.welcomeBox .image.third img { min-height: 100%; width: 100%; }
	.welcomeBox .image.second {width: unset; height: unset;}
	.welcomeBox.inner .image.first { max-width: 100%; margin-left: 0; }
	.welcomeBox.inner .image {margin-left: unset!important;}
	.welcomeBox.inner .box:before { left: 53%; }
	.welcomeBox .box:before { left: 53%; }
	.welcomeBox .content { padding-top: 0; padding-left: 0; margin-bottom: 70px; max-width: 100%; }
	.uspBox { padding-top: 25px; padding-bottom: 50px; }
	.uspBox .item { width: 100%; margin-bottom: 25px; }
	.projectBox .view { padding-top: 30px;}
	.projectBox .view span { display: none; }
	.blogBox { margin-top: -70px; }
	.blogBox .left { width: 100%; margin-bottom: 55px; }
	.blogBox .right { width: 100%; }
	.blogBox .blogs { padding-left: 0; }
	.blogBox .content { padding-top: 0; }
	.blogBox .glass { right: -20px; }
	.blogBox .glass img { width: 74px; }
	.cookiesBox .box { width: 100%; }
	.footerBox { margin-bottom: 15px; }
	.footerBox .item { width: 100%; margin-bottom: 22px; }
	.footerBox .item.contact { width: 100%; padding-left: 15px; }
	.copyrightBox { padding-top: 25px; padding-bottom: 25px; }
	.copyrightBox p span { display: none; }
	.copyrightBox ul { width: 100%; margin-top: 18px !important; }
}