/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	color: #222;
	font-size: 1em;
	line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: var(--color-accent);
	text-shadow: none;
}

::selection {
	background: var(--color-accent);
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	  resize: vertical;
}

/**
 * Base
 */
*, 
::after, 
::before {
	box-sizing: border-box;
}

html {
	color: var(--color-contrast);
	line-height: 1.6;
	overflow-y: scroll;
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	background-color: var(--color-base);
	overflow: hidden;
	margin: 0;
	font-weight: 400;
}

figure {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

small {
	font-size: var(--fs-sm);
}

input:focus, 
textarea:focus {
	outline: none;
}

/**
 * Variables
 */
:root {
	--color-contrast: #ffffff;
	--color-base: #060a08;
	--color-accent: #2b78e4;
	--color-gray: #161d1a;
	--fs-sm: clamp(0.8333rem, 0.7652rem + 0.303vw, 1rem);
	--fs-md: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
	--fs-lg: clamp(1.2rem, 1.0517rem + 0.6591vw, 1.5625rem);
	--fs-xl: clamp(1.44rem, 1.2301rem + 0.933vw, 1.9531rem);
	--fs-xxl: clamp(1.728rem, 1.4362rem + 1.2971vw, 2.4414rem);
	--fs-xxxl: clamp(2.0736rem, 1.6734rem + 1.7785vw, 3.0518rem);
	--fs-xxxxl: clamp(2.4883rem, 1.9457rem + 2.4116vw, 3.8147rem);
	--vertical-spacing: var(--fs-md);
}

/**
 * Typography
 */
body {
	font: 300 var(--fs-md)/1.6 Rubik, sans serif;
	text-rendering: optimizeLegibility;
	font-size: var(--fs-md)
}

h1,
.h1,
h2, 
.h2,
h3, 
.h3,
h4, 
.h4,
h5, 
.h5,
h6, 
.h6 {
	font-style: normal;
	margin-top: var(--vertical-spacing);
	margin-bottom: var(--vertical-spacing);
	text-rendering: optimizeLegibility; 
	font-weight: 700;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
	line-height: 1.4;
}

h1, 
.h1 {
	font-size: var(--fs-xxxxl);
	line-height: 1.1;
}

h2, 
.h2 {
	font-size: var(--fs-xxxl);
}

h3, 
.h3 {
	font-size: var(--fs-xxl);
}
  
h4, 
.h4 {
	font-size: var(--fs-lg);
}

h5, 
.h5,
h6, 
.h6 {
	font-size: var(--fs-md);
}

p {
	margin-top: 0;
	margin-bottom: var(--vertical-spacing);
}

a {
	text-decoration: none;
	color: var(--color-contrast);
	transition: color .2s ease-in-out 0s;
}

a:not(h3 > a) {
	font-weight: 400;
}

a > p {
	font-weight: 300;
}

a:active:not(.btn-primary),
a:focus:not(.btn-primary),
a:hover:not(.btn-primary) {
	color: var(--color-accent);
}

li {
	margin-bottom: calc(var(--vertical-spacing) / 2);
}

strong,
b {
	font-weight: 700;
}

/**
 * Layout
 */
.wrapper {
	margin: auto;
	max-width: 1280px;
	padding-left: 2rem;
	padding-right: 2rem;
}

.site-header.wrapper,
.site-footer.wrapper {
	max-width: 1920px;
}

@media only screen and (min-width: 1024px) {
	.wrapper {
		padding-left: 4rem;
		padding-right: 4rem;
	}
}

main,
.site-footer {
	display: block;
}

.before-main {
	position: relative;
	height: 2.5rem;
	background-color: var(--color-contrast);
	border-bottom-left-radius: 2.5rem;
  	border-bottom-right-radius: 2.5rem;
}

.site-footer {
	margin-top: 8rem;
	padding-bottom: 2rem;
}

@media only screen and (min-width: 1024px) {
	.site-footer {
		margin-top: 10rem;
	}
}

/**
 * Site Top
 */		
.site-header {
	display: flex;
	justify-content: space-between;
	padding-top: 2rem;
	padding-bottom: 2rem;
	align-items: center;
}

@media only screen and (min-width: 768px) {
	.site-header {
		align-items: start;
	}
}

/**
 * Site Logo
 */
.logo a {
	display: block;
	line-height: 1rem;
	font-weight: 800;
	letter-spacing: -7px;
	font-size: 4rem;
}

.logo a span {
	position: relative;
	display: inline-block;
}

.logo a span::after {
	display: block;
	content: '';
	width: var(--fs-sm);
	height: var(--fs-sm);
	background-color: var(--color-accent);
	border-radius: 100%;
	transition: background-color .2s ease-in-out 0s;
}

.logo a:active span::after,
.logo a:focus span::after,
.logo a:hover span::after {
	background-color: var(--color-contrast);
}

/**
 * Main Navigation
 */
.main-navigation {
	display: flex;
	justify-content: end;
}

.main-navigation ul {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	text-align: center;
	margin-bottom: 0;
}

.main-navigation a {
	display: block;
	padding: .125rem 0;
	text-decoration: none;
}

.nav-menu li.current-menu-item a,
.main-navigation a:active,
.main-navigation a:focus,
.main-navigation li.active a {
	text-decoration: underline dashed var(--color-contrast) 2px;
	text-underline-offset: 8px;
	text-decoration-color: var(--color-accent);
	transition: all 0.2s ease;
}

.menu-toggle {
	position: relative;
	z-index: 999;
	width: 36px;
	height: 24px;
	display: block;
	cursor: pointer;
	border: none;
	background-color: var(--color-base); 
}

.menu-toggle::after {
	display: block;
	position: absolute;
	width: 36px;
	height: 24px;
	top: 0;
	right: 0;
	content: "";
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20700%20384'%3E%3Cpath%20d='m284%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h384c17.7%200%2032-14.3%2032-32s-14.3-32-32-32h-384zm-112%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h496c17.7%200%2032-14.3%2032-32s-14.3-32-32-32h-496zm-140%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h636c17.7%200%2032-14.3%2032-32s-14.3-32-32-32h-636z'/%3E%3C/svg%3E");
	
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20700%20384'%3E%3Cpath%20d='m284%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h384c17.7%200%2032-14.3%2032-32s-14.3-32-32-32h-384zm-112%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h496c17.7%200%2032-14.3%2032-32s-14.3-32-32-32h-496zm-140%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h636c17.7%200%2032-14.3%2032-32s-14.3-32-32-32h-636z'/%3E%3C/svg%3E");
	
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: center;
	mask-position: center;

	-webkit-mask-size: 36px;
	mask-size: 36px;

	background-color: var(--color-contrast); 
	transition: opacity .2s ease, background-color .2s ease;
}

.toggled .menu-toggle {
	width: 24px;
	height: 24px;
	animation: nav-sliding-effect .40s ease-in-out forwards;
	animation-delay: 0s;
	opacity: 1;
	visibility: hidden;
}

.toggled .menu-toggle::after {
	width: 24px;
	height: 24px;
	
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3-12.5-12.5-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0-12.5 12.5-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3 12.5 12.5 32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0 12.5-12.5 12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3-12.5-12.5-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0-12.5 12.5-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3 12.5 12.5 32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0 12.5-12.5 12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
	
	-webkit-mask-size: 24px;
	mask-size: 24px;
}

@media only screen and (min-width: 768px) {
	.menu-toggle {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	
	.main-navigation {
		flex-direction: row-reverse;
	}
	
	.main-navigation ul {
		display: none;
		flex-direction: column;
		gap: .5rem;
		position: fixed;
		justify-content: center;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: var(--color-base);
		z-index: 111;
	}	
	
	.toggled.main-navigation ul {
		display: flex;
		padding: 0 2rem;
	}
	
	.main-navigation li {
		animation: nav-sliding-effect .40s ease-in-out forwards;
		animation-delay: 0s;
		opacity: 1;
		visibility: hidden;
		--i: 0;
		animation-delay: calc(var(--i) * 0.2s);
	}
	
	.main-navigation li:nth-child(1) { 
		--i: 1; 
	}
	
	.main-navigation li:nth-child(2) { 
		--i: 2; 
	}
	
	.main-navigation li:nth-child(3) { 
		--i: 3; 
	}
	
	.main-navigation li:nth-child(4) { 
		--i: 4; 
	}
	
	.main-navigation li:nth-child(5) { 
		--i: 5; 
	}
	
	.main-navigation a {
		font-size: var(--fs-xl);
	}
	
}

/**
 * Elements
 */
#hero,
#services,
#portfolio,
#contact,
#about {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

#hero > div,
#portfolio > div,
#about > div,
#services > div,
#the-process > div,
#contact > div {
	width: 100%;
}

@media only screen and (min-width: 1024px) {
	#hero > div,
	#portfolio > div:not(.page #portfolio > div),
	#about > div,
	#services > div,
	#the-process > div,
	#contact > div {
		align-self: end;
		max-width: 75%;
	}
}

