@charset "utf-8";

:root { interpolate-size: allow-keywords; }

::selection { background: #db0909; color: #fff; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #222; }
::-webkit-scrollbar-thumb { background: #db0909; }
/* ::-webkit-scrollbar-thumb:hover { background: #db0909; } */

* { margin: 0; padding: 0; box-sizing: border-box; }
img { color: transparent; pointer-events: none; }
svg { pointer-events: none; }
a { text-decoration: none;
	&.active { color: #db0909; }
}

html { scroll-behavior: smooth; }

body { background: #ccc; min-height: 100svh; display: flex; flex-flow: column; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 14px; -webkit-tap-highlight-color: transparent; }
/* container { max-width: 1200px; display: block; position: relative; margin: auto; } */


nav { border-bottom: 1px solid #fff; background: #222; width: 100%; height: 80px; position: fixed; top: 0; left: 0; right: 0; z-index: 1;   box-sizing: content-box; scroll-target-group: auto;
	ul { list-style: none; margin: 0; padding: 0; display: flex;
		li { display: flex;
			&:not(:last-child) { border-right: 1px solid #333; }
			a { display: flex; position: relative; padding: 20px 30px; font-size: 30px; font-style: italic; font-weight: 500; font-variant: small-caps; color: #fff; overflow: hidden;
				&::after { content: ""; background: #db0909; width: 100%; height: 10px; position: absolute; bottom: 0; left: 0; translate: 0 10px; transition: .25s; }
				&:hover::after { translate: 0; }
				&:hover { background: #151515; }
				
				&:target-current::after { translate: 0; }
				&:target-current { background: #151515; }
			}
		}
	}
}





main { height: 100vh; overflow-y: scroll; //scroll-snap-type: y mandatory; scroll-snap-type: y proximity; scroll-behavior: smooth; //padding-top: 52px; scroll-padding-top: 80px; }
section { //height: calc(100vh - 80px); min-height: min-content; display: flex; flex-direction: column; //justify-content: center; position: relative; scroll-snap-align: start; //scroll-snap-stop: always; container-type: scroll-state; container-name: section; }

section {
	h2 { background: #fff; width: 220px; height: 68px; position: absolute; top: 0; left: 10px; padding-left: 45px; font-size: 36px; font-style: italic; font-weight: bold; color: #db0909; translate: 0 -25px; transition: translate .5s; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 14% 100%); }
}

@container section scroll-state(snapped: y) {
	section h2 { translate: 0; }
}



section#home { width: 100%; height: auto; position: relative; margin-top: 80px;
	img { width: 100%; height: auto; vertical-align: bottom; }
	
	#logo { background: url(images/logo.png) no-repeat; background-size: contain; width: 450px; height: 110px; position: absolute; top: 30px; left: 20px; }
	
	a[href^=tel] { width: fit-content; display: flex; align-items: center; gap: 10px; position: absolute; top: 30px; right: 20px; //padding: 10px 25px; font-size: 54px; font-style: italic; font-weight: bold; line-height: 70px; color: #000;   animation: fly 1s 1s backwards;
		&::before { content: ""; background: url(images/phone.png) no-repeat center; width: 80px; height: 70px; }
		&:hover { color: #111; }
	}
}


section#about { background: #222; padding: 80px 20px;
	p { margin: 15px 0; font-size: 20px; font-style: italic; line-height: 36px; color: #fff; }
}


section#offer { padding: 80px 20px;
	h1 { color: #db0909; }
	
	offers { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 40px;
		offer {
			/* &:has(img) { display: grid; place-items: center; } */
			h1 { margin: 20px 0; }
			p { margin: 15px 0; font-size: 20px; line-height: 36px; }
			ul.icon-list { list-style: none; padding-left: 25px; font-size: 20px; line-height: 36px;
				li { position: relative;   animation: sweep .25s calc(sibling-index() * .1s) both; /* + var(--delay) */
					&::before { content: ""; background: url(images/list_arrow.png) center no-repeat; width: 16px; height: 16px; position: absolute; top: 12px; left: -25px; }
				}
			}
			img {}
		}
	}
}


section#contact { background: #222; flex-flow: row wrap; padding: 80px 20px 0;
	> div { flex: 0 1 50%; display: flex; flex-flow: column; gap: 10px; }
	h1 { color: #fff; }
	
	a[href*=SAQL] { width: fit-content; display: flex; align-items: center; gap: 10px; font-size: 24px; line-height: 30px; color: #fff;
		/* &::before { content: ""; background: url(images/marker.svg) no-repeat center; background-size: contain; width: 40px; height: 40px; } */
	}
	
	a[href^=tel] { width: fit-content; display: flex; align-items: center; gap: 10px; /* position: absolute; top: 30px; right: 20px; */ //padding: 10px 25px; font-size: 42px; font-style: italic; font-weight: bold; line-height: 50px; color: #fff;   //animation: fly 1s 1s backwards;
		&::before { content: ""; background: url(images/phone_contact.png) no-repeat center; width: 80px; height: 70px; }
	}
	
	a[href^=mail] { width: fit-content; display: flex; align-items: center; gap: 10px; /* position: absolute; top: 30px; right: 20px; */ //padding: 10px 25px; font-size: 20px; font-style: italic; //font-weight: bold; line-height: 50px; color: #fff;   //animation: fly 1s 1s backwards;
		&::before { content: ""; background: url(images/mail.png) no-repeat center; width: 80px; height: 70px; }
	}
	
	a:hover { color: #eee; }
}



@keyframes fly {
	0% { opacity: 0; translate: -10px; }
	100% { opacity: 1; translate: 0; }
}

@keyframes title {
	0% { opacity: 0; translate: 0 -2vw; }
	100% { opacity: 1; translate: 0; }
}


form { flex: 0 1 50%;
	h3 { font-size: 24px; font-style: italic; font-weight: 500; color: #db0909; }
	wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; gap: 15px; margin: 15px 0; }
	input { border: 1px solid #666; background: #222; width: calc(100% / 3 - 10px); padding: 10px; font: inherit; color: #fff; transition: .25s;
		&::placeholder { font-style: italic; color: #999; }
		&:focus { outline: none; box-shadow: 0 0 0 2px #666; }
	}
	textarea { border: 1px solid #666; background: #222; width: 100%; min-height: 120px; padding: 10px; font: inherit; color: #fff; transition: .25s;   resize: none; field-sizing: content;
		&::placeholder { font-style: italic; color: #999; }
		&:focus { outline: none; box-shadow: 0 0 0 2px #666; }
	}
	
	[type=submit] { border: 1px solid #666; background: #222; font-size: 18px; font-weight: bold; text-align: center; color: #999; cursor: pointer;
		&:hover { background: #333; color: #fff; }
	}
}

copyright { margin: 40px 0; color: #777; }
map { //border-radius: 20px; background: #f5f5f5; height: 420px; display: block; position: relative; //margin: 50px 0; overflow: hidden; }





/* GOOGLE MAPS */
map { /* border-radius: 5px; background: #f5f5f5; height: 350px; display: block; margin: 50px 0; */
	/* --gmp-mat-color-surface: #fff;
	--gmp-mat-color-on-surface: #000;
	--gmp-mat-color-on-surface-variant: #999;
	--gmp-mat-color-primary: #1a7ec0;
	--gmp-mat-color-positive: #b0cb1f;
	--gmp-mat-color-negative: #d00;
	--gmp-mat-color-info: #1a7ec0; */
	--gmp-mat-color-secondary-container: #db0909;
	--gmp-mat-color-on-secondary-container: #fff;
	/* --gmp-mat-color-neutral-container: ;
	--gmp-mat-color-on-neutral-container: ;
	--gmp-mat-color-outline-decorative: #eee; */
	--gmp-thumbnail-border-radius: 0;
	gmp-place-details-compact { color-scheme: only light; border-radius: 0; border: none; background: rgba(255,255,255,.75); width: 360px; position: absolute; top: 20px; left: 20px; backdrop-filter: blur(10px); box-shadow: 0 0 20px rgba(0,0,0,.1); }
	.gm-style {
		/* div { border-color: #1a7ec0 !important; } */
		button { width: inherit; }
	}
	.drop { animation: drop .3s linear forwards .5s; }
}
@keyframes drop {
	0% { opacity: 0; translate: 0 -200px; }
	5% { opacity: .7; }
	50%, 100% { opacity: 1; translate: 0; }
	75% { translate: 0 -22px; }
}