@font-face {
	font-family: 'Montserrat';
	src: local('Montserrat-Regular'),
		url('../fonts/Montserrat-Regular.woff2') format('woff2'),
		url('../fonts/Montserrat-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: local('Montserrat-Medium'),
		url('../fonts/Montserrat-Medium.woff2') format('woff2'),
		url('../fonts/Montserrat-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: local('Montserrat-SemiBold'),
		url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
		url('../fonts/Montserrat-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: local('Montserrat-SemiBold'),
		url('../fonts/Montserrat-ExtraBold.woff2') format('woff2'),
		url('../fonts/Montserrat-ExtraBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

html {
	box-sizing: border-box;
}

:root {
	--main-font: "Montserrat";
	--base-dark: #000;
	--base-white: #fff;
	--title-color: #1b1725;
	--accent-color: #018FC0;
	--spec-tab-content-bg: rgba(244, 244, 246, .72);
	--services-bg: #162A3A;
	--contacts-bg: #162A3A;
	--contacts-form-bg: #283b49;
	--attainments-bg: #F4F4F6;
	--footer-bg: #162A3A;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
}

body {
	font-family: var(--main-font), sans-serif;
	font-size: 15px;
	color: var(--base-dark);
}

/* common styles */
.container {
	padding: 0 24px;
	max-width: 1188px;
}

h1 {
	font-weight: 700;
	font-size: 40px;
	line-height: 120%;
	color: var(--title-color);
}

h2 {
	font-weight: 700;
	font-size: 30px;
	line-height: 133%;
	color: var(--title-color);
}

h3 {
	font-weight: 700;
	font-size: 26px;
	line-height: 138%;
	color: var(--title-color);
}

.btn {
	border: none;
	outline: none;
	border-radius: 0;
	padding: 12px 20px;
	font-weight: 600;
	font-size: 13px;
	line-height: 154%;
	letter-spacing: 0.01em;
	text-align: center;
	color: var(--base-dark);
	background-color: var(--base-white);
}
/* end common styles */

/* header styles */
.header {
	position: fixed;
	z-index: 4;
	top: 11px;
	width: 100%;
}

.navbar {
	padding: 9px 0;
}

.navbar-brand {
	flex-shrink: 0;
	flex-basis: 116px;
	display: block;
	margin-right: 31px;
	padding: 0;
	width: 116px;
	height: 16px;
	background: center / contain no-repeat url('../img/logo.svg');
}

.navbar-nav {
	column-gap: 24px;
	margin-right: auto;
}

.navbar-expand-lg .navbar-nav .nav-link {
	padding: 0;
}

.nav-link {
	font-weight: 500;
	font-size: 13px;
	line-height: 154%;
	letter-spacing: 0.01em;
	color: var(--base-white);
	transition: color .3s ease-in-out;
}

.nav-link:hover, .navbar__contact-link:hover, .header_scroll .nav-link:hover, .header_scroll .navbar__contact-link:hover {
	color: var(--accent-color);
}

.navbar__contact-link {
	margin-right: 24px;
	font-weight: 600;
	font-size: 13px;
	line-height: 154%;
	letter-spacing: 0.01em;
	color: var(--base-white);
	transition: color .3s ease-in-out;
}

.navbar__contact-link_mob {
	display: none;
}

.navbar__btn {
	padding: 9px 20px 11px;
	transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

.navbar__btn:hover {
	color: var(--base-white);
	background-color: var(--accent-color);
}

/* scroll styles */
.header_scroll {
	top: 0;
	border-bottom: 0.50px solid rgba(0, 0, 0, 0.16);
	background-color: var(--base-white);
}

.header_scroll .navbar-brand {
	background: center / contain no-repeat url('../img/logo_scroll.svg');
}

.header_scroll .nav-link, .header_scroll .navbar__contact-link {
	color: var(--base-dark);
}

.header_scroll .navbar__btn {
	background-color: var(--accent-color);
	color: var(--base-white);
}

.header_scroll .navbar__btn:hover {
	background-color: rgba(1, 143, 192, .8);
}
/* end scroll styles */
/* end header styles */

/* main styles */
/* end main styles */


/* hero styles */
.hero {
	padding: 140px 0 112px;
	background: center / cover no-repeat url('../img/hero-bg.png');
}


.hero__content {
	padding-bottom: 106px;
	max-width: 684px;
}

.hero__title {
	margin-bottom: 32px;
	font-weight: 600;
	font-size: 50px;
	line-height: 104%;
	letter-spacing: -0.01em;
	color: var(--base-white);
}

.hero__descr {
	margin-bottom: 24px;
	max-width: 640px;
	font-weight: 400;
	font-size: 18px;
	line-height: 156%;
	letter-spacing: 0em;
	color: var(--base-white);
}

.hero__btn {
	transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

.hero__btn:hover {
	background-color: var(--accent-color);
	color: var(--base-white);
}

.benefits-list {
	display: flex;
	--gap: 112px;
	column-gap: var(--gap);
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 35px 48px 24px;
	background-color: var(--accent-color);
	clip-path: polygon(0 0, 100% 0, 100% 75%, 98% 100%, 0 100%);
}

.benefits-list__item {
	width: calc((100% - (var(--gap) * 2)) / 3);
}

.benefits-list__item::before {
	content: '';
	display: block;
	margin-bottom: 12px;
	width: 20px;
	height: 16px;
	background: center / cover no-repeat url('../img/benefit-arrow.png');		 
}

.benefits-list__item-descr {
	margin-bottom: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	letter-spacing: 0.01em;
	color: var(--base-white);
}
/* end hero styles */

/* specialization styles */
.specialization {
	padding: 96px 0 112px;
	background: center right no-repeat url('../img/scecialization-bg.png');
}

.specialization__title {
	margin-bottom: 40px;
	font-weight: 600;
	font-size: 40px;
	line-height: 120%;
	color: var(--base-dark);
}

.specialization__row {
	--bs-gutter-x: 16px;
}

.specialization__tab {
	display: flex;
	align-items: center;
	padding: 18px 16px;
	cursor: pointer;
	clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%);
	transition: background-color .3s ease-in-out;
}

.specialization__tab:not(:last-child) {
	margin-bottom: 8px;
}

.specialization__tab::before {
	content: '';
	display: block;
	width: 22px;
	height: 22px;	 
	margin-right: 12px;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-image .3s ease-in-out;
}

.specialization__tab_1::before {
	background-image: url('../img/spec-tab-1.svg');
}

.specialization__tab_2::before {
	background-image: url('../img/spec-tab-2.svg');
}

.specialization__tab_3::before {
	background-image: url('../img/spec-tab-3.svg');
}

.specialization__tab_4::before {
	background-image: url('../img/spec-tab-4.svg');
}

.specialization__tab_5::before {
	background-image: url('../img/spec-tab-5.svg');
}

.specialization__tab_6::before {
	background-image: url('../img/spec-tab-6.svg');
}

.specialization__tab_7::before {
	background-image: url('../img/spec-tab-7.svg');
}

.specialization__tab_8::before {
	background-image: url('../img/spec-tab-8.svg');
}

.specialization__tab-text {
	margin-bottom: 0;
	font-weight: 400;
	font-size: 18px;
	line-height: 156%;
	letter-spacing: 0em;
	transition: color .3s ease-in-out;
}

.specialization__tab:hover {
	background-color: #F4F4F6;
}

.specialization__tab_active, .specialization__tab_active:hover {
	background-color: var(--accent-color);
}

.specialization__tab_active .specialization__tab-text {
	font-weight: 600;
	color: var(--base-white);
}

.specialization__tab_active.specialization__tab_1:hover::before, .specialization__tab_active.specialization__tab_1::before {
	background-image: url('../img/spec-tab-1-hov.svg');
}

.specialization__tab_active.specialization__tab_2:hover::before, .specialization__tab_active.specialization__tab_2::before {
	background-image: url('../img/spec-tab-2-hov.svg');
}

.specialization__tab_active.specialization__tab_3:hover::before, .specialization__tab_active.specialization__tab_3::before {
	background-image: url('../img/spec-tab-3-hov.svg');
}

.specialization__tab_active.specialization__tab_4:hover::before, .specialization__tab_active.specialization__tab_4::before {
	background-image: url('../img/spec-tab-4-hov.svg');
}

.specialization__tab_active.specialization__tab_5:hover::before, .specialization__tab_active.specialization__tab_5::before {
	background-image: url('../img/spec-tab-5-hov.svg');
}

.specialization__tab_active.specialization__tab_6:hover::before, .specialization__tab_active.specialization__tab_6::before {
	background-image: url('../img/spec-tab-6-hov.svg');
}

.specialization__tab_active.specialization__tab_7:hover::before, .specialization__tab_active.specialization__tab_7::before {
	background-image: url('../img/spec-tab-7-hov.svg');
}

.specialization__tab_active.specialization__tab_8:hover::before, .specialization__tab_active.specialization__tab_8::before {
	background-image: url('../img/spec-tab-8-hov.svg');
}

.specialization__tab-content {
	display: none;
	padding: 44px 52px 44px 44px;
	height: 100%;
	background: right bottom no-repeat url('../img/tab-content-bg.png'), var(--spec-tab-content-bg); 
	clip-path: polygon(0 0, 100% 0, 100% 94%, 95% 100%, 0 100%);
}

.specialization__tab-content_show {
	display: block;
}

.specialization__tab-content-title {
	margin-bottom: 28px;
	font-weight: 400;
	font-size: 30px;
	line-height: 133%;
	color: var(--base-dark);
}

.specialization__tab-content p {
	max-width: 520px;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: rgba(0, 0, 0, 0.8);
}

.specialization__tab-content p:not(:last-of-type) {
	margin-bottom: 28px;
}
/* end specialization styles */

/* services styles */
.services {
	padding: 108px 0 0;
	background-color: var(--services-bg);
}

.services__container {
	padding-bottom: 112px;
	background: center bottom / contain no-repeat url('../img/service-circle-bg.png');
}

.services__accordion {
	background-color: transparent;
	counter-reset: services 0;
} 

.services__title {
	margin-bottom: 40px;
	font-weight: 600;
	font-size: 40px;
	line-height: 120%;
	color: var(--base-white);
}

.services__accordion-item:first-of-type {
	border-top: 0.50px solid rgba(255, 255, 255, 0.25);
}

.services__accordion-item {
	border-radius: 0;
	border: none;
	border-bottom: 0.50px solid rgba(255, 255, 255, 0.25);
	padding: 32px 0;
	background-color: transparent;
}

.services__accordion-item__header {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding-left: 38px;
	padding-right: 96px;
	counter-increment: services 1;
	cursor: pointer; 
}

.services__accordion-item__header::before {
	content: "0"counter(services)" /";
	position: absolute;
	top: 6px;
	left: 0;
	display: block;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.5);
}

.services__accordion-item__header::after {
	content: '';
	position: absolute;
	top: 13px;
	right: 0;
	display: block;
	width: 10px;
	height: 12px;
	background: center / contain no-repeat url('../img/service-accordion-arrow.svg');
	transform: rotate(-90deg);
	transition: transform .3s ease-in-out;
}

.services__accordion-item__header.collapsed::after {
	transform: rotate(0deg);
}

.services__accordion-item-title {
	font-weight: 400;
	font-size: 26px;
	line-height: 138%;
	color: var(--base-white);
	opacity: 0.8;
}

.services__accordion-item__header:not(.collapsed) .services__accordion-item-title {
	font-weight: 600;
	opacity: 1;
} 

.services__accordion-item-body {
	padding: 4px 0 4px 16px;
	max-width: 490px;
}

.services__accordion-item-body p {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: var(--base-white);
}

.services__accordion-item-body p:not(:last-of-type) {
	margin-bottom: 16px;
}
/* end services styles */

/* our-objects styles */
.our-objects {
	padding: 96px 0 0;
}

.our-objects__title {
	margin-bottom: 28px;
	font-weight: 600;
	font-size: 40px;
	line-height: 120%;
	color: var(--base-dark);
}

.our-objects__logo-splide-container {
	margin-bottom: 112px;
	padding: 0;
	max-width: 100%;
}

.our-objects__brands-slider .splide__arrows, .our-objects__works-slider .splide__arrows {
	position: absolute;
	width: 128px;
	right: 5%;
	top: -47px;
}

.our-objects__brands-slider .splide__arrow, .our-objects__works-slider .splide__arrow {
	border-radius: 0;
	width: 58px;
	height: 28px;
	background-color: #F4F4F6;
}

.our-objects__brands-slider .splide__arrow:hover, .our-objects__works-slider .splide__arrow {
	background-color: #E8E8E9;
}

.our-objects__brands-slider .splide__arrow--next, .our-objects__works-slider .splide__arrow--next {
	right: 0;
}

.our-objects__brands-slider .splide__arrow--prev, .our-objects__works-slider .splide__arrow--prev {
	left: 0;
}

.our-objects__brands-slider .splide__arrow svg, .our-objects__works-slider .splide__arrow svg {
	height: 12px;
}

.our-objects__splide-list-logo {
	align-items: center;
}

.our-objects__works-slider-container {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.our-objects__works-slider .splide__arrows {
	top: -25px;
}

.our-objects__slider-slide {
	flex-basis: 272px;
}

.our-objects__slider-link:hover {
	cursor: pointer;
}

.our-objects__slider-link:hover .our-objects__work-descr {
	background-color: rgba(1, 143, 192, .5);
}

.our-objects__work-preview {
	position: relative;
}

.our-objects__work-descr {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px 54px 40px 24px;
	background-color: rgba(0, 0, 0, .5);
	transition: background-color .3s ease-in-out;
}

.our-objects__work-descr-text {
	margin-bottom: 0;
	font-weight: 500;
	font-size: 18px;
	line-height: 133%;
	letter-spacing: 0em;
	color: var(--base-white);
}
/* end our-objects styles */

/* contacts styles */
.contacts {
	padding: 102px 0 112px;
	background: var(--contacts-bg);
}

.contacts__row {
	--bs-gutter-x: 16px;
}

.about-company {
	padding-right: 32px;
}

.about-company__content {
	padding-top: 34px;
	padding-bottom: 4px;
	background: top center / cover no-repeat url('../img/about-company-bg.png');
}

.about-company__title {
	margin-bottom: 32px;
	font-weight: 600;
	font-size: 40px;
	line-height: 120%;
	color: var(--base-white);
}

.about-company__descr {
	margin-bottom: 56px;
}

.about-company__descr p {
	margin-bottom: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: var(--base-white);
}

.about-company__descr p:not(:last-of-type) {
	margin-bottom: 16px;
}

.about-company__statistcs {
	display: flex;
	column-gap: 16px;
}

.about-company__statistc-card {
	padding-right: 46px;
	max-width: 274px;
}

.about-company__statistc-counter {
	margin-bottom: 12px;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: var(--base-white);
}

.about-company__statistc-counter::before {
	content: '>';
	font-size: 30px;
}

.about-company__statistc-counter-val {
	font-size: 30px;
}

.about-company__statistc-text {
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.8);
}

.contacts__form-wrap {
	padding-top: 10px;
}

.contacts__form {
	border: 0.50px solid rgba(255, 255, 255, 0.16);
	padding: 40px 53px 48px 40px;
	background-color: var(--contacts-form-bg);
}

.contacts__form-title {
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 26px;
	line-height: 138%;
	color: var(--base-white);
}

.contacts__form-inputs {
	margin-bottom: 40px;
}

.contacts__form-group:not(:last-of-type) {
	margin-bottom: 12px;
}

.contacts__form-input {
	border: none;
	outline: none;
	border-bottom: 0.50px solid rgba(255, 255, 255, 0.8);
	display: block;
	padding: 24px 0 16px;
	width: 100%;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: var(--base-white);
	background: transparent;
}

.contacts__form-input::placeholder {
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.8);
}

.contacts__form-btn {
	padding: 12px 24px;
	color: var(--base-white);
	cursor: pointer;
	background-color: var(--accent-color);
	transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

.contacts__form-btn:hover {
	color: var(--base-white);
	background-color: rgba(1, 143, 192, .8);
}

.contacts__form-terms {
	margin-top: 12px;
	font-size: 12px;
	color: var(--base-white);
}
/* end contacts styles */

/* attainments styles */
.attainments {
	padding: 96px 0 113px;
	background-color: var(--attainments-bg);
}

.attainments__title {
	margin-bottom: 40px;
	font-weight: 600;
	font-size: 40px;
	line-height: 120%;
	color: var(--base-dark);
}

.attainments__row {
	--bs-gutter-x: 16px;
	row-gap: 16px;
}

.attainments__card {
	height: 100%;
	filter: drop-shadow(0 4px 24px rgba(22, 42, 58, 0.05));
}

.attainments__card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28px 16px 36px;
	height: 100%;
	background-color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 85%, 93% 100%, 0 100%);
}

.attainments__card-content::before {
	content: '';
	display: block;
	margin-bottom: 12px;
	width: 36px;
	height: 36px;
	background: center / contain no-repeat url('../img/attainments-cool.svg');
}

.attainments__card-title {
	margin-bottom: 8px;
	padding: 0 8px;
	width: 100%;
	text-align: center;
	font-weight: 600;
	font-size: 18px;
	line-height: 133%;
	text-align: center;
	color: var(--base-dark);
}

.attainments__card-descr {
	margin-bottom: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 133%;
	letter-spacing: 0.01em;
	text-align: center;
	color: #000;
}
/* end attainments styles */

/* news styles */
.news {
	padding: 89px 0 119px;
	background: top right / contain no-repeat url('../img/news-bg.png');
}

.news__title {
	margin-bottom: 32px;
	font-weight: 600;
	font-size: 40px;
	line-height: 120%;
	color: var(--base-dark);
}

.news__row {
	--bs-gutter-x: 48px;
	row-gap: 44px;
}

.news__new-card {
	border-bottom: 0.50px solid rgba(0, 0, 0, 0.25);
	padding-bottom: 24px;
	height: 100%;
}

.news__new-card-title {
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: var(--base-dark);
}

.news__new-card-date-pub {
	margin-bottom: 4px;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: rgba(0, 0, 0, 0.5);
}

.news__new-card-descr p {
	margin-bottom: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: var(--base-dark);
}

.news__new-card-descr p:not(:last-of-type) {
	margin-bottom: 16px;
}
/* end news styles */

/* footer styles */
.footer {
	padding: 48px 0;
	background-color: var(--footer-bg);	 
}

.footer__logo-link {
	display: inline-block;
	margin-bottom: 42px;
}

.footer__copyright {
	margin-bottom: 36px;
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: var(--base-white);
}

.footer__contacts-row {
	margin-bottom: 20px;
	--bs-gutter-x: 16px;
}

.footer__contacts-text {
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.72);
}

.footer__contacts-text_bold {
	font-weight: 600;
	color: var(--base-white);
}

.footer__contacts-text_white {
	color: var(--base-white);
}

.footer__contacts-text:not(:last-child) {
	margin-bottom: 4px;
}

.footer__link {
	font-weight: 600;
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.01em;
	color: var(--base-white);
	transition: color .3s ease-in-out;
}

.footer__link:hover {
	color: var(--accent-color);
}

.footer__btn {
	padding: 12px 24px;
	background-color: var(--accent-color);
	color: var(--base-white);
	transition: background-color .3s ease-in-out;
}

.footer__btn:hover {
	color: var(--base-white);
	background-color: rgba(1, 143, 192, .8);
}
/* end footer styles */













