@font-face {
        font-family: 'Helvetica Now Display';
        src: url(',/assets/fonts/HelveticaNowDisplayBold.ttf') format('ttf');
        font-weight: 700; 
        font-style: normal;
      }
      @font-face {
        font-family: 'Helvetica Now Display';
        src: url(',/assets/fonts/HelveticaNowDisplayMedium.ttf') format('ttf');
        font-weight: 500; 
        font-style: normal;
      }
      @font-face {
        font-family: 'Helvetica Now Display';
        src: url(',/assets/fonts/HelveticaNowDisplayRegular.ttf') format('ttf');
        font-weight: 400; 
        font-style: normal;
      }


body {
	font-family: 'Helvetica Now Display', sans-serif;
	max-width: 100vw;
	overflow-x: hidden !important
}

.w-10 {
	width: 10% !important
}

.w-20 {
	width: 20% !important
}

.w-30 {
	width: 30% !important
}

.w-40 {
	width: 40% !important
}

.w-60 {
	width: 60% !important
}

.w-80 {
	width: 80% !important
}

.w-90 {
	width: 90% !important
}

.h-45 {
	height: 45% !important
}

.h-55 {
	height: 55% !important
}

.h-50vh {
	height: 50vh !important
}

.gx-7 {
	--bs-gutter-x: 7rem
}

.gx-10 {
	--bs-gutter-x: 10rem
}

.bg-black-75 {
	background-color: #000000bf
}

.lh-p1 {
	line-height: .1
}

@media (min-width: 480px) {
	.d-xsm-flex {
		display: flex !important
	}

	.d-xsm-none {
		display: none !important
	}

	.flex-xsm-row {
		flex-direction: row !important
	}
}

@media (min-width: 526px) {
	.w-sm-20 {
		width: 20% !important
	}

	.w-sm-90 {
		width: 90% !important
	}

	.lh-sm-p2 {
		line-height: .2 !important
	}

	.lh-sm-p4 {
		line-height: .4 !important
	}
}

@media (min-width: 768px) {
	.w-sm2-80 {
		width: 80% !important
	}

	.border-bottom-sm2-0 {
		border-bottom: 0 !important
	}

	.border-bottom-sm2 {
		border-bottom-width: 1px !important;
		border-bottom-style: solid !important
	}

	.border-sm2-white {
		border-bottom-color: #fff !important
	}

	.h-sm2-80vh {
		height: 80vh !important
	}
}

@media (min-width: 992px) {
	.w-lg-50 {
		width: 50% !important
	}
}

@media (min-width: 1024px) {
	.h-sm3-80vh {
		height: 80vh !important
	}

	.w-sm3-70 {
		width: 70% !important
	}

	.col-sm3-1 {
		flex: 0 0 auto;
		width: 8.3333333333%
	}

	.col-sm3-4 {
		flex: 0 0 auto;
		width: 33.3333333333%
	}

	.col-sm3-5 {
		flex: 0 0 auto;
		width: 41.6666666667%
	}

	.col-sm3-6 {
		flex: 0 0 auto;
		width: 50%
	}

	.col-sm3-7 {
		flex: 0 0 auto;
		width: 58.3333333333%
	}
}

@media (min-width: 1200px) {
	.gx-xl-10 {
		--bs-gutter-x: 10rem
	}

	.gy-xl-7 {
		--bs-gutter-y: 7rem
	}

	.w-xl-10 {
		width: 10% !important
	}

	.w-xl-30 {
		width: 30% !important
	}

	.w-xl-40 {
		width: 40% !important
	}

	.w-xl-60 {
		width: 60% !important
	}

	.w-xl-75 {
		width: 75% !important
	}

	.w-xl-80 {
		width: 80% !important
	}

	.w-xl-90 {
		width: 90% !important
	}

	.w-xl-100 {
		width: 100% !important
	}

	.lh-xl-p5 {
		line-height: .5 !important
	}

	.flex-xl-column {
		flex-direction: column !important
	}

	.w-xl-max-content {
		width: max-content !important
	}
}

