/* ============================================================
   FONTS
============================================================ */

@font-face {
	font-family: 'Geist';
	src: url('assets/public/fonts/Geist.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Jetbrains';
	src: url('assets/public/fonts/JetBrains.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


/* ============================================================
   VARIABLES
============================================================ */

:root {
	--container-h: calc((100% - 1160px) / 2);
	--container-v: 138px;
	--container: var(--container-v) var(--container-h);

	--gmultiplier: 1;
	--g200: round(calc(200px * var(--gmultiplier)), 1px);
	--g180: round(calc(180px * var(--gmultiplier)), 1px);
	--g140: round(calc(140px * var(--gmultiplier)), 1px);
	--g120: round(calc(120px * var(--gmultiplier)), 1px);
	--g100: round(calc(100px * var(--gmultiplier)), 1px);
	--g72: round(calc(72px * var(--gmultiplier)), 1px);
	--g52: round(calc(52px * var(--gmultiplier)), 1px);
	--g44: round(calc(44px * var(--gmultiplier)), 1px);
	--g40: round(calc(40px * var(--gmultiplier)), 1px);
	--g36: round(calc(36px * var(--gmultiplier)), 1px);
	--g32: round(calc(32px * var(--gmultiplier)), 1px);
	--g28: round(calc(28px * var(--gmultiplier)), 1px);
	--g24: round(calc(24px * var(--gmultiplier)), 1px);
	--g20: round(calc(20px * var(--gmultiplier)), 1px);
	--g16: round(calc(16px * var(--gmultiplier)), 1px);
	--g12: round(calc(12px * var(--gmultiplier)), 1px);
	--g8: round(calc(8px * var(--gmultiplier)), 1px);
	--g4: round(calc(4px * var(--gmultiplier)), 1px);

	--t900: #020303;
	--t800: #1A1A1A;
	--t700: #2E2E2E;
	--t600: #424242;
	--t500: #5C5C5C;
	--t400: #696969;
	--t300: #858585;
	--t200: #A1A1A1;
	--t100: #B0B0B0;

	--fill-black: #0A0A0A;

	--cubic: cubic-bezier(0.25, 0.1, 0.25, 1);
}


/* ============================================================
   RESET & BASE
============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-family: 'Geist';
}

body {
	background-color: white;
	font-optical-sizing: auto;
	font-kerning: normal;
     max-width: 100vw;
     overflow-x: hidden;
	font-synthesis: none;
	font-variant-ligatures: common-ligatures;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	object-fit: cover;
	width: 100%;
	object-position: center;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

button {
	border: none;
	background-color: transparent;
	cursor: pointer;
}

/* ============================================================
   LAYOUT UTILITIES
============================================================ */

.container {
	padding: var(--container);
}

.container-v {
	padding-top: var(--container-v) !important;
	padding-bottom: var(--container-v) !important;
}

.container-h {
	padding-right: var(--container-h) !important;
	padding-left: var(--container-h) !important;
}

.flex {
	flex: 1;
}

.full-span {
	width: 100%;
	left: 0;
	top: 0;
	height: 100%;
}

.full-width {
	width: 100%;
}

.f-c {
	display: flex;
	flex-direction: column;
}

.f-r {
	display: flex;
	align-items: center;
}

.j-c {
	justify-content: center;
}

.j-s-b {
	justify-content: space-between;
}

.j-f-s {
	justify-content: flex-start;
}

.j-f-e {
	justify-content: flex-end;
}

.a-s {
	align-items: stretch;
}

.a-c {
	align-items: center;
}

.a-f-s {
	align-items: flex-start;
}

.g4 {
	gap: var(--g4);
}

.g8 {
	gap: var(--g8);
}

.g12 {
	gap: var(--g12);
}

.g16 {
	gap: var(--g16);
}

.g20 {
	gap: var(--g20);
}

.g24 {
	gap: var(--g24);
}

.g28 {
	gap: var(--g28);
}

.g32 {
	gap: var(--g32);
}

.g36 {
	gap: var(--g36);
}

.g44 {
	gap: var(--g44);
}

.g52 {
	gap: var(--g52);
}

.g140 {
	gap: var(--g140);
}

.g200 {
	gap: var(--g200);
}


/* ============================================================
   TRANSITION UTILITIES
============================================================ */

button,
a::before,
a,
.tra {
	transition: all 260ms var(--cubic);
}


/* ============================================================
   TYPOGRAPHY
============================================================ */

h2 {
	font-size: 20px;
	font-variation-settings: 'wght' 660;
	color: var(--t900);
	line-height: 1.2;
}

.tag,
.jetbrains {
	text-transform: uppercase;
	font-family: 'Jetbrains';
	letter-spacing: -.005em;
}

.tag {
	font-size: 12px;
	color: var(--t100);
	font-variation-settings: 'wght' 480;
}


/* ============================================================
   GLOBAL COMPONENTS — BUTTON
============================================================ */

.button-main {
	background-color: white;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 6%), 0px 0px 0px 1px rgba(0, 0, 0, 10%);
	font-size: 12.5px;
	font-variation-settings: 'wght' 550;
	color: var(--t300);
	padding: 9px 12px 7px 12px;
}

.button-main:hover {
	background-color: #EDEDED;
	color: var(--t600);
}

.arrow-button {
	color: var(--t200);
	font-size: 12.5px;

	span {
		font-variation-settings: 'wght' 500;
		margin-bottom: 1px;
	}

	svg {
		width: 14px;
		transition: inherit;
	}
}

.arrow-button:hover {
	color: var(--t500);

	svg {
		transform: translateX(var(--g4));
	}
}


/* ============================================================
   GLOBAL COMPONENTS — SCREEN BLUR
============================================================ */

.screen-blur {
	background-color: hsl(0, 0%, 0%, 0.25);
	position: fixed;
	opacity: 0;
	pointer-events: none;
	backdrop-filter: blur(10px);
	z-index: 12;
}


/* ============================================================
   GLOBAL COMPONENTS — PULSE
============================================================ */

.pulse {
	span {
		font-variation-settings: 'wght' 580;
	}

	.pulse-dot {
		background-color: #2EAB60;
		height: 5px;
		position: relative;
		aspect-ratio: 1;
		border-radius: 50px;
	}

	.pulse-dot::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: inherit;
		opacity: 0;
		animation: pulse 1900ms ease-in-out infinite;
	}
}

@keyframes pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(2.6); opacity: 0; }
}


