@import 'normalize.css';

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.eot');
    src: local('Manrope Regular'), local('Manrope-Regular'),
        url('../fonts/Manrope-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Manrope-Regular.woff2') format('woff2'),
        url('../fonts/Manrope-Regular.woff') format('woff'),
        url('../fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.eot');
    src: local('Manrope Medium'), local('Manrope-Medium'),
        url('../fonts/Manrope-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Manrope-Medium.woff2') format('woff2'),
        url('../fonts/Manrope-Medium.woff') format('woff'),
        url('../fonts/Manrope-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Semibold.eot');
    src: local('Manrope Semibold'), local('Manrope-Semibold'),
        url('../fonts/Manrope-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Manrope-Semibold.woff2') format('woff2'),
        url('../fonts/Manrope-Semibold.woff') format('woff'),
        url('../fonts/Manrope-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.eot');
    src: local('Manrope Bold'), local('Manrope-Bold'),
        url('../fonts/Manrope-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Manrope-Bold.woff2') format('woff2'),
        url('../fonts/Manrope-Bold.woff') format('woff'),
        url('../fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primary: #004389;
    --color-accent: #F44611;
    --color-white: #fff;
    --color-white-80: rgba(255, 255, 255, 0.8);
    --font-primary: 'Manrope', sans-serif;
    --base-font-size: 1.6rem;
    --container-padding: 1.6rem;
}

/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

html {
    font-size: 62.5%;
}

body {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--base-font-size);
    line-height: 1.5;
    color: var(--color-primary);
    background-image: url('../img/main-bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
}

body.lock,
body._lock {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

p {
    margin-top: 0;
    line-height: 1.3;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* Icons */

.phone-icon {
    width: 2rem;
    height: 2rem;
    transition: color 0.3s ease-in-out;
}

.arrow-left-icon,
.arrow-right-icon {
    width: 2rem;
    height: 2rem;
}

/* Utility */

.container {
    max-width: 127.2rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.section-title {
    font-weight: 700;
    font-size: 7.2rem;
    line-height: 1.25;
    margin-bottom: 5.6rem;
    text-transform: uppercase;
}

.section-subtitle {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 2.4rem;
    text-transform: uppercase;
}

.w-100,
.button.w-100 {
    width: 100%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Components */

.menu__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 3.2rem;
}

.menu__link {
    color: var(--color-white-80);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.3;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out;
}

.menu__link:hover {
    color: var(--color-accent);
}

.button {
    position: relative;
    display: inline-block;
    width: fit-content;
    color: var(--color-white);
    background:
        linear-gradient(135deg,
            #F44611 0%,
            #DA3300 50%,
            #F44611 50%);
    font-weight: 700;
    line-height: 1.3;
    padding: 2.4rem 3.2rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.button::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--color-accent);
}

/* .button::before,
.button::after {
  content: '';
  position: absolute;
  width: 1.8rem;
  height: 1.8rem;
  background-repeat: no-repeat;
  transition: transform 0.3s ease-in-out;
}

.button::before {
  bottom: 0.8rem;
  left: 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.25 1.75L1.25 16.75L16.25 16.75' stroke='%23004389' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E%0A");
}

.button::after {
  top: 0.8rem;
  right: 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.75 16.25L16.75 1.25002L1.75002 1.25002' stroke='%23004389' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E%0A");
}

.button:hover {
  transform: scale(0.923);
}

.button:hover::before {
  transform: translate(-1.2rem, 1.2rem);
}

.button:hover::after {
  transform: translate(1.2rem, -1.2rem);
} */

.button--secondary {
    color: var(--color-accent);
    background: var(--color-white);
}

.button--secondary::before {
    border: 2px solid var(--color-white);
}

/* .button--secondary::before {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.25 1.75L1.25 16.75L16.25 16.75' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E%0A");
}

.button--secondary::after {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.75 16.25L16.75 1.25002L1.75002 1.25002' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E%0A");
} */

.list-style li {
    display: flex;
    column-gap: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 1.6rem;
}

.list-style li:last-child {
    margin-bottom: 0;
}

.list-style li::before {
    content: '';
    width: 1.8rem;
    height: 1.8rem;
    mask-image: url('../icons/bullet-icon.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    background-color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.28rem;
}

/* Header */

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

.header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding-block: 4rem;
}

.header__menu {
    margin-left: 3.2rem;
}

.header__phone {
    border: 2px solid #fff;
    width: 5.6rem;
    height: 5.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 7.2rem;
    transition: border-color 0.3s ease-in-out;
}

.header__phone:hover {
    border-color: var(--color-accent);
}

.header__phone:hover .phone-icon {
    color: var(--color-accent);
}

.burger-menu {
    display: none;
}

/* Hero */

.hero {
    padding-top: 3.8rem;
    padding-bottom: 9rem;
}

.hero__title {
    max-width: 84.5rem;
    color: var(--color-white);
    font-weight: 700;
    font-size: 12rem;
    line-height: 1.25;
    margin-bottom: 7.2rem;
    text-transform: uppercase;
}

.hero__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

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

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

.hero__description {
    color: var(--color-white-80);
    line-height: 1.3;
}

.hero__button {
    justify-self: end;
    align-self: end;
}

/* Advantages */

.advantages {
    padding-bottom: 12rem;
}

.advantages__image {
    margin-bottom: 12rem;
}

.advantages__image-desktop {
    display: block;
}

.advantages__image-mobile {
    display: none;
}

.advantages__image img {
    border: 1.2rem solid var(--color-white);
}

.advantages__content {
    display: grid;
    grid-template-columns: 64rem 1fr;
    column-gap: 6.4rem;
    margin-bottom: 12rem;
}

.advantages__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-content: start;
}

.advantages__images img:first-child {
    grid-column: 1 / -1;
    width: 100%;
}

.advantages__images img:nth-child(2),
.advantages__images img:nth-child(3) {
    width: 100%;
}

.advantages__box {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 4.8rem;
}

.advantages__box-subtitle {
    margin-bottom: 4.8rem;
}

.advantages__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1px auto;
    column-gap: 3.2rem;
    row-gap: 4.8rem;
}

.advantages__item {
    display: flex;
    column-gap: 2.4rem;
}

.advantages__list::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    background-color: rgba(255, 255, 255, 0.12);
}