@media (min-width: 1400px) {
	.w-xxl-35 {
		width: 35% !important
	}

	.w-xxl-70 {
		width: 70% !important
	}
}

@media (min-width: 1920px) {
	.lh-3xl-p5 {
		line-height: .5 !important
	}
}

@media (min-width: 2560px) {
	.w-4xl-30 {
		width: 30% !important
	}

	.lh-4xl-p6 {
		line-height: .6 !important
	}
}

.navbar {
	background-color: #000;
	padding-top: 1rem;
	padding-bottom: 1rem
}

.navbar .navbar-collapse {
	z-index: 2
}

.navbar .navbar-brand {
	padding: 0 !important;
	margin: 0 !important
}

.navbar .navbar-brand img {
	/* width: 100px; */
	width: auto;
	height: 30px
}

.navbar .container-fluid {
	padding-left: 1rem;
	padding-right: 1rem
}

@media (max-width: 991px) {
	.navbar .navbar-nav .nav-item:not(:last-child) {
		border-bottom: .5px solid white
	}

	.navbar .navbar-nav .nav-item:nth-last-child(2) {
		border-color: #fd5202
	}
}

.navbar .navbar-nav .nav-item .nav-link {
	text-transform: uppercase;
	text-align: right;
	color: #fff;
	transition: color .3s ease
}

@media (min-width: 1280px) {
	.navbar .container-fluid {
		justify-content: center
	}

	.navbar .container-fluid .navbar-brand {
		margin-right: 4rem !important
	}

	.navbar .container-fluid .navbar-brand img {
		/* width: 100px !important; */
		height: 45px !important
	}

	.navbar .container-fluid .navbar-collapse {
		flex-grow: initial
	}
}

@media (min-width: 992px) {
	.navbar {
		padding-top: 40px;
		padding-bottom: 40px
	}

	.navbar .container-fluid {
		padding-left: 50px !important;
		padding-right: 50px !important
	}

	.navbar .navbar-brand img {
		/* width: 80px; */
		/* height: 40px */
	}

	.navbar .navbar-collapse {
		display: flex !important;
		justify-content: center
	}

	.navbar .navbar-nav .nav-item {
		position: relative
	}

	.navbar .navbar-nav .nav-item:not(:nth-child(4), :last-child) {
		border-right: 1px solid white
	}

	.navbar .navbar-nav .nav-item .nav-link {
		padding-left: 1.5rem;
		padding-right: 1.5rem
	}

	.navbar .navbar-nav .nav-item .nav-link.btn-ghost {
		margin-left: 1.5rem;
		transition: background-color .3s ease, color .3s ease;
		border: 1px solid #FD5202;
		padding-top: .3rem;
		padding-bottom: .3rem
	}

	.navbar .navbar-nav .nav-item .nav-link.btn-ghost:hover {
		background-color: #fd5202;
		color: #fff
	}

	.navbar .navbar-nav .nav-item .nav-link:not(.btn-ghost):after {
		content: "";
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: #fff;
		bottom: 5px;
		left: 0;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform .4s cubic-bezier(.19, 1, .22, 1)
	}

	.navbar .navbar-nav .nav-item .nav-link:not(.btn-ghost):hover:after {
		transform: scaleX(1)
	}
}

.burger-toggle {
	display: none
}

.burger-menu {
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center
}

.burger-icon,
.burger-icon:before,
.burger-icon:after {
	background-color: #fff;
	width: 30px;
	height: 3px;
	transition: transform .3s ease-in-out, background-color .2s ease-in-out
}

.burger-icon:before,
.burger-icon:after {
	content: "";
	position: absolute
}

.burger-icon:before {
	transform: translateY(-8px)
}

.burger-icon:after {
	transform: translateY(8px)
}

.burger-toggle:checked+.burger-menu .burger-icon {
	background-color: transparent
}

.burger-toggle:checked+.burger-menu .burger-icon:before {
	transform: rotate(45deg)
}

.burger-toggle:checked+.burger-menu .burger-icon:after {
	transform: rotate(-45deg)
}

#presentation {
	width: 100vw !important;
	height: 100vh;
	overflow: hidden
}

#presentation .video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	object-fit: cover;
	z-index: -1
}

