:root {
	--primary: var(--primary900);
	--gray: #dddddf; --techblack: #231f20;
	--primary50: #f2f9ff; --primary100: #cbe8ff; --primary200: #a4d7ff; --primary300: #70c1ff; --primary400: #3caaff; --primary500: #0893ff; --primary600: #2f65a7; --primary700: #0061ac; --primary800: #004b85; --primary900: #036;
	--white: #fff; --black: #000;
}

html {font: medium/1.19 Barlow, sans-serif; color: var(--techblack); background-color: var(--white);}
a:not(:hover) {text-decoration: none;}
h1, h2 {margin: 0;}

.btn {padding: .875rem 1.25rem; border-radius: .25rem; font-weight: 700; background-color: var(--primary300);}
.btn:hover {text-decoration: none; background-color: var(--primary200);}
.content > *:first-child {margin-top: 0;}

.main {display: grid; justify-items: start; width: 84%; max-width: 51.875rem; margin-top: 1rem; margin-inline: auto;}
.main h1 {margin-top: 5rem; font-size: 3rem; line-height: .96;}
.mcontent {margin-block: 2rem 2.5rem;}

.waves {height: 19rem; margin-top: 1rem; background-image: url('images/waves.svg'); background-position-x: 90%; background-repeat: no-repeat; background-size: cover;}

.footer {width: 92%; max-width: 60.625rem; margin-top: 2.75rem; margin-inline: auto; padding: 1.875rem 1.25rem; border: 1px solid var(--primary100); border-bottom: 0; border-radius: 1rem 1rem 0 0; font-size: .875rem; line-height: 1.29; background-color: var(--primary50);}
.fcontent {font-size: 1.75rem; line-height: 1.07;}
.fcontact {display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: start; margin-top: 2.5rem;}
.faddress, .fphone {display: grid; grid-template: auto auto / auto 1fr; flex-basis: 12.5rem; gap: .25rem 1rem;}
:is(.faddress, .fphone)::before {grid-row: 1 / -1; content: '';}
:is(.faddress, .fphone) h2 {font-size: 1rem; line-height: 1.19;}
.faddress::before {width: 12px; height: 18px; background-image: url('images/marker.svg');}
.fphone::before {width: 19px; height: 20px; background-image: url('images/phone.svg');}
.femails {margin-top: 2.5rem;}
.femails dd {margin-top: .25rem; margin-left: 0; font-weight: 700;}
.femails div + div {margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--primary100);}

@media (min-width: 48em) { /* 768px */

	.main {grid-template: auto auto / 1fr auto; gap: 2rem 3.375rem; margin-top: 11.25rem;}
	.main h1, .mcontent {max-width: 33.125rem;}
	.main h1 {margin-top: 0;}
	.mcontent {grid-column: 2; margin-block: 0;}
	.main .btn {grid-row: 2; align-self: start;}

	.waves {height: 28.625rem; margin-top: 2.5rem; background-position-x: center; background-size: auto;}

	.footer {display: grid; grid-template: auto auto / auto 1fr; gap: 1.5rem 2.75rem; padding-block: 4.375rem;}
	.fcontent, .fcontact {justify-self: end; width: 100%; max-width: 33.125rem;}
	.fcontact {margin-top: 0;}
	.femails {grid-area: 1 / 1 / 3 / 2; width: 12.5rem; margin-top: 0;}

}

@media (min-width: 64em) { /* 1024px */

	.footer {padding-inline: 4.375rem;}

}

@media (min-width: 90em) { /* 1440px */

	.waves {aspect-ratio: 3.15; height: auto; background-size: cover;}

}

@media (prefers-reduced-motion: no-preference) {

	html {scroll-behavior: smooth;}

}