/* ============================================================
   GLOBAL COMPONENTS — SLIDER INDICATOR
============================================================ */

@keyframes fillProgress {
	from { width: 0%; }
	to   { width: 100%; }
}

.slider-indicator {
	background-color: #F2F2F2;
	padding: 5px;
	border-radius: 50px;
	transition-duration: .5s;
	margin: 0 auto;

	div {
		background-color: #BDBDBD;
		transition: inherit;
		width: 4px;
		position: relative;
		cursor: pointer;
		height: 4px;
		border-radius: 50px;
	}

	div.active {
		width: 20px;
	}

	div::before {
		content: "";
		display: block;
		background-color: #111;
		border-radius: 50px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}

.slider-indicator div.active::before {
	animation: fillProgress var(--autoplay-ms, 3000ms) ease forwards;
}

.slider-indicator.is-paused div.active::before {
	animation-play-state: paused;
}

.slider-indicator div.past::before {
	width: 100%;
}

/* ============================================================
   NAV
============================================================ */

nav {
	position: fixed;
	top: 0;
	z-index: 10000;
	left: 0;
	width: 100%;
	border-bottom: 1px solid transparent;
	transition: border-color .26s var(--cubic), transform .5s var(--cubic);

	.content {
		display: grid;
		padding: var(--g12);
		grid-template-columns: repeat(3, 1fr);
		z-index: 10000;
		border-bottom: 1px solid transparent;
		position: relative;
		background: white;

		.logo {
			justify-self: start;
			z-index: 1000;
			color: var(--t700);

			svg {
				height: 15px;
			}
		}

		.logo:hover {
			color: var(--t900);
		}

		ul {
			justify-self: center;
		}

		.nav-link {
			font-size: 12.5px;
			color: var(--t300);
			border-radius: 3px;
			padding: 6px;
			margin: -6px;
			font-variation-settings: 'wght' 580;
		}

		.toggle:hover .nav-link,
		.nav-link:hover {
			background-color: #F0F0F0;
			color: var(--t900s);
		}

		.toggle {
			margin: calc(var(--g20) * -1) 0;
			padding: var(--g20) 0;
		}

		.pulse {
			justify-self: end;
			color: var(--t300);
			padding: 9px 12px;

			span {
				margin-bottom: -2.5px;
				font-size: 12.5px;
			}
		}

		.pulse:hover {
			background-color: #EDEDED;
			color: var(--t600);
		}
	}

	.dropdown-wrap {
		position: absolute;
		left: 0;
		padding: var(--g36);
		transition-duration: .4s;
		z-index: 999;
		bottom: 1px;
		transform: translateY(-100%);
		width: 100%;
		pointer-events: none;
		opacity: 0;
		background-color: white;

		.head {
			color: var(--t900);
			white-space: nowrap;
			font-size: 13px;
			font-variation-settings: 'wght' 580;
		}

		.arrow-button {
			font-size: 12px;
			white-space: nowrap;
		}

		.blog-card {
			width: 280px;
			max-width: 280px;

			.img-wrap {
				max-width: 100%;
				width: 100%;
				overflow: hidden;
				border-radius: 1px;
				position: relative;
				aspect-ratio: 277 / 150;

				img {
					position: absolute;
				}
			}

			p {
				white-space: nowrap;
				overflow: hidden;
				transition: inherit;
				text-overflow: ellipsis;
				font-size: 12.5px;
				color: var(--t800);
				font-variation-settings: 'wght' 650;
			}
		}

		.blog-card:hover {
			p {
				color: var(--t900);
			}

			img {
				filter: blur(4px);
				scale: 1.1;
			}
		}
	}
}

body:has(.dropdown-wrap:hover),
body:has(nav ul li .toggle:hover) {
	.screen-blur {
		opacity: 1 !important;
	}

	nav .dropdown-wrap {
		pointer-events: all !important;
		transform: translateY(100%);
		opacity: 1;
	}

	.content {
		border-color: hsl(0, 0%, 0%, 0.07);
		background-color: white;
	}
}


/* ============================================================
   HERO
============================================================ */

main,
section {
	z-index: 10;
	position: relative;
	background-color: white;
}

main {
	.block {
		display: grid;
		grid-row: auto auto auto;
		grid-template-columns: 1fr auto auto;

		.pulse {
			grid-column: 1 / 4;
			color: var(--t300);
			font-size: 12.5px;
		}

		h1 {
			font-size: 25px;
			letter-spacing: -.005em;
			color: var(--t900);
			grid-row: 2 / 4;
			line-height: 1.3;
			max-width: 600px;
		}

		a {
			align-self: center;
			grid-row: 3 / 4;
			justify-self: end;
		}

		.button-main {
			margin-right: var(--g4);
			margin-bottom: 2px;
		}
	}

	.video-wrap {
		overflow: hidden;
          aspect-ratio: 1920 / 710;
		position: relative;
		margin: var(--g36) 0 var(--g52) 0;

		video {
			position: absolute;
			object-position: center;
			object-fit: cover;
			filter: brightness(80%);
		}
	}

	.logos {
		span {
			font-size: 12.5px;
			color: var(--t500);
			line-height: 1.58;
			font-variation-settings: 'wght' 550;
		}

          img {
			opacity: .27;
               width: auto;
			height: 16px;
		}
	}
}


/* ============================================================
   PHILOSOPHY SCROLL
============================================================ */

#phillosophy-section {
	height: 180vh;
	margin-bottom: calc(var(--container-v) * -1);

	.block {
		position: sticky;
		top: 50%;
		transform: translateY(-60%);
	}

	h2 {
		color: var(--t900);
		font-size: 24px;
		letter-spacing: .005em;
		text-align: center;
		font-variation-settings: 'wght' 640;
		line-height: 1.26;
		max-width: 600px;
	}

	h2 span {
		transition: inherit;
		transition-duration: .34s !important;
	}

	.tag {
		transition-duration: .34s !important;
	}

	img {
		position: absolute;
		opacity: 1;
		transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
		width: auto;
		border-radius: 3px;
	}

	.one   { left: 12%; top: -8%; }
	.two   { left: 1%;  top: 48%; }
	.three { left: 13%; bottom: -3%; }
	.four  { right: 10%; top: -5%; }
	.five  { right: 0;   top: 50%; }
	.six   { right: 14%; bottom: -6%; }
}