#presentation .caption-container {
	position: absolute;
	z-index: 1
}

#presentation .caption-container .title-container {
	width: max-content !important
}

#presentation .caption-container .title-container .title {
	font-size: calc(1.6rem + 1.5vw)
}

#presentation .caption-container .title-container .title:before,
#presentation .caption-container .title-container .title:after {
	content: "";
	display: block;
	width: 105%;
	height: 1px;
	background-color: #fff;
	transform: translate(-6px) translateY(-7px)
}

@property --num {
	syntax: "<integer>";
	initial-value: 0;
	inherits: false;
}

@keyframes counter {
	0% {
		--num: 0
	}

	to {
		--num: 45
	}
}

#services {
	width: 100vw;
	background-color: #fff
}

#services .list .title-container {
	width: max-content !important
}

#services .list .title-container .title {
	font-size: calc(1.7rem + 1.5vw)
}

#services .list .title-container .title:before,
#services .list .title-container .title:after {
	content: "";
	display: block;
	width: 102%;
	height: 1px;
	background-color: #000;
	transform: translate(-10px) translateY(-7px)
}

@media (min-width: 524px) {

	#services .list .title-container .title:before,
	#services .list .title-container .title:after {
		transform: translate(-3px) translateY(-5.5px)
	}
}

#services .list ul.items {
	margin-block-start: 0 !important;
	padding-inline-start: 0 !important
}

#services .list ul.items li.item {
	list-style: none;
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 1.6rem;
	border-bottom: 1px solid black
}

#services .list ul.items li.item:before {
	content: "";
	position: absolute;
	height: 1rem;
	width: 1rem;
	background-color: #000;
	left: 0;
	margin-top: 3px
}

#services .additional {
	width: max-content;
	height: 100%;
	color: #e5e5e5
}

#services .additional .plus {
	font-size: 14rem;
	font-weight: 800;
	transform: translateY(1.3rem)
}

#services .additional .years {
	counter-reset: count var(--num);
	animation: counter 1.5s linear forwards;
	font-size: 14rem
}

#services .additional .years:after {
	content: counter(count);
	font-weight: 700;
	font-size: 14rem;
	margin-bottom: 5rem
}

#services .additional .text-1 {
	font-size: 6rem
}

#services .additional .text-2 {
	font-size: 4rem
}

@media (max-width: 432px) {
	#services .additional .plus {
		font-size: 10.3rem;
		font-weight: 800;
		transform: translateY(.8rem)
	}

	#services .additional .years {
		counter-reset: count var(--num);
		animation: counter 1.5s linear forwards;
		font-size: 10.3rem
	}

	#services .additional .years:after {
		content: counter(count);
		font-weight: 700;
		font-size: 10.3rem
	}

	#services .additional .text-1 {
		font-size: 4.6rem
	}

	#services .additional .text-2 {
		font-size: 3.6rem
	}
}

@media (max-width: 414px) {
	#services .additional .plus {
		font-size: 10.1rem;
		font-weight: 800;
		transform: translateY(.8rem)
	}

	#services .additional .years {
		counter-reset: count var(--num);
		animation: counter 1.5s linear forwards;
		font-size: 10.1rem
	}

	#services .additional .years:after {
		content: counter(count);
		font-weight: 700;
		font-size: 10.1rem
	}

	#services .additional .text-1 {
		font-size: 4.45rem
	}

	#services .additional .text-2 {
		font-size: 3.45rem
	}
}

@media (max-width: 411px) {
	#services .additional .plus {
		font-size: 10rem;
		font-weight: 800;
		transform: translateY(.7rem)
	}

	#services .additional .years {
		counter-reset: count var(--num);
		animation: counter 1.5s linear forwards;
		font-size: 10rem
	}

	#services .additional .years:after {
		content: counter(count);
		font-weight: 700;
		font-size: 10rem
	}

	#services .additional .text-1 {
		font-size: 4.4rem
	}

	#services .additional .text-2 {
		font-size: 3.4rem
	}
}

