/* Global styles */
* {
	margin: 0;
	padding: 0;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

:root {
	--iris: #4d5ae5;
	--ocean: #404bbf;
	--navy-blue: #2e2f42;
	--slate: #434455;
	--light-slate: #8e8f99;
	--customers-icon-color: #8e8f99;
	--cornflower: #e7e9fc;
	--cloud: #f4f4fd;
	--white: #ffffff;
	--green: #31d0aa;
	--shadow: 0px 1px 6px 0px #2E2F4214, 0px 1px 1px 0px #2E2F4229, 0px 2px 1px 0px #2E2F4214;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: var(--navy-blue);
	background-color: var(--white);
}

h2 {
	text-align: center;
	font-size: 36px;
	line-height: 1.11;
	font-weight: 700;
	letter-spacing: 0.02em;
}

li {
	list-style-type: none;
}

a {
	text-decoration: none;
}

button {
	cursor: pointer;
}

.hidden {
	display: none;
}

.prevent-body-scroll {
	overflow: hidden;
}

.align-container {
	max-width: 428px;
	margin: 0 auto;
}

/* End of Global styles */

/* Burger Menu */
.burger-menu-container {
	position: absolute;
	right: 16px;
	top: 24px;
}

.menu-toggle {
	width: 32px;
	height: 22px;
	border: none;
	outline: none;
	border-radius: 50%;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background-color: transparent;
	cursor: pointer;
}

.burger-button-icon {
	width: 32px;
	height: 22px;
	fill: var(--navy-blue);
}

/* End of burger Menu */

/* Studio */

/* Header */
header {
	box-shadow: var(--shadow);
	background-color: var(--white);
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.navigation {
	display: flex;
	position: relative;
}

.navigation-list,
.contacts {
	display: none;
}

.logo-align {
	padding: 24px 0px 24px 16px;
	display: flex;
	align-items: center;
}

.logo {
	color: var(--navy-blue);
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: 0.03em;
}

.logo-colored {
	color: var(--iris);
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: 0.03em;
}

/* End of Header */

.head-hero {
	margin: 0 auto;
	width: 100%;
	padding: 112px 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(to right, rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)),
		url(../images/people-office.jpg);
}

@media (min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
	.head-hero {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-image: linear-gradient(to right, rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)),
			url('../images/people-office-2x.jpg');
	}
}

.hero-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 72px;
	overflow: hidden;
}

.main-heading {
	color: var(--white);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.11;
	width: 318px;
	text-align: center;
}

.hero-button {
	color: var(--white);
	background-color: var(--iris);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.5;
	border-radius: 4px;
	border-width: 0;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
	padding: 16px 32px 16px 32px;
	display: block;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}



.hero-button:active,
.hero-button:focus {
	background-color: var(--ocean);
	box-shadow: var(--shadow);
}

.features {
	padding: 96px 0px;
}

.features-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 72px;
}

.features-list li {
	display: flex;
	gap: 8px;
	flex-direction: column;
	align-items: center;
}

.icon-align {
	display: none;
}

.feature-heading {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.11;
	letter-spacing: 0.02em;
}

.feature-text {
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.02em;
	padding: 0px 16px;
}

.team-goals {
	display: none;
}

.team-members {
	background-color: var(--cloud);
	padding: 96px 0px;
}

.team-members,
.team-cards-list {
	display: flex;
	flex-direction: column;
}

.team-cards-list {
	gap: 24px;
}

.team-container {
	display: flex;
	flex-direction: column;
	gap: 72px;
}

.team-member {
	border-radius: 0px 4px 4px 4px;
	box-shadow: var(--shadow);
	background-color: #ffffff;
}

.team-member-info {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 32px 0px 8px;
	gap: 8px;
}

