:root {
	--green : #78BB23;
	--light-green : #BBDD17;
	--white : #fff;
	--off-white : #ffffffbf;
	--gray-white : #F7FAFC;
	--gray : #475569;
	--off-gray : #dbe3ea;
	--light-gray : #94a3b8;
	--orange : #F26C25;
	--blue-gray : #64748b;
	--blue : #1C5078;
	--blue-dark : #1e293b;
	--bluey : #3fa7d2;
	--blue-gradient : var(--blue), var(--bluey);
}
html, body {padding:0;margin:0;min-width:100%;min-height:100%;font-family:"Inter", sans-serif;}
header {position:fixed;top:0;left:0;right:0;width:100%;height:80px;z-index: 1;background-color: rgb(255 255 255 / 0.1);}
header.scrolled {background: rgba(0,0,0,0.5);backdrop-filter: blur(10px);box-shadow: 0 4px 20px rgba(0,0,0,0.08);}
.logo {height:60px;margin:10px 20px;width:210px;}
.logo img {height:60px;}
nav {position:fixed; right:20px;top:10px;}
nav ul {list-style-type: none;}
nav ul li {display:inline-block;}
nav ul li a, nav ul li a:visited {--tw-text-opacity: 1;display:block;padding:10px 20px;color:#fff;font-weight: 500;font-size: 0.875rem;line-height: 1.25rem;text-decoration:none;}
nav ul li a:hover {background-color: rgb(255 255 255 / 0.3);transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;border-radius:0.5rem;}
.herosection {text-align:center;width:100%;position:relative;height:100vh;background-image: url('/images/placeholder.jfif');background-size: cover;background-position: center;background-repeat: no-repeat;}
.herocontent {position:absolute;height:30vh;width:100%;max-width: 80rem;left:calc(50% - 40rem);top:calc(50% - 15vh);}
.herocontent h1 {font-size: 4.5rem;line-height: 1;--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity, 1));letter-spacing: -0.025em;text-shadow: 1px 1px #ccc;}
.herocontent h1 span {color: var(--light-green);display: block;}
.herocontent p {font-size: 1.25rem;line-height: 1.75rem;color:var(--off-white);}
.button {border-radius:0.5rem;display:inline-block;color:var(--white);padding:10px 20px;font-weight: 500;font-size: 0.875rem;line-height: 1.25rem;text-decoration:none;}
.button-green, .button-green:hover {background-color: var(--green);}
content {margin:200px 0;display:block;font-size: 1rem;line-height: 1.625;color: var(--blue-gray);}
footer {background-color: var(--gray);color:var(--light-gray);padding:50px 20px;}
footer .copyright {width:90%;text-align:center;margin:10px auto;}
footer .blocksbox {width:100%;max-width:1650px;margin:0 auto 20px;display:flex;flex-wrap:wrap;gap: 20px;}
footer .blocksbox .blocks {flex: 1 1 calc(25% - 15px);}
footer .blocksbox .blocks:first-child {}
footer .blocksbox .blocks h3 {color:var(--white);}
footer .blocksbox .blocks ul {margin:10px 0;list-style: none;padding:0;}
footer .blocksbox .blocks ul li {margin:15px 0;}
footer .blocksbox .blocks ul li a, footer .blocksbox .blocks ul li a:visited {color:var(--light-gray);text-decoration:none;display:flex;line-height:24px;}
footer .blocksbox .blocks ul li a svg {height:24px;}
footer .blocksbox .blocks ul li a:hover {color:var(--white);}
.clear {clear:both;}

.experience-box {background-image:url(/images/experience.jfif);background-size: cover;background-position: center;background-repeat: no-repeat;aspect-ratio: 4 / 3;border-radius: 1rem;}
.service-box {background-image:url(/images/services.webp);background-size: cover;background-position: center;background-repeat: no-repeat;aspect-ratio: 4 / 3;border-radius: 1rem;}
.contact-box {background-image:url(/images/contact.jpg);background-size: cover;background-position: center;background-repeat: no-repeat;aspect-ratio: 4 / 3;border-radius: 1rem;}

#form {position: absolute;top: -250px;}

content h2 {color:var(--blue-dark);font-size: 2.25rem;line-height: 2.5rem;margin: 0 .75rem;text-shadow: 1px 1px #ccc;}
content h2 span {color:var(--blue);display:block;}
content h3 {color:var(--blue-dark);font-size: 1.125rem;line-height: 1.75rem;margin: 0 .75rem;text-shadow: 1px 1px #ccc;}
.content-top {width:calc(100% - 20px);display:flex;flex-wrap:wrap;gap:100px;margin:0 auto 150px;max-width:1650px;}
.content-top .boxes {flex: 1 1 calc(50% - 50px);}

.content-mid {width:calc(100% - 20px);background-color: var(--gray-white);padding:150px 0;text-align:center;}
.services-box {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;width: calc(100% - 20px);max-width:1650px;margin:30px auto 10px;}
.services-box .boxes {min-height: 130px;border:1px solid var(--off-gray);background-color:var(--white);border-radius: 1rem;padding:25px;}

.content-bottom {width:90%;margin:150px auto 0;max-width:1650px;padding:150px 0;border-radius: 1rem;background-image:linear-gradient(to bottom right, var(--blue-gradient))}

.content-cta {width:90%;max-width:800px;margin:0 auto;text-align:center;color: var(--off-white);font-size:1.2rem}
.content-cta .title {position:relative;color:var(--white);font-size: 3rem;line-height: 1;font-weight: 700;}
.content-cta .button {font-size:1.1rem;padding: 20px 40px;}
.content-cta .button img {height: 21px;display: inline-block;vertical-align: text-top;}

.boxlink, .boxlink:visited {text-decoration:none; color:var(--orange);}

.icons {width: 32px;}

#menu-toggle {display:none;}
.menu-button {display:none;}

@media screen and (max-width: 1000px) {
	.content-top {width: calc(100% - 40px);gap: 50px;}
	.services-box {grid-template-columns: repeat(2, 1fr);width: calc(100% - 20px);}
	.herocontent {left:0;top: calc(50% - 24vh);}
}

@media screen and (max-width: 768px) {
    .content-top, .blocksbox {flex-direction: column;padding: 10px;width: calc(100% - 20px);margin: 0 auto 50px;}
	.content-top {flex-direction: column-reverse;}
    .content-top .boxes {flex: 1 1 100%;width:100%;}
    .blocksbox .blocks {flex: 1 1 100%;}
	.herocontent p {font-size: 1.5rem;color: var(--white);text-shadow: 1px 1px #333;}
	.services-box {grid-template-columns: 1fr;}
	.herocontent {left:0;top:100px;}
	.herocontent h1 {font-size: 3.2rem;}
	content {margin: 50px 0;}
	.content-mid {padding: 50px 10px;}
	nav {position: absolute;top: 80px;right: 0;width: 100%;display: none;}
	nav, header.scrolled nav {background: rgba(0,0,0,0.5);backdrop-filter: blur(10px);box-shadow: 0 4px 20px rgba(0,0,0,0.08);}
	nav ul {padding: 20px;margin: 0;}
	nav ul li {display: block;margin: 10px 0;}
	nav ul li a {color: var(--blue-dark);padding: 12px;border-radius: 8px;}
	.menu-button {display: block;position: absolute;right: 20px;top: 25px;font-size: 28px;color: white;cursor: pointer;}
	#menu-toggle:checked + .menu-button + nav {display: block;}
}