/* ============================================================
   ABOUT US
============================================================ */

#about-section {
	.tag {
		white-space: nowrap;
		margin-top: 3px;
	}

	.about-us-text-wrap {
		display: grid;
		grid-template-columns: min-content min-content;
		column-gap: var(--g28);
		row-gap: var(--g36);

		img {
			grid-column: 1 / 3;
			width: 100%;
			filter: blur(4px);
			opacity: .6;
			border-radius: 2px;
			transition-duration: .4s;
		}

		img.revealed {
			filter: blur(0);
			opacity: 1;
		}

		p,
		span {
			font-size: 14px;
			font-variation-settings: 'wght' 640;
			line-height: 1.5;
			transition-duration: .32s;
			white-space: nowrap;
		}

		span {
			transition: inherit;
		}

		.reveal-text-dark,
		.reveal-text-grey {
			color: #E6E6E6;
			filter: blur(2px);
		}

		.reveal-text-dark.revealed {
			filter: blur(0px);
			color: var(--t900);
		}

		.reveal-text-grey.revealed {
			filter: blur(0px);
			color: var(--t500);
		}
	}
}


/* ============================================================
   PORTFOLIO
============================================================ */

#portfolio-section {
	.portfolio-grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		row-gap: var(--g100);

		.one {
			grid-column: 8 / 13;
		}

		.two {
			grid-column: 1 / 6;
			grid-row: 1 / 2;
			margin-top: var(--g72);
		}

		.three {
			grid-column: 6 / 12;
		}
	}

	.portfolio-card {
		display: grid;
		align-self: start;
		grid-template-columns: auto 1fr;

		.img-wrap {
			position: relative;
			grid-column: 1 / 3;
			border-radius: 1px;
			overflow: hidden;

			.cover {
				background-color: white;
				transform: translateX(100%);
				position: absolute;
				transition-duration: .95s;
			}
		}

		.jetbrains {
			font-size: 12.5px;
			font-variation-settings: 'wght' 550;
			color: var(--t200);
			margin-top: 3px;
			transition-duration: .5s;
			transition-delay: .3s;
		}

		p {
			color: var(--t800);
			font-size: 13px;
			font-variation-settings: 'wght' 650;
			line-height: 1.55;
			justify-self: end;
			transition-duration: .5s;
			transition-delay: .6s;
		}
	}

	.portfolio-card.outview {
		.img-wrap .cover {
			transform: translateX(0);
		}

		p,
		.jetbrains {
			transform: translateX(-8px);
			opacity: 0;
			filter: blur(3px);
		}
	}

	.portfolio-card:hover {
		img {
			filter: blur(5px);
			scale: 1.1;
		}
	}
}


