/* Variables */

:root{
	
	--roman-green: #1F2621;
	--structure-green: rgba(55, 89, 50, 1);
	--limestone: rgba(242, 242, 242, 1);
	--architectural-gray: rgba(95, 115, 108, 1);
	--roman-green-gradient: radial-gradient(135.9% 330.72% at -10.34% 1.81%, #1F2621 0%, #121417 23.52%, #1F2621 49.92%, #121417 76.26%, #1F2621 100%);
	
}

/* Fonts */

@font-face{
	
	src: url("../assets/fonts/");
	font-family: '';
	
}

/* Default Behavior */

body, html{margin: 0; font-family: "Epilogue", sans-serif; scroll-behavior: smooth;}

h1{font-size: 3.875rem;}
h3{font-size: 2.25rem;}

button{padding: 0; cursor: pointer;}

a{text-decoration: none; color: inherit;}

img,
svg{max-width: 100%; vertical-align: bottom;}

p{font-family: "Averia Serif Libre", serif;}

dialog{top: 50%; left: 50%; translate: -50% -50%; padding: 0;}

*{box-sizing: border-box; margin: 0; border: 0; background-color: initial;}

/* Helper Classes */

.content{width: 1200px; max-width: 90vw; margin: auto;}

.row,
.grid,
.column{display: flex; gap: inherit;}
.column{flex-direction: column;}
.grid{display: grid;}
.grid.layered > *,
.grid.layered:before,
.grid.layered:after{grid-row: 1; grid-column: 1;}

.btn{padding: 12px 20px; font-size: 1rem; font-weight: 700; background-color: var(--structure-green); border-radius: 8px;}

a#floatingWpp{position: fixed; bottom: 0; right: 5vw; border-radius: 20px 20px 0 0; padding: 10px 20px; align-items: center; gap: 20px; color: var(--limestone);}

/* Header */

header#mainHeader{padding: 24px 0; position: absolute; top: 40px; width: 100%; color: var(--limestone); z-index: 2;}
header#mainHeader .content{align-items: center; gap: 32px; justify-content: space-between;}
header#mainHeader .menu{align-items: center;}
header#mainHeader .menu nav{align-items: center; gap: 36px;}

header#mainHeader label#menuTrigger{position: relative; width: 38px; height: 38px; z-index: 1;}
header#mainHeader label#menuTrigger span,
header#mainHeader label#menuTrigger:before,
header#mainHeader label#menuTrigger:after{content: ''; position: absolute; width: 60%; height: 6px; background-color: var(--limestone); border-radius: 100vw; transition: all .2s ease;}

header#mainHeader label#menuTrigger span{width: 38px; top: calc(50% - 3px); animation: menuTriggerSpanBackwards .6s ease forwards;}
header#mainHeader label#menuTrigger:before{top: 0; left: 0; animation: menuTriggerBeforeBackwards .6s ease forwards;}
header#mainHeader label#menuTrigger:after{bottom: 0; right: 0; animation: menuTriggerAfterBackwards .6s ease forwards;}

header#mainHeader label#menuTrigger:has(input:checked) span{animation: menuTriggerSpan .6s ease forwards;}
header#mainHeader label#menuTrigger:has(input:checked):before{animation: menuTriggerBefore .6s ease forwards;}
header#mainHeader label#menuTrigger:has(input:checked):after{animation: menuTriggerAfter .6s ease forwards;}

@keyframes menuTriggerSpan{
	
	0%{width: 38px; left: calc(50% - 19px); top: calc(50% - 3px); rotate: 0deg;}
	49%{width: 6px; left: calc(50% - 3px); top: calc(50% - 3px); rotate: 0deg;}
	51%{width: 6px; left: calc(50% - 3px); top: calc(50% - 3px); rotate: -45deg;}
	100%{width: calc(38px*sqrt(2)); left: calc(50% - (38px*sqrt(2))/2); top: calc(50% - 3px); rotate: -45deg;}
	
}

@keyframes menuTriggerBefore{
	
	0%{width: 60%; rotate: 0deg;}
	49%{width: 6px; rotate: 0deg;}
	51%{width: 6px; rotate: 45deg; transform-origin: 3px center;}
	100%{width: calc(19px*sqrt(2)); rotate: 45deg; transform-origin: 3px center;}
	
}

@keyframes menuTriggerAfter{
	
	0%{width: 60%; rotate: 0deg;}
	49%{width: 6px; rotate: 0deg;}
	51%{width: 6px; rotate: 45deg; transform-origin: calc(100% - 3px) center;}
	100%{width: calc(19px*sqrt(2)); rotate: 45deg; transform-origin: calc(100% - 3px) center;}
	
}

@keyframes menuTriggerSpanBackwards{
	
	100%{width: 38px; left: calc(50% - 19px); top: calc(50% - 3px); rotate: 0deg;}
	51%{width: 6px; left: calc(50% - 3px); top: calc(50% - 3px); rotate: 0deg;}
	49%{width: 6px; left: calc(50% - 3px); top: calc(50% - 3px); rotate: -45deg;}
	0%{width: calc(38px*sqrt(2)); left: calc(50% - (38px*sqrt(2))/2); top: calc(50% - 3px); rotate: -45deg;}
	
}

@keyframes menuTriggerBeforeBackwards{
	
	100%{width: 60%; rotate: 0deg;}
	51%{width: 6px; rotate: 0deg;}
	49%{width: 6px; rotate: 45deg; transform-origin: 3px center;}
	0%{width: calc(19px*sqrt(2)); rotate: 45deg; transform-origin: 3px center;}
	
}

@keyframes menuTriggerAfterBackwards{
	
	100%{width: 60%; rotate: 0deg;}
	51%{width: 6px; rotate: 0deg;}
	49%{width: 6px; rotate: 45deg; transform-origin: calc(100% - 3px) center;}
	0%{width: calc(19px*sqrt(2)); rotate: 45deg; transform-origin: calc(100% - 3px) center;}
	
}

/* Footer */

footer#mainFooter{margin-top: 80px; padding: 40px 20px; text-align: center; position: relative;}
footer#mainFooter:before{content: ''; background: url(../assets/svgs/bg_pattern.svg) center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 20%; z-index: -1; pointer-events: none;}
footer#mainFooter > .column{align-items: center; gap: 24px 6px; color: var(--architectural-gray);}
footer#mainFooter > .column .grid{align-items: center; width: 100%; grid-template-columns: 1fr max-content 1fr;}
footer#mainFooter > .column a.row{align-items: center;}

/* Image Viewer Dialog */

dialog#imageViewer::backdrop{background-color: var(--roman-green); opacity: 90%;}
dialog#imageViewer button.close{place-self: start end; font-size: 22px; line-height: 28px; margin: 10px; z-index: 1; color: #fff; padding: 6px; display: flex; background-color: var(--roman-green); width: 40px; height: 40px; justify-content: center; border-radius: 50%; border: 2px solid #fff;}
dialog#imageViewer .imageArea img{max-width: initial; border-radius: 20px;}

/* Banner */

section#banner{margin: 16px; aspect-ratio: 1248/800; background: url("../assets/svgs/bg_pattern.svg") center, linear-gradient(-60deg, #1F2621 0%, #121417 23.52%, #1F2621 49.92%, #121417 76.26%, #1F2621 100%); padding-top: 93px; align-items: center; justify-content: center; color: var(--limestone); text-align: center; border-radius: 30px; position: relative; overflow: hidden;}
section#banner header{align-items: center; gap: 61px; width: 70%; position: relative;}
section#banner header .column{gap: 20px;}

section#banner img{position: absolute; object-fit: cover; border-radius: 20px; transition: all .2s cubic-bezier(0, 0, 0.2, 1); translate: 0 calc(var(--scroll-top)*var(--distance-factor)*1px); --scroll-top: -500;}
section#banner img#building_01{
	--distance-factor: 0.9;
	aspect-ratio: 461 / 306;
	width: 37%;
	top: 67.75%;
	left: 30%;
	transition-duration: .6s;
}
section#banner img#building_02{
	--distance-factor: 0.7;
	aspect-ratio: 307 / 204;
	width: 25%;
	top: 63.5%;
	left: 78%;
	transition-duration: .8s;
}
section#banner img#building_03{
	--distance-factor: 0.3;
	aspect-ratio: 239 / 159;
	width: 20%;
	top: 65.25%;
	left: 4%;
	transition-duration: 1.4s;
}
section#banner img#building_04{
	--distance-factor: 0.2;
	aspect-ratio: 237 / 158;
	width: 19%;
	top: 16.25%;
	left: 77%;
	transition-duration: 1.6s;
}
section#banner img#building_05{
	--distance-factor: 0.2;
	aspect-ratio: 1 / 1;
	width: 13%;
	top: 9%;
	left: 50%;
	transition-duration: 1.6s;
}
section#banner img#building_06{
	--distance-factor: .8;
	aspect-ratio: 250 / 376;
	width: 20%;
	top: -3.5%;
	left: 2%;
	transition-duration: .8s;
}

