/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');



/* Reset */

* {padding: 0;	margin: 0; -webkit-tap-highlight-color: transparent;}
*, *::before, *::after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
:focus, :active {outline: none;}

header, footer, nav, section, article, aside {display: block;}

html, body {
	width: 100%;
	min-height: 100%;
	font-size: 100%;
	line-height: normal;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
}

input, button, textarea, select {
	font: inherit;
	background: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
input::placeholder, textarea::placeholder {opacity: 1;}
input::-ms-clear {display: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
button, input[type="button"], input[type=submit] {cursor: pointer;}
button[disabled], input[disabled] {cursor: default; opacity: 0.5; pointer-events: none;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display: none;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type="number"] {-moz-appearance: textfield;}

a, a:hover, a:visited {text-decoration: none;}
img {display: block; max-width: 100%;}

h1,h2,h3,h4,h5,h6 {font-size: inherit; font-weight: normal;}

ol, ul {list-style: none;}

table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: inherit;}

.scroll-disable {overflow: hidden; touch-action: none;}
.scroll-disable.safari {height: 100svh; position: fixed;}




/* Global */

:root {
	--font-family: 'Inter', sans-serif;
	--second-family: Georgia, 'Times New Roman', serif;

	--accent-color: #a4d174;
	--accent-color2: #ed207b;
	--white: #FFFFFF;
	--black: #262626;
	--lightgray: #fbfbfb;
	--softgray: #dddddd;
	--gray: #a8a8a8;
	--mediumgray: #999999;
	--darkgray: #6f6f6f;
	--darkergray: #5c5c5c;
	--red: #ff2348;
	--lightred: #ffebed;

	--max-width: 1310px;
	--min-width: 360px;
	--adaptive: ((100vw - 360px) / (1310 - 360));

	--section-padding: clamp(0px, 0px + (40 - 0) * var(--adaptive), 40px);
	--content-padding: clamp(20px, 20px + (40 - 20) * var(--adaptive), 40px);
	--section-margin: clamp(10px, 10px + (20 - 10) * var(--adaptive), 20px);

	--background: var(--white);
	--text-color: var(--black);
	--text-size: clamp(16px, 16px + (18 - 16) * var(--adaptive), 18px);
	--title-size: clamp(20px, 20px + (24 - 20) * var(--adaptive), 24px);
	--title-size-l: clamp(36px, 36px + (40 - 36) * var(--adaptive), 40px);
	--caption-size: clamp(18px, 18px + (20 - 18) * var(--adaptive), 20px);

	--radius: 30px;
	--gap: 20px;
	--transition: 0.3s;

	--clip-size: clamp(20px, 20px + (30 - 20) * var(--adaptive), 30px);
	--clip-bottom-right: polygon(100% 0, 100% calc(100% - var(--clip-size)), calc(100% - var(--clip-size)) 100%, 0 100%, 0 0);
	--clip-top-left: polygon(var(--clip-size) 0, 100% 0, 100% 100%, 0 100%, 0 var(--clip-size));
}

html, body {
	min-width: var(--min-width);
	display: flex;
}

body {
	flex-direction: column;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: var(--text-size);
	color: var(--text-color);
	background: var(--background); 
	position: relative;
}

.main {
	overflow: hidden;
}
.main > section {
	position: relative;
	margin-bottom: var(--section-margin);
}

.container, [class$="__container"] {
	width: 100%;
	max-width: var(--max-width);
	padding-inline: var(--section-padding);
	margin-inline: auto;
}

.section-title {
	font-weight: 700;
	font-size: var(--title-size);
	color: var(--white);
	text-transform: uppercase;
	text-align: center;
	display: block;
	background: var(--accent-color);
	padding: 1em;
	margin-bottom: var(--section-margin);
}
.section-title_big {
	font-weight: 400;
	font-family: var(--second-family);
	font-size: var(--title-size-l);
}
.section-subtitle {
	font-weight: 400;
	font-size: var(--title-size);
	color: var(--black);
	text-transform: uppercase;
	display: block;
	margin-bottom: 1em;
}
.section-content {
	background: var(--lightgray);
	padding: var(--content-padding);
}
.section-line {
	border: none;
	border-bottom: 1px solid var(--darkgray);
	width: calc(100% + var(--content-padding) * 2);
	margin-block: 40px;
	margin-left: calc(var(--content-padding) * -1);
}
.section-text {
	color: var(--darkergray);
}
.section-text p {
	margin-bottom: 1em;
}

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

a, a::before, button {
	transition: var(--transition);
}

.clip-corner {
	clip-path: var(--clip-top-left);
}

.cover {
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.contain {
	object-fit: contain;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.button {
	--button-height: 48px;
	--button-padding: 5px 20px;
	--button-radius: 5px;
	--button-color: var(--black);
	--button-text-color: var(--white);
	--button-text-size: var(--text-size);

	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: var(--button-height);
	padding: var(--button-padding);
	border: none;
	border-radius: var(--button-radius);
	background: var(--button-color);
	color: var(--button-text-color);
	font-size: var(--button-text-size);
}
@media (hover: hover) {
	.button:hover {
		filter: brightness(120%);
	}
}
.button:active {
	transform: scale(0.97);
}

.fancybox__thumbs,
.fancybox__button--thumbs,
.fancybox__button--fullscreen,
.fancybox__button--slideshow,
.fancybox__button--zoom {
	display: none!important;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
	border-color: var(--accent-color)!important;
}





/* Form */

.form {
	--form-field-gap: 16px;
	--input-text-size: 16px;
	--input-text-color: var(--black);
	--input-placeholder-color: var(--gray);
	--input-background: var(--white);
	--input-border: 1px solid var(--black);
	--input-border-radius: 5px;
	--input-border-hover: var(--black);
	--input-border-focus: var(--black);
	--input-border-invalid: var(--red);
	--input-background-invalid: var(--lightred);
	--input-padding: 12px 16px;

	display: grid;
	grid-gap: var(--form-field-gap);
	align-content: start;
}
.form__input {
	width: 100%;
	font-size: var(--input-text-size);
	line-height: 1.2;
	background: var(--input-background);
	color: var(--input-text-color);
	padding: var(--input-padding);
	border: var(--input-border);
	border-radius: var(--input-border-radius);
	transition: border-color var(--transition), background-color var(--transition);
}
@media (hover: hover) {
	.form__input:hover {
		border-color: var(--input-border-hover);
	}
}
.form__input::placeholder {
	color: var(--input-placeholder-color);
}
.form__input:focus {
	border-color: var(--input-border-focus);
}
.form__input.invalid {
	border-color: var(--input-border-invalid);
	background-color: var(--input-background-invalid);
}
.form__input:autofill {
	box-shadow: 0 0 0 1000px var(--input-background) inset;
	-webkit-text-fill-color: var(--input-text-color);
	font-size: var(--input-text-size);
}

.form__input_textarea {
	resize: none;
}

.form__checkbox {
	display: block;
	position: relative;
	cursor: pointer;
	width: fit-content;
	padding-left: 1.8em;
}
.form__checkbox_privacy {
	font-size: calc(var(--text-size) / 1.3);
	color: var(--darkgray);
}
.form__checkbox_privacy a {
	color: var(--black);
	text-decoration: underline;
}
.form__checkbox_privacy a:hover {
	text-decoration: none;
}
.form__checkbox-input {
	position: absolute;
	opacity: 0;
}
.form__checkbox-label::before {
	content: '';
	display: block;
	width: 1.2em;
	aspect-ratio: 1;
	border: var(--input-border);
	border-radius: calc(var(--input-border-radius) / 2);
	position: absolute;
	top: 0;
	left: 0;
	transition: var(--transition);
	background-position: center;
	background-size: 80%;
}
.form__checkbox-input:checked + .form__checkbox-label::before {
	background: url(../img/checkmark.svg) center / 80% no-repeat;
}
@media (hover: hover) {
	.form__checkbox-label:hover::before {
		border-color: var(--input-border-hover);
	}
}
.invalid + .form__checkbox-label::before {
	border-color: var(--input-border-invalid);
}

.form__button {
	width: 100%;
}

.form__title {
	margin-bottom: 0;
}




/* Header */

.header {
	border-top: 5px solid var(--accent-color);
	padding-block: 15px;
}
.header__container {
	padding-inline: calc(var(--section-padding) / 2 + var(--content-padding));
	display: flex;
	justify-content: space-between;
	gap: var(--gap);
}
.header__logo {
	width: clamp(100px, 100px + (146 - 100) * var(--adaptive), 146px);
}
.header__heading {
	flex: 1;
	font-family: var(--second-family);
	text-align: center;
}
.header__title {
	font-size: 40px;
	color: var(--darkgray);
	text-transform: uppercase;
	max-width: 15em;
	margin-inline: auto;
	margin-bottom: 0.5em;
}
.header__subtitle {
	font-style: italic;
	font-size: 24px;
	color: var(--accent-color);
}
.header__contacts {
	font-weight: 700;
}
.header__phone {
	font-family: var(--second-family);
	font-weight: 600;
	font-size: clamp(26px, 26px + (30 - 26) * var(--adaptive), 30px);
	color: var(--accent-color2);
	letter-spacing: -0.04em;
	white-space: nowrap;
	font-variant-numeric: lining-nums;
	display: block;
	width: fit-content;
}
.header__email {
	color: var(--mediumgray);
}
@media (hover: hover) {
	.header__phone:hover,
	.header__email:hover {
		filter: brightness(90%);
	}
}

@media (max-width: 1000px) {
	.header {
		margin-bottom: var(--section-margin);
	}
	.header__container {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}





/* Slider */

.slider__photo {
	width: 100%;
	aspect-ratio: 1230 / 520;
}
.slider__arrows {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 2;
}
.slider__arrow {
	width: 30px;
	aspect-ratio: 1;
	background: url(../img/arrow-right.svg) center / 45% no-repeat;
	background-color: var(--white);
	border: none;
	opacity: 0.5;
}
.slider__arrow_prev {
	transform: scaleX(-1);
}
@media (hover: hover) {
	.slider__arrow:hover {
		opacity: 1;
	}
}

@media (max-width: 1000px) {
	.slider__photo {
		aspect-ratio: 10 / 6;
	}
}
@media (max-width: 600px) {
	.slider__photo {
		aspect-ratio: 1;
	}
}






/* Tabs */

.tabs {
	display: grid;
	grid-template-columns: 1.05fr 2fr;
	grid-gap: var(--content-padding);
}
.tabs__nav {
	border-right: 4px solid var(--accent-color);
	padding-right: 4px;
}
.tabs__link {
	display: block;
	padding-block: 0.6em;
	padding-right: 0.6em;
	border-bottom: 1px solid var(--mediumgray);
	color: var(--gray);
	font-weight: 700;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: var(--gap);
	align-items: center;
	counter-increment: item-counter;
}
.tabs__link:last-child {
	border: none;
}
.tabs__link::after {
	content: counter(item-counter);
	font-weight: 500;
	display: block;
	background: var(--gray);
	color: var(--white);
	width: 1.556em;
	height: 1.556em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	transition: var(--transition);
}
.tabs__link_active {
	color: var(--black);
	pointer-events: none;
}
.tabs__link_active::after {
	background: var(--accent-color);
}
@media (hover: hover) {
	.tabs__link:hover {
		color: var(--black);
	}
	.tabs__link:hover::after {
	background: var(--accent-color);
}
}
.tabs__content:not(.tabs__content_active) {
	display: none;
}

@media (max-width: 1000px) {
	.tabs {
		grid-template-columns: 1fr;
	}
	.tabs__nav {
		border: none;
		display: flex;
		gap: 10px;
		width: calc(100% + var(--content-padding) * 2);
		margin-left: calc(var(--content-padding) * -1);
		padding-left: var(--content-padding);
		padding-right: var(--content-padding);
		overflow-x: auto;
		scrollbar-width: none;
		position: relative;
	}
	.tabs__nav::-webkit-scrollbar {
		appearance: none;
		-webkit-appearance: none;
		width: 0;
		height: 0;
	}
	.tabs__link {
		white-space: nowrap;
		border: none;
		grid-gap: 10px;
	}
	.tabs__link::after {
		order: -1;
	}
	.tabs__content {
		position: relative;
	}
	.tabs__content::before {
		content: '';
		position: absolute;
		top: calc(var(--content-padding) / -1.2);
		left: 0;
		width: 100%;
		height: 0;
		border-top: 1px solid var(--mediumgray);
	}
}





/* Catalog */

.catalog__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 5px;
}
.catalog__item {
	text-align: center;
}
.catalog__photo {
	cursor: zoom-in;
}
.catalog__image {
	height: 250px;
	width: auto;
	margin-inline: auto;
}
.catalog__caption {
	font-size: 13px;
	margin-top: 0.5em;
}
.catalog__more {
	text-align: center;
	margin-top: var(--content-padding);
	font-size: 13px;
}
.catalog__morelink {
	color: var(--black);
}
.catalog__morelink:hover {
	color: var(--darkgray);
	text-decoration: underline;
}

.catalog__body {
	display: grid;
	grid-template-columns: 1fr 270px;
	grid-gap: var(--content-padding);
}
.catalog__form {
	background: var(--accent-color);
	text-align: center;
	border-radius: 5px;
	padding: 25px;
	margin-bottom: 40px;
}
.catalog__cattitle {
	font-weight: 300;
	font-size: var(--title-size);
	margin-bottom: 1em;
}
.catalog__category {
	padding: 0.3em 0 0.3em 1em;
	color: var(--black);
	display: block;
	border-bottom: 1px solid var(--softgray);
	position: relative;
}
.catalog__category::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 0.3em;
	height: 0.3em;
	border-radius: 100%;
	background: var(--darkgray);
}
.catalog__category:hover {
	color: var(--darkgray);
}
.catalog__category_active {
	font-weight: 700;
	pointer-events: none;
}

@media (max-width: 1000px) {
	.catalog__body {
		grid-template-columns: 1fr;
	}
}




/* Benefits */

.benefits__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: var(--gap);
	justify-items: center;
}
.benefits__item {
	font-family: var(--second-family);
	font-size: clamp(18px, 18px + (24 - 18) * var(--adaptive), 24px);
	color: var(--darkgray);
	text-align: center;
	font-variant-numeric: lining-nums;
	max-width: 340px;
}
.benefits__image {
	margin-inline: auto;
	margin-bottom: 10px;
}

.benefits__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: var(--content-padding);
}
.benefits__card {
	display: block;
	width: 100%;
	aspect-ratio: 370 / 340;
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.benefits__caption {
	position: relative;
	z-index: 1;
	font-size: var(--caption-size);
	text-transform: uppercase;
	background: var(--accent-color);
	color: var(--white);
	display: block;
	width: 100%;
	padding: var(--content-padding);
}
.benefits__caption::after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	margin-top: 0.4em;
}
@media (hover: hover) {
	.benefits__image,
	.benefits__caption,
	.benefits__caption::after {
		transition: 0.5s;
	}
	.benefits__card:hover .benefits__image {
		transform: scale(1.1);
	}
	.benefits__card:hover .benefits__caption {
		padding-block: calc(var(--content-padding) / 2);
	}
	.benefits__card:hover .benefits__caption::after {
		margin-top: 0.2em;
		width: 3.2em;
	}
}
.benefits__subtitle {
	text-align: center;
}
.benefits__partners {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--section-margin);
	margin-bottom: var(--gap);
}
.benefits__poster {
	max-width: unset;
	width: calc(100% + var(--content-padding) * 2);
	margin-left: calc(var(--content-padding) * -1);
	margin-bottom: calc(var(--content-padding) * -1);
}