.section-title {
	position: relative;
	display: inline-block;
	margin-bottom: calc(var(--vertical-spacing) * 2);
	padding-left: calc(var(--vertical-spacing) * 2);
}

.section-title::after {
	position: absolute;
	bottom: -1rem;
	left: 0;
	display: inline-block;
	content: '';
	width: calc(var(--vertical-spacing) * 2);
	height: 0;
	border-bottom: .5rem solid var(--color-accent);
	border-radius: 2px;
	pointer-events: none;
}

/**
 * Hero Section
 */
#hero,
#contact {
	position: relative;
	margin-top: 2rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
}	

@media only screen and (min-width: 1024px) {
	#hero,
	#contact {
		margin-top: 4rem;
	}
}

@media only screen and (min-width: 1024px) {
	#hero {
		margin-bottom: 2rem;
	}	
}

#hero .btn-primary {
	margin-top: 0;
}

#hero .block-columns {
	margin-top: calc(var(--vertical-spacing) * 2);
}

#services > div {
	display: flex;
	gap: 2rem;
	flex-direction: column;
}

#services article,
#the-process article {
	display: flex;
	gap: 2rem;
}

#services svg,
#the-process svg,
.page.uslugi main svg {
	margin-top: calc(var(--vertical-spacing) * 2);
	width: var(--fs-xxxxl);
	fill: var(--color-accent);
}