/* ============================================================
   SERVICES
============================================================ */

#services-section {
	background-color: transparent;
	padding: var(--g100);
	overflow: hidden;
	z-index: 0;

	> * {
		position: relative;
	}

	img {
		position: fixed;
		z-index: 0;
		width: 100%;
		left: 0;
		top: 0;
		height: 100%;
		pointer-events: none;
	}

	.tag {
		color: #DCC9C8;
	}

	.top {
		font-size: 15px;
		color: white;
		font-variation-settings: 'wght' 650;
		line-height: 1.42;
		width: 441px;
	}

	.block {
		background-image: repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.75) 0px,
			rgba(255, 255, 255, 0.75) 6px,
			transparent 6px,
			transparent 9px
		);
		background-size: 100% 1px;
		background-repeat: no-repeat;
		background-position: top;
		padding: var(--g24) 0;

		.head {
			font-size: 14px;
			font-variation-settings: 'wght' 550;
			color: #DCC9C8;
		}

		.group {
			width: 441px;
		}

		.group > :last-child {
			width: 142px;
		}

		ul li p {
			margin-bottom: var(--g4);
			font-size: 12.5px;
			letter-spacing: -.01em;
			color: #E6D9D6;
			font-variation-settings: 'wght' 480;
		}

		li {
			font-size: 13px;
			color: white;
			font-variation-settings: 'wght' 600;
		}
	}

	.block.last {
		padding-bottom: 0px;
	}
}