.advantages__item:nth-child(-n+3) {
    grid-row: 1;
}

.advantages__item:nth-child(n+4) {
    grid-row: 3;
}

.advantages__item-icon {
    flex-shrink: 0;
}

.advantages__item-title {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
}

.advantages__item-description {
    color: var(--color-white-80);
    line-height: 1.3;
}

/* Products */

.products {
    padding-bottom: 12rem;
}

.products__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
}

.products__subtitle {
    margin-bottom: 0;
}

.products__wrapper {
    margin-bottom: 10rem;
}

.products__wrapper:last-child {
    margin-bottom: 0;
}

.products__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.4rem;
    row-gap: 4rem;
}

.products__items--grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.products__items--grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.products__items--grid-4 .products__item:nth-child(9) {
    grid-column: 1 / -1;
}

.products__item {
    text-align: center;
}

.products__description {
    max-width: 51.5rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 2.4rem;
}

.products__item-title {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 1.2rem 0.6rem;
    margin-top: 2.4rem;
    margin-bottom: 3.2rem;
    text-align: center;
}

.products__feature {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 1.2rem;
    border-bottom: 1px solid rgba(0, 67, 137, 0.1);
    line-height: 1.3;
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
}

.products__feature:last-child {
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 0;
}

.products__feature span:first-child {
    font-weight: 700;
}

.products__feature span:last-child {
    font-weight: 500;
    text-align: right;
}

/* Solutions */

.solutions {
    background-image: url('../img/solutions-bg.jpg');
    background-color: var(--color-primary);
    background-repeat: no-repeat;
    background-position: center top;
    color: var(--color-white);
}

.solutions__inner {
    display: grid;
    grid-template-columns: auto 40rem;
    column-gap: 12rem;
    padding-block: 12rem;
}

.solutions__content {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: start;
}

.solutions__content .solutions__subtitle {
    max-width: 50rem;
}

.solutions__title {
    max-width: 72rem;
}

.solutions__subtitle {
    max-width: 54rem;
}

.solutions__description {
    color: var(--color-white-80);
    line-height: 1.3;
}

.solutions__description--fullheight {
    flex: 1;
}

.solution__button {
    margin-top: 5.6rem;
}

.solutions__sidebar-content {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(0.5rem);
    padding: 3.2rem;
    margin-bottom: 1.2rem;
}

.solutions__subtitle {
    max-width: 27rem;
    margin-bottom: 3.2rem;
}

.solutions__list {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-block: 3.2rem;
    margin-block: 3.2rem;
}

.solutions__item:last-child {
    margin-bottom: 0;
}

.solutions__sidebar-image img {
    width: 100%;
    object-fit: cover;
}

/* Equipment */

.equipment {
    padding-block: 12rem;
}