/* Services */

section#services{padding: 20px 0;}
section#services .content{gap: 48px 0;}
section#services h3{color: var(--roman-green);}
section#services .serviceArticles{grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start;}
section#services .serviceArticles article{padding: 6px 6px 24px; border-radius: 25px; border: 2px solid transparent; position: relative; overflow: hidden; transition: all .2s ease;}
section#services .serviceArticles article:hover{border: 2px solid var(--roman-green);}
section#services .serviceArticles article:before{content: ''; position: absolute; width: 100%; aspect-ratio: 1; background: linear-gradient(160deg, transparent 50%, rgba(255 255 255 / 80%) 60%, transparent 70%); top: 0; left: 0; transform: translateY(-100%);}
section#services .serviceArticles article:hover:before{top: 100%; transform: translateY(0); transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);}
section#services .serviceArticles article header{gap: 0;}
section#services .serviceArticles article header h5{font-size: 1.125rem;}
section#services .serviceArticles article header p{font-size: 0.875rem; color: var(--architectural-gray);}

/* About */

#aboutSectionWrapper{padding: calc(100vw*125/1280) 0 calc(100vw*89/1280); margin-top: calc(-100vw*45/1280); position: relative; overflow: hidden;}

section#about{background: var(--roman-green-gradient); color: var(--limestone);}
section#about:before,
section#about:after{content: ''; position: absolute; aspect-ratio: 1; width: 28vw; background: url("../assets/svgs/logo_icon.svg") no-repeat center / cover;}
section#about:before{top: 0; right: calc(-100vw*229/1280);}
section#about:after{bottom: 0; left: calc(-100vw*148/1280);}
section#about .grid{width: 960px; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 52px; padding: 84px 0;}
section#about .grid p{font-family: "Epilogue", sans-serif; font-weight: 600; font-size: 1.5rem; color: var(--architectural-gray);}
section#about .grid p span{color: var(--limestone);}