.team-member-name {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.team-member-position {
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.social-media-list {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 36px;
}

.social-media-list a {
	background-color: var(--iris);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.social-media-list a:hover,
.social-media-list a:focus {
	background-color: var(--ocean);
}

.social-media-icon {
	width: 16px;
	height: 16px;
}

.customers-section {
	display: flex;
	flex-direction: column;
	gap: 72px;
	padding: 96px 0px;
}

.customers-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 72px 16px;
}

.customer-icon {
	width: 104px;
	height: 56px;
}

.icon-link {
	border: 1px solid #8e8f99;
	border-radius: 4px;
	padding: 16px 40px;
	display: flex;
	fill: var(--customers-icon-color);
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-link:focus {
	fill: var(--ocean);
	border-color: var(--ocean);
}

/* Portfolio */
.portfolio {
	padding: 96px 0px;
}

.button-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin: 0 auto 48px auto;
	max-width: 330px;
	padding: 0px 16px;
}

.filter-button {
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--iris);
	background-color: var(--cloud);
	border: 1px solid var(--cornflower);
	border-radius: 4px;
	padding: 12px 24px;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-button:active,
.filter-button:focus {
	color: var(--cornflower);
	background-color: var(--ocean);
	box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.08),
		0px 2px 2px rgba(0, 0, 0, 0.12);
}

.photo-list {
	display: flex;
	gap: 48px 24px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0px 16px;
}

.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
	box-shadow: var(--shadow);
}

.link-card {
	color: inherit;
}

.overlay {
	display: none;
}

.card-photo img {
	width: 396px;
	height: 300px;
}

.about-text {
	display: flex;
	flex-direction: column;
	padding: 32px 0px 32px 16px;
	gap: 8px;
	border: 1px solid var(--cornflower);
}