#portfolio {
	gap: 4rem;
}

#portfolio > div {
	display: flex;
	gap: 4rem;
	flex-wrap: wrap;
}

.project figure {
	margin-bottom: 2rem;
}

.project {
	flex-basis: 100%;
}

@media only screen and (min-width: 768px) {

	#portfolio > div {
		flex-wrap: nowrap;
	}
	
	.project {
		flex-basis: 50%;
	}
	
}

.project img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: all 0.2s ease;
}

.project a:active img,
.project a:focus img,
.project a:hover img {
	transform: translateY(-.25rem);
}

#about > div {
	display: flex;
	justify-content: center;
	gap: 4rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.my-photo img {
	display: block;
	margin: calc(var(--vertical-spacing) / 2) auto auto auto;
	max-width: 260px;
}

.za-men .my-photo img {
	margin-top: calc(var(--vertical-spacing) * 2);
}

@media only screen and (min-width: 768px) {

	.za-men .block-columns,
	#about > div {
		flex-wrap: nowrap;
		justify-content: inherit;
	}
	
	#about > div .my-photo {
		flex-basis: 33.333%;
	}
	
	#about > div div {
		flex-basis: 66.666%;
	}
	
	.za-men .block-columns .my-photo {
		flex-basis: 260px;
	}
	
	.za-men .block-columns section {
		flex-basis: calc(100% - 260px);
	}
		
	.my-photo img {
		max-width: 100%;
	}

}

#faq {
	margin-top: calc(var(--vertical-spacing) * 4);
}

details.faq-item summary::-webkit-details-marker {
	display: none;
}

details.faq-item {
	border-top: 1px solid var(--color-gray);
	padding: var(--vertical-spacing) 0;
	transition: all 0.3s ease;
}

details.faq-item:first-child {
	border-top: 1px solid var(--color-gray);
}

summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

summary h3 {
	margin: 0!important;
	padding-right: 2rem;
	font-size: var(--fs-lg);
	transition: color 0.3s ease;
}

summary::after {
	content: '+';
	font-size: var(--fs-xl);
	font-weight: 100;
	transition: transform 0.3s ease;
}

details[open] summary::after {
	transform: rotate(45deg);
}

details[open] summary h3 {
	color: var(--color-accent);
}

.block-columns {
	display: flex;
	gap: 2rem 4rem;
	flex-wrap: wrap;
}

.uslugi .block-columns + .block-columns {
	margin-top: var(--vertical-spacing);
	margin-bottom: calc(var(--vertical-spacing) * 4);
}

.block-columns > div,
.block-columns > article,
.block-columns > section {
	flex-basis: 100%;
}

@media only screen and (min-width: 1024px) {
	
	.block-columns {
		flex-wrap: nowrap;
	}
	
	.block-columns > div,
	.block-columns > article,
	.block-columns > section {
		flex-basis: 50%;
	}
	
}

