@import url("burger-menu.css");
@import url("buttons.css");
@import url("form-elements.css");
@import url("scroll-up.css");
@import url("view-transition.css");
@import url("modal.css");

:root {
	--white-color:#fff;
	--black-color:#242424;
	--gray-color:#323232;
	--light-color:rgba(0, 0, 0, .1);
	--dark-color:rgba(0, 0, 0, .2);
	--dark-bgcolor: rgba(0, 0, 0, .3);
	--darker-color: rgba(0, 0, 0, .5);
	--semiwhite3-color:rgba(255, 255, 255, .3);
	--semiwhite5-color:rgba(255, 255, 255, .5);
	--semiwhite6-color:rgba(255, 255, 255, .6);
	--semiwhite8-color:rgba(255, 255, 255, .8);
	--lightgray-color:#dcdcdc;
	--red-color:#BD1E2D;
	--green-color:#167F16;
	--very-top-height:78px;
}

::-webkit-scrollbar {
	width: 3px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background-color: var(--white-color);
}

::-webkit-scrollbar-thumb {
	background: var(--dark-color);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--black-color);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
	font-family: "Manrope", sans-serif;
	font-size:16px;
	font-weight:300;
	&.landing-page {
		background-color:var(--black-color);
		color:var(--white-color);
	}
}

a,
label {
	color:var(--black-color);
    text-decoration:none;
    transition:all .5s;
}

a[nohref],
label {
	cursor:pointer;
}

.relative {
    position:relative;
}

.absolute {
    position:absolute;
}

:is(.overflow-hidden, #abs-id) {
	overflow:hidden;
}

:is(.overflow-visible, #abs-id) {
	overflow:visible;
}

.block {
    display:block;
}

.grid {
	display:grid;
}

.flex {
    display:flex;
}

.flex-col {
    flex-direction:column;
}

.flex-0-5 {
    flex:.5;
}

.flex-1 {
    flex:1;
}

.flex-1-5 {
    flex:1.5;
}

.flex-2 {
    flex:2;
}

.grid-3-cols {
    grid-template-columns:1fr 1fr 1fr;
}

.grid-4-cols {
    grid-template-columns:1fr 1fr 1fr 1fr;
}

.flex-vert-aligned {
    align-items:center;
}

.flex-hor-aligned {
    justify-content:center;
}

.flex-wrap {
	flex-wrap:wrap;
}

.full-width {
    width:100%;
}

.half-width {
    width:50%;
}

.max-width {
    max-width:100%;
}

.full-height {
    height:100%;
}

.light-text {
	font-weight:300;
}

.regular-text {
	font-weight:400;
}

.medium-text {
	font-weight:500;
}

.semibold-text {
	font-weight:600;
}

.bold-text {
	font-weight:700;
}

.extrabold-text {
	font-weight:800;
}

.fs-10 {
    font-size:10px;
}

.fs-12 {
    font-size:12px;
}

.fs-13 {
    font-size:13px;
}

.fs-14 {
    font-size:14px;
}

.fs-15 {
    font-size:15px;
}

.fs-16 {
    font-size:16px;
}

.fs-20 {
    font-size:20px;
}

.fs-24 {
    font-size:24px;
}

.fs-28 {
    font-size:28px;
}

.fs-32 {
    font-size:32px;
}

.fs-42 {
    font-size:42px;
}

.fs-48 {
    font-size:48px;
}

.fs-55 {
    font-size:55px;
}

.uppercase {
	text-transform: uppercase;
}

.white-bg {
    background-color:var(--white-color);
}

.black-bg {
    background-color:var(--black-color);
}

.gray-bg {
    background-color:var(--gray-color);
}

.red-bg { /* not used yet */
    background-color:var(--red-color);
}

.white-text {
    color:var(--white-color);
}

.semiwhite8-text {
    color:var(--semiwhite8-color);
}

.semiwhite6-text {
    color:var(--semiwhite6-color);
}

.border-1-lightgray {
	border:1px var(--lightgray-color) solid;
}

.border-top-1-light {
    border-top: 1px var(--light-color) solid;
}

