/* Fonts */

@font-face {
	font-family: 'Gilroy'; 
	src: url('../fonts/Gilroy-Heavy.woff2') format('woff2'); 
	font-weight: 900; 
	font-style: normal;
	font-display: swap;
} 
@font-face {
	font-family: 'Gilroy'; 
	src: url('../fonts/Gilroy-Semibold.woff2') format('woff2'); 
	font-weight: 600; 
	font-style: normal;
	font-display: swap;
} 
@font-face {
	font-family: 'Gilroy'; 
	src: url('../fonts/Gilroy-Medium.woff2') format('woff2'); 
	font-weight: 500; 
	font-style: normal;
	font-display: swap;
} 
@font-face {
	font-family: 'Gilroy'; 
	src: url('../fonts/Gilroy-Regular.woff2') format('woff2'); 
	font-weight: 400; 
	font-style: normal;
	font-display: swap;
} 
@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/BebasNeue-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-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;}
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 {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;}





/* Global */

:root {
	--text-family: 'Gilroy', sans-serif;
	--title-family: 'Bebas Neue', sans-serif;

	--white: #FFFFFF;
	--black: #0e2543;
	--blue: #009fe3;
	--lightblue: #2ebdfa;
	--ultralightblue: #cbecfb;
	--gray: #CFD8DC;
	--mediumgray: #b3bbbe;
	--red: #ff2348;

	--max-width: 1800px;
	--min-width: 360px;
	--adaptive: ((100vw - 360px) / (1800 - 360));
	--mobile: ((100vw - 360px) / (768 - 360));

	--section-padding: clamp(20px, 20px + (135 - 20) * var(--adaptive), 135px);
	--section-margin: clamp(60px, 60px + (180 - 60) * var(--adaptive), 180px);

	--logo-size: clamp(180px, 180px + (230 - 180) * var(--adaptive), 230px);

	--background: var(--white);
	--text-color: var(--black);
	--text-size: clamp(14px, 14px + (16 - 14) * var(--adaptive), 16px);
	--title-size: clamp(46px, 46px + (80 - 46) * var(--adaptive), 80px);

	--transition: 0.3s;
}

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

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

.main {
	overflow: hidden;
}

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

.title {
	font-family: var(--title-family);
	font-weight: 700;
	font-size: var(--title-size);
	line-height: 1;
	display: block;
	margin-bottom: 0.56em;
}
.title::after {
	content:'';
	display: inline-block;
	width: 2.25em;
	aspect-ratio: 187 / 60;
	background: url(../img/fly.svg) center / contain no-repeat;
}

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

.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-padding: 0.57em 3.75em;
	--button-radius: 14px;
	--button-color: var(--blue);
	--button-hover-color: var(--lightblue);
	--button-active-color: var(--ultralightblue);
	--button-text-family: var(--title-family);
	--button-text-color: var(--white);
	--button-text-size: calc(var(--text-size) * 1.75);

	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: var(--button-padding);
	border: none;
	border-radius: var(--button-radius);
	background: var(--button-color);
	color: var(--button-text-color);
	font-family: var(--button-text-family);
	font-size: var(--button-text-size);
	font-weight: 700;
	box-shadow: 0 24px 24px -20px rgba(125, 207, 242, 0.6);
	position: relative;
}
@media (hover: hover) {
	.button:hover {
		background-color: var(--button-hover-color);
	}
}
.button:active {
	background-color: var(--button-active-color);
}
.button::before {
	content:'';
	display: block;
	width: 3.1em;
	aspect-ratio: 1;
	position: absolute;
	top: 100%;
	right: 0;
	background: url(../img/button-arrow.svg) center / cover no-repeat;
	transform: translate(-80%, 5%);
	pointer-events: none;
}
.button::after {
	content:'';
	display: block;
	width: clamp(140px, 140px + (190 - 140) * var(--adaptive), 190px);
	aspect-ratio: 1;
	position: absolute;
	top: 0;
	right: 0;
	background: url(../img/button-text.svg) center / contain no-repeat;
	transform: translate(70%, -15%);
	animation: rotation 25s linear infinite;
	pointer-events: none;
	z-index: -1;
}
.button_white::before,
.button_white::after {
	filter: grayscale(100%) brightness(10000%);
}
:has(> .button) {
	position: relative;
	z-index: 0;
}
@keyframes rotation {
	0% {transform: translate(70%, -15%) rotate(0deg);}
	100% {transform: translate(70%, -15%) rotate(360deg);}
}
@media (min-width: 450px) {
	.button_arrowleft::before {
		top: unset;
		right: 100%;
		bottom: 0;
		transform: translate(-30%, -20%) scaleX(-1) rotate(290deg);
	}
}