/* Galery */

section#galery{gap: 20px 0; padding: 20px 0 80px;}
section#galery .content{gap: 48px 0;}

section#galery .galery{
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-template-rows: repeat(6, calc((1200px - 12px*7)/8));
	gap: 12px;
	grid-template-areas:
		"img_01 img_01 img_02 img_03 img_03 img_04 img_04 btn"
		"img_01 img_01 img_02 img_03 img_03 img_04 img_04 btn"
		"img_01 img_01 img_05 img_05 img_06 img_04 img_04 btn"
		"img_07 img_07 img_07 img_08 img_08 img_09 img_09 btn"
		"img_10 img_10 img_10 img_08 img_08 img_09 img_09 btn"
		"img_10 img_10 img_10 img_11 img_11 img_11 img_12 btn"
	;
	perspective: 5000px;
}
section#galery .galery .card{transform-style: preserve-3d; transition: all .8s ease; grid-template-rows: 100%; grid-template-columns: 100%;}
section#galery .galery.rotate .card{animation: rotate .8s ease; transform: rotateY(-180deg);}

@keyframes rotate{
	
	0%{transform: rotateY(0deg);}
	100%{transform: rotateY(180deg);}
	
}

section#galery .galery .card.img_01{grid-area: img_01;}
section#galery .galery .card.img_02{grid-area: img_02; animation-delay: .1s; transition-delay: .1s;}
section#galery .galery .card.img_03{grid-area: img_03; animation-delay: .2s; transition-delay: .2s;}
section#galery .galery .card.img_04{grid-area: img_04; animation-delay: .3s; transition-delay: .3s;}
section#galery .galery .card.img_05{grid-area: img_05; animation-delay: .4s; transition-delay: .4s;}
section#galery .galery .card.img_06{grid-area: img_06; animation-delay: .5s; transition-delay: .5s;}
section#galery .galery .card.img_07{grid-area: img_07; animation-delay: .6s; transition-delay: .6s;}
section#galery .galery .card.img_08{grid-area: img_08; animation-delay: .7s; transition-delay: .7s;}
section#galery .galery .card.img_09{grid-area: img_09; animation-delay: .8s; transition-delay: .8s;}
section#galery .galery .card.img_10{grid-area: img_10; animation-delay: .9s; transition-delay: .9s;}
section#galery .galery .card.img_11{grid-area: img_11; animation-delay: 1s; transition-delay: 1s;}
section#galery .galery .card.img_12{grid-area: img_12; animation-delay: 1.1s; transition-delay: 1.1s;}
section#galery .galery .card img{border-radius: 20px; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; cursor: pointer;}
section#galery .galery .card img:first-child{transform: translateZ(1px);}
section#galery .galery .card img:last-child{transform: rotateY(-180deg) translateZ(1px);}