.border-bottom-1-light {
    border-bottom: 1px var(--light-color) solid;
}

.border-top-1-semiwhite3 {
	border-top:1px var(--semiwhite3-color) solid;
}

.border-bottom-1-semiwhite3 {
	border-bottom:1px var(--semiwhite3-color) solid;
}

/*
.border-bottom-1-semiwhite3 {
	border-bottom:1px var(--semiwhite3-color) solid;
}
*/

.pt-100 {
    padding-top:100px;
}

.pb-100 {
    padding-bottom:100px;
}

.pt-50 {
    padding-top:50px;
}

.pb-50 {
    padding-bottom:50px;
}

.pr-50 {
    padding-right:50px;
}

.pt-20 {
    padding-top:20px;
}

.pb-20 {
    padding-bottom:20px;
}

.pr-20 {
    padding-right:20px;
}

.pl-20 {
    padding-left:20px;
}

.pr-10 {
    padding-right:10px;
}

.pl-10 {
    padding-left:10px;
}

.padding-40 {
	padding:40px;
}

.padding-20 {
	padding:20px;
}

.padding-10 {
    padding:10px;
}

.mt-30 {
    margin-top:30px;
}

.mb-30 {
    margin-bottom:30px;
}

.mt-15 {
    margin-top:15px;
}

.mt-10 {
	margin-top:10px;
}

.mb-10 {
	margin-bottom:10px;
}

.mb-5 {
	margin-bottom:5px;
}

.mt-auto {
	margin-top:auto;
}

.mb-auto {
	margin-bottom:auto;
}

.ml-auto {
	margin-left:auto;
}

.center-aligned {
    text-align:center;
}

.object-fit-cover {
    object-fit:cover;
}

.lh-20 {
    line-height:20px;
}

.lh-24 {
    line-height:24px;
}

.lh-28 {
    line-height:28px;
}

.lh-30 {
    line-height:30px;
}

.lh-50 {
    line-height:50px;
}

.lh-60 {
    line-height:60px;
}

.remove {
    display:none;
}

