@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {margin: 0; padding: 0;}

/* :root {font-size: 20px;} */
html {display: grid; min-height: 100%;}

body {
	min-height: 100vh;
	font-family: 'Poppins', system-ui, sans-serif;
	line-height: 1;
	color: #1a171b;
	background-color: #fff;
}


.container {
	--font_size: 1rem;
	--border_width: 2.5rem;
	position: relative;
	height: calc(100% - var(--border_width) * 2);
	border: var(--border_width) solid #fff;
	background-repeat: no-repeat; background-size: cover; background-position: center center;
}
@media (min-width: 1921px) {
.container {background-image: url('img/fot-2650x1600.jpg');}
}
@media (max-width: 1920.98px) {
.container {background-image: url('img/fot-1920x1200.jpg');}
}
@media (max-width: 767.98px) {
.container {
	--font_size: 0.9rem;
	--border_width: clamp(0.625rem, 3.333vw, 1.25rem);
}
}
@media (max-width: 575.98px) and (orientation: portrait) {
.container {background-image: url('img/fot-600x1000.jpg');}
}
@media (max-width: 374.98px) {
.container {
	--font_size: 0.8rem;
}
}


.content {
	--content_padding: 3.75rem;
	clip-path: polygon(calc(100% - (var(--content_padding) * 1.5 + 4px)) 0, 100% calc(var(--content_padding) + 4px), 100% 100%, 0 100%, 0 0);
	display: inline-flex; justify-content: center; flex-direction: column;
	padding: calc(var(--content_padding) * 0.8) calc(var(--content_padding) * 1.25); margin: 3.75rem; margin-right: auto;
	background-color: #fff;
}
@media (max-width: 767.98px) {
.content {
	--content_padding: clamp(2rem, 7.5vw, 3.75rem);
	margin: clamp(1rem, 5vw, 1.875rem);
}
}


.logo {order: 1; margin-bottom: 1.125rem/* 2.25rem */;}
.logo img {width: 250px; margin-left: calc(var(--font_size) * -0.3125);}
@media (max-width: 767.98px) {
.logo img {width: 100%;/* clamp(115px, 36vw, 216px); */}
}

.services {order: 2; margin-bottom: 1.25rem/* 2.25rem */;}
.services ul {list-style-type: none; font-size: var(--font_size); font-weight: 700;}
.services li {margin-block: 0.75rem;}

.info {order: 3; margin-bottom: 1.25rem/* 1.875rem */;}
.info h2 {margin-bottom: 0.75rem; font-size: calc(var(--font_size) * 1.125); font-weight: 700;}
.info p {margin-bottom: 0.5rem; font-size: calc(var(--font_size) * 0.875); line-height: 1.25;}

.contact {order: 4; margin-bottom: 1rem/* 2rem */;}
.contact h1 {margin-bottom: 0.875rem; font-size: calc(var(--font_size) * 1.125); line-height: var(--font_size); font-weight: 900;}
.contact h1 span {font-size: calc(var(--font_size) * 0.875); font-weight: 600;}
.contact p {margin-bottom: 0.75rem; font-size: calc(var(--font_size) * 0.875); line-height: 1.25;}
.contact a {text-decoration: none; text-underline-offset: 0.15em; color: #1a171b;}
.contact a:is(:hover, :focus, :active) {text-decoration: underline;}

.directions {order: 5;}
.directions a {display: flex; align-items: center; gap: 1.25rem; font-size: calc(var(--font_size) * 0.75); font-weight: 700; text-transform: uppercase; text-decoration: none; text-underline-offset: 0.15em; color:  #1a171b;}
.directions a:is(:hover, :focus, :active) {text-decoration: underline;}
.directions img {width: 1.4375rem;}


.newmanstudio {position: absolute; bottom: 1.25rem; right: 3.75rem;}
.newmanstudio a {display: flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; text-decoration: none; color: #000; transition: all 0.2s;}
/* .newmanstudio a:hover {color: #b5274f; text-decoration: none;} */
.newmanstudio a svg {width: 1.25rem; height: auto; fill: #000; transition: all 0.2s;}
/* .newmanstudio a:hover svg path {fill: #b5274f;} */
@media (max-width: 767.98px) {
.newmanstudio {bottom: 0.875rem; right: 1.25rem;}
}
@media (max-width: 439.98px) {
.newmanstudio span {display: none;}
}
@media (max-width: 374.98px) {
.newmanstudio {bottom: 0.5rem; right: 0.5rem;}
}