.contacts-cards {
	display: flex;
	gap: 2rem;
	flex-direction: column;
	flex-wrap: nowrap;
}

.contacts-cards a svg {
	margin-right: .5rem;
	width: var(--fs-xl);
	fill: var(--color-accent);
	transition: fill .2s ease-in-out 0s;
}

.contacts-cards a:active svg,
.contacts-cards a:focus svg,
.contacts-cards a:hover svg {
	fill: var(--color-contrast);
}

.bottom-contacts {
	margin-top: 8rem;
	margin-bottom: calc(var(--vertical-spacing) * 4);
}

/*
 * Contact Form
 */
.form-group {
	margin-bottom: var(--vertical-spacing);
}

.contact-form input, 
.contact-form textarea {
	font: 300 var(--fs-md)/1.6 Rubik, sans serif;
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--color-gray);
	color: var(--color-contrast);
	padding: calc(var(--vertical-spacing) / 2) 0;
	font-size: var(--fs-md);
	transition: border-color 0.3s ease;
}

.contact-form input:focus, 
.contact-form textarea:focus {
	outline: none;
	border-bottom: 2px solid var(--color-accent);
}

.btn-primary {
	position: relative;
	display: inline-block;
	z-index: 1;
	overflow: hidden;
	width: auto;
	padding: 1rem 2rem;
	margin-top: var(--vertical-spacing);
	background: var(--color-accent);
	color: var(--color-contrast);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: var(--fs-md);
	font-weight: 600;
	transition: opacity 0.3s;
}

.btn-primary.outlined {
	padding: calc(1rem - 2px) calc(2rem - 2px);
	background: transparent;
	border: 2px solid var(--color-contrast);
	color: var(--color-contrast);
}

.contact-form small {
	display: block;
	margin-top: var(--vertical-spacing);
	opacity: .75;
}

.btn-primary::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: block;
	background-color: var(--color-contrast);
	transform: scaleX(0);
	transform-origin: right; 
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:active,
.btn-primary:hover {
	color: var(--color-accent);
	
}

.btn-primary:active::before,
.btn-primary:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

#my-form-status {
	margin-top: var(--vertical-spacing);
	text-align: center;
}

.site-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
	gap: 1rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-gray);
}

@media only screen and (min-width: 768px) {
	.site-info {
		justify-content: space-between;
	}
}

.site-info > * {
	margin: 0;
	padding: 0;
	flex-basis: 100%;
}

@media only screen and (min-width: 768px) {
	.site-info > * {
		flex-basis: inherit;
	}
}

.site-info p {
	margin-bottom: 0;
}

.site-info a {
	font-weight: inherit;
	font-size: var(--fs-sm);
}

.footer-navigation {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media only screen and (min-width: 768px) {
	.footer-navigation {
		flex-direction: row;
		gap: 2rem;
	}
}

/**
 * Pages
 */
.page .site-header {
	margin-bottom: 2rem;
}

@media only screen and (min-width: 1024px) {
	.page .site-header {
		margin-bottom: 4rem;
	}
}

.page-title {
	position: relative;
	margin-bottom: 4rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.page main h2,
.page .page-title + h2,
.page main * > h3 {
	margin-top: calc(var(--vertical-spacing) * 2);
}

@media only screen and (min-width: 1024px) {
	main > section > header > p {
		max-width: 75%;
	}
}

/**
 * Animations & More
 */
@keyframes nav-sliding-effect {
	0% {
		opacity:0;
		transform:translateY(-20px);
		visibility:hidden
	}
	to {
		opacity:1;
		transform:translateY(0);
		visibility:visible
	}
}

.text-align-center {
	text-align: center;
}

.sep {
	margin-left: .5rem;
	margin-right: .5rem;
}

.normal--weight {
	font-weight: inherit;
}

.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
 
.skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	background-color: var(--color-contrast);
	color: var(--color-base);
}

.dots {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: visible;
	width: 75%;
	height: 100%;
	z-index: -1;
}

@media only screen and (min-width: 1024px) {
	.dots {
		left: -4rem;
	}
}

.dots::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(135deg, rgba(255,255,255,0.4) 1px, transparent 1px),
		linear-gradient(225deg, rgba(255,255,255,0.4) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	pointer-events: none;

	-webkit-mask-image: linear-gradient(
		315deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0) 25%,
		rgba(0,0,0,1) 50%
	);
	mask-image: linear-gradient(
		315deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0) 25%,
		rgba(0,0,0,1) 50%
	);
}