.ellipsis-multiline { /* not used yet */
	&,
	& p {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.ellipsis-multiline.line-3 { /* not used yet */
	&,
	& p {
		-webkit-line-clamp: 3;
	}
}

.ls-2 {
	letter-spacing:2px;
}

p:not(:last-of-type) {
	margin-bottom:20px;
}

p {
	strong {
		font-weight:bold;
	}
}

.grid-gap-5 {
	grid-gap: 5px;
}

.grid-gap-10 {
	grid-gap: 10px;
}

.grid-gap-15 {
	grid-gap: 15px;
}

.grid-gap-20 {
	grid-gap: 20px;
}

.grid-gap-30 {
	grid-gap: 30px;
}

.grid-gap-50 {
	grid-gap: 50px;
}

.grid-gap-80 {
	grid-gap: 80px;
}

.grid-gap-100 {
	grid-gap: 100px;
}

.has-shadow {
	box-shadow: 0 0 20px 0 var(--light-color);
}

.has-layer {
	position:relative;
	&:before {
		content:"";
		position:absolute;
		inset:0;
		background-color:var(--dark-bgcolor);
	}
}

.orbitron-font {
  font-family: "Orbitron", sans-serif;
}
	
.container {
	max-width:1132px;
    margin-left:auto;
	margin-right:auto;
    padding-left: 20px;
    padding-right: 20px;
	height:inherit;
}
	
	.has-dd-menu {
		position:relative;
		height: inherit;
		& > ul {
			position:absolute;
			opacity:0;
			visibility:hidden;
			display:none;
			margin-top:-1px;
			transition:all .5s ease-out allow-discrete;
			a {
				display:block;
				padding:10px;
				border-bottom: 1px var(--darker-color) solid;
				color:var(--black-text);
				&:hover {
					background-color:var(--black-color);
					border-bottom: 1px var(--black-color) solid;
					color:var(--white-color);
				}
			}
		}
		&:hover > ul {
			opacity:1;
			visibility:visible;
			display:flex !important; /* this is VI */
		}
		&:hover .fa-chevron-down {
			transform: rotate(180deg);
		}
		.landing-page & > ul {
			bottom: 75%;
			@media screen and (max-width:1024px) {
				bottom: 130%;
			}
			right:0;
			a {
				border-bottom: 1px var(--semiwhite3-color) solid;
				color:var(--white-text);
				&:hover {
					background-color:var(--white-color);
					border-bottom: 1px var(--white-color) solid;
					color:var(--black-color);
				}
			}
		}
		.fa-chevron-down {
			transition:all .5s;
		}
	}
	@starting-style {
		.has-dd-menu:hover > ul {
			opacity:0;
			visibility:hidden;
			display:none;
		}
	}
	
	.nav {
		--nav-height:66px;
		height:var(--nav-height);
		@media screen and (max-width:1024px) {
			height:0;
		}
		position:sticky;
		top:0;
		z-index:3;
		.nav-ul {
			scroll-target-group: auto;
			> li {
				display: flex;
				@media screen and (max-width:1024px) {
					flex-direction:column;
				}
				& > a {
					place-content: center;
					
					position:relative;
					@media screen and (min-width:1025px) {
						&.current-page:before,
						&:before {
							content:"";
							position:absolute;
							top: 10%;
							width: 100%;
							height:3px;
							opacity:0;
							visibility:hidden;
							transition:all .5s;
						}
						.nav.black-bg &:before {
							background-color:var(--white-color);
						}
						.nav:not(.black-bg) &:before {
							background-color:var(--black-color);
						}
						&.current-page:before {
							opacity:1;
							visibility:visible;
						}
					}
					.nav.black-bg .nav-ul > li & {
						color:var(--white-color);
					}
				}
				&:hover > a {
					&:before {
						opacity:1;
						visibility:visible;
					}
				}
				& .subnav {
					position:absolute;
					top: calc(var(--nav-height) - 1px);
					left: 0;
					right: 0;
					opacity:0;
					visibility:hidden;
					display:none;
					transition:all .5s ease-out allow-discrete;
					@media screen and (max-width:1024px) {
						position:static;
						opacity:1;
						visibility:visible;
						display:grid;
						grid-template-columns: 1fr;
					}
					a {
						color:var(--white-color);
						img {
							transition:all .5s;
						}
					}
					a:hover {
						color:var(--semiwhite6-color);
						img {
							opacity:.65;
						}
					}
				}
				@media screen and (min-width:1025px) {
					&:hover .subnav  {
						opacity:1;
						visibility:visible;
						display:grid !important; /* this is VI */
						@starting-style {
							opacity:0;
							visibility:hidden;
							display:none;
						}
					}
					html:has(&:hover .subnav ) {
						scrollbar-gutter: stable;
					}
					body:has(&:hover .subnav ) {
						overflow:hidden;
						& {
							.main,
							.footer {
								filter: blur(3px);
							}
						}
					}
				}
			}
		}
	}
	
	:is(.very-top, .nav) {
		.has-dd-menu {
			position:absolute;
			top:0;
			right:20px;
			padding-right:0;
			ul {
				z-index: 4;
			}
			&.our-services {
				height:var(--very-top-height);
				top: calc(var(--very-top-height) * -1);
				&:hover > ul {
					margin-top: 0;
					white-space: nowrap;
					right: 0;
				}
			}
			@media screen and (max-width:1024px) {
				&.our-services {
					top: 15px;
					right: auto;
					left: 20px;
					z-index: -1;
					height: auto;
					&:hover > ul {
						margin-top: 9px;
						right: auto;
						left: 0;
					}
				}
				&.lang-switcher {
					top:20px;
					z-index: -1;
					&:hover > ul {
						margin-top: 15px;
					}
				}
			}
		}
	}
	.very-top {
		.has-dd-menu {
			ul {
				margin-top: 1px;
				width: min-content;
			}
		}
	}
	@media screen and (max-width:1024px) {
		.footer {
			.has-dd-menu {
				order:-1;
				ul {
					margin-bottom: 5px;
				}
			}
		}
	}
	
	.logo {
		img {
			@media screen and (max-width:1024px) {
				body:not(.landing-page) .very-top & {
					max-width:230px;
				}
			}
			body.landing-page .main ul & {
				height:13px;
				filter: invert(1);
			}
			body:not(.landing-page) .very-top.black-bg & {
				filter: invert(1);
			}
		}
	}
	
	.very-top {
		height:var(--very-top-height);
		@media screen and (max-width:1024px) {
			position:sticky;
			top:0;
			z-index:4;
		}
	}
	
	.landing-page  {
		.wrapper {
			position:relative;
			background-image:url('../images/content/bg-0.png');
			background-size: cover;
			background-position: center;
			transition:all .5s;
			&:before {
				content:"";
				position:absolute;
				inset:0;
				background-color:var(--darker-color);
				z-index:0;
			}

			&:after {
				content:"";
				position:absolute;
				top:-2000vh;
				left:-2000vw;
				width: 100vw;
				height: 100vh;
				z-index: -1;
				background-size: cover;
				background-position: center;
			}
			@media screen and (min-width:1025px) {
				.main {
					ul {
						li {
							a {
								.hidden-para {
									opacity:0;
									visibility:hidden;
									display:none;
									transition:all 1s ease-out;
								}
							}
							a:hover {
								backdrop-filter: blur(5px);
								background-color:var(--dark-bgcolor);
								.hidden-para {
									opacity:1;
									visibility:visible;
									display:block !important;
								}
							}
							@starting-style {
								a:hover {
									.hidden-para {
										opacity:0;
										visibility:hidden;
										display:none;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	:is(.brands, #abstract-id) {
		@media screen and (min-width:1025px) {
			height:924px;
		}
		position:relative;
		background-size: cover;
		background-position: center;
		transition:all .5s;
		&:before {
			content:"";
			position:absolute;
			inset:0;
			background:var(--dark-bgcolor);
		}
		.textual-link:hover {
			color:var(--semiwhite5-color);
		}
		.brand-logo-holder {
			--height:80px;
			height:var(--height);
			img {
				max-width: 100%;
				max-height: var(--height);
			}
		}
	}
	
	/* sliders */
	:is(.swiper-button-prev, .swiper-button-next, #abstract-id)	{
		background-image:none;
		background-color:var(--darker-color);
		width: 91px;
		height: 52px;
		@media screen and (max-width:1024px) {
			width: 45px;
			height: 30px;
		}
		transition:background-color .5s;
	}
	:is(.swiper-button-prev:hover, .swiper-button-next:hover, #abstract-id) {
		background-color:var(--black-color);
	}
	:is(.swiper-button-prev, #abstract-id) {
		left:0;
	}
	:is(.swiper-button-next, #abstract-id) {
		right:0;
	}
	
	.carousel-slider {
		.swiper-slide {
			padding:25px;
			border:1px var(--semiwhite5-color) solid;
			cursor:pointer;
			transform: scale(.85);
			transition: all .25s ease-out;
			&.swiper-slide-active .brand-logo-holder {
				filter:invert(1);
			}
			& > div:not(.brand-logo-holder) {
				opacity:0;
				visibility:hidden;
				transition: all .25s ease-out;
				.default-btn {
					min-width: initial;
				}
			}
		}
		.swiper-slide-active {
			background-color: var(--white-color);
			transform: scale(1);
			& > div:not(.brand-logo-holder) {
				opacity:1;
				visibility:visible;
			}
		}
	}
	/**/
	
	.architecture-design-slider {
		.swiper-slide {
			transition: scale .5s;
			&:hover {
				scale:.95;
			}
			img {
				/*height:600px;*/
				height:320px;
			}
		}
	}
	
	.all-brend-grid {
		a {
			transition: scale .5s;
			&:hover {
				scale:.95;
			}
		}
		img:not(.logo) {
			@media screen and (min-width:1025px) {
				height:440px;
			}
		}
	}
	
	.architecture-design-grid {
		li {
			@media screen and (min-width:1025px) {
				width:calc(100% / 3 - 20px);
			}
			transition:all .5s;
			.has-layer {
				display: block;
				border: 1px transparent solid;
				&:before {
					transition:all .5s;
				}
				span {
					transition:all .5s;
				}
			}
			&:hover {
				@media screen and (min-width:1025px) {
					width:calc(100% / 1.5 - 20px);
				}
				.has-layer {
					&:before {
						background-color:transparent;
					}
					span {
						opacity:0;
						visibility:hidden;
					}
				}
			}
			span:has(~ img) {
				bottom: 40px;
				@media screen and (max-width:1024px) {
					bottom: 10px;
					top: auto;
					left: 0;
					right: 0;
					display: block;
				}
			}
			img {
				@media screen and (min-width:1025px) {
					height:640px;
				}
				
			}
		}
		&.masonry {
			li {
				@media screen and (min-width:1025px) {
					&:nth-child(3n + 1) {
						width:100%;
					}
					&:nth-child(3n + 2) {
						width:calc(100% * 2 / 3 - 10px);
					}
					&:nth-child(3n + 3) {
						width:calc(100% * 1 / 3 - 10px);
					}
				}
			}
		}
	}
	
	.brand-logo {
		max-width:50%;
		/*filter: invert(1);*/
	}
	
	.has-hover {
		&:active,
		&:focus,
		&:hover {
			color:var(--semiwhite6-color);
		}
	}
	
	iframe {
		outline:0;
	}
	
	.very-bottom {
		a {
			.main.black-bg & {
				color:var(--white-color);
				&:hover {
					color:var(--semiwhite5-color);
				}
			}
		}
	}
	
	.footer {
		@media screen and (min-width:1025px) {
			height:60px;
		}
		/*background-color:var(--black-color);
		color:var(--semiwhite8-color);*/
		&.black-bg a {
			color:currentColor;
			&:hover {
				color:var(--white-color);
			}
		}
	}

@media screen and (max-width:1024px) {
	:is(.hide-on-mobile, #abs-id) {
		display:none;
	}
	
    .show-on-mobile {
        display:block;
    }
	
	.flex-col-on-mobile {
		flex-direction: column;
	}
	
	.flex-hor-aligned-on-mobile {
		place-items: center;
	}
	
	.flex-vert-aligned-on-mobile {
		place-content: center;
	}
	
	.grid-1-col-on-mobile {
		grid-template-columns:1fr;
	}
	
	.grid-gap-0-on-mobile {
		grid-gap: 0;
	}
	
	.grid-gap-20-on-mobile {
		grid-gap: 20px;
	}
	
	.grid-gap-40-on-mobile {
		grid-gap: 40px;
	}
	
	.order--1-on-mobile {
		order:-1;
	}
	
	.fs-19-on-mobile {
		font-size:19px;
	}
	
	.fs-24-on-mobile {
		font-size:24px;
	}
	
	.lh-normal-on-mobile {
		line-height:normal;
	}
	
	.lh-35-on-mobile {
		line-height:35px;
	}
	
	.lh-50-on-mobile {
		line-height:50px;
	}
	
	.black-bg-on-mobile {
		background-color:var(--black-color);
	}
	
	.white-text-on-mobile {
		color:var(--white-color);
	}
	
	.ml-40-on-mobile {
		margin-left:40px;
	}
	
	.pt-50-on-mobile {
		padding-top:50px;
	}
	
	.pb-50-on-mobile {
		padding-bottom:50px;
	}
	
	.pt-25-on-mobile {
		padding-top:25px;
	}
	
	.pb-25-on-mobile {
		padding-bottom:25px;
	}
	
	.pt-10-on-mobile {
		padding-top:10px;
	}
	
	.pb-10-on-mobile {
		padding-bottom:10px;
	}
	
	.padding-0-on-mobile {
		padding:0;
	}
	
	.padding-20-on-mobile {
		padding:20px;
	}
	
	.mt-15-on-mobile {
		margin-top:15px;
	}
	
	.mr-auto-on-mobile {
		margin-right:auto;
	}
}