/* Cтили слайдера */

.main-swiper {
    width: 100%;
    height: 550px;
    margin: 20px 0;
    border-radius: 12px;
    overflow: hidden;
}

.swiper-slide {
    position: relative;

    display: flex;

    background: linear-gradient(135deg, var(--clr-blue), #0077B6);
}

/* Кнопки навигации */
.main-swiper-button-next,
.main-swiper-button-prev {
    position: absolute;
    top: 45%;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    z-index: 1;
}

.main-swiper-button-next {
    right: 2%;
}

.main-swiper-button-prev {
    left: 2%;
}

.main-swiper-button-next:hover,
.main-swiper-button-prev:hover {
    background-color: var(--clr-white);
    transform: scale(1.1);
    cursor: pointer;
}

.main-swiper-button-next:after {
    content: '';

    height: 12px;
    width: 6px;

    display: block;

    background: no-repeat url(../icons/chevron.svg) center / cover;
}

.main-swiper-button-prev:after {
    content: '';

    height: 12px;
    width: 6px;

    display: block;

    transform: rotate(180deg);
    background: no-repeat url(../icons/chevron.svg) center / cover;
}

/* Пагинация */
.main-swiper-pagination {
    position: absolute;
    bottom: 20px !important;

    display: flex;
    justify-content: center;

    z-index: 1;
}

.main-swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.main-swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--clr-white);
    transform: scale(1.2);
}

/*Контент*/