.decor {
	position: relative;
	padding-top: 100px;
}
.decor::before {
	content: '';
	width: 100%;
	aspect-ratio: 1800 / 150;
	position: absolute;
	bottom: calc(100% - 2px);
	left: 0;
	background: url(../img/section-top-decor.svg) bottom center / cover no-repeat;
}
@media (max-width: 767px) {
	.decor {
		padding-top: var(--section-margin);
	}
}







/* Hero */

.hero {
	padding-top: 30px;
	padding-bottom: 210px;
	background: url(../img/hero-bg.jpg) top center / cover no-repeat;
	color: var(--white);
	position: relative;
}
.hero__logo {
	width: var(--logo-size);
	margin-bottom: 45px;
}
.hero__body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
}
.hero__content {
	padding-top: clamp(5px, 5px + (50 - 5) * var(--adaptive), 50px);
	position: relative;
	z-index: 2;
}
.hero__pretitle {
	font-family: var(--title-family);
	font-size: 30px;
	font-weight: 200;
	line-height: 1;
	margin-bottom: 0.2em;
}
.hero__title {
	font-size: clamp(60px, 60px + (120 - 60) * var(--adaptive), 120px);
	padding-right: 0;
	margin-bottom: 0.3em;
	position: relative;
}
.hero__title::after{
	position: absolute;
	width: 4em;
	top: 100%;
	transform: translateY(-68%);
	background-image: url(../img/fly_big.svg);
	margin-left: 0.225em;
}
.hero__ul {
	max-width: 27.5em;
	display: grid;
	grid-gap: 1.375em;
	margin-bottom: calc(var(--title-size) * 1.5 * 0.4);
}
.hero__li {
	font-weight: 500;
	line-height: 1.5;
	display: flex;
	align-items: center;
	gap: 1em;
}
.hero__icon {
	width: 1.5em;
	aspect-ratio: 1;
}
.hero__image {
	aspect-ratio: 1;
	max-width: 740px;
	position: relative;
}
.hero__image::before {
	content:'';
	position: absolute;
	width: 110%;
	aspect-ratio: 810 / 400;
	top: 0;
	left: 0;
	transform: translate(-5%, -30%);
	background: url(../img/fish1.png) center / contain no-repeat;
	pointer-events: none;
}
.hero__image::after {
	content:'';
	position: absolute;
	width: 100%;
	aspect-ratio: 740 / 300;
	bottom: 0;
	left: 0;
	transform: translate(-5%, 30%);
	background: url(../img/fish2.png) center / contain no-repeat;
	pointer-events: none;
}
.hero__circle {
	z-index: 1;
}
.hero__photo {
	z-index: 3;
	transition: opacity 0.6s;
}
.hero__photo_2 {
	opacity: 0;
}
@media (hover: hover) {
	.hero__image:hover .hero__photo_1 {
		opacity: 0;
	}
	.hero__image:hover .hero__photo_2 {
		opacity: 1;
	}
}

.bubbles {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	overflow: hidden;
	pointer-events: none;
}
.bubble {
	position: absolute;
	bottom: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 1350px) {
	.hero__content {
		z-index: 4;
	}
}
@media (max-width: 1000px) {
	.hero__body {
		align-items: end;
	}
	.hero__pic {
		transform: translateY(23%);
	}
}
@media (max-width: 767px) {
	.hero {
		padding-bottom: 100px;
	}
	.hero__body {
		grid-template-columns: 1fr;
		grid-gap: 100px;
	}
	.hero__title {
		font-size: clamp(60px, 60px + (100 - 60) * var(--mobile), 100px);
	}
	.hero__title::after {
		position: static;
		transform: none;
		width: 3.2em;
		margin: 0;
		margin-top: 0.1em;
	}
	.hero__ul {
		margin-bottom: calc(var(--title-size) * 1.5 * 0.6);
	}
	.hero__pic {
		transform: none;
	}
}




