/* 
             *      .        .     *
        .        *   .     ✦     .
        .       You saw the stars
        .    Now send your CV to:
        ✦    mail@vauz.sealzi.com
             .     .   *     ✦

*/


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

html {
	scroll-behavior: smooth;
	max-width: 100%;
	overflow-x: hidden;
	font-family: 'Mukta', sans-serif;
}

body {
	margin: 0;
	max-width: 100%;
	position: static;
	overflow-x: hidden;
	text-wrap: balance;

	font-family: 'Mukta', sans-serif;
	background-color: #958941;
	background-image: radial-gradient(at 84% 12%, hsla(212, 75%, 71%, 1) 0px, transparent 50%),
	radial-gradient(at 22% 27%, hsla(168, 89%, 62%, 1) 0px, transparent 50%),
	radial-gradient(at 22% 17%, hsla(351, 78%, 74%, 1) 0px, transparent 50%),
	radial-gradient(at 91% 82%, hsla(150, 65%, 76%, 0.6) 0px, transparent 50%),
	radial-gradient(at 48% 80%, hsla(227, 62%, 71%, 1) 0px, transparent 50%),
	radial-gradient(at 79% 9%, hsla(268, 63%, 67%, 1) 0px, transparent 50%),
	radial-gradient(at 91% 88%, hsla(357, 95%, 74%, 1) 0px, transparent 50%);
}

#gradient-canvas {
	width: 100%;
	height: 100%;
	--gradient-color-1: #04f2da;
	--gradient-color-2: #0491ea;
	--gradient-color-3: #04b6e7;
	--gradient-color-4: #176bfc;
	z-index: -1;
	position: fixed;
	filter: brightness(80%) saturate(140%);
}

h1 {
	font-size: 58px;
}

h2 {
	font-size: 32px;
}

a {
	color: blue; /* #14ADE3;*/
}

::selection, img::selection, h1::selection, h2::selection, h3::selection, p::selection, a::selection, li::selection, button::selection, ul::selection, br::selection, b::selection, span::selection, small::selection {
	background-color: #30D5C8;
}

.full_button {
	padding: 8px 22px;
	text-decoration: none;
	border: 2px solid white;
	color: black;
	background: white;
	border-radius: 10px;
	transition: 0.3s;
}

.full_button,
.empty_button {
	font-size: 14px;
	font-weight: 600;
	font-family: 'Mukta', sans-serif;
}

.full_button:hover {
	background: transparent;
	color: white;
}

.hidden {
	display: none;
}

/* All screens width */
.second_screen,
.third_screen,
.fourth_screen,
.try_demo,
.fifth_screen {
	max-width: 1256px;
	z-index: 3;
	position: relative;
}

/* First Screen */

.first_screen {
	display: grid;
	grid-template-columns: 60% 40%;
	height: 100dvh;
	min-height: 500px;
	width: 90%;
	align-items: center;
	text-align: left;
}

.fs_left_side {
	padding: 10% 0 0 0;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 40%;
}

.fs_left_side p {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 500;
}

.fs_left_side h1,
.scramble_text_container .text {
	line-height: 120%;
	padding: 0;
	font-size: 72px;
	font-weight: 700;
	margin: 0;
	color: white;
}

.fs_left_side h1 b {
	font-weight: 900;
	font-size: 96px;
}

.first_screen_headers {
	padding: 0 0 0 6%;
}

.first_screen_buttons {
	display: flex;
	flex-direction: row;
	font-weight: 600;
	font-size: 14px;
	padding: 4% 0 0 6%;
}

.fs_left_side_btn {
	padding: 10px 60px;
	border: 2.5px solid white;
	border-radius: 10px;
	background-color: white;
	color: black;
	text-decoration: none;
	transition: 0.3s;
}

.fs_left_side_btn:hover {
	background-color: transparent;
	color: white;
}

.fs_left_side_secondary_btn {
	position: relative;
	margin-left: 3%;
	padding: 11px 60px;
	vertical-align: middle;
	border-radius: 10px;
	color: white;
	text-decoration: none;
	transition: 0.3s;
}

.fs_left_side_secondary_btn::before {
	content: "";
	position: absolute;
	box-sizing: inherit;
	bottom: 15%;
	right: 35.5%;
	width: 50px;
	height: 0;
	border: 1.4px solid white;
	border-radius: 1px;
	transform: rotateX(180deg);
	transition: 0.45s;
}