section#galery .galery button{width: 100%; height: 100%; grid-area: btn; font-family: "Epilogue", sans-serif; font-size: 96px;}
section#galery .galery button:before{content: ''; width: 100%; height: 100%; background: var(--roman-green-gradient); border-radius: 20px;}
section#galery .galery button span{margin: 2px; background-color: #fff; color: var(--roman-green); border-radius: 18px; align-content: center; writing-mode: sideways-lr;}

/* Our Clients */

section#ourClients{padding: 100px 0; background: var(--roman-green-gradient); color: var(--limestone); gap: 48px;}

section#ourClients .logo{width: 130px; aspect-ratio: 1; justify-self: center; align-items: center; justify-content: center; padding: 12px; background-color: var(--structure-green); border-radius: 20px; transition: all .5s ease;}

section#ourClients wm-slider#clientsSlider{--indexed-element-amount: 6; --active-element-align: center; --element-sliding-amount: 8;}
section#ourClients wm-slider#clientsSlider:before,
section#ourClients wm-slider#clientsSlider:after{display: none;}
section#ourClients wm-slider-trigger{width: 130px; aspect-ratio: 1; border: 2px solid var(--limestone); position: relative; border-radius: 8px; place-content: center; font-size: 40px; margin: 0 calc((100% / 6 - 130px) / 2); transition: all .7s ease;}
section#ourClients wm-slider-trigger[slide-to="right"]{justify-self: end;}

section#ourClients:has(wm-slider > *:first-child[active]) wm-slider-trigger[slide-to="left"],
section#ourClients:has(wm-slider > *:first-child[active]) wm-slider > *:nth-child(6){opacity: 0; pointer-events: none;}
section#ourClients:has(wm-slider > *:last-child[active]) wm-slider-trigger[slide-to="right"],
section#ourClients:has(wm-slider > *:last-child[active]) wm-slider > *:nth-child(4){opacity: 0; pointer-events: none;}

/* Team */

section#team{padding: 100px 0;}
section#team .content{grid-template-columns: 290px 1px 1fr; gap: 20px 36px;}
section#team hr{background-color: var(--structure-green);}
section#team p{color: var(--architectural-gray);}
section#team .column{padding: 12px 0;}
section#team article{grid-template-columns: 90px 1fr; gap: 0 12px; align-items: center;}
section#team article img{border-radius: 50%;}
section#team article h5{font-size: 1rem; font-weight: 500; color: var(--roman-green);}
section#team article h6{font-size: 0.875rem; color: var(--roman-green);}
section#team article p{font-size: 0.875rem;}

/* Contact */

section#contact{padding: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "tl tr""b b"; gap: 10px;}
section#contact .border{background: var(--roman-green-gradient); padding: 2px; border-radius: 30px;}

section#contact section#formSide{background-color: var(--structure-green); padding: 0 75px; justify-content: center; gap: 44px; height: 100%; border-radius: 28px;}
section#contact section#formSide h5{text-align: center; color: var(--limestone); font-size: 2.25rem;}
section#contact section#formSide form{gap: 24px 0;}
section#contact section#formSide form label{gap: 8px 0; color: var(--limestone);}
section#contact section#formSide form label *:is(input, textarea){padding: 18px 15px; border: 1px solid var(--limestone); border-radius: 8px; background-color: rgba(242 242 242 / 10%); color: inherit;}
section#contact section#formSide form label *:is(input, textarea)::-webkit-input-placeholder{color: var(--limestone); opacity: 50%; font-family: 'Averia Serif Libre', serif;}
section#contact section#formSide form label textarea{resize: none; height: 145px;}
section#contact section#formSide form button.btn{background-color: var(--limestone); color: var(--architectural-gray); align-self: end;}

section#contact section#whatsapp{background: url("../assets/svgs/bg_pattern.svg") center, linear-gradient(-60deg, #1F2621 0%, #121417 23.52%, #1F2621 49.92%, #121417 76.26%, #1F2621 100%); border-radius: 30px; align-items: center; text-align: center; color: var(--limestone); padding: 0 20px; justify-content: center; gap: 72px 12px; aspect-ratio: 619 / 800;}
section#contact section#whatsapp h3{font-size: 3.5rem;}
section#contact section#whatsapp a.btn{align-items: center; font-weight: 500; padding: 24px 48px; font-size: 1.5rem;}