.photo-heading {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

.photo-text {
	line-height: 1.5;
	color: var(--slate);
}

/* End of Portfolio */

/* Footer */
footer {
	background-color: var(--navy-blue);
}

.footer-content {
	padding: 100px 0px;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 72px;
}

.footer-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.logo-footer {
	color: var(--cloud);
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.17;
	letter-spacing: 0.03em;
}

.footer-text {
	line-height: 1.5;
	color: var(--cornflower);
	letter-spacing: 0.02em;
	max-width: 264px;
}

.footer-sm-list {
	display: flex;
	gap: 16px;
}

.footer-sm-list>li {
	width: 40px;
	height: 40px;
	background: var(--iris);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-sm-list>li:hover {
	background-color: var(--green);
	cursor: pointer;
}

.footer-icon-link {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-icon-link:active {
	background-color: var(--green);
	border-radius: 50%;
}

.footer-sm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.footer-sm-icon {
	width: 24px;
	height: 24px;
	display: flex;
}

.social-media-heading {
	color: var(--cloud);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.subscription {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.subscription p {
	text-align: center;
	color: #ffffff;
	letter-spacing: 0.02em;
	line-height: 1.5;
	font-weight: 500;
}

.sub-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.email-input {
	width: 100%;
	display: block;
	color: var(--white);
	background-color: var(--navy-blue);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	outline: none;
	padding: 8px 16px;
	box-shadow: 0px 4px 4px 0px #00000026;
}

.email-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 2;
}

.email-input-align {
	display: flex;
	justify-content: center;
	padding: 0px 16px;
}

.sub-button-align {
	display: flex;
	justify-content: center;
}

.sub-button {
	width: 165px;
	color: #ffffff;
	background-color: var(--iris);
	border-radius: 4px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding: 8px 24px;
	border: none;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-button:hover {
	box-shadow: var(--shadow);
}

.sub-button:focus {
	background-color: var(--ocean);
}

.sub-button-icon {
	width: 24px;
	height: 24px;
}

/* End of Footer */

/* Modal window */
.backdrop {
	z-index: 3;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(46, 47, 66, 0.4);
	opacity: 1;
	visibility: visible;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.backdrop.is-hidden {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.backdrop.is-hidden .modal {
	transform: translate(-50%, -50%) scale(0.7);
}

.modal {
	position: absolute;
	padding: 0px;
	width: 90%;
	max-width: 392px;
	top: 50%;
	left: 50%;
	padding: 72px 24px 24px;
	display: flex;
	flex-direction: column;
	transform: translate(-50%, -50%);
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 1;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12),
		0px 2px 1px rgba(0, 0, 0, 0.2);
	background-color: #fcfcfc;
	border-radius: 4px;
}

.button-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: transparent;
	outline: none;
	cursor: pointer;
	background-color: var(--cornflower);
}

.button-close-icon {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.button-close-icon:hover,
.button-close:focus {
	box-shadow: var(--shadow);
	background-color: var(--ocean);
	color: var(--white);
	fill: currentColor;
}

.button-close-icon:active,
.button-close:active {
	box-shadow: none;
}

.form-heading {
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.02em;
	line-height: 1.5;
	display: flex;
	justify-content: center;
}

.inputs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.input-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--light-slate);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.3;
	position: relative;
}

.text-input {
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 18px;
	max-width: 360px;
	height: 40px;
	padding: 11px 0px 11px 38px;
	border-radius: 4px;
	outline: 1px solid rgba(33, 33, 33, 0.2);
	border: transparent;
}

.text-input:focus+.form-icon {
	fill: var(--iris);
}

.text-input:focus {
	outline: 1px solid var(--iris);
	border: transparent;
}

.form-icon {
	position: absolute;
	top: 50%;
	left: 16px;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.name-icon {
	width: 18px;
	height: 18px;
}

.phone-icon {
	width: 18px;
	height: 24px;
	transform: translateY(-10%);
}

.mail-icon {
	width: 18px;
	height: 24px;
	transform: translateY(-10%);
}

.comment {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--light-slate);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.comment-input {
	resize: none;
	max-width: 360px;
	height: 120px;
	border-radius: 4px;
	outline: 1px solid rgba(33, 33, 33, 0.2);
	border: transparent;
	padding: 8px 16px;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.comment-input::placeholder {
	color: rgba(117, 117, 117, 0.5);
	letter-spacing: 0.04em;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3;
}

.comment-input:focus {
	outline: 1px solid var(--iris);
	border: transparent;
}

.policy-checkbox-label {
	color: #757575;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	margin: 16px 0px 24px;
	display: flex;
	padding-left: 24px;
	align-items: center;
}

.checkbox {
	position: absolute;
	width: 16px;
	height: 16px;
	border: 1.25px solid var(--navy-blue);
	border-radius: 2px;
	margin-left: -24px;
	cursor: pointer;
	display: block;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.checkbox-hidden {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	width: 16px;
	height: 16px;
	margin-left: -24px;
}

.checkbox-hidden:checked+.checkbox {
	background-color: var(--ocean);
	background-image: url(../images/checkmark.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.policy-link {
	text-decoration: underline;
	color: var(--iris);
}

.form-sub-button {
	background-color: var(--iris);
	width: 169px;
	height: 56px;
	border-radius: 4px;
	color: var(--white);
	padding: 16px 32px;
	box-shadow: 0px 4px 4px 0px #00000026;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
	border: none;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.form-sub-button:focus {
	background-color: var(--ocean);
}

.form-sub-button:hover {
	box-shadow: var(--shadow);
}

/* End of Modal window */

/* Burger menu */
.navigation-burger-menu,
.burger-menu-contacts {
	display: flex;
	flex-direction: column;
}

.menu-container {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 80px 40px 40px;
	background-color: var(--white);
	z-index: 3;
	transform: translateX(100%);
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-container.is-open {
	transform: translateX(0);
}

.menu-container .menu-toggle {
	position: absolute;
	top: 16px;
	right: 16px;
}

.burger-menu-navigation {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.burger-menu-navigation li {
	color: #fff;
	text-decoration: none;
}

.burger-nav-link {
	color: var(--navy-blue);
	width: 24px;
	height: 24px;
	font-weight: 700;
	font-size: 36px;
	letter-spacing: 0.02em;
	line-height: 1.11;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.burger-current-page {
	color: var(--ocean);
}

.burger-menu-contacts {
	margin-top: 280px;
	margin-top: auto;
	margin-bottom: 48px;
	gap: 40px;
}

.burger-contact-phone {
	color: var(--slate);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.11;
	letter-spacing: 0.02em;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.burger-contact-email {
	color: var(--slate);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.burger-contact-phone:hover,
.burger-contact-email:hover {
	color: var(--iris);
}

.burger-menu-sm-list {
	justify-content: space-around;
	margin-bottom: 0px;
}

.burger-menu-sm-list a {
	width: 40px;
	height: 40px;
}

.burger-menu-sm-icon {
	width: 24px;
	height: 24px;
}

/* End of Mobile burger menu */
/* End of Mobile*/


/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1199px) {

	.menu-toggle,
	.menu-container {
		display: none;
	}

	.align-container {
		max-width: 768px;
	}

	header {
		position: sticky;
		top: 0px;
		z-index: 3;
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Studio */
	.header-content {
		display: flex;
		justify-content: space-between;
	}

	.logo-align {
		padding: 24px 0px 24px 16px;
		display: flex;
		align-items: center;
	}

	.navigation {
		gap: 76px;
	}

	.navigation-list {
		display: flex;
		gap: 40px;
		align-items: center;
	}

	.navigation-list,
	.contacts {
		display: flex;
	}

	.logo {
		color: var(--navy-blue);
		font-family: 'Raleway', sans-serif;
		font-size: 18px;
		font-weight: 800;
		line-height: 1.16;
		letter-spacing: 0.03em;
	}

	.page {
		color: var(--navy-blue);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0.02em;
		position: relative;
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.page:hover {
		color: var(--slate);
	}

	.current-page {
		color: var(--iris);
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.current-page:hover {
		color: var(--iris);
	}

	.current-page::after {
		content: '';
		width: 100%;
		height: 4px;
		border-radius: 2px;
		display: block;
		position: absolute;
		left: 0;
		bottom: -33.5px;
		background-color: var(--iris);
		cursor: default;
	}

	.page:active,
	.page:focus {
		color: var(--iris);
	}

	.contacts-align {
		padding: 24px 16px 10px 0px;
	}

	.contacts {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.contact {
		color: inherit;
		line-height: 1.5;
		letter-spacing: 0.02em;
		fill: var(--navy-blue);
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.contact:focus,
	.contact:active {
		color: var(--iris);
		fill: var(--iris);
	}

	.contact-svg {
		width: 10px;
		height: 10px;
	}

	.head-hero {
		background-color: var(--navy-blue);
		padding-bottom: 108px;
		margin: 0 auto;
	}

	.main-heading {
		line-height: 1.07;
		font-size: 56px;
		width: 492px;
		letter-spacing: 0.02em;
	}

	.features-list {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 24px;
		justify-content: space-evenly;
		padding: 0px 16px;
		max-width: 1145px;
		margin: 0 auto;
	}

	.features-list li {
		max-width: 356px;
		align-items: flex-start;
	}

	.team-container {
		display: flex;
		flex-direction: column;
		gap: 72px;
		max-width: 768px;
		margin: 0 auto;
	}

	.team-cards-list {
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.footer-content {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.sub-form {
		flex-direction: row;
	}

	.email-input-align,
	.feature-text {
		padding: 0px;
	}

	.footer-content {
		gap: 72px 24px;
		padding-left: 108px;
		justify-content: flex-start;
	}

	.footer-title,
	.footer-sm,
	.subscription,
	.subscription p {
		align-items: flex-start;
	}

	.email-input {
		min-width: 264px;
	}

	/* End of Studio */

	/* Portfolio */
	.button-list {
		width: auto;
		gap: 24px;
		margin-bottom: 64px;
		padding: 0px;
		max-width: 600px;
	}

	.photo-list {
		justify-content: center;
		padding: 0px;
	}

	.card-photo img {
		width: 356px;
		height: 300px;
	}

	.overlay {
		max-width: 356px;
		height: 300px;
	}
}

/* End of Tablet */

/* Desktop */
@media screen and (min-width: 1200px) {

	.menu-toggle,
	.menu-container {
		display: none;
	}

	.align-container {
		max-width: 1158px;
	}

	/* Studio */
	header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0px;
		z-index: 3;
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		gap: 258px;
	}

	.navigation-list {
		display: flex;
		gap: 40px;
		align-items: center;
	}

	.page {
		color: var(--navy-blue);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0.02em;
		position: relative;
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.page:hover {
		color: var(--slate);
	}

	.current-page {
		color: var(--iris);
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.current-page:hover {
		color: var(--iris);
	}

	.current-page::after {
		content: '';
		width: 100%;
		height: 4px;
		border-radius: 2px;
		display: block;
		position: absolute;
		left: 0;
		bottom: -26.5px;
		background-color: var(--iris);
		cursor: default;
	}

	.page:active,
	.page:focus {
		color: var(--iris);
	}

	.contacts-align {
		padding: 24px 0px;
	}

	.contacts {
		display: flex;
		align-items: center;
		gap: 40px;
	}

	.contact {
		color: inherit;
		line-height: 1.5;
		letter-spacing: 0.02em;
		fill: var(--navy-blue);
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.contact:hover {
		color: var(--slate);
		fill: var(--slate);
		transition-duration: 250ms;
	}

	.contact:focus,
	.contact:active {
		color: var(--iris);
		fill: var(--iris);
	}

	.contact-svg {
		width: 10px;
		height: 10px;
	}

	.head-hero {
		background-color: var(--navy-blue);
		padding: 192px 0px;
		margin: 0 auto;
	}

	.hero-container {
		gap: 48px;
	}

	.main-heading {
		line-height: 1.07;
		font-size: 56px;
		width: 492px;
		letter-spacing: 0.02em;
	}

	.hero-button:hover {
		box-shadow: var(--shadow);
	}

	.features,
	.team-members,
	.customers-section {
		padding: 120px 0px;
	}

	.features-list {
		flex-direction: row;
		gap: 24px;
		justify-content: space-between;
	}

	.icon-align {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--cloud);
		width: 100%;
		height: 112px;
		border-radius: 4px;
	}

	.features-list li {
		align-items: flex-start;
	}

	.feature-heading {
		font-size: 20px;
		font-weight: 500;
		line-height: 1.5;
	}

	.feature-icon {
		width: 64px;
		height: 64px;
		display: block;
	}

	.feature-text {
		font-weight: 500;
		padding: 0px;
	}

	.team-goals {
		display: flex;
		flex-direction: column;
		padding: 0px 0px 120px;
	}

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

	.team-cards-list {
		flex-direction: row;
		justify-content: space-between;
	}

	.customers-list {
		gap: 24px;
	}

	.icon-link {
		padding: 16px 32px;
	}

	.icon-link:hover {
		border-color: var(--iris);
		fill: var(--iris);
	}

	/* Portfolio */
	.navigation {
		gap: 76px;
	}

	.portfolio {
		padding: 120px 0px;
	}

	.button-list {
		width: auto;
		gap: 24px;
		margin-bottom: 72px;
		padding: 0px;
		max-width: 600px;
	}

	.photo-list {
		justify-content: center;
		padding: 0px;
	}

	.link-card:hover .overlay,
	.link-card:focus .overlay {
		transform: translateY(-100%);
		opacity: 1;
	}

	.card-photo {
		position: relative;
		overflow: hidden;
	}

	.card-photo img {
		width: 360px;
		height: 300px;
	}

	.overlay {
		max-width: 396px;
		height: 300px;
		background-color: var(--iris);
		overflow: hidden;
		position: absolute;
		transform: translateY(100%);
		transition-duration: 250ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		justify-content: center;
		padding: 40px 32px 164px;
	}

	.overlay-content {
		max-width: 396px;
		height: 96px;
		color: var(--cloud);
		font-family: 'Roboto';
		font-style: normal;
		line-height: 1.5;
		letter-spacing: 0.02em;
	}

	.filter-button:hover {
		color: var(--cloud);
		background-color: var(--iris);
		border: 1px solid var(--iris);
		box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.08),
			0px 2px 2px rgba(0, 0, 0, 0.12);
	}

	/* Footer */
	.footer-content {
		flex-direction: row;
		gap: 0px;
		margin: 0 auto;
	}

	.footer-title {
		align-items: flex-start;
		padding-right: 120px;
	}

	.logo-footer {
		text-align: left;
	}

	.footer-text {
		width: 264px;
	}

	.footer-sm {
		align-items: flex-start;
		padding-right: 80px;
	}

	.subscription {
		align-items: flex-start;
	}

	.sub-form {
		flex-direction: row;
	}

	.email-input {
		width: 264px;
		height: 40px;
	}

	.email-input-align {
		padding: 0px;
	}
}

/*End of Desktop*/