.fs_left_side_secondary_btn:hover::before {
	bottom: 0;
	right: 1.8%;
	width: 95%;
	height: 94%;
	border: 2.5px solid white;
	border-radius: 10px;
}

.fs_right_side {
	margin: 15% 0 0 15%;
}

.fs_right_side img {
	height: 450px;
	z-index: 0;
}

/* Second Screen - Benefits */

.second_screen {
	width: 90%;
	padding: 5% 0 0;
	position: sticky;
	top: 0;
}

.second_screen h1 {
	color: white;
	font-weight: 900;
}

.second_screen .cards {
	display: grid;
	grid-template-columns: auto auto;
	gap: 12px;
	transition: .15s;
}

.cards .card {
	display: grid;
	grid-template-columns: 25% 70%;
	min-height: 140px;
	text-align: left;
	backdrop-filter: blur(48px);
	-webkit-backdrop-filter: blur(48px);
	border-radius: 16px;
	color: white;
	/*background: linear-gradient(125deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));*/
	border: 2px solid rgba(255, 255, 255, 20%);
	transition: .15s;
	overflow: hidden;
	position: relative;
}

.card .icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

.card:hover {
	border-color: white;
	outline: 1px solid white;
	backdrop-filter: blur(48px) saturate(1.25);
	-webkit-backdrop-filter: blur(48px) saturate(1.25);
}

.card lord-icon {
	width: 125px;
	height: 125px;
}

.card .text {
	display: flex;
	align-items: start;
	justify-content: center;
	flex-direction: column;
	text-align: left;
}

.card .text h2 {
	margin: 0;
	padding: 0;
	font-size: 32px;
}

.card .text p {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
}

.card::before {
	--size: 0;
	content: '';
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	width: var(--size);
	height: var(--size);
	background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.7), transparent);
	transform: translate(-50%, -50%);
	transition: width 0.4s ease, height 0.4s ease;
	pointer-events: none;
}

.card:hover::before {
	--size: 150px;
}

/* Third Screen - Download */

.third_screen {
	display: flex;
	align-items: center;
	min-height: 400px;
	width: 90%;
	margin-top: 8%;
	color: black;
	background: white;
	border-radius: 20px;
}

.third_screen .content {
	padding: 2% 20%;
}

.third_screen h1 {
	margin: 0;
	font-weight: 800;
}

.third_screen p {
	font-weight: 300;
}

.gradient_button {
	margin-top: 5%;
}

.colorful-button:hover {
	transform: scale(1.1);
}

.colorful-button:active {
	box-shadow: 0 0 20px rgba(39, 94, 254, 0.5), inset 0 0 10px 4px black;
}