/* ============================================================
   PRINCIPLES
============================================================ */

#principles-section {
	.slider {
		.jetbrains {
			font-size: 11px;
			font-variation-settings: 'wght' 500;
			color: var(--t200);
		}

		.card {
			background-color: #F5F5F5;
			border-radius: 2px;
			padding: var(--g16);
		}

		.card.group {
			p {
				white-space: nowrap;
				font-size: 13px;
				letter-spacing: -.005em;
				font-variation-settings: 'wght' 650;
				line-height: 1.4;
				color: var(--t800);
			}
		}

		.card.ill {
			position: relative;

			svg {
				width: auto;
				height: calc(100% - calc(var(--g24) * 2));
                    width: calc(100% - calc(var(--g24) * 2));
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				position: absolute;
			}
		}

		.card.main {
			height: 280px;
			min-width: 290px;

			h4 {
				color: var(--t800);
				font-size: 15px;
				font-variation-settings: 'wght' 640;
			}

			.jetbrains {
				margin-bottom: 2px;
			}

			p {
				margin-top: auto;
				color: var(--t500);
				font-variation-settings: 'wght' 520;
				font-size: 11px;
				line-height: 1.4;
			}
		}

		.card.main.num {
			min-width: 270px !important;
		}

		.two {
			margin-left: var(--g52);
		}
	}
}

#sliderTrack {
	will-change: transform;
	cursor: grab;
	user-select: none;
	transition: none;
}

#sliderTrack.is-dragging {
	cursor: grabbing;
}

#sliderTrack.is-snapping {
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.card,
.card-group {
	transition: all 0.17s cubic-bezier(0.16, 1, 0.3, 1);
}

.card.is-past,
.card-group.is-past {
	opacity: 0;
	filter: blur(4px);
	pointer-events: none;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   FAQ
============================================================ */

#faq-section {
	h2 {
		margin-top: var(--g12);
		margin-bottom: var(--g20);
		line-height: 1.6;

		.grey {
			color: var(--t400);
		}
	}

	.faq-container {
		width: 670px;

		.group {
			font-size: 12.5px;
			font-variation-settings: 'wght' 540;
			color: var(--t200);
			margin-bottom: var(--g12);
		}

		.group.second {
			margin-top: var(--g52);
		}

		.faq {
			display: grid;
			grid-template-columns: auto 1fr;
			cursor: pointer;
			padding: var(--g16) 0;
			margin-left: var(--g8);
			column-gap: var(--g16);
			align-items: center;
			border-bottom: 1px solid #E3E3E3;

			svg {
				height: 9px;
				fill: var(--t300);
			}

			h3 {
				font-size: 14.5px;
				font-variation-settings: 'wght' 640;
				color: var(--t700);
				line-height: 1.4;
			}

			.answer-wrap {
				grid-column: 2 / 3;
				overflow: hidden;

				p {
					font-size: 13px;
					margin-top: 5px;
					color: var(--t300);
					line-height: 1.55;
					font-variation-settings: 'wght' 520;
				}
			}
		}

		.faq.active {
			h3 {
				color: var(--t900);
			}

			svg {
				rotate: 45deg;
				fill: var(--t900);
			}
		}
	}
}


/* ============================================================
   BLOG SECTION
============================================================ */