.equipment__inner {
    display: grid;
    grid-template-columns: 64rem 1fr;
    column-gap: 6.4rem;
}

.equipment__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-content: start;
}

.equipment__images img:last-child {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 2.175 / 1;
    object-fit: cover;
}

.equipment__images img:nth-child(1),
.equipment__images img:nth-child(2) {
    width: 100%;
    aspect-ratio: 1.09 / 1;
    object-fit: cover;
}

/* portfolio */

.portfolio {
    padding-bottom: 12rem;
}

.portfolio__slider-wrapper {
    position: relative;
    padding-inline: 6.8rem;
}

.portfolio__slider-button--prev {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.6rem;
    height: 5.6rem;
    background-color: var(--color-primary);
    cursor: pointer;
    transform: translateY(-50%);
}

.portfolio__slider-button--next {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.6rem;
    height: 5.6rem;
    background-color: var(--color-primary);
    cursor: pointer;
    transform: translateY(-50%);
}

.portfolio__slider-button--prev.swiper-button-disabled,
.portfolio__slider-button--next.swiper-button-disabled {
    background-color: #EBF0F6;
}

.portfolio__slider-button--prev.swiper-button-disabled .arrow-left-icon,
.portfolio__slider-button--next.swiper-button-disabled .arrow-right-icon {
    color: #a5bcd6;
}

.portfolio__slider-button--prev .arrow-left-icon,
.portfolio__slider-button--next .arrow-right-icon {
    color: var(--color-white);
}

.portfolio__slider-button--prev .arrow-left-icon {
    transform: rotate(180deg);
}

.portfolio__slider-pagination {
    margin-top: 3.2rem;
    text-align: center;
}

.portfolio__slider-pagination .swiper-pagination-bullet {
    width: 1.4rem;
    height: 1.4rem;
    background-color: var(--color-primary);
    border-radius: 0;
}

/* Contacts */

.contacts {
    color: var(--color-white);
    padding-bottom: 5.6rem;
}

.contacts__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6.4rem;
    background-color: var(--color-accent);
    padding: 10rem;
}

.contacts__title {
    margin-bottom: 4.5rem;
}

.contacts__list {
    color: var(--color-white);
    border-top: 1px solid rgb(255, 255, 255, 0.1);
    padding-block: 3.2rem;
}

.contacts__list li::before {
    background-color: var(--color-white);
}

.contacts__form-title {
    margin-bottom: 3.2rem;
}

.contacts__form-control {
    margin-bottom: 0.8rem;
}

.contacts__form-control+.contacts__form-control {
    margin-bottom: 2.4rem;
}

.contacts__form-control--row {
    display: flex;
    column-gap: 0.8rem;
}

.contacts__form-input {
    position: relative;
    width: 100%;
    color: rgba(255, 255, 255, 0.6);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 2.4rem 5rem 2.4rem 2.4rem;
    font-weight: 500;
    line-height: 1.3;
    outline: none;
}