.colorful-button {
	user-select: none;
	transition: 0.3s;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	position: relative;
	cursor: pointer;
	border: none;
	display: table;
	border-radius: 12px;
	padding: 0;
	text-align: center;
	min-width: 180px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.8;
	color: white;
	background: radial-gradient(circle, #362A89, #6D58FF 80%);
	box-shadow: 0 0 20px rgba(39, 94, 254, 0.5);
	margin: 0 20px;
}

.colorful-button:before {
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: 12px;
	box-shadow: inset 0 4px 12px rgba(39, 94, 254, 0.8), inset 0 -4px 6px rgba(110, 171, 255, 0.6);
}

.colorful-button .wrapper {
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	overflow: hidden;
	border-radius: 12px;
	min-width: 132px;
	padding: 12px 0;
}

.colorful-button .wrapper span {
	display: inline-block;
	position: relative;
	z-index: 1;
}

.colorful-button .wrapper .circle {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	filter: blur(var(--blur, 8px));
	background: var(--background, transparent);
	transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
	-webkit-animation: var(--animation, none) 15s linear infinite 0s;
	animation: var(--animation, none) 15s linear infinite 0s;
}

.colorful-button .wrapper .circle.circle-1, .colorful-button .wrapper .circle.circle-9, .colorful-button .wrapper .circle.circle-10 {
	--background: #4FCED5;
}

.colorful-button .wrapper .circle.circle-3, .colorful-button .wrapper .circle.circle-4 {
	--background: #275EFE;
	--blur: 14px;
}

.colorful-button .wrapper .circle.circle-5, .colorful-button .wrapper .circle.circle-6 {
	--background: #30D5C8;
	--blur: 16px;
}

.colorful-button .wrapper .circle.circle-2, .colorful-button .wrapper .circle.circle-7, .colorful-button .wrapper .circle.circle-8, .colorful-button .wrapper .circle.circle-11, .colorful-button .wrapper .circle.circle-12 {
	--background: #218DFC;
	--blur: 12px;
}

.colorful-button .wrapper .circle.circle-1 {
	--x: 0;
	--y: -40px;
	--animation: circle-1;
}

.colorful-button .wrapper .circle.circle-2 {
	--x: 92px;
	--y: 8px;
	--animation: circle-2;
}

.colorful-button .wrapper .circle.circle-3 {
	--x: -12px;
	--y: -12px;
	--animation: circle-3;
}

.colorful-button .wrapper .circle.circle-4 {
	--x: 80px;
	--y: -12px;
	--animation: circle-4;
}

.colorful-button .wrapper .circle.circle-5 {
	--x: 12px;
	--y: -4px;
	--animation: circle-5;
}

.colorful-button .wrapper .circle.circle-6 {
	--x: 56px;
	--y: 16px;
	--animation: circle-6;
}

.colorful-button .wrapper .circle.circle-7 {
	--x: 8px;
	--y: 28px;
	--animation: circle-7;
}

.colorful-button .wrapper .circle.circle-8 {
	--x: 28px;
	--y: -4px;
	--animation: circle-8;
}

.colorful-button .wrapper .circle.circle-9 {
	--x: 20px;
	--y: -12px;
	--animation: circle-9;
}

.colorful-button .wrapper .circle.circle-10 {
	--x: 64px;
	--y: 16px;
	--animation: circle-10;
}

.colorful-button .wrapper .circle.circle-11 {
	--x: 4px;
	--y: 4px;
	--animation: circle-11;
}

.colorful-button .wrapper .circle.circle-12 {
	--blur: 14px;
	--x: 52px;
	--y: 4px;
	--animation: circle-12;
}

@-webkit-keyframes circle-1 {
	33% {
		transform: translate(0px, 16px) translateZ(0);
	}
	66% {
		transform: translate(12px, 64px) translateZ(0);
	}
}

@keyframes circle-1 {
	33% {
		transform: translate(0px, 16px) translateZ(0);
	}
	66% {
		transform: translate(12px, 64px) translateZ(0);
	}
}

@-webkit-keyframes circle-2 {
	33% {
		transform: translate(80px, -10px) translateZ(0);
	}
	66% {
		transform: translate(72px, -48px) translateZ(0);
	}
}

@keyframes circle-2 {
	33% {
		transform: translate(80px, -10px) translateZ(0);
	}
	66% {
		transform: translate(72px, -48px) translateZ(0);
	}
}

@-webkit-keyframes circle-3 {
	33% {
		transform: translate(20px, 12px) translateZ(0);
	}
	66% {
		transform: translate(12px, 4px) translateZ(0);
	}
}

@keyframes circle-3 {
	33% {
		transform: translate(20px, 12px) translateZ(0);
	}
	66% {
		transform: translate(12px, 4px) translateZ(0);
	}
}

@-webkit-keyframes circle-4 {
	33% {
		transform: translate(76px, -12px) translateZ(0);
	}
	66% {
		transform: translate(112px, -8px) translateZ(0);
	}
}

@keyframes circle-4 {
	33% {
		transform: translate(76px, -12px) translateZ(0);
	}
	66% {
		transform: translate(112px, -8px) translateZ(0);
	}
}

@-webkit-keyframes circle-5 {
	33% {
		transform: translate(84px, 28px) translateZ(0);
	}
	66% {
		transform: translate(40px, -32px) translateZ(0);
	}
}

@keyframes circle-5 {
	33% {
		transform: translate(84px, 28px) translateZ(0);
	}
	66% {
		transform: translate(40px, -32px) translateZ(0);
	}
}

@-webkit-keyframes circle-6 {
	33% {
		transform: translate(28px, -16px) translateZ(0);
	}
	66% {
		transform: translate(76px, -56px) translateZ(0);
	}
}

@keyframes circle-6 {
	33% {
		transform: translate(28px, -16px) translateZ(0);
	}
	66% {
		transform: translate(76px, -56px) translateZ(0);
	}
}

@-webkit-keyframes circle-7 {
	33% {
		transform: translate(8px, 28px) translateZ(0);
	}
	66% {
		transform: translate(20px, -60px) translateZ(0);
	}
}

@keyframes circle-7 {
	33% {
		transform: translate(8px, 28px) translateZ(0);
	}
	66% {
		transform: translate(20px, -60px) translateZ(0);
	}
}

@-webkit-keyframes circle-8 {
	33% {
		transform: translate(32px, -4px) translateZ(0);
	}
	66% {
		transform: translate(56px, -20px) translateZ(0);
	}
}

@keyframes circle-8 {
	33% {
		transform: translate(32px, -4px) translateZ(0);
	}
	66% {
		transform: translate(56px, -20px) translateZ(0);
	}
}

@-webkit-keyframes circle-9 {
	33% {
		transform: translate(20px, -12px) translateZ(0);
	}
	66% {
		transform: translate(80px, -8px) translateZ(0);
	}
}

@keyframes circle-9 {
	33% {
		transform: translate(20px, -12px) translateZ(0);
	}
	66% {
		transform: translate(80px, -8px) translateZ(0);
	}
}

@-webkit-keyframes circle-10 {
	33% {
		transform: translate(68px, 20px) translateZ(0);
	}
	66% {
		transform: translate(100px, 28px) translateZ(0);
	}
}

@keyframes circle-10 {
	33% {
		transform: translate(68px, 20px) translateZ(0);
	}
	66% {
		transform: translate(100px, 28px) translateZ(0);
	}
}

@-webkit-keyframes circle-11 {
	33% {
		transform: translate(4px, 4px) translateZ(0);
	}
	66% {
		transform: translate(68px, 20px) translateZ(0);
	}
}

@keyframes circle-11 {
	33% {
		transform: translate(4px, 4px) translateZ(0);
	}
	66% {
		transform: translate(68px, 20px) translateZ(0);
	}
}

@-webkit-keyframes circle-12 {
	33% {
		transform: translate(56px, 0px) translateZ(0);
	}
	66% {
		transform: translate(60px, -32px) translateZ(0);
	}
}

@keyframes circle-12 {
	33% {
		transform: translate(56px, 0px) translateZ(0);
	}
	66% {
		transform: translate(60px, -32px) translateZ(0);
	}
}

/* Fourth Screen - Questions */

.fourth_screen {
	margin-top: 8%;
}

.fourth_screen .accordions {
	padding: 2px 24px 24px 24px;
	box-sizing: border-box;
	border-radius: 20px;
	backdrop-filter: blur(48px);
	-webkit-backdrop-filter: blur(48px);
	/*background: linear-gradient(28deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.2));*/
	box-shadow: 0 0 40px 1px rgba(0, 0, 0, 0.25);
	border: 2px solid rgba(255, 255, 255, 20%);
}

.accordion__header {
	margin: 18px;
	color: white;
	font-size: 48px;
}

.accordions .accordion {
	list-style: none;
	margin: 0;
	padding: 0;
}

.accordion__item:not(:last-of-type) {
	margin-bottom: 12px;
}

.accordion-item__title {
	margin: 0;
}

.accordion-item__button {
	width: 100%;
	padding: 12px;
	justify-content: space-between;
	align-items: center;
	display: flex;
	cursor: pointer;
	background: transparent;
	color: white;
	border-radius: 10px;
	border: 2px solid rgba(255, 255, 255, 35%);
	text-align: left;
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	transition: 0.2s;
}

.accordion-item__button[data-accordion-expanded=true] {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.accordion-item__arrow {
	background: transparent;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.accordion-item__arrow > svg {
	transform: translateY(1px);
}

.accordion-item__button[data-accordion-control-animation=true] .accordion-item__arrow {
	transition: 250ms background-color ease, 250ms transform ease;
	will-change: transform;
}

.accordion-item__button[data-accordion-expanded=true] .accordion-item__arrow {
	transform: rotate(180deg);
}

.accordion-item__content {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background: transparent;
	padding: 0 12px;
	color: white;
	border: 2px solid rgba(255, 255, 255, 35%);
	border-top: 0;
}

.accordion-item__content p {
	text-align: left;
	font-family: 'Mukta', sans-serif;
	font-size: 14px;
	font-weight: 500;
}

.accordion-item__content[data-accordion-content-animation] {
	transition-property: height;
	transition-duration: 300ms;
	transition-timing-function: ease-in-out;
	overflow: hidden;
}

.fourth_screen .accordion-item__content p a {
    color: #04f2da;
    border-radius: 6px;
    padding: 0 8px;
    margin: 0 -4px;
    transition: .2s;
    font-weight: 800;
}

.fourth_screen .accordion-item__content p a:hover {
    color: white;
    background: #176bfc;
}

/* Try out - Demo */

.try_demo {
	width: 90%;
	margin: 8% 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	color: white;
	/*background: rgba(255, 255, 255, 0.05);*/
	backdrop-filter: blur(48px);
	-webkit-backdrop-filter: blur(48px);
	border-radius: 20px;
	border: 2px solid rgba(255, 255, 255, 20%);
	transition: .3s;
}

.try_demo h1 {
    padding: 0 32px;
    line-height: 100%;
}

.demo_button {
	display: inline-block;
	overflow: hidden;
	position: relative;
	padding: 16px 40px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 16px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	text-decoration: none;
}

.demo_button:hover > *:not(.demo_button_text) {
	transform: rotate(180deg);
	filter: blur(20px) contrast(180%) saturate(120%);
}

.try_demo:has(.demo_button:hover) {
	backdrop-filter: blur(48px) saturate(200%) contrast(110%);
	-webkit-backdrop-filter: blur(48px) saturate(200%) contrast(110%);
}

.demo_button_orange_blob {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -18px;
	margin-top: -60px;
	border-radius: 9999px;
	width: 240px;
	height: 240px;
	background-color: rgb(239 68 68);
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 500ms;
}

.demo_button_blur_effect {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 500ms;
	filter: blur(12px);
}

.demo_button_purple_blob {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-left: -60px;
	border-radius: 9999px;
	width: 144px;
	height: 144px;
	background-color: rgb(168 85 247);
}

.demo_button_pink_blob {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-right: -60px;
	border-radius: 9999px;
	width: 144px;
	height: 144px;
	background-color: rgb(236 72 153);
	filter: blur(12px);
}

.demo_button_text {
	position: relative;
	color: #ffffff;
}

/* Fifth Screen - Contact */

.fifth_screen {
	width: 90%;
	margin: 8% 0 4%;
	display: grid;
	grid-template-columns: 3fr 5fr;
	gap: 12px;
}

.fifth_screen .text {
	text-align: left;
	color: white;
}

.fifth_screen .text h1 {
	font-size: 78px;
	line-height: 1.1;
	font-weight: 900;
}

.fifth_screen .text p {
	width: max-content;
	padding: 4px 16px;
	border-radius: 16px;
	backdrop-filter: blur(48px);
	-webkit-backdrop-filter: blur(48px);
	background: linear-gradient(28deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.20));
	font-weight: 800;
}

.fifth_screen .form {
	border-radius: 20px;
	backdrop-filter: blur(48px);
	-webkit-backdrop-filter: blur(48px);
	color: white;
	/*background: linear-gradient(28deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.2));*/
	box-shadow: 0 0 40px 1px rgba(0, 0, 0, 0.15);
	border: 2px solid rgba(255, 255, 255, 20%);
}

.form form {
	padding: 6%;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	text-align: left;
	gap: 16px;
}

form .field {
	display: flex;
	flex-direction: column;
}

form label {
	padding: 0 0 2px 0;
	font-weight: 600;
}

form input {
	min-height: 40px;
	height: auto;
	width: auto;
	padding-left: 12px;
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 20%);
	background: rgba(255, 255, 255, 10%);
	color: white;
	font-family: 'Mukta', sans-serif;
	font-size: 14px;
}

form textarea {
	resize: none;
	min-height: 40px;
	height: auto;
	padding: 4px 0 0 12px;
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 20%);
	background: rgba(255, 255, 255, 10%);
	color: white;
	white-space: normal;
	word-wrap: break-word;
	font-family: 'Mukta', sans-serif;
	font-size: 14px;
}

