/**************************************************/
/**         GENERAL RESET & BASE STYLES          **/
/**************************************************/

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&family=Wix+Madefor+Display:wght@400..800&display=swap");

@font-face {
	font-family: "Actay";
	src: url("../fonts/Actay-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Actay";
	src: url("../fonts/Actay-Wide.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

*:focus {
	outline: none;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
	margin: 0;
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
div {
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	font-family: "Wix Madefor Display";
}

main {
	flex: auto;
}

ol,
ul {
	list-style: none;
}

a {
	text-decoration: none;
}

strong {
	font-weight: 700;
}

b {
	font-weight: 500;
}

img {
	width: 100%;
	height: auto;
}

/* TODO */
/* input, */
/* textarea, */
/* select { */
/* vertical-align: middle; */
/* padding: 0; */
/* box-sizing: border-box; */
/* resize: none; */
/*  */
/* border: 1px solid transparent; */
/* color: #000c49; */
/* background-color: #fff; */
/* } */
/*  */
/* textarea::-webkit-input-placeholder, */
/* input::-webkit-input-placeholder { */
/* color: #000c49; */
/* font-size: 16px; */
/* } */
/*  */
/* textarea:focus::-webkit-input-placeholder, */
/* input:focus::-webkit-input-placeholder { */
/* color: #b9b9b9; */
/* } */
/*  */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-background-clip: text;
	-webkit-text-fill-color: var(--main-black);
	transition: background-color 5000s ease-in-out 0s;
	box-shadow: inset 0 0 20px 20px var(--main-bg-white);
}

/* colors */
:root {
	--main-blue: #2fe6ff;
	--main-white: #f9f9f9;
	--main-bg-white: #f2f2f2;
	--main-black: #121212;
	--light-grey: #a4a4a4;
	--main-grey: #2c2c2c;

	--main-red: #ff0000;
	--main-green: #00ff00;

	--bounce-sircle-size: 200px;
}
/* colors */

/**************************************************/
/**                 MAIN STYLES                  **/
/**************************************************/

.hover {
	transition: opacity 0.4s;
}

.hover:hover {
	opacity: 0.5;
}

.acf-template * {
	margin: 0;
	padding: 0;
	font-family: "Wix Madefor Display", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	color: inherit;
}

.acf-dark-text {
	color: var(--main-black);
}
.acf-white-text {
	color: var(--main-white);
}

/* .acf-template {
	background-color: #f6f5f2;
} */

.container {
	display: block;
	position: relative;
	width: 1312px;
	padding: 0;
	margin: 0 auto;
	height: auto;
}

.container-left {
	padding-left: calc((100% - 1312px) / 2);

	display: block;
	position: relative;
	margin: 0 auto;
	height: auto;
}

/* TYPEGRAFY */

.text-56 {
	font-size: 56px;
}

.text-32 {
	font-size: 32px;
}

.text-24 {
	font-size: 24px;
}

.text-18 {
	font-size: 18px;
	line-height: 130%;
}

.text-16 {
	font-size: 16px;
}

.text-48 {
	font-size: 48px;
}

.text-64 {
	font-size: 64px;
}

.text-80 {
	font-size: 80px;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-65 {
	opacity: 0.65;
}

.opacity-75 {
	opacity: 0.75;
}

.font-500 {
	font-weight: 500;
}

.font-700 {
	font-weight: 700;
}

.font-600 {
	font-weight: 600;
}

.text-white {
	color: var(--main-white);
}

.text-black {
	color: var(--main-black);
}

.text-grey {
	color: var(--main-grey);
}

.text-accent {
	color: var(--main-blue);
}

.font-title {
	/* font-family: "Unbounded", sans-serif; */
	font-family: "Actay", sans-serif;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-capitalize {
	text-transform: capitalize;
}

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

.text-color-inherit {
	color: inherit;
}
.text-left {
	text-align: left;
}

/* BTNS */
.btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	/* font-family: "Unbounded"; */
	font-family: "Actay", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 120%;
	text-transform: uppercase;
	transition:
		background-color 0.4s,
		color 0.4s;
	cursor: pointer;
}

button.btn {
	border: none;
	outline: none;
}

.btn-bg-white {
	background-color: var(--main-bg-white);
	color: var(--main-black);
	padding: 12px 24px;
	border-radius: 30px;
}

.btn-bg-black {
	background-color: var(--main-black);
	color: var(--main-bg-white);
	padding: 12px 24px;
	border-radius: 30px;
}

.btn-text-black {
	color: var(--main-black);
}

.btn-text-white svg path {
	stroke: var(--main-black);
}

.btn-bg-white svg path {
	stroke: var(--main-black);
}

.btn-bg-black svg path {
	stroke: var(--main-bg-white);
}

.btn svg path {
	transition: all 0.4s;
}

.btn:hover {
	color: var(--main-blue) !important;
}

.btn:hover svg path {
	stroke: var(--main-blue) !important;
}

.section-padding {
	padding: 96px 0;
}

.btn-arrow {
	color: inherit;
	border-radius: 50%;
	border: 1px solid currentColor;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s;
}

.btn-arrow:hover {
	rotate: -45deg;
}

.black-bg {
	color: #f9f9f9;
	background-color: #121212;
}

.white-bg {
	color: #121212;
	background-color: #f2f2f2;
}

/* THEME LIGHT / BLACK*/
.black-page {
	color: #f9f9f9;
	background-color: #121212;
}

/*  */
/* .black-page .black-bg { */
/* color: #121212; */
/* background-color: #F2F2F2; */
/* } */
/*  */
/* .black-page .white-bg { */
/* color: #F9F9F9; */
/* background-color: #121212; */
/* } */
/*  */
/* .black-page .text-black { */
/* color: #F9F9F9; */
/* } */
/*  */
/* .black-page .text-white { */
/* color: #121212; */
/* } */
/*  */

/*  */
/* .black-page .btn-bg-white { */
/* background-color: #121212; */
/* color: #F2F2F2; */
/* } */
/*  */
/* .black-page .btn-bg-black { */
/* background-color: #F2F2F2; */
/* color: #121212; */
/* } */
/*  */
/*  */
/* .black-page .btn-bg-white svg path { */
/* stroke: #F2F2F2; */
/* } */
/*  */
/* .black-page .btn-bg-black svg path { */
/* stroke: #121212; */
/* } */
/*  */

.black-bg .logo {
	background-image: url(../images/logo-black-bg.svg);
}

.white-bg .text-white {
	color: #121212;
}

.black-bg .text-white {
	color: #f2f2f2;
}

.black-bg .text-black {
	color: #f2f2f2;
}

.black-bg .btn-text-black {
	color: #f9f9f9;
}

.black-bg .btn-text-black svg path {
	stroke: #f9f9f9;
}

.white-bg .text-black {
	color: var(--main-black);
}

.white-bg .btn-text-black {
	color: var(--main-black);
}

.white-bg .logo {
	background-image: url(../images/logo-white-bg.svg);
}

.white-bg .btn-text-black svg path {
	stroke: var(--main-black);
}

/* PADDINGS */
.pt-184 {
	padding-top: 184px;
}

.pb-184 {
	padding-bottom: 184px;
}

.mt-184 {
	margin-top: 184px;
}

.mb-184 {
	margin-bottom: 184px;
}

/* FUCK */
.cursor {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: var(--main-blue);
	position: fixed;
	z-index: 100;
	display: block;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	opacity: 0;
	color: var(--main-black);
}

.mouse-hover {
	cursor: pointer;
}

.hidden {
	display: none;
}

.hover {
	transition: opacity 0.4s;
}

.hover:hover {
	opacity: 0.5;
}

.transition-icon,
svg.base-svg {
	display: block;
	flex-shrink: 0;
	transition:
		transform 0.4s ease,
		color 0.4s ease,
		fill 0.4s ease;
}

svg.rotated-arrow {
	transform: rotate(-90deg);
}

.btn-white {
	color: #f9f9f9;
}

.btn-white svg path {
	stroke: var(--main-blue);
}

.bg-noise {
	background-image: url(../images/noise-bg.png);
	background-size: cover;
	background-color: #181818;
}

.bg-noise-blue {
	background-image:
		url("../images/noise-bg.png"), url("../images/noise-bg-blue.png");

	background-repeat: repeat, repeat;
	background-position: center, center;
	background-size: cover;
}

.vh {
	height: 100vh;
}