.contacts__form-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    right: 2.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4rem;
    height: 1.4rem;
    opacity: 0.6;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.input-icon-user {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.50118 0.5C5.50116 0.5 3.86625 2.13491 3.86625 4.13493C3.86625 6.13494 5.50116 7.76985 7.50118 7.76985C9.50119 7.76985 11.1361 6.13494 11.1361 4.13493C11.1361 2.13491 9.50119 0.5 7.50118 0.5ZM13.7393 10.6746C13.644 10.4365 13.5171 10.2143 13.3742 10.0079C12.6441 8.92856 11.5171 8.21428 10.2472 8.03967C10.0885 8.02382 9.91393 8.05553 9.78693 8.15078C9.12026 8.64285 8.32662 8.89681 7.50121 8.89681C6.67579 8.89681 5.88215 8.64285 5.21548 8.15078C5.08849 8.05553 4.91388 8.00793 4.75516 8.03967C3.48532 8.21428 2.34247 8.92856 1.62819 10.0079C1.48534 10.2143 1.35834 10.4524 1.26312 10.6746C1.21552 10.7699 1.23138 10.881 1.27898 10.9762C1.40598 11.1984 1.5647 11.4207 1.70755 11.6111C1.92977 11.9127 2.16787 12.1826 2.43772 12.4365C2.65993 12.6587 2.9139 12.8651 3.16789 13.0714C4.42184 14.008 5.92979 14.5 7.48535 14.5C9.0409 14.5 10.5489 14.0079 11.8028 13.0714C12.0568 12.881 12.3107 12.6587 12.533 12.4365C12.7869 12.1826 13.0409 11.9127 13.2631 11.6111C13.4219 11.4048 13.5647 11.1984 13.6917 10.9762C13.771 10.881 13.7869 10.7698 13.7393 10.6746Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

.input-icon-email {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.825498 2.88511C0.732416 3.03208 0.793304 3.22175 0.941677 3.31343L7.13552 7.14802C7.24613 7.21642 7.37361 7.25266 7.50366 7.25266C7.6337 7.25266 7.76118 7.21642 7.87179 7.14802L14.0656 3.31343C14.214 3.22245 14.2749 3.03278 14.1818 2.88511C13.993 2.58363 13.7307 2.33509 13.4195 2.16284C13.1083 1.99058 12.7584 1.90027 12.4027 1.90039H2.60457C2.24887 1.90027 1.89898 1.99058 1.58778 2.16284C1.27657 2.33509 1.01426 2.58363 0.825498 2.88511Z' fill='%23ffffff'/%3E%3Cpath d='M14.4974 5.31852C14.4974 5.2562 14.4807 5.19503 14.4491 5.14132C14.4175 5.0876 14.3722 5.0433 14.3177 5.01298C14.2633 4.98265 14.2018 4.96742 14.1395 4.96884C14.0772 4.97026 14.0164 4.9883 13.9634 5.02107L8.60379 8.33845C8.27182 8.54395 7.88913 8.65281 7.4987 8.65281C7.10827 8.65281 6.72557 8.54395 6.3936 8.33845L1.034 5.02107C0.981006 4.9883 0.920221 4.97026 0.857927 4.96884C0.795632 4.96742 0.734087 4.98265 0.679651 5.01298C0.625216 5.0433 0.579863 5.0876 0.548281 5.14132C0.516698 5.19503 0.50003 5.2562 0.5 5.31852V10.9994C0.5 11.5562 0.721208 12.0903 1.11496 12.484C1.50871 12.8778 2.04276 13.099 2.59961 13.099H12.3978C12.9546 13.099 13.4887 12.8778 13.8824 12.484C14.2762 12.0903 14.4974 11.5562 14.4974 10.9994V5.31852Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

.input-icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.6403 10.3875C13.6044 10.3591 11 8.48175 10.2851 8.6165C9.94387 8.67688 9.74875 8.90963 9.35719 9.37556C9.29419 9.45081 9.14281 9.63106 9.02513 9.75925C8.77767 9.67854 8.53629 9.58029 8.30281 9.46525C7.09773 8.87857 6.12406 7.9049 5.53737 6.69981C5.42225 6.46637 5.324 6.22498 5.24337 5.9775C5.372 5.85938 5.55225 5.708 5.62925 5.64325C6.093 5.25387 6.32619 5.05875 6.38656 4.71662C6.51038 4.00787 4.63437 1.3855 4.61469 1.36187C4.52957 1.24028 4.41849 1.13913 4.28948 1.06573C4.16047 0.992338 4.01676 0.948537 3.86875 0.9375C3.10837 0.9375 0.9375 3.75369 0.9375 4.22794C0.9375 4.2555 0.977313 7.05725 4.43225 10.5717C7.94319 14.0227 10.7445 14.0625 10.7721 14.0625C11.2467 14.0625 14.0625 11.8916 14.0625 11.1312C14.0516 10.9838 14.008 10.8405 13.935 10.7119C13.862 10.5833 13.7614 10.4725 13.6403 10.3875Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

.contacts__form-checkbox {
    flex-shrink: 0;
}

.contacts__form-agreement {
    display: flex;
    align-items: flex-start;
    column-gap: 1.2rem;
    margin-bottom: 2.4rem;
}

.contacts__form-text {
    color: var(--color-white-80);
    font-size: 1.3rem;
    line-height: 1.3;
}

/* Footer */

.footer {
    margin-bottom: 2.4rem;
}

.footer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 67, 137, 0.1);
    padding-bottom: 5.6rem;
    margin-bottom: 2.4rem;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(0, 67, 137, 0.8);
    font-size: 1.4rem;
    line-height: 1.3;
}

.footer__menu {
    margin-left: 3.2rem;
}

.footer__menu .menu__link {
    color: var(--color-primary);
}

.footer__policy {
    display: flex;
    gap: 0;
}

.footer__develop {
    display: flex;
    align-items: center;
    column-gap: 0.8rem;
}

.footer__policy-link {
    display: inline-block;
    text-decoration: underline;
}

.footer__policy-link:first-child {
    border-right: 1px solid rgba(0, 67, 137, 0.8);
    padding-right: 1rem;
    margin-right: 1rem;
}