@media (max-width: 1000px) {
	.benefits__cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.benefits__card:last-child {
		grid-column: span 2;
		aspect-ratio: 370 / 160;
	}
}
@media (max-width: 600px) {
	.benefits__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.benefits__cards {
		grid-template-columns: 1fr;
	}
	.benefits__card:last-child {
		grid-column: unset;
	}
	.benefits__card, .benefits__card:last-child {
		aspect-ratio: 370 / 280;
	}
}





/* About */

.about__body {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) 4fr;
	grid-gap: var(--gap);
}
.about__photos {
	margin-top: var(--content-padding);
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-gap: 10px;
	width: 100%;
	max-width: 700px;
	aspect-ratio: 700 / 300;
}
.about__photo {
	position: relative;
}

@media (max-width: 600px) {
	.about__body {
		grid-template-columns: 1fr;
	}
	.about__director {
		justify-self: center;
	}
	.about__photos {
		grid-template-columns: 1fr;
		aspect-ratio: 2 / 3;
	}
}






/* Footer */

.footer {
	margin-top: auto;
}
.footer__content {
	background: var(--accent-color);
	color: var(--white);
	font-size: calc(var(--text-size) * 1.111);
	font-weight: 700;
	padding: 36px var(--content-padding);
	display: grid;
	grid-gap: 0.6em;
	clip-path: var(--clip-bottom-right);
}
.footer__link {
	color: var(--white);
}
.footer__link:hover {
	text-decoration: underline;
}






