@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap');

:root {
	--black: #000;
	--dark: #181823;
	--white: #fff;
	--green: #3cc74e;
	--pink: #e95d90;
	--light_grey: #8491a0;
	--dark_grey: #5b6876;
	--purple: #5221e6;
	--peach: #fff3e4;
	--violet: #fbe4ff;
	--blue: #609bff;
}

body {
	font-family: 'Sen', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--white);
	background-color: var(--black);
}

p {
	color: var(--light_grey);
}

.container {
	padding: 0 72px;
}

.__title {
	font-size: 55px;
	font-weight: 700;
	line-height: 1.2;
}

.link {
	position: relative;
	transition: color 0.2s;
}

.link:active::after {
	background-color: var(--purple);
}

.indent {
	padding: 120px 0;
}

/* --------- */

.header {
	position: fixed;
	transition: background-color 0.3s;
}

.header__wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__nav ul {
	display: flex;
}

.header__nav-item {
	list-style: none;
}

.header__nav-item a {
	padding: 32px 24px;
	display: inline-block;
	color: var(--white);
	position: relative;
}

.header__nav-item a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: var(--purple);
	width: 100%;
	z-index: -1;
	transition: background-color 0.2s;
}

.header__nav-item a:hover::after {
	height: 100%;
	background-color: #4618d2;
}

.header__burger {
	display: none;
	position: relative;
	width: 24px;
	height: 24px;
}

.header__burger-line {
	position: absolute;
	display: block;
	height: 3px;
	background-color: var(--white);
}

.header__burger-line_top {
	width: 18px;
	top: 6px;
	right: 3px;
}

.header__burger-line_bottom {
	width: 13px;
	bottom: 7px;
	right: 3px;
}

.header__burger-logo {
	display: none;
}

.header__active {
	background-color: var(--dark);
}

/* --------- */

.intro {
	height: 100vh;
	position: relative;
	z-index: -2;
	background: linear-gradient(to right, var(--black) 37%, var(--dark) 37%);
}

.intro__container {
	margin-right: 40px;
}

.intro__image-wrapper {
	position: absolute;
	z-index: -1;
	width: 750px;
	bottom: 50%;
	transform: translateY(50%);
}

.intro__image-wrapper img {
	width: 100%;
	height: auto;
}

.intro__wrapper {
	padding-bottom: 85px;
	padding-top: 100px;
}

.intro__wrapper-text {
	padding: 80px 0;
	max-width: 738px;
	margin-left: auto;
}

.intro__title {
	font-weight: 700;
	font-size: 78px;
	margin-bottom: 32px;
	line-height: 1.2;
}

.intro__title_gray {
	color: rgba(255, 255, 255, 0.5);
}

.intro__subtitle {
	font-size: 18px;
	line-height: 1.5;
	color: var(--white);
}

/* --------- */

.experience {
	padding-bottom: 144px;
}

.experience__title-wrapper {
	max-width: 690px;
}
.experience__above-title {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 8px;
}

.experience__title {
	margin-bottom: 40px;
}

.experience__cards {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.experience__card-item {
	max-width: 416px;
}

.experience__card-number {
	font-size: 117px;
}

.experience__card-title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 22px;
}

.experience__card-title_green {
	color: var(--green);
}

.experience__card-subtitle {
	line-height: 1.5;
}

.experience__card-title_blue {
	color: var(--blue);
}

.experience__card-title_pink {
	color: var(--pink);
}

/* --------- */

.values {
	display: flex;
}

.values__text {
	width: 50%;
	background-color: var(--peach);
	padding: 115px 0;
}

.values__text-title {
	color: var(--dark);
	margin-bottom: 24px;
}

.values__text-subtitle {
	color: var(--dark_grey);
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 134px;
}

.values__text-link {
	color: var(--dark);
}

.values__image {
	width: 50%;
	background: url(/img/square/philopsophy.png) no-repeat center;
	background-size: cover;
}

/* --------- */

.skillset__container {
	padding-top: 64px;
	padding-bottom: 64px;
}

.skillset__title {
	margin-bottom: 16px;
}

.skillset__text {
	margin-bottom: 69px;
	font-size: 18px;
}

.skillset__list {
	display: flex;
	flex-direction: column;
	row-gap: 48px;
}

.skillset__icon {
	margin-bottom: 24px;
	width: 32px;
	height: 32px;
}

.skillset__item-title {
	margin-bottom: 12px;
}

.skillset__wrapper {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		'skillset product visual'
		'skillset motion photography';
	row-gap: 48px;
	column-gap: 24px;
}

.skillset__text {
	grid-area: skillset;
}

.skillset__text-title {
	margin-bottom: 24px;
}

.skillset__text-subtitle {
	font-size: 18px;
	line-height: 1.5;
	max-width: 368px;
}

.skillset__card-product {
	grid-area: product;
}

.skillset__card-visual {
	grid-area: visual;
}

.skillset__card-motion {
	grid-area: motion;
}

.skillset__card-photography {
	grid-area: photography;
}

.skillset__card-icon {
	margin-bottom: 24px;
}

.skillset__card-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 12px;
}

.skillset__card-subtitle {
	line-height: 1.5;
	max-width: 368px;
}

.icons__container {
	padding: 0px 15px;
}

.skillset__brands {

}

.icons__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.icons__item {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 329px;
	height: 140px;
	cursor: pointer;
}

/* --------- */

.project {
	padding-bottom: 153px;
}

.project__wrapper {
	display: grid;
	grid-template-rows: 1fr 2fr 1fr 2fr 1fr;
	grid-template-columns: auto auto;
	grid-template-areas:
		'text img1'
		'img2 img1'
		'img2 img3'
		'img4 img3'
		'img4 btn';
	gap: 24px;
}