.footer__policy-link:hover {
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    .menu__list {
        gap: 2.4rem;
    }

    .menu__link {
        font-size: 1.2rem;
    }

    .header__phone {
        margin-left: 3.2rem;
    }
}

@media (max-width: 991.98px) {
    body {
        background-image: url('../img/main-bg-mobile.jpg');
    }

    .section-title {
        font-size: 4rem;
        margin-bottom: 4.8rem;
    }

    .header__inner {
        column-gap: 1.6rem;
        padding-block: 1.6rem;
    }

    .header__menu {
        position: fixed;
        top: 8.8rem;
        left: 1.6rem;
        width: calc(100% - 3.2rem);
        height: 0;
        background-color: var(--color-white);
        padding-inline: 3.2rem;
        margin: 0;
        transition: height 0.3s ease-in-out;
        overflow: auto;
        z-index: 1000;
    }

    .header__menu.active {
        height: calc(100vh - 10.4rem);
    }

    .header__menu .menu__link {
        color: var(--color-primary);
        font-size: 1.4rem;
    }

    .header__menu .menu__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 3.2rem;
        padding-block: 3.2rem;
    }

    .menu__list {
        justify-content: flex-start;
    }

    .burger-menu {
        position: relative;
        display: block;
        width: 2.4rem;
        height: 2rem;
        cursor: pointer;
        z-index: 1001;
    }

    .burger-menu span {
        position: absolute;
        height: 2px;
        background-color: var(--color-white);
        transition: all 0.3s;
    }

    .burger-menu span:nth-of-type(1) {
        top: 0;
        left: 0;
        width: 100%;
    }

    .burger-menu span:nth-of-type(2) {
        top: calc(50% - 1px);
        left: 0;
        width: 70%;
    }

    .burger-menu span:nth-of-type(3) {
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .header__logo {
        justify-self: center;
    }

    .header__phone {
        margin-left: 0;
    }

    .hero {
        padding-top: 3.2rem;
        padding-bottom: 5.6rem;
    }

    .hero__title {
        font-size: 4.8rem;
        margin-bottom: 4rem;
    }

    .hero__content {
        grid-template-columns: 1fr;
        row-gap: 4rem;
    }

    .hero__button {
        justify-self: start;
    }

    .advantages {
        padding-bottom: 8rem;
    }

    .advantages__image {
        margin-bottom: 8rem;
    }

    .advantages__content {
        grid-template-columns: 1fr;
        row-gap: 4.8rem;
        margin-bottom: 8rem;
    }

    .advantages__box {
        padding: 4.8rem 2.4rem;
    }

    .advantages__list {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: 3.2rem;
    }

    .advantages__item {
        grid-row: auto !important;
        grid-column: 1;
    }

    .advantages__list::before {
        background: none;
    }

    .products {
        padding-bottom: 8rem;
    }

    .products__items {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.8rem;
        row-gap: 2.4rem;
    }

    .products__wrapper {
        margin-bottom: 4rem;
    }

    .products__header {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 3.2rem;
    }

    .solutions__inner {
        grid-template-columns: 1fr;
        row-gap: 5.6rem;
        padding-block: 8rem;
    }

    .solutions__content {
        position: static;
    }

    .solution__button {
        margin-top: 4.8rem;
    }

    .equipment {
        padding-block: 8rem;
    }

    .equipment__inner {
        grid-template-columns: 1fr;
        row-gap: 5.6rem;
    }

    .portfolio {
        padding-bottom: 8rem;
    }

    .contacts__inner {
        grid-template-columns: 1fr;
        row-gap: 4.8rem;
        padding: 4.8rem 2.4rem;
    }

    .footer__top {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 3.2rem;
        margin-bottom: 3.2rem;
    }

    .footer__menu {
        border-top: 1px solid rgba(0, 67, 137, 0.1);
        padding-top: 3.2rem;
        margin-top: 3.2rem;
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .products__items--grid-3 {
        grid-template-columns: 1fr;
    }

    .products__item-title {
        font-size: 1.6rem;
    }

    .portfolio__slider-wrapper {
        padding-inline: 0;
    }

    .portfolio__slide img {
        width: 100%;
    }

    .portfolio__slider-button--prev,
    .portfolio__slider-button--next {
        display: none;
    }

    .contacts__form-control--row {
        flex-direction: column;
        row-gap: 0.8rem;
    }

    .footer__bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        row-gap: 2.4rem;
    }
}

@media (max-width: 479.98px) {
    .advantages__image-desktop {
        display: none;
    }

    .advantages__image-mobile {
        display: block;
        width: 100%;
    }
}