@media (max-width: 375px) {
	#services .additional .plus {
		font-size: 9.7rem;
		font-weight: 800;
		transform: translateY(.5rem)
	}

	#services .additional .years {
		counter-reset: count var(--num);
		animation: counter 1.5s linear forwards;
		font-size: 9.7rem
	}

	#services .additional .years:after {
		content: counter(count);
		font-weight: 700;
		font-size: 9.7rem
	}

	#services .additional .text-1 {
		font-size: 4.1rem
	}

	#services .additional .text-2 {
		font-size: 3.1rem
	}
}

@media (max-width: 360px) {
	#services .additional .plus {
		font-size: 9.5rem;
		font-weight: 800;
		transform: translateY(.5rem)
	}

	#services .additional .years {
		counter-reset: count var(--num);
		animation: counter 1.5s linear forwards;
		font-size: 9.5rem
	}

	#services .additional .years:after {
		content: counter(count);
		font-weight: 700;
		font-size: 9.5rem
	}

	#services .additional .text-1 {
		font-size: 4rem
	}

	#services .additional .text-2 {
		font-size: 3rem
	}
}

@media (max-width: 320px) {
	#services .additional .plus {
		font-size: 7rem;
		font-weight: 800;
		transform: translateY(.5rem)
	}

	#services .additional .years {
		counter-reset: count var(--num);
		animation: counter 1.5s linear forwards;
		font-size: 7rem
	}

	#services .additional .years:after {
		content: counter(count);
		font-weight: 700;
		font-size: 7rem
	}

	#services .additional .text-1 {
		font-size: 3rem
	}

	#services .additional .text-2 {
		font-size: 2rem
	}
}

#benefits {
	width: 100vw;
	background-color: #000
}

#benefits .title-container {
	width: max-content !important
}

#benefits .title-container .title {
	font-size: calc(1.7rem + 1.5vw);
	color: #fff
}

#benefits .title-container .title:before,
#benefits .title-container .title:after {
	content: "";
	display: block;
	width: 102%;
	height: 1px;
	background-color: #fff;
	transform: translate(-4px) translateY(-7px)
}

#interview {
	width: 100vw
}

#interview .logo {
	height: 5rem
}

#interview .play-btn {
	letter-spacing: .5rem
}

#interview .play-btn svg {
	width: 1rem !important;
	fill: #fff !important;
	margin-left: 1rem
}

#interview .video {
	height: 50vw;
	cursor: pointer
}

@media (min-width: 1024px) {
	#interview .video {
		height: auto !important
	}
}

#testimonies {
	width: 100vw;
	background-color: #000
}

#testimonies .title-container {
	width: max-content !important
}

#testimonies .title-container .title {
	font-size: calc(1.7rem + 1.5vw);
	color: #fff
}

#testimonies .title-container .title:before,
#testimonies .title-container .title:after {
	content: "";
	display: block;
	width: 102%;
	height: 1px;
	background-color: #fff;
	transform: translate(-6px) translateY(-7px)
}

#testimonies .border-orange {
	border-color: #fd5202 !important
}

#testimonies .border-transparent {
	border: 1px solid rgba(255, 0, 0, 0) !important
}

#testimonies .testimonies-container .separator {
	width: 100%;
	height: 1px;
	background-color: #fd5202
}

#testimonies .testimonies-container .quote {
	width: 10rem
}

#testimonies .testimonies-container .row {
	height: max-content !important
}

#testimonies .testimonies-container .testimony {
	border-left-width: 0px !important;
	border-right-width: 0px !important
}

@media (min-width: 1200px) {
	#testimonies .testimonies-container {
		transform: translateY(-5rem)
	}

	#testimonies .testimonies-container .testimony {
		border-left-width: 1px !important;
		border-right-width: 1px !important
	}
}

#portfolio {
	width: 100vw;
	background-color: #fff;
	margin-bottom: 70px;
}

#portfolio .title-container {
	width: max-content !important
}

#portfolio .title-container .title {
	font-size: calc(1.7rem + 1.5vw)
}

#portfolio .title-container .title:before,
#portfolio .title-container .title:after {
	content: "";
	display: block;
	width: 102%;
	height: 1px;
	background-color: #000;
	transform: translate(-5px) translateY(-7px)
}