#blog-section {
	.blog-card {
		width: 330px;
		min-width: 330px;

		.img-wrap {
			position: relative;
			width: 100%;
			overflow: hidden;
		}

		h3 {
			letter-spacing: -.005em;
			font-size: 13px;
			font-variation-settings: 'wght' 670;
			color: var(--t700);
			line-height: 1.4;
			margin-top: -2px;
		}
	}

	.blog-card:hover {
		h3 {
			color: var(--t900);
		}

		img {
			scale: 1.1;
			filter: blur(5px);
		}
	}

	.blog-card-wrap {
		transition: all 0.17s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.blog-card-wrap.is-past {
		opacity: 0;
		filter: blur(4px);
		pointer-events: none;
		transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	}

	#blogTrack {
		will-change: transform;
		user-select: none;
	}

	#blogTrack.is-dragging,
	#blogTrack.is-dragging * {
		cursor: grabbing !important;
	}

	#blogTrack.is-snapping {
		transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	}
}


/* ============================================================
   FOOTER
============================================================ */

footer {
	background-color: var(--fill-black);
	padding: var(--g72);
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	display: grid;
	align-items: start;
	grid-template-columns: auto auto 1fr auto auto;
	column-gap: var(--g72);
	row-gap: var(--g120);

	.logo {
		color: #F5F5F5;
		margin-right: calc(var(--g120) - var(--g72));

		svg {
			height: 16px;
		}
	}

	.logo:hover {
		color: white;
	}

	.jetbrains {
		color: #878787;
		font-size: 12.5px;
		font-variation-settings: 'wght' 600;
		margin-bottom: var(--g4);
		line-height: 1.1;
	}

	p,
	.link {
		color: #F5F5F5;
		font-size: 13.5px;
		font-variation-settings: 'wght' 620;
		line-height: 1.2;

		div {
			width: 0px;
			transition: inherit;
			overflow: hidden;
		}

		div::before {
			height: 4px;
			aspect-ratio: 1;
			background-color: white;
			content: "";
			display: block;
			border-radius: 50px;
			margin-right: var(--g12);
			margin-top: 2px;
		}
	}

	.link.num div::before {
		margin-top: 1px;
	}

	.link:hover {
		color: white;
		margin-right: calc((var(--g12) + 4px) * -1);

		div {
			width: calc(var(--g12) + 4px);
		}
	}

	.clock {
		grid-column: 1 / 3;

		.jetbrains {
			color: #7D7D7D;
			line-height: 1;
		}

		p {
			color: #F2F2F2;
			line-height: 1;
		}
	}

	.social-wrap {
		grid-column: 3 / 6;
		align-self: end;
		justify-self: end;

		a {
			padding: 4px;
			margin: -4px;
               opacity: .32;
		}

		img {
			height: 14.5px;
		}

		.x img {
			width: 14.5px;
			height: auto;
		}

		a:hover {
               opacity: 1;
		}
	}
}

footer.above {
	z-index: 2;
}


/* ===================================================================================

   TODO BREAKPOINT LAPTOP

=================================================================================== */