.project__text {
	grid-area: text;
}

.image1 {
	grid-area: img1;
}

.image2 {
	grid-area: img2;
}

.image3 {
	grid-area: img3;
}

.image4 {
	grid-area: img4;
}

.project__above-title {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 8px;
}

.project__title {
	max-width: 572px;
	padding-bottom: 56px;
}

.project__card {
	background-color: var(--dark);
	max-width: 680px;
}

.project__card-img {
	height: 620px;
}

.img1 {
	background: url(/img/projects/pr-1.jpg) no-repeat center;
	background-size: cover;
}

.img2 {
	background: url(/img/projects/pr-2.jpg) no-repeat center;
	background-size: cover;
}

.img3 {
	background: url(/img/projects/pr-3.jpg) no-repeat center;
	background-size: cover;
}

.img4 {
	background: url(/img/projects/pr-4.jpg) no-repeat center;
	background-size: cover;
}

.project__card-text {
	padding: 40px 32px;
}

.project__card-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 13px;
}

.project__card-subtitle {
	font-size: 18px;
	line-height: 1.5;
}

.project__btn {
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
	border: 1px solid var(--purple);

	text-transform: uppercase;
	margin: auto;
	padding: 24px 32px;
	transition: background-color 0.2s;
}

.project__btn:hover {
	background-color: var(--purple);
}

.project__btn:active {
	background-color: #4618d2;
}

/* --------- */

.inst-text {
	background-color: var(--violet);
}

.inst-image {
	background: url(/img/square/inst.png) no-repeat;
}

/* --------- */

.dribbble__wrapper {
	max-width: 1076px;
	margin: 0 auto;
	padding: 0 72px;
}

.dribbble__title {
	margin-bottom: 24px;
}

.dribbble__subtitle {
	max-width: 636px;
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 40px;
}

.dribbble__link {
	display: inline-block;
	margin-bottom: 120px;
}

.dribbble__link {
	color: var(--white);
}

.dribbble__image {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* --------- */

.comment__wrapper {
	display: flex;
	justify-content: space-between;
	column-gap: 23px;
}

.comment__text {
	max-width: 588px;
}

.comment__title {
	margin-bottom: 24px;
}

.comment__subtitle {
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 40px;
}

.comment__link {
	color: var(--white);
}

.comment__cards {
	display: flex;
	flex-direction: column;
	row-gap: 120px;
}

.comment__card {
	display: flex;
	flex-direction: column;
	max-width: 636px;
}

.comment__img {
	width: 100%;
}

.comment__card-text {
	padding: 64px;
	border: 1px solid var(--dark_grey);
}

.comment__quote {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 64px;
}

.comment__author {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 4px;
}

.comment__company {
	font-size: 18px;
}

/* --------- */

.photography__text-wrapper {
	max-width: 588px;
	margin-bottom: 64px;
}

.photography__title {
	margin-bottom: 24px;
}

.photography__sutitle {
	font-size: 18px;
	line-height: 1.5;
}

.tabs__nav {
	margin-bottom: 40px;
}

.tabs__nav button {
	font-size: 18px;
	font-weight: 700;
	padding: 12px 16px;
	background-color: var(--black);
	color: var(--white);
	border: 1px solid var(--purple);
	transition: background-color 0.3s;
}

.tabs__nav button:hover {
	background-color: var(--purple);
}

.tabs__nav button + button {
	padding-left: 24px;
}

.tabs__item {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	animation: fade 1s;
}

.tabs__wrapper-image {
	width: 306px;
}

.tabs__wrapper-image img {
	width: 100%;
	height: 420px;
	object-fit: cover;
}

/* --------- */

.start {
	display: flex;
	justify-content: center;
	column-gap: 24px;
	padding-left: 40px;
	padding-right: 40px;
}

.start__text {
	max-width: 526px;
}

.start__title {
	margin-bottom: 24px;
}

.start__subtitle {
	font-size: 18px;
	line-height: 1.5;
}

.start__form {
	max-width: 526px;
}

label {
	display: block;
	margin-bottom: 8px;
}

.start__input {
	display: block;
	width: 100%;
	height: 50px;
	margin-bottom: 40px;
	background-color: var(--dark);
	border: none;
	color: var(--white);
	font-size: 18px;
	padding: 0 15px;
	outline: none;
}

.start__btn {
	width: 100%;
	padding: 24px 0;
	background-color: var(--purple);
	border: none;
	color: var(--white);
	font-size: 18px;
	font-weight: 700;
	transition: background-color 0.2s;
}

.start__btn:active {
	background-color: #4618d2;
}

/* --------- */

.footer {
	padding: 80px 0;
	background-color: var(--dark);
}

.footer__wrapper {
	display: flex;
	justify-content: space-between;
	column-gap: 26px;
}

.footer__logo {
	width: 130px;
	margin-bottom: 32px;
}

.footer__icon {
	margin-bottom: 142px;
}

.footer__icon a + a {
	padding-left: 16px;
}

.footer__nav {
	display: flex;
	padding-right: 110px;
}

.footer__nav ul {
	padding: 0;
}

.footer__link {
	list-style: none;
	margin-bottom: 35px;
}

.footer__link a {
	color: var(--white);
	transition: color 0.2s;
}

.footer__link a:hover {
	color: var(--purple);
}

.footer__link a:active {
	color: #4618d2;
}

.footer__nav ul {
	width: 196px;
}

.footer__nav ul + ul {
	padding-left: 24px;
}