input::placeholder {
	color: rgba(255, 255, 255, 0.9);
}

textarea::placeholder {
	color: rgba(255, 255, 255, 0.9);
}

form .last_row {
	display: flex;
	flex-direction: row;
}

.last_row .email_sent {
	visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 44px;
	width: 60%;
	margin: 0 0 0 4px;
	padding: 0 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.25);
	color: white;
	font-weight: 600;
	font-size: 14px;
	font-family: 'Mukta', sans-serif;
	line-height: 1;
	border: 2px solid rgba(255, 255, 255, 20%);
	backdrop-filter: blur(12px) contrast(5);
	-webkit-backdrop-filter: blur(12px) contrast(5);
}

form button {
	height: 44px;
	width: 40%;
	cursor: pointer;
	background: white;
	color: black;
	border-radius: 10px;
	border: 2px solid white;
	font-weight: 700;
	font-size: 14px;
	font-family: 'Mukta', sans-serif;
	transition: 0.3s;
}

form button:hover {
	color: white;
	background: transparent;
}


/* Responsiveness */

@media (min-width: 1024px) {
	.second_screen,
	.third_screen,
	.fourth_screen,
	.try_demo,
	.fifth_screen {
		max-width: 960px;
	}
}

@media (min-width: 1280px) {
	.second_screen,
	.third_screen,
	.fourth_screen,
	.try_demo,
	.fifth_screen {
		max-width: 1120px;
	}
}