section#contact section#map{grid-area: b;}
section#contact section#map iframe{border: 0; width: 100%; aspect-ratio: 1248/236; border-radius: 28px;}

/* Responsive */

@media(min-width: 901px){
	
	.mobile{display: none;}
	
	section#services .serviceArticles article:first-child{margin-top: 150px;}
	section#services .serviceArticles article:nth-child(3){margin-top: 240px;}
	section#services .serviceArticles article:nth-child(4){margin-top: 90px;}
	section#services .serviceArticles article:last-child{margin-top: 160px;}
	
}

@media(max-width: 900px){
	
	.desktop{display: none;}
	
	body{overflow-x: hidden;}
	
	h1{font-size: 2rem;}
	h3{font-size: 1.75rem;}
	
	header#mainHeader{top: 0; padding: 32px 0;}
	header#mainHeader .menu{flex-direction: column; align-items: end; padding: 96px 48px; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; transform: translateX(100%); transition: all .5s ease; background-image: linear-gradient(-60deg, #1F2621 0%, #121417 23.52%, #1F2621 49.92%, #121417 76.26%, #1F2621 100%);}
	header#mainHeader:has(label#menuTrigger input:checked) .menu{transform: translateX(0%);}
	header#mainHeader .menu:before{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../assets/svgs/bg_pattern.svg) center; z-index: -1; opacity: 20%;}
	header#mainHeader .menu nav.row{flex-direction: column;}
	header#mainHeader .content{width: 85vw;}
	
	footer#mainFooter{padding-bottom: 60px;}
	footer#mainFooter > .column .grid{grid-template-columns: 1fr;}
	
	section#banner{aspect-ratio: 355/792; margin: 10px;}
	section#banner header{width: 90%; gap: 73px;}
	section#banner header .column{gap: 10px;}
	section#banner header .column p{font-size: 0.875rem;}
	
	section#banner img#building_01{top: 82%; left: 10%; width: 78%; aspect-ratio: 280/185;}
	section#banner img#building_02{top: 60%; left: 66%; width: 52%; aspect-ratio: 186/124;}
	section#banner img#building_03{top: 65%; left: -15%; width: 40%; aspect-ratio: 145/96;}
	section#banner img#building_04{top: 24%; left: 70%; width: 40%; aspect-ratio: 143/95;}
	section#banner img#building_05{top: 9%; left: 45%; width: 27%;}
	section#banner img#building_06{top: 10%; left: -13%; width: 42%; aspect-ratio: 152/227;}
	
	section#services .serviceArticles{grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr));}
	section#services .serviceArticles article{grid-row-end: span 2;}
	section#services .serviceArticles article:first-child{grid-row-start: 2}
	
	section#about:before, section#about:after{display: none;}	
	section#about .grid{grid-template-columns: 1fr; padding: 56px 0 48px; gap: 36px;}
	section#about .grid p{padding: 0 16px; font-size: 1.25rem;}
	
	section#galery .galery{
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(15, calc((90vw - 24px)/3));
		grid-template-areas:
			"img_01 img_01 img_02"
			"img_01 img_01 img_02"
			"img_01 img_01 img_06"
			"img_07 img_07 img_07"
			"img_10 img_10 img_10"
			"img_10 img_10 img_10"
			"img_03 img_03 img_04"
			"img_03 img_03 img_04"
			"img_08 img_08 img_04"
			"img_08 img_08 img_12"
			"img_05 img_05 img_05"
			"img_09 img_09 img_09"
			"img_09 img_09 img_09"
			"img_11 img_11 img_11"
			"btn btn btn"
		;
	}
	
	section#ourClients .grid.mobile{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
	section#ourClients .grid.logo{width: initial;}
	
	section#team{padding: 30px 0;}
	section#team .content{grid-template-columns: 100%; grid-template-rows: max-content 1px max-content;}
	section#team hr{width: 100vw; margin-left: -5vw;}
	section#team article{align-items: start;}
	
	section#contact{grid-template-columns: 1fr; grid-template-areas: "tl""tr""b";}
	section#contact section#formSide{padding: 50px 32px;}
	section#contact section#formSide h5{font-size: 1.75rem;}
	
	section#contact section#whatsapp h3{font-size: 2.125rem;}
	
	section#contact section#map iframe{aspect-ratio: 355/236;}
	
}