#portfolio .subtitle {
	font-weight: 800
}

#portfolio .portfolio-nav .nav {
	border-bottom: none !important
}

#portfolio .portfolio-nav .nav .nav-link {
	position: relative;
	border: none;
	transition: color .3s ease
}

#portfolio .portfolio-nav .nav .nav-link:after {
	content: "";
	position: absolute !important;
	width: 100%;
	height: 1px;
	background-color: #000;
	bottom: 5px;
	left: 0;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .4s cubic-bezier(.19, 1, .22, 1)
}

#portfolio .portfolio-nav .nav .nav-link.active:after,
#portfolio .portfolio-nav .nav .nav-link:hover:after {
	transform: scaleX(1)
}

#portfolio .portfolio-item-container {
	transition: opacity .4s ease-in-out, transform .4s ease-in-out;
	transform: scale(1);
	opacity: 1
}

#portfolio .portfolio-item-container.hidden {
	transform: scale(.95);
	opacity: 0;
	display: none
}

#portfolio .portfolio-item-container .portfolio-item .title {
	letter-spacing: .5rem
}

#clients {
	width: 100vw;
	background-color: #000;
	padding-top: 100px !important; 
	padding-bottom: 80px !important; 
}

#clients .logo {
	height: 6rem
}

#architects {
	width: 100vw;
	background-color: #fff
}

#architects .title-container {
	width: max-content !important
}

#architects .title-container .title {
	font-size: calc(1.7rem + 1.5vw)
}

#architects .title-container .title:before,
#architects .title-container .title:after {
	content: "";
	display: block;
	width: 102%;
	height: 1px;
	background-color: #000;
	transform: translate(-6px) translateY(-7px)
}

#architects .subtitle {
	font-weight: 800
}

#architects .profile-item {
	text-decoration: none
}

#architects .profile-item .title {
	letter-spacing: .5rem
}

#architects .profile-item:hover .profile-picture img {
	filter: grayscale(0);
	transition: all ease .4s
}

#architects .profile-item:hover .icon {
	transform: scale(1.2);
	transition: transform ease .4s
}

#architects .profile-item .profile-picture img {
	filter: grayscale(1);
	transition: all ease .4s
}

#architects .profile-item .icon {
	position: absolute;
	z-index: 1;
	width: 3rem;
	height: 3rem;
	background-color: #fd5202;
	transition: transform ease .4s
}

#architects .profile-item .icon svg {
	width: 80%;
	height: 80%;
	transform: rotateX(180deg)
}

#architects .linkedin-link {
	width: 4rem;
	height: 4rem;
	background-color: #000
}

#architects .linkedin-link svg {
	width: 90%;
	fill: #fff
}

#art-gallery .title {
	font-size: 5rem;
	line-height: .7
}

#art-gallery .subtitle {
	letter-spacing: .5rem
}

#art-gallery .art-image {
	background-repeat: no-repeat !important;
	background-size: cover !important
}

#art-gallery .images-container {
	height: 50vh
}

#contact {
	width: 100vw;
	background-color: #000
}

#contact .title {
	font-size: 3rem;
	line-height: 1
}

@media (min-width: 1200px) {
	#contact .title {
		font-size: 4.5rem
	}
}

#contact .whatsapp-button {
	text-decoration: none;
	color: #000;
	background-color: #fd5202;
	letter-spacing: .3rem;
	border-radius: 2rem;
	text-align: center
}

#contact ul.items {
	margin-block-start: 0 !important;
	padding-inline-start: 0 !important
}

#contact ul.items li.item {
	list-style: none;
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 1.6rem;
	border-bottom: 1px solid black;
	color: #fff
}

#contact ul.items li.item .title {
	font-weight: 700
}

#contact ul.items li.item .description {
	width: max-content;
	padding-right: 20px
}

#contact ul.items li.item:before {
	content: "";
	position: absolute;
	height: .6rem;
	width: .6rem;
	background-color: #fd5202;
	left: 0;
	top: 10%
}

#footer .social-media-link svg {
	width: 2rem;
	height: 2rem;
	fill: #fff
}