@media screen and (max-width: 1024px) {
	.fourth_screen .accordions {
		width: 90%;
	}
}

@media screen and (max-width: 900px) {
	.first_page_skew_text {
		margin-left: -15vw;
	}

	.text_line_left_side .content span,
	.text_line_right_side .content span {
		font-size: 64px;
	}

	.second_screen .cards {
		grid-template-columns: auto auto;
	}

	.fifth_screen {
		margin: 8% 4%;
		grid-template-rows: auto;
		grid-template-columns: none;
	}

	.fifth_screen .text .hidden {
		display: flex;
		font-size: 62px;
		line-height: 1;
		margin: 4% 0;
	}

	.fifth_screen .text .to_hide {
		display: none;
	}
}

@media screen and (max-width: 705px) {
	.first_screen {
		grid-template-columns: none;
	}

	.fs_left_side {
		z-index: 4;
		height: auto;
		padding: 20dvh 0 0 0;
		overflow: hidden;
	}
	
	.first_screen_headers, .first_screen_buttons {
        padding: 10% 0 0 4%;
    }
    
    .fs_left_side h1, .scramble_text_container .text {
        font-size: 48px;
    }
    
    .scramble_text_container .text.mode_text {
        word-spacing: 800px;
    }
    
    .fs_left_side h1 b {
        font-size: 54px;
    }
    
    .scramble_text_container {
        min-height: 180px;
        max-height: 180px;
    }

	.fs_right_side {
		position: static;
		margin: 10% auto 0;
	}

	.fs_right_side img {
		height: auto;
		width: 100%;
		filter: saturate(350%);
	}

	.third_screen .content {
		padding: 6%;
	}

	.try_demo {
		grid-template-rows: 1fr 1fr;
		grid-template-columns: none;
	}
}