/* Popup */

.popup {
	--popup-max-width: 450px;
	--popup-margin: 15px;
	--popup-padding: clamp(40px, 40px + (60 - 40) * var(--adaptive), 60px);
	--popup-radius: 6px;
	--popup-color: var(--white);
	--popup-close-size: 30px;
	--popup-close-bg: var(--softgray);
	--popup-close-padding: 7px;
	--popup-close-margin: 12px;
	--popup-close-radius: 4px;
	--popup-close-line-width: 1px;
	--popup-close-line-color: var(--black);
	--popup-close-line-radius: 0px;
	--popup-overlay-color: rgba(0,0,0,0.5);
	--popup-transition: 0.6s;

	position:fixed;
	top:0;
	left: 0;
	width: 100%;
	height: calc(100% + 70px);
	padding: var(--popup-margin);
	padding-bottom: calc(var(--popup-margin) + 70px);
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	display: flex;
	z-index: 1001;
	opacity: 0;
	transition: opacity 0s var(--popup-transition);
	will-change: opacity;
	pointer-events: none;
	scrollbar-width: none;
}
.popup::-webkit-scrollbar {
	appearance: none;
	-webkit-appearance: none;
	width: 0;
	height: 0;
	display: none;
}
.popup_open {
	opacity: 1;
	transition: opacity 0s 0s;
	pointer-events: all;
}
.popup__box {
	position: relative;
	margin: auto;
	max-width: var(--popup-max-width);
	background: var(--popup-color); 
	padding: var(--popup-padding);
	padding-top: 50px;
	border-radius: var(--popup-radius);
	z-index: 1001;
	transform: translateY(100%);
	opacity: 0;
	transition: transform var(--popup-transition), opacity calc(var(--popup-transition) / 2) calc(var(--popup-transition) / 4);
}
.popup_open .popup__box {
	transform: translateY(0);
	opacity: 1;
	transition: transform var(--popup-transition), opacity calc(var(--popup-transition) / 2);
}
.popup__close {
	position: absolute;
	top: 0px;
	right: 0px;
	width: var(--popup-close-size);
	height: var(--popup-close-size);
	background: var(--popup-close-bg);
	margin: var(--popup-close-margin);
	padding: var(--popup-close-padding);
	border-radius: var(--popup-close-radius);
	border: none;
	cursor: pointer;
}
.popup__close:hover {
	background: var(--popup-close-bg);
}
.popup__close:hover .popup__close-icon {
	transform: rotate(180deg);
}
.popup__close-icon {
	display: block;
	position: relative;
	height: 100%;
	transition: 0.3s;
}
.popup__close-icon::after, 
.popup__close-icon::before {
	content: '';
	display: block;
	width: 120%;
	left: -10%;
	position: absolute;
	top: 50%;
	height: var(--popup-close-line-width);
	background: var(--popup-close-line-color);
	border-radius: var(--popup-close-line-radius);
}
.popup__close-icon::after {
	transform: translateY(-50%) rotate(45deg);
}
.popup__close-icon::before {
	transform: translateY(-50%) rotate(-45deg);
}

.popup__overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100vh + 140px);
	transform: translateY(-70px);
	background: var(--popup-overlay-color);
	z-index: 1000;
	transition: 0.5s;
	opacity: 0;
}
.popup_open .popup__overlay {
	opacity: 1;
}

.preloader {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 12px 16px;
	border-radius: 5px;
	background-color: #000;
	height: 44px;
	z-index: 100;
	display: none;
}
.preloader__line {
	border-radius: 100px;
	background-color: #fff;
	height: 20px;
	width: 2px;
	margin: 0 2px;
	display: inline-block;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.preloader__line:nth-child(2) {animation-delay: -1.1s}
.preloader__line:nth-child(3) {animation-delay: -1.0s}
.preloader__line:nth-child(4) {animation-delay: -0.9s}

@keyframes sk-stretchdelay {
	0%, 40%, 100% {transform: scaleY(0.5);}
	20% {transform: scaleY(1.0);}
}

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