@media (max-width: 1350px) {
     /* ============================================================
          VARIABLES
     ============================================================ */

     :root {
          --container-h: 8%;
          --container-v: 138px;

          --gmultiplier: .94;
     }

     /* ============================================================
          TYPOGRAPHY
     ============================================================ */

     h2 {
          font-size: 18px;
     }

     .tag {
          font-size: 11.5px;
     }


     /* ============================================================
          GLOBAL COMPONENTS — BUTTON
     ============================================================ */

     .button-main {
          font-size: 12px;
          padding: 9px 12px 7px 12px;
     }

     .arrow-button {
          font-size: 12px;

          svg {
               width: 13px;
          }
     }

     /* ============================================================
          GLOBAL COMPONENTS — SLIDER INDICATOR
     ============================================================ */

     @keyframes fillProgress {
          from { width: 0%; }
          to   { width: 100%; }
     }

     .slider-indicator {
        scale: .95;
     }

     /* ============================================================
          NAV
     ============================================================ */

     nav {
          .content {
               .logo {
                    svg {
                         height: 14px;
                    }
               }

               .nav-link {
                    font-size: 12px;
                    padding: 4px;
                    margin: -4px;
               }


               .pulse {
                    padding: 9px 12px;

                    span {
                         margin-bottom: -2px;
                         font-size: 12px;
                    }
               }

          }

          .dropdown-wrap {
               .head {
                    font-size: 12px;
               }

               .blog-card {
                    width: 255px;
                    max-width: 255px;

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

     /* ============================================================
          HERO
     ============================================================ */

     main {
          .block {
               .pulse {
                    font-size: 12px;
               }

               h1 {
                    font-size: 23px;
               }
          }

          .video-wrap {
               overflow: hidden;
               position: relative;
          }

          .logos {
               span {
                    font-size: 12px;
               }

               img {
                    height: 15px;
               }
          }
     }


     /* ============================================================
     PHILOSOPHY SCROLL
     ============================================================ */

     #phillosophy-section {
          h2 {
               font-size: 21px;
               max-width: 520px;
          }

          img {
               scale: .8;
          }
     }


     /* ============================================================
     ABOUT US
     ============================================================ */

     #about-section {

          .about-us-text-wrap {
               p,
               span {
                    font-size: 13px;
               }

               @media (max-width: 1200px) {
                    p,span {
                         font-size: 12.5px;
                    }
               }
          }
     }

     /* ============================================================
     PORTFOLIO
     ============================================================ */

     #portfolio-section {
          .portfolio-grid {
               grid-template-columns: repeat(14, 1fr);

               .one {
                    grid-column: 9 / 15;
               }

               .two {
                    grid-column: 1 / 7;
               }

               .three {
                    grid-column: 6 / 14;
               }
          }

          .portfolio-card {

               .jetbrains {
                    font-size: 12px;
               }

               p {
                    font-size: 12.5px;
               }

               @media (max-width: 1250px) {
                    .jetbrains {
                         font-size: 11.5px;
                    }

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


     /* ============================================================
     SERVICES
     ============================================================ */

     #services-section {
          .top {
               font-size: 14px;
               width: 410px;
          }

          .block {
               background-image: repeating-linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.75) 0px,
                    rgba(255, 255, 255, 0.75) 6px,
                    transparent 6px,
                    transparent 9px
               );
             
               .group {
                    width: 410px;
               }

               .head {
                    font-size: 13px;
               }

               .group > :last-child {
                    width: 135px;
               }

               ul li p {
                    font-size: 12px;
               }

               li {
                    font-size: 12.5px;
               }
          }
     }


     /* ============================================================
     PRINCIPLES
     ============================================================ */

     #principles-section {
          .slider {
               .jetbrains {
                    font-size: 10.5px;
               }

               .card.group {
                    p {
                         font-size: 12.5px;
                         letter-spacing: -.005em;
                    }
               }

               .card.main {
                    height: 280px;
                    min-width: 290px;

                    h4 {
                         font-size: 14px;
                    }

                    p {
                         font-size: 11px;
                    }
               }
          }
     }

     /* ============================================================
          FAQ
     ============================================================ */

     #faq-section {

          .faq-container {
               width: 650px;

               .group {
                    font-size: 12px;
               }

               .faq {
                    svg {
                         height: 9px;
                    }

                    h3 {
                         font-size: 14px;
                    }

                    .answer-wrap {
                         p {
                              font-size: 12px;
                              margin-top: 4px;
                         }
                    }
               }
          }
     }


     /* ============================================================
     BLOG SECTION
     ============================================================ */

     #blog-section {
          .blog-card {
               width: 305px;
               min-width: 305px;

               h3 {
                    font-size: 12px;
               }
          }
     }


     /* ============================================================
     FOOTER
     ============================================================ */

     footer {
         
          .logo {
               svg {
                    height: 15px;
               }
          }

          .jetbrains {
               font-size: 12px;
          }

          p,
          .link {
               font-size: 13px;
          }

          .clock {
               svg {
                    height: 37px;
               }
          }

          .social-wrap {

               a {
                    padding: 3px;
                    margin: -3px;
               }

               img {
                    height: 14px;
               }
               .x img {
                    width: 14px;
               }
          }
     }
}