/* About */

.about {
	padding-bottom: var(--section-margin);
	background: linear-gradient(to bottom, var(--blue), #095b8a);
	color: var(--white);
}
.about__container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 80px 3.268%;
}
.about__title {
	padding-top: 0.2em;
}
.about__text {
	font-weight: 600;
	font-size: calc(var(--text-size) * 1.125);
	line-height: 1.45;
	max-width: 30em;
	margin-bottom: calc(var(--title-size) * 0.8);
}
.about__button {
	border: 2px solid var(--white);
}

@media (max-width: 1000px) {
	.about__container {
		grid-template-columns: 1fr;
	}
	.about__text {
		max-width: unset;
	}
	.about__pic {
		order: 2;
	}
}
@media (max-height: 750px) and (orientation: landscape) {
	.hero__logo {
		margin-bottom: 0;
	}
}





/* Benefits */

.benefits {
	background: linear-gradient(to bottom, #095b8a, #112546);
	color: var(--white);
	padding-bottom: var(--section-margin);
	margin-block: -2px;
}
.benefits__container {
	z-index: 0;
}
.benefits__title {
	text-align: center;
	max-width: 7.75em;
	margin-inline: auto;
	margin-bottom: 1em;
}
.benefits__content {
	position: relative;
}
.benefits__pic {
	aspect-ratio: 858 / 572;
	position: relative;
	width: 56%;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
}
.benefits__pic::after {
	content:'';
	display: block;
	position: absolute;
	top: 10%;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	aspect-ratio: 1;
	border-radius: 100%;
	background: var(--blue);
	filter: blur(70px);
	opacity: 0.4;
	z-index: -1;
}
.benefits__params {
	font-weight: 500;
	line-height: 1.375;
	text-align: center;
	position: absolute;
	top: 60%;
	left: 52%;
	transform: translateX(-50%);
	width: 100%;
}
.benefits__params::before {
	content:'';
	display: inline-block;
	width: 24px;
	aspect-ratio: 1;
	background: url(../img/params-icon.svg) center / contain no-repeat;
	margin-bottom: 0.2em;
}
.benefits__list {
	--desktop: ((100vw - 1280px) / (1800 - 1280));

	display: grid;
	grid-template-columns: 2fr 1fr 1fr 2fr;
	position: relative;
	z-index: 2;
}
.benefits__item {
	position: relative;
}
.benefits__item_1 {
	grid-column: span 2;
	max-width: 500px;
	justify-self: center;
	min-height: 270px;
}
.benefits__item_2 {
	grid-column: span 2;
	max-width: 450px;
	justify-self: end;
}
.benefits__item_3 {
	max-width: 485px;
	padding-right: 35px;
	margin-top: clamp(100px, 100px + (140 - 100) * var(--desktop), 140px);;
}
.benefits__item_4 {
	grid-row: 3;
	grid-column: 2 / span 2;
	margin-top: clamp(10px, 10px + (70 - 10) * var(--desktop), 70px);
}
.benefits__item_5 {
	grid-column: 4;
	max-width: 330px;
	justify-self: end;
}
.benefits__caption {
	font-family: var(--title-family);
	font-weight: 700;
	margin-bottom: 0.385em;
	position: relative;
}
.benefits__caption,
.benefits__line {
	font-size: calc(var(--text-size) * 1.625);
}
.benefits__caption::before,
.benefits__line::before {
	content:'';
	display: block;
	width: 0.654em;
	aspect-ratio: 1;
	border: 2px solid var(--white);
	background: var(--blue);
	border-radius: 100%;
	position: absolute;
	z-index: 2;
}
.benefits__caption::before {
	right: calc(100% + 0.577em);
	top: 0.16em;
}
.benefits__text {
	font-weight: 500;
	line-height: 1.375;
}
.benefits__line {
	content:'';
	display: block;
	border: 1px solid var(--white);
	position: absolute;
	left: calc((var(--text-size) * 1.625) * -0.92);
}
.benefits__line_1 {
	top: 0.8em;
	width: clamp(310px, 310px + (325 - 310) * var(--desktop), 325px);
	height: clamp(226px, 226px + (260 - 226) * var(--desktop), 260px);
	border-top: none;
	border-right: none;
	border-bottom-left-radius: 20px;
}
.benefits__line_2 {
	top: 0.5em;
	width: clamp(60px, 60px + (247 - 60) * var(--desktop), 247px);
	height: clamp(220px, 220px + (243 - 220) * var(--desktop), 243px);
	border-bottom: none;
	border-left: none;
	border-top-right-radius: 20px;
	transform: scaleX(-1);
	transform-origin: left;
}
.benefits__line_3 {
	bottom: calc(100% - 0.5em);
	width: clamp(410px, 410px + (568 - 410) * var(--desktop), 568px);
	height: clamp(96px, 96px + (90 - 96) * var(--desktop), 90px);
	border-bottom: none;
	border-right: none;
	border-top-left-radius: 20px;
}
.benefits__line_4 {
	bottom: calc(100% - 0.5em);
	width: clamp(182px, 182px + (255 - 182) * var(--desktop), 255px);
	height: clamp(350px, 350px + (305 - 350) * var(--desktop), 305px);
	border-bottom: none;
	border-right: none;
	border-top-left-radius: 20px;
}
.benefits__line_5 {
	top: 0.5em;
	width: clamp(40px, 40px + (132 - 40) * var(--desktop), 132px);
	height: clamp(155px, 155px + (308 - 155) * var(--desktop), 308px);
	border-bottom: none;
	border-left: none;
	border-top-right-radius: 20px;
	transform: scaleX(-1);
	transform-origin: left;
}
.benefits__line_1::before,
.benefits__line_2::before,
.benefits__line_5::before {
	left: 100%;
	top: 100%;
	transform: translate(-50%,-50%);
}
.benefits__line_3::before,
.benefits__line_4::before {
	left: 100%;
	bottom: 100%;
	transform: translate(-50%,50%);
}

@media (max-width: 1279px) {
	.benefits__title {
		margin-bottom: 0.5em;
	}
	.benefits__pic {
		position: relative;
		top: unset;
		left: unset;
		transform: none;
		margin-inline: auto;
		width: 100%;
		max-width: 650px;
	}
	.benefits__list {
		--device: ((100vw - 360px) / (1280 - 360));
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: clamp(30px, 30px + (60 - 30) * var(--device), 60px);;
		grid-column-gap: 75px;
	}
	.benefits__item {
		grid-column: unset;
		grid-row: unset;
		min-height: unset;
		max-width: unset;
		margin: 0;
		padding: 0;
	}
	.benefits__item_4 {
		order: 2;
	}
	.benefits__line {
		display: none;
	}
}
@media (max-width: 767px) {
	.benefits__list {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 550px) {
	.benefits__pic {
		width: 100vw;
		margin-left: calc(var(--section-padding) * -1);
		margin-bottom: 20px;
	}
	.benefits__item {
		padding-left: 2em;
	}
}




/* Fish */

.fish {
	background: #112546;
	color: var(--white);
	padding-bottom: calc(var(--section-margin) * 1.5);
}
.fish__title {
	font-size: clamp(24px, 24px + (38 - 24) * var(--adaptive), 38px);
}
.fish__title::after {
	display: none;
}
.fish__title_first {
	width: 110%;
	margin-bottom: 0;
}
.fish__title_second {
	margin-bottom: 1.4em;
}
.fish__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: clamp(20px, 20px + (80 - 20) * var(--adaptive), 80px);
}
.fish__item {
	position: relative;
	container-type: inline-size;
}
.fish__item_last {
	grid-column: span 2;
}
.fish__caption {
	font-weight: 900;
	font-size: 15.5cqw;
	text-transform: uppercase;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.fish__image {
	aspect-ratio: 322 / 312;
	position: relative;
}
.fish__photo {
	max-width: unset;
	position: absolute;
	top: 0;
	height: 100%;
	width: auto;
	left: 50%;
	transform: translateX(-50%);
}
.fish__button {
	border: 2px solid var(--white);
	margin-left: auto;
}

@media (max-width: 1200px) {
	.fish {
		--desktop: ((100vw - 768px) / (1200 - 768));
	}
	.fish__list {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: clamp(50px, 50px + (80 - 50) * var(--desktop), 80px);
	}
	.fish__title {
		font-size: clamp(28px, 28px + (38 - 28) * var(--desktop), 38px);
	}
}
@media (max-width: 767px) {
	.fish__list {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: clamp(30px, 30px + (80 - 30) * var(--mobile), 80px);
	}
	.fish__title {
		font-size: clamp(28px, 28px + (38 - 28) * var(--mobile), 38px);
	}
}
@media (max-width: 550px) {
	.fish__item_first {
		grid-column: 1 / -1;
	}
	.fish__title_first {
		width: 100%;
	}
	.fish__title br {
		display: none;
	}
}
@media (max-width: 450px) {
	.fish {
		padding-bottom: calc(var(--section-margin) * 2);
	}
	.fish__button {
		margin-left: 0;
	}
}




/* Product */

.product {
	padding-top: 50px;
	padding-bottom: calc(var(--section-margin) / 1.5);
}
.product::before {
	filter: grayscale(100%) brightness(10000%);
}
.product__container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 60px 30px;
	align-items: center;;
	position: relative;
}
.product__container::before {
	content:'';
	position: absolute;
	width: 35%;
	aspect-ratio: 740 / 300;
	top: 0;
	right: 0;
	transform: translate(-5%, -30%);
	background: url(../img/fish2.png) center / contain no-repeat;
	opacity: 0.1;
}
.product__container::after {
	content:'';
	position: absolute;
	width: 35%;
	aspect-ratio: 810 / 400;
	bottom: 0;
	left: 0;
	transform: translate(35%, 35%);
	background: url(../img/fish1.png) center / contain no-repeat;
	opacity: 0.1;
}
.product__pic,
.product__content {
	position: relative;
	z-index: 2;
}
.product__title {
	font-size: calc(var(--title-size) * 0.925);
	margin-bottom: 0.3em;
}
.product__title::after {
	display: none;
}
.product__text {
	font-weight: 600;
	font-size: clamp(16px, 16px + (22 - 16) * var(--adaptive), 22px);;
	line-height: 1.2;
}
.product__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 47px 0;
	margin-block: 54px;
}
.product__item {
	position: relative;
}
.product__caption {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	padding: 5px 12px;
	background: var(--white);
	border: 1px solid var(--blue);
	border-radius: 8px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.product__subtitle {
	font-size: calc(var(--title-size) * 0.55);
	margin-bottom: 34px;
}
.product__subtitle::after {
	display: none;
}
.product__button {
	margin-left: 100px;
	width: calc(100% - 100px);
	max-width: 490px;
	padding-inline: 1em;
}
.product__button::before {
	width: 2.5em;
}

@media (max-width: 1000px) {
	.product__container {
		grid-template-columns: 1fr;
	}
	.product__container::before {
		width: 50%;
	}
	.product__container::after {
		width: 50%;
		transform: translate(10%, 25%);
	}
	.product__pic {
		order: 2;
	}
}
@media (max-width: 550px) {
	.product__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.product__subtitle {
		font-size: clamp(28px, 28px + (38 - 28) * var(--mobile), 38px);
	}
}
@media (max-width: 450px) {
	.product__button {
		width: fit-content;
		padding-inline: 3.75em;
		margin-left: 0;
	}
}






/* Footer */

.footer {
	padding-bottom: clamp(30px, 30px + (60 - 30) * var(--adaptive), 60px);;
}
.footer__container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-gap: 20px 80px;
}
.footer__text {
	font-size: 14px;
	max-width: 270px;
}
.footer__logo {
	width: var(--logo-size);
}
.footer__text_right {
	justify-self: end;
	text-align: right;
}

@media (max-width: 767px) {
	.footer__container {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
	.footer__text_right {
		justify-self: center;
		text-align: center;
	}
	.footer__logo {
		order: -1;
	}
}