.swiper-slide__picture {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.swiper-slide__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide__article {
    padding: 6% 0 0 5%;
    max-width: 1076px;

    display: flex;
    flex-direction: column;
    gap: 50px;

    z-index: 1;
}

.swiper-slide__title {
    margin: 0;
    color: var(--clr-white);
    
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}

.swiper-slide__subtitle {
    margin: 0 0 20px;
    color: var(--clr-gray);

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.swiper-slide__btn-wrap {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.swiper-slide__link:last-child {
    color: var(--clr-black);
    background-color: var(--clr-yellow);
}

.swiper-slide__link:last-child:hover {
    outline: 1px solid var(--clr-yellow);
    color: var(--clr-yellow);
    background-color: var(--clr-black);
}

@media (max-width: 1024px) {

    .main-swiper {
        height: 650px;
    }
    
    .swiper-slide {
        font-size: 18px;
        align-items: center;
    }
    
    .main-swiper-button-next,
    .main-swiper-button-prev {
        width: 40px;
        height: 40px;
    }
    
    .main-swiper-button-next:after,
    .main-swiper-button-prev:after {
        font-size: 14px;
        color: var(--clr-blue);
    }

    .swiper-slide__article {
        max-width: 768px;
        padding: 0 5% 0;
    }

    .swiper-slide__title {
        font-size: 32px;
    }

}

@media (max-width: 430px) {

    .main-swiper {
        height: 350px;
    }

    .swiper-slide__article {
        max-width: 100%;
        gap: 25px;
    }

    .swiper-slide__title {
        font-size: 17px;
    }

    .swiper-slide__subtitle {
        font-size: 12px;
    }

    .swiper-slide__btn-wrap {
        gap: 10px;
        box-sizing: border-box;
    }

    .swiper-slide__link {
        width: auto;
        padding: 5px 10px;
        font-size: 10px;
    }

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

    .main-swiper-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }

}

/*стили второй версии приветственного экрана*/

.hero__v2 {
    position: relative;

    height: 100vh;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.hero__v2-video {
    position: absolute;
    top: 0;
    left: 0;

    height: 100vh;
    width: 100vw;
    object-fit: cover;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 0;
}

.hero__v2-shadow {
    position: absolute;
    top: 0;
    left: 0;

    height: 100vh;
    width: 100vw;
    background-color: #242424;
    opacity: .9;
    z-index: 1;
}

.hero__v2-content {
    max-width: 1024px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    z-index: 2;
}

.hero__v2-title {
    text-align: center;
}

.hero__v2-subtitle {
    text-align: center;
}

.hero__v2-btn {
    display: flex;
    gap: 20px;
}

/* @media screen and (orientation: portrait) {

    .hero__v2 {
        height: 100%;
    }
} */

/*Стили категории и товаров*/

.category__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.category__item {
    padding: 20px;
    max-width: 345px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    border-radius: 20px;
    background-color: var(--clr-gray);
    overflow: hidden;
}

.category__item-article {
    width: 100%;
}

.category__item:hover .category__img {
    transform: scale(1.1);
}

.category__title {
    margin: 0;
    color: var(--clr-black);
    text-align: left;

    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -1px;

    transition: .3s ease-in-out;
}

.category__item:hover .category__title {
    color: var(--clr-blue);
}

.category__img-wrap {
    width: 305px;
    height: 305px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.category__img {
    height: 305px !important;
    width: 100%;

    object-fit: cover;
    transition: .3s ease-in-out;
}

@media screen and (max-width: 1440px) {
    
    .category__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .category__item {
        max-width: 100%;
    }

}

@media screen and (max-width: 430px) {

    .hero__v2-title {
        font-size: 24px;
    }

    .hero__v2-subtitle {
        font-size: 14px;
    }

    .hero__v2-btn a,button {
        font-size: 12px;
    }

    .category__list {
        gap: 12px;
    }

    .category__title {
        font-size: 14px;
    }

    .category__img-wrap {
        width: 100%;
        max-height: 128px;
    }

    .category__img {
        height: 100% !important;
    }

}

/*баннер*/

.banner__link {
    display: flex;
}

.banner__picture {
    width: 100%;
}

.banner__img {
    width: 100%;
    object-fit: cover;
}

/*Отраслевые решения*/

/* .industry__list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 420px);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
    
.industry__item.one { grid-area: 1 / 1 / 2 / 4; }
.industry__item.two { grid-area: 1 / 4 / 2 / 9; }
.industry__item.three { grid-area: 2 / 1 / 3 / 9; }
.industry__item.four { grid-area: 3 / 1 / 4 / 5; }
.industry__item.five { grid-area: 3 / 5 / 4 / 9; } */

.industry__list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 420px);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
    
.industry__item.one { grid-area: 1 / 1 / 2 / 6; }
.industry__item.two { grid-area: 1 / 6 / 2 / 13; }
.industry__item.three { grid-area: 2 / 1 / 3 / 8; }
/*тут видео*/

.industry__item.four { 
    position: relative;
    grid-area: 2 / 8 / 3 / 13;
    cursor: pointer; 
}

.industry__item.four .industry__item-shadow {
    background: linear-gradient(360deg, #0098D7 0%, rgba(0, 0, 0, 0) 100%);
}

.industry__title.four {
    color: var(--clr-white);
}

.industry__subtitle.four {
    color: var(--clr-gray);
}

.industry__img-play {
    position: absolute;
    top: 40%;
    left: 45%;

    z-index: 4;
}

.industry__item.five { grid-area: 3 / 1 / 4 / 7; }
.industry__item.six { grid-area: 3 / 7 / 4 / 13; }

.industry__item {
    padding: 20px;
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    border-radius: 20px;
    background-color: var(--clr-gray);
    overflow: hidden;
    transition: .3s ease-in-out;
}

.industry__item-shadow {
    position: absolute;
    left: 0;
    bottom: 0;

    height: 100%;
    width: 100%;

    z-index: 2;
    background: linear-gradient(360deg,#f5f5f5 0%, rgba(0, 0, 0, 0) 100%);
}

.industry__item:hover .industry__item-shadow {
    background: linear-gradient(360deg,var(--clr-blue) 0%, rgba(0, 0, 0, 0) 100%);
}

.industry__img {
    position: absolute;
    left: 0;
    bottom: 0;

    height: 100%;
    width: 100%;
    object-fit: cover;

    z-index: 1;
    transition: .3s ease-in-out;
}

.industry__item:hover .industry__img {
    transform: scale(1.1);
}

.industry__article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    z-index: 3;
}

.industry__title {
    margin: 0;
    color: var(--clr-black);

    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -1px;

    transition: .3s ease-in-out;
}

.industry__subtitle {
    margin: 0;
    color: var(--clr-black-gray);

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;

    transition: .3s ease-in-out;
}

.industry__item:hover .industry__title {
    color: var(--clr-white);
}

.industry__item:hover .industry__subtitle {
    color: var(--clr-gray);
}

@media screen and (max-width: 1024px) {
    
    .industry__list {
        grid-template-rows: repeat(3, 320px);
    }

}

@media screen and (max-width: 768px) {
    
    .industry__list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .industry__item {
        height: 280px;
    }

    .industry__img-play {
        top: 35%;
    }

}

/*О компаний*/

.section__about {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.about__article {
    max-width: 893px;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about__article-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.about__content-text {
    color: var(--clr-black-gray);

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
}

.about__img-wrap {
    height: 528px;
    width: 528px;

    border-radius: 20px;
    overflow: hidden;

}

.about__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1440px) {
    
    .about__article {
        max-width: 768px;
    }

}

@media screen and (max-width: 1280px) {

    .section__about {
        flex-direction: column;
        align-items: flex-start;
    }

    .about__img-wrap {
        width: 100%;
        height: 100%;
    }

}

/*Преимущества*/

.advantage__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    row-gap: 40px;
}

.advantage__item {
    max-width: 345px;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.advantage__title {
    margin: 0;
    color: var(--clr-black);

    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -1px;
}

.advantage__text {
    margin: 0;
    color: var(--clr-black-gray);

    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0;
}

@media screen and (max-width: 430px) {
    
    .advantage__title {
        font-weight: 400;
        font-size: 18px;
        line-height: 120%;
        letter-spacing: -1px;
    }

    .advantage__text {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        letter-spacing: 0;
    }

}

/*Показатели*/

.indicator__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    row-gap: 40px;
}

.indicator__item {
    width: 345px;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.indicator__title {
    margin: 0;
    color: var(--clr-blue);

    font-weight: 500;
    font-size: 72px;
    line-height: 120%;
    letter-spacing: -2px;
}

.indicator__subtitle {
    margin: 0;
    color: var(--clr-black-gray);

    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0px;
}

/*Экология*/

.section__eco {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}

.eco__content {
    max-width: 852px;

    display: flex;
    flex-direction: column;
    gap: 60px;
}

.eco__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    row-gap: 32px;
}

.eco__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media screen and (max-width: 1280px) {

    .eco__content {
        max-width: 100%;
    }
    
    .section__eco {
        flex-direction: column-reverse;
    }

}

@media screen and (max-width: 768px) {

    .eco__content {
        gap: 40px;
    }

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

}

/* Стили для FAQ аккордеона */

.faq {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.faq__article {
    position: sticky;
    top: 80px;
    align-self: flex-start;
    flex-shrink: 0;
    width: 100%;
    max-width: 400px;
}

.faq__accordion {
    flex: 1;
    margin-top: 0;
}

.faq__accordion-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq__accordion-item {
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq__accordion-item:hover {
    border-color: var(--clr-blue);
}

.faq__accordion-item.active {
    border-color: var(--clr-blue);
}

.faq__accordion-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: var(--clr-white);
    transition: background-color 0.3s ease;
}

.faq__accordion-title {
    margin: 0;
    color: var(--clr-black);
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
}

.faq__accordion-arrow {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq__accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq__accordion-item.active .faq__accordion-content {
    padding: 0 20px 20px 20px;
}

.faq__accordion-text {
    margin: 0;
    color: var(--clr-black-gray);
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
}

@media screen and (max-width: 1024px) {

    .faq {
        flex-direction: column;
        gap: 40px;
    }

    .faq__article {
        position: static;
        max-width: 100%;
    }

    .faq__accordion {
        width: 100%;
    }

    .faq__accordion-list {
        width: 100%;
    }

}

@media screen and (max-width: 768px) {

    .faq__accordion-header {
        padding: 16px;
    }

    .faq__accordion-title {
        font-size: 16px;
    }

    .faq__accordion-content {
        padding: 0 16px;
    }

    .faq__accordion-item.active .faq__accordion-content {
        padding: 0 16px 16px 16px;
    }

    .faq__accordion-text {
        font-size: 14px;
    }

}

.dilier__banner {
    padding: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 20px;
    background: var(--clr-gray);
    overflow: hidden;
}

.dilier__article {
    max-width: 50%;

    display: flex;
    flex-direction: column;
    gap: 40px;
}

.dilier__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dilier__subtitle {
    margin: 0;
    color: var(--clr-black-gray);

    font-size: 14px;
    font-weight: 400px;
    line-height: 140%;
    letter-spacing: 0%;
}

.dilier__title {
    max-width: 600px;

    margin: 0;
    color: var(--clr-black);

    font-size: 42px;
    font-weight: 600px;
    line-height: 100%;
    letter-spacing: -4%;
}

.dilier__wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dilier__img {
    max-width: 50%;
    height: 500px;
    display: block;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {

    .dilier__banner {
        flex-direction: column;
    }

    .dilier__article {
        width: 100%;
        max-width: 100%;
    }

    .dilier__img {
        max-width: 100%;
    }

}

@media screen and (max-width: 768px) {

    .dilier__banner {
        padding: 30px;
    }

    .dilier__title {
        font-size: 24px;
    }

    .dilier__img {
        height: 100%;
    }

}