.montserrat-thin {font-family: "Montserrat", sans-serif; font-weight: 100; font-style: normal;}
.montserrat-extralight {font-family: "Montserrat", sans-serif; font-weight: 200; font-style: normal;}
.montserrat-light {font-family: "Montserrat", sans-serif; font-weight: 300; font-style: normal;}
.montserrat-regular {font-family: "Montserrat", sans-serif; font-weight: 400; font-style: normal;}
.montserrat-medium {font-family: "Montserrat", sans-serif; font-weight: 500; font-style: normal;}
.montserrat-semibold {font-family: "Montserrat", sans-serif; font-weight: 600; font-style: normal;}
.montserrat-bold {font-family: "Montserrat", sans-serif; font-weight: 700; font-style: normal;}
.montserrat-extrabold {font-family: "Montserrat", sans-serif; font-weight: 800; font-style: normal;}
.montserrat-black {font-family: "Montserrat", sans-serif; font-weight: 900; font-style: normal;}

/*.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}*/

html, body{font-family: "Montserrat", sans-serif; font-size: 1.1rem; line-height: 1.6; font-weight: 400; color: #171717; background:#ffffff;}
body.doNotScroll{overflow:hidden; height:100vh;}
*:focus {outline: none;}
h1, .h1{margin: 0 0 30px 0; padding: 0; font-weight: 700; font-size: 40px; line-height: 1;}
h2, .h2{margin: 0 0 30px 0; padding: 0; font-weight: 700; font-size: 30px; line-height: 1;}
h3, .h3{margin: 0 0 30px 0; padding: 0; font-weight: 700; font-size: 26px; line-height: 1;}
a{text-decoration:none; color:inherit; outline:none;}
a:hover{color: inherit;}
img{height: auto; width: 100%;}
p{margin:0 0 20px 0;}
p:last-child{margin:0;}
hr.delimiter{margin: 30px 0; height: 2px; background: #ff6663; opacity: 1; border-radius: 1px;}
.transition2s{transition:all 0.2s linear 0s; -webkit-transition:all 0.2s linear 0s; -moz-transition:all 0.2s linear 0s; -o-transition:all 0.2s linear 0s; -ms-transition:all 0.2s linear 0s;}
.transition3s{transition:all 0.3s linear 0s; -webkit-transition:all 0.3s linear 0s; -moz-transition:all 0.3s linear 0s; -o-transition:all 0.3s linear 0s; -ms-transition:all 0.3s linear 0s;}
.nonMobile{display: none;}
.mobile {display:inherit;}

#menuToggle{position: fixed; right: 15px; top: 77px; z-index: 11; display: block; padding: 10px; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background: #fff; border-radius: 3px;}
#menuToggle span{display: block; width: 30px; height: 2px; margin-bottom: 5px; position: relative; background: #ff6663; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
#menuToggle span:last-child{margin: 0;}
#menuToggle span:first-child{transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){transform-origin: 0% 100%; width: 20px;}
#menuToggle.active{}
#menuToggle.active span{transform: rotate(-39deg) translate(-1px, -2px);}
#menuToggle.active span:nth-last-child(3){opacity: 1; transform: rotate(39deg) translate(0px, -1px);}
#menuToggle.active span:nth-last-child(2){opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}

header{padding: 20px;}
header .content{display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center;}
header .content .headerLogo{width: 250px;}
header .content .headerMenu{position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; z-index: 10; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 20px; list-style: none; padding: 0; transform: translateX(-100%); transition:all 0.2s linear 0s; -webkit-transition:all 0.2s linear 0s; -moz-transition:all 0.2s linear 0s; -o-transition:all 0.2s linear 0s; -ms-transition:all 0.2s linear 0s;}
header .content .headerMenu.open{transform: none;}
header .content .headerMenu li{font-weight: 600; width: 100%;}
header .content .headerMenu li a{display: flex; align-items: center; justify-content: center; gap: 10px; white-space: pre;}
header .content .headerMenu li a.active{color: #ff6663;}
header .content .headerMenu li .subMenu{padding: 20px; min-width: 200px; position: relative; display: none; text-align: center; left: auto; width: 90%; border: 1px solid #ff6663; border-radius: 10px; background: #fff; list-style: none; font-size: 19px; margin: 15px auto 0 auto;}
header .content .headerMenu li .subMenu li{padding: 5px 0;}
header .content .headerMenu li .subMenu li a{}
header .content .headerPhone{font-weight: 600;}

#heroWrapper{}
#heroWrapper .content{}
#heroWrapper .content .imageWrapper{}
#heroWrapper .content .imageWrapper img{}
#heroWrapper .content .textWrapper{padding: 40px; display: flex; flex-direction: column; gap: 25px;}
#heroWrapper .content .textWrapper .titleWrapper{display: flex; flex-direction: column; gap: 10px;}
#heroWrapper .content .textWrapper .titleWrapper .small{font-weight: 500; text-transform: uppercase;}
#heroWrapper .content .textWrapper .titleWrapper .mainTitle{margin: 0; text-transform: uppercase;}
#heroWrapper .content .textWrapper .text{margin: 0; font-weight: 500;}
#heroWrapper .content .textWrapper .button{display: flex; border-radius: 5px; height: 50px; align-items: center; justify-content: center; font-weight: 500; text-transform: uppercase; padding: 0 40px; font-size: 16px;}

#pageHero{display: block; height: 30vh; background-position: center; background-size: cover;}

.box01{padding: 50px 0;}
.box01 .content{display: flex; flex-direction: column; gap: 50px;}
.box01 .content .imageWrapper{width: 170px; margin: 0 auto;}
.box01 .content .textWrapper{display: flex; flex-direction: column; gap: 25px;}
.box01 .content .textWrapper .titleWrapper{display: flex; flex-direction: column; gap: 10px;}
.box01 .content .textWrapper .titleWrapper .small{font-weight: 500; text-transform: uppercase;}
.box01 .content .textWrapper .titleWrapper .mainTitle{margin: 0; text-transform: uppercase;}
.box01 .content .textWrapper .text{}
.box01 .content .textWrapper .button{font-weight: 600; display: flex; align-items: center; gap: 10px;}

.box02{padding-bottom: 50px;}
.box02 .content{display: flex; flex-direction: column; gap: 50px;}
.box02 .content .item{display: flex; flex-direction: column; gap: 20px;}
.box02 .content .item .icon{width: 100px;}
.box02 .content .item .title{margin: 0; text-transform: uppercase;}
.box02 .content .item .text{}
.box02 .content .item .button{font-weight: 600; display: flex; align-items: center; gap: 10px;}

.box03{}
.box03 .content{display: flex; flex-direction: column; gap: 50px; padding-top: 50px; padding-bottom: 50px; border-radius: 20px;}
.box03 .content .titleWrapper{display: flex; flex-direction: column; gap: 10px;}
.box03 .content .titleWrapper .small{font-weight: 500; text-transform: uppercase;}
.box03 .content .titleWrapper .mainTitle{margin: 0; text-transform: uppercase;}
.box03 .content .projectsWrapper{display: flex; flex-wrap: wrap; gap: 20px;}
.box03 .content .projectsWrapper a{width: calc(calc(100% - 20px) / 2); border-radius: 10px; overflow: hidden;}
.box03 .content .button{display: flex; border-radius: 5px; height: 50px; align-items: center; justify-content: center; font-weight: 500; text-transform: uppercase; padding: 0 40px; font-size: 16px;}

.box04{padding: 88px 0;}
.box04 .content{display: flex; flex-direction: column; gap: 50px; position: relative;}
.box04 .content .titleWrapper{display: flex; flex-direction: column; gap: 10px;}
.box04 .content .titleWrapper .small{font-weight: 500; text-transform: uppercase;}
.box04 .content .titleWrapper .mainTitle{margin: 0; text-transform: uppercase;}
.box04 .content .textWrapper{}
.box04 .content .button{display: flex; border-radius: 5px; height: 50px; align-items: center; justify-content: center; font-weight: 500; text-transform: uppercase; padding: 0 40px; font-size: 16px;}

.ctaButtonWrapper{display: flex; flex-direction: column; padding: 40px; border-radius: 10px; gap: 20px; margin-top: 50px;}
.ctaButtonWrapper .title{margin: 0; text-transform: uppercase; font-weight: 600; line-height: 1.2; text-align: center;}
.ctaButtonWrapper .button{display: flex; border-radius: 5px; height: 50px; align-items: center; justify-content: center; font-weight: 500; text-transform: uppercase; padding: 0 40px; font-size: 16px;}

.contact .leftWrapper{display: flex; flex-direction: column; gap: 30px;}
.contact .rightWrapper{}
.contact #contactForm{display: flex; flex-direction: column; gap: 15px;}
.contact #contactForm input{display: flex; border: none; padding: 0 15px; border-radius: 5px; justify-content: space-between; height: 50px; font-size: 16px; background: #EDF0F2; border: 1px solid #EDF0F2;}
.contact #contactForm textarea{display: flex; border: none; padding: 5px 15px; border-radius: 5px; justify-content: space-between; height: 100px; font-size: 16px; background: #EDF0F2; border: 1px solid #EDF0F2;}
.contact #contactForm button{display: flex; border-radius: 5px; height: 50px; align-items: center; justify-content: center; font-weight: 500; text-transform: uppercase; padding: 0 40px; font-size: 16px; border: none; width: 100%;}

footer{background: #171717; color: #fff; padding: 40px; font-size: 15px;}
footer .content{display: flex; flex-direction: column; gap: 50px;}
footer .content .item{display: flex; flex-direction: column; gap: 10px;}
footer .content .footerLogo{display: block; width: 200px;}
footer .content .footerTitle{font-weight: 600; text-transform: uppercase; margin: 0;}
footer .content .footerContact{display: flex; gap: 10px; align-items: baseline;}
footer .content .footerSocial{display: flex; gap: 15px; font-size: 26px;}
footer .footerBottom{border-top: 1px solid #ff6663; padding-top: 20px; margin-top: 30px; text-align: center;}

#backToTop{bottom: 20px; right: 20px; cursor: pointer; display: none; height: 60px; position: fixed; width: 60px; border-radius: 50%; font-size: 20px; line-height: 50px; text-align: center; z-index: 100; color: #fff; border: 5px solid #fff; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;}

@media (min-width: 768px) {
	html, body{font-size: 1rem;}
	hr.delimiter{margin: 80px 0 0 0;}
	#menuToggle{display: none;}
	header .content{flex-direction: row; justify-content: space-between;}
	header .content .headerMenu{position: relative; flex-direction: row; transform: none; margin: 0; gap: 50px; height: 60px;}
	header .content .headerMenu>li{font-weight: 600; width: 100%; height: 100%; display: flex; align-items: center;}
	header .content .headerMenu>li .subMenu{position: absolute; width: auto; margin: 0; top: 100%;}
	header .content .headerMenu>li .subMenu li a{justify-content: left;}
	header .content .headerMenu>li:hover .subMenu{display: block;}
	#heroWrapper .content{display: flex;}
	#heroWrapper .content .imageWrapper{width: 50%; display: flex;}
	#heroWrapper .content .imageWrapper img {object-fit: cover; object-position: center;}
	#heroWrapper .content .textWrapper{width: 50%; justify-content: center; padding: 100px;}
	#heroWrapper .content .textWrapper .button{display: inline-flex; margin: 0 auto 0 0;}
	#pageHero{height: 75vh;}
	.box01{padding: 88px 0;}
	.box01 .content{flex-direction: row; gap: 80px; align-items: center;}
	.box01 .content .imageWrapper{width: 250px;}
	.box01 .content .textWrapper{flex: 1;}
	.box02{padding-bottom: 88px;}
	.box02 .content{flex-direction: row; flex-wrap: wrap;}
	.box02 .content .item{width: calc(calc(100% - 100px) / 3);}
	.box02 .content .item .icon{height: 60px; width: auto; margin: 0 auto 0 0;}
	.box02 .content .item .title{font-size: 24px;}
	.box03 .content .projectsWrapper a{width: calc(calc(100% - 40px) / 3); height: 428px; display: flex;}
	.box03 .content .projectsWrapper a img{object-fit: cover;}
	.box03 .content .button{display: inline-flex; margin: 0 auto;}
	.box04 .content{padding-left: 150px;}
	.box04 .content::after{content: ""; position: absolute; top: 0; left: 0; width: 80px; bottom: 0; background: #ff6663; border-radius: 10px;}
	.box04 .content .button{display: inline-flex; margin: 0 auto 0 0;}
	.ctaButtonWrapper{margin-left: 150px; flex-direction: row; align-items: center; display: inline-flex; padding: 43px 80px;}
	.box04 .content.contact{flex-direction: row;}
	.box04 .content.contact .leftWrapper{width: 50%;}
	.box04 .content.contact .rightWrapper{width: 50%;}
	footer .content{flex-direction: row; justify-content: space-between;}
	footer .content .item{flex: 1;}
	footer .content .item:nth-child(2){flex: 2; flex-direction: row; flex-wrap: wrap;}
	footer .content .item .footerTitle{width: 100%;}
	footer .content .item .right{margin-left: 20px;}
}

@media (min-width: 1024px) {
	#menuToggle{display: none;}
}

@media (min-width: 1440px) {
}

@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
}

@media (min-width: 992px) {
	.nonMobile{display: inherit;}
	.mobile {display:none;}
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

.bgRed{background: #ff6663 !important;}
.bgWhite{background: #ffffff !important;}
.bgGray{background: #edf0f2 !important;}

.colorRed{color: #ff6663 !important;}
.colorWhite{color: #ffffff !important;}
.colorGray{color: #edf0f2 !important;}

ul.redDot{list-style: none;}
ul.redDot li::before {content: "\2022"; color: #ff6663; font-weight: bold; display: inline-block;  width: 1em; margin-left: -1em;}