@media screen and (max-width: 600px) {
	.first_page_skew_text {
		margin: 0;
	}

	.text_line_left_side .content span,
	.text_line_right_side .content span {
		font-size: 48px;
	}

	.second_screen .cards {
		grid-template-columns: auto;
	}

	.card lord-icon {
		width: 100px;
		height: 100px;
	}

	.card .text h2 {
		font-size: 26px;
	}

	.third_screen .content {
		padding: 12%;
	}

	.third_screen .content h1 {
		line-height: 1;
	}

	.fourth_screen .accordions {
		width: 90%;
	}
	
	.accordion__header {
        line-height: 100%;
	}

	.fifth_screen .text .hidden {
		display: flex;
		font-size: 48px;
	}

	form .field {
		padding: 0 0 12px 0;
	}

	form .last_row {
		padding-top: 8px;
	}
}

@media screen and (max-width: 520px) {
	.third_screen .content h1 {
		font-size: 45px;
	}
	
	.form form {
	    gap: 0;
	}
}

@media screen and (max-width: 450px) {
	.first_screen_buttons {
		flex-direction: column;
	}

	.text_line_left_side .content span,
	.text_line_right_side .content span {
		font-size: 40px;
	}

	.fs_left_side_btn {
		width: min-content;
	}

	.fs_left_side_secondary_btn {
		width: max-content;
		margin: 3% 0 0 0;
		padding: 11px 53px;
	}

	.try_demo h1 {
		margin-bottom: 8px;
		font-size: 48px;
	}
}

@media screen and (max-width: 385px) {
	.text_line_left_side .content span,
	.text_line_right_side .content span {
		font-size: 36px;
	}

	li a .full_button {
		margin-left: 100%;
	}

	.navbar ul li a.empty_button {
		display: none;
	}

	.third_screen p {
		font-size: 12px;
	}
}

@media screen and (max-height: 700px) {
	.fs_left_side {
		padding: 20% 0 0 0;
		padding-top: calc(7vh + 20px + 1%);
	}

	.fs_left_side h1,
	.scramble_text_container .text {
		font-size: 40px;
	}

	.fs_left_side h1 b {
		font-size: 44px;
	}

	.fs_right_side img {
		height: 300px;
	}
}