@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@500;600&display=swap');

body {
    color: #aaaaaa;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #181818;
}

/* ======================================== */
[class*="__container"] {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 0.9375rem;
}

/* ====================================== */
.wrapper {
    min-height: 100%;
    overflow: clip;
    display: flex;
    flex-direction: column;
}

/* ====================================== */
.page {
    flex: 1 1 auto;
}

.page__main {}

.page__company {}

.page__features {}

.page__about {}

.page__value {}

.page__portfolio {}

.page__reviews {}

.page__great {}

.page__blog {}

/* all*/

.link {
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    color: #FFFFFF;
    position: relative;
    display: inline-block;
    z-index: 3;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.link:hover {
    color: rgba(186, 184, 184, 0.918);
}

.link-orange {}

.link-orange::before {
    content: "";
    position: absolute;
    top: -19px;
    left: -23px;
    background: #FF7425;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.3s ease;
}

.link-orange:hover::before {
    background: #333333;
}

.link-grey {}

.link-grey:hover {
    color: #fff;
}

.link-grey::before {
    content: "";
    position: absolute;
    top: -19px;
    left: -23px;
    background: #333333;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.3s ease;
}

.link-grey:hover::before {
    background: #FF7425;
}

.text {
    font-weight: 500;
    line-height: 1.4;
    color: #AAAAAA;
}

.subtitle {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.15em;
    color: #888888;
}

.title {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1.35;
    color: #FFFFFF;
}

@media (max-width:30em) {
    .title {
        font-size: 2rem;
    }
}

.title-sm {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 1.35;
    color: #FFFFFF;
}

/* all */
/* header */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.header_active {
    position: fixed;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.566);
    top: 0;
    left: 0;
    z-index: 50;
    height: auto;
}

.header_active .header__container {
    min-height: 4.5rem;
}

.menu-open .header {
    z-index: 100;
}

.header__container {
    display: flex;
    justify-content: space-between;
    min-height: 6.5625rem;
    align-items: center;
    gap: 3.125rem;
}

.header__logo {
    flex: 1 1 auto;
    position: relative;
    z-index: 100;
}

.header__logo img {
    max-width: 100%;
}

.header__menu {}

.menu {
    position: relative;
    z-index: 5;
}

.menu__list {
    display: flex;
    gap: 1.875rem;
    position: relative;
}

.menu__item {}

.menu__link {
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.07em;
    color: #FFFFFF;
    position: relative;
    display: flex;
    flex: 0 0 auto;
    transition: all 0.3s ease;
}

.menu__link:not(:last-child) {
    padding-right: 1rem;
}

.menu__item:hover .menu__link {
    color: #FF7425;
}

.menu__item:hover .menu__link::before,
.menu__item:hover .menu__link::after {
    background-color: #FF7425;
}

.menu__item:hover .menu__link::before {
    transform: rotate(-30deg);
}

.menu__item:hover .menu__link::after {
    transform: rotate(30deg);
}

.menu__link.active {
    color: #FF7425;
}

.menu__link:last-child.menu__link::before,
.menu__link:last-child.menu__link::after {
    display: none;
}

.menu__link::before,
.menu__link::after {
    content: "";
    position: absolute;
    height: 1.5px;
    width: 7px;
    background-color: #fff;
    border-radius: 8px;
    right: 0;
    top: 50%;
    transition: all 0.3s ease;
}

.menu__link.active.menu__link::before,
.menu__link.active.menu__link::after {
    background-color: #FF7425;
}

.menu__link::before {
    transform: rotate(30deg);
    right: 5px;
}

.menu__link::after {
    transform: rotate(-30deg);
}



.sub-menu__list {
    position: absolute;
    top: 22px;
    min-width: 9rem;
    background-color: rgba(132, 128, 128, 0.295);
    display: none;
    padding: 1rem 0;
}

.menu__list>li:hover .sub-menu__list {
    display: block;
}

.sub-menu__item {
    border-bottom: 1px solid #FF7425;
}

.sub-menu__item:not(:last-child) {
    margin-bottom: 0.5rem;
}

.sub-menu__link {
    color: #fff;
    padding: 5px 10px;
    transition: all 0.3s ease;
    display: block;
}

.sub-menu__link:hover {
    color: #FF7425;
}

.header__info {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.header__bag {
    position: relative;
    z-index: 5;
    display: inline-block;
}

.header__bag span {
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #FF7425;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    top: -7px;
    right: -7px;
    color: #fff;
}

.header__search {
    position: relative;
    z-index: 5;
}

.icon-menu {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    display: block;
    flex: 0 0 45px;
    z-index: 500;
}

.icon-menu span,
.icon-menu::before,
.icon-menu::after {
    content: "";
    left: 14px;
    position: absolute;
    width: 18px;
    height: 2px;
    z-index: 5;
    background-color: #fff;
    transition: all 0.3s ease;
}

.icon-menu::before {
    top: calc(17px - 1px);
}

.icon-menu::after {
    bottom: 16px;
}

.icon-menu span {
    top: calc(50% - 1px);
}


@media (max-width:71.875em) {
    .header__container {
        gap: 2rem;
    }

    .header__info {
        gap: 1rem;
    }

    .menu__list {
        gap: 1rem;
    }
}

@media (max-width:61.99875em) {
    .menu-open .header_active {
        height: 100%;
    }

    .header__container {
        min-height: 4.375rem;
    }

    .menu {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000;
        top: 0;
        left: -100%;
        overflow: auto;
        padding-top: 100px;
        padding-bottom: 50px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .menu::before {
        content: "";
        position: fixed;
        width: 100%;
        height: 70px;
        top: 0;
        left: -100%;
        background-color: #000;
        z-index: 2;
        transition: all 0.3s ease;
    }

    .menu-open .menu {
        left: 0;
    }

    .menu-open .menu::before {
        left: 0;
    }

    .menu-open .icon-menu span {
        width: 0;
    }

    .menu-open .icon-menu::before {
        top: calc(50% - 1px);
        transform: rotate(-45deg);
        width: 25px;
        left: 10px;
    }

    .menu-open .icon-menu::after {
        bottom: calc(50% - 1px);
        transform: rotate(45deg);
        width: 25px;
        left: 10px;
    }

    .menu__list {
        flex-direction: column;
        display: inline-block;
    }

    .menu__item:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    .menu__link {
        font-size: 2rem;
    }

    .menu__link::before,
    .menu__link::after {
        content: "";
        position: absolute;
        height: 1.5px;
        width: 10px;
        background-color: #fff;
        border-radius: 8px;
        right: 0;
        top: 50%;
        transition: all 0.3s ease;
    }

    .menu__link::before {
        transform: rotate(30deg);
        right: 8px;
    }

    .menu__link::after {
        transform: rotate(-30deg);
    }

    .sub-menu__list {
        position: relative;
    }

    .menu__link:not(:last-child) {
        padding-right: 1.5rem;
    }
}

/* header */
/* main */
.main {
    background: url('../img/main/fon.jpg') no-repeat;
    background-size: cover;
    padding-top: 10.875rem;
    padding-bottom: 4.375rem;
    position: relative;
    z-index: 2;
}

.main__container {}

.main__title {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 6.25rem;
    line-height: 1.3;
    text-align: center;
    color: #FFFFFF;
    transition: all 0.8s;
    opacity: 0;
    transform: translate(0px, 30%);
}

.main__title.show {
    opacity: 1;
    transform: translate(0px, 0px);
}

.main__about {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 4rem;
    gap: 2rem;
}

.main__text {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #CCCCCC;
    border-left: 3px solid #FF7425;
    padding-left: 1rem;
    max-width: 26.0625rem;
    overflow: hidden;
}

.main__text p {
    transform: translate(-100%, 0px);
    transition: all 0.8s 0.2s;

}

.main__text.show p {
    transform: translate(0px, 0px);
}

.main__name {
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 8.75rem;
    line-height: 1.4;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px #fff;
    transition: all 0.8s 0.4s;
    opacity: 0;
    transform: translate(0px, 30%);
}

.main__name.show {
    opacity: 1;
    transform: translate(0px, 0px);
}

.main__content {}

.content-main {
    display: flex;
    align-items: center;
    gap: 3rem;
    min-width: 0;
    justify-content: space-between;
}

.content-main__block {}

.content-main__scroll {
    display: inline-block;
    transform: rotate(-90deg);
    background: #FF7425;
    border-radius: 50px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.25em;
    color: #FFFFFF;
    padding: 1.1875rem 1.75rem;
    align-self: flex-end;
    margin-bottom: -70px;
    animation-name: scroll;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: 0.5s;
    animation-direction: alternate;
    transition: all 0.3s ease;
    cursor: pointer;
}

.content-main__scroll:hover {
    background-color: #ff75257c;
}

@keyframes scroll {
    0% {
        transform: rotate(-90deg) translateX(10px);
    }

    100% {
        transform: rotate(-90deg) translateX(-10px);
    }
}

.content-main__link {
    margin-bottom: 6.875rem;
}

.content-main__people {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.content-main__images {
    display: flex;
    align-items: center;
}

.content-main__image {
    overflow: hidden;
}

.content-main__image:first-child img {
    border-radius: 50%;
    transform: scale(1.01);
}

.content-main__image:nth-child(2),
.content-main__image:nth-child(3) {
    margin-left: -7px;
}

.content-main__about {}

.content-main__number {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.content-main__already {
    font-weight: 500;
    line-height: 1.4;
    color: #CCCCCC;
}

.swiper {}

.swiper__wrap {
    position: relative;
}

.swiper-decor {
    position: absolute;
    top: -39px;
    left: -80px;
    height: 307px;
    width: 307px;
    border-radius: 50%;
    display: block;
    background: rgba(255, 116, 37, 0.8);
}

.content-main__swiper {
    max-height: 230px !important;
    margin: 0 !important;
}

.swiper__wrap .swiper-scrollbar-drag {
    cursor: pointer;
    background-color: #FF7425;
    opacity: 1 !important;
}

.swiper-scrollbar {
    background-color: #fff !important;
    width: 7px !important;
    right: -30px !important;
    top: 15% !important;
    height: 165px !important;
}

.fraction-controll {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.07em;
    color: #FFFFFF;
    z-index: 10;
}

.fraction-controll__current {
    transform: rotate(90deg);
    display: inline-block;
    position: absolute;
    right: -37px;
}

.fraction-controll__all {
    transform: rotate(90deg);
    display: inline-block;
    position: absolute;
    right: -37px;
    bottom: -230px;
}

.swiper-wrapper {}

.content-main-wrapper {}

.swiper-slide {}

.content-main-slide__image {}

.content-main-slide__image img {
    max-width: 100%;
    display: block;
}

@media (max-width:67.5em) {
    .swiper-scrollbar {
        height: 130px !important;
    }

    .fraction-controll__all {
        bottom: -200px;
    }
}

@media (max-width:61.99875em) {
    .main {
        padding-top: 6rem;
    }

    .content-main {
        flex-direction: column;
        gap: 5rem;
    }

    .content-main__scroll {
        display: none;
    }

    .main__title {
        font-size: 4rem;
    }

    .main__name {
        font-size: 6rem;
    }

    .content-main__link {
        margin-bottom: 4rem;
    }
}

@media (max-width:47.99875em) {
    .main__name {
        font-size: 4rem;
    }
}

@media (max-width:37.5em) {
    .main__title {
        font-size: 3rem;
    }

    .main__about {
        flex-direction: column;
        margin-top: 2rem;
    }
}


@media (max-width:35.625em) {
    .swiper-scrollbar {
        right: 10px !important;
    }

    .fraction-controll__current {
        right: 0px;
    }

    .fraction-controll__all {
        right: 0;
        bottom: -200px;
    }
}

@media (max-width:30em) {
    .main {
        padding-bottom: 2rem;
    }

    .swiper-decor {
        display: none;
    }

    .main__about {
        margin-bottom: 2rem;
    }

    .content-main {
        gap: 2rem;
    }

    .content-main__people {
        flex-direction: column;
    }

    .swiper-scrollbar {
        display: none;
    }

    .fraction-controll {
        display: none;
    }
}

@media (max-width:25em) {
    .content-main__swiper {
        max-height: 180px !important;
    }
}

/* main */
/* compamy */
.company {
    padding-top: 10.625rem;
    padding-bottom: 5.625rem;
}

.company__container {
    position: relative;
}

.company__decor {
    position: absolute;
    top: -115px;
    left: -30px;
}

.company__body {
    display: flex;
    align-items: center;
    gap: 3.75rem;
    justify-content: space-between;
}

.company__text {
    /* font-weight: 700; */
    line-height: 1.6;
    letter-spacing: 0.15em;
    color: #888888;
    padding-left: 0.875rem;
    border-left: 2px solid #FF7425;
    overflow: hidden;
}

.company__text p {
    transform: translate(-100%, 0px);
    transition: all 0.8s 0.1s;

}

.company__text.show p {
    transform: translate(0px, 0px);
}

.company__items {
    display: flex;
    align-items: center;
    gap: 4.6rem;
}

.company__item {
    overflow: hidden;
}

.company__item img {
    transform: scale(1.01);
}

@media (max-width:75em) {
    .company__items {
        gap: 3rem;
    }

    .company__decor {
        left: -20px;
    }
}

@media (max-width:61.99875em) {
    .company__body {
        flex-direction: column;
    }

    .company__items {
        flex-wrap: wrap;
        column-gap: 3rem;
        row-gap: 2rem;
    }
}

@media (max-width:47.99875em) {
    .company {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .company__decor {
        top: -80px;
    }
}

@media (max-width:30em) {
    .company {
        padding-bottom: 2rem;
    }
}

/* company */
/* features */
.features {
    padding-bottom: 5.625rem;
}

.features__container {}

.features__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3.75rem;
}

.header-features {}

.header-features__col-1 {
    flex: 0 1 50%;
}

.features__subtitle {
    margin-bottom: 0.25rem;
}

.features__title {}

.header-features__col-2 {
    flex: 0 1 50%;
}

.features__text {
    margin-bottom: 2.5rem;
    line-height: 1.5;
}


.features__link {
    padding-left: 23px;
}

.features__link::before {
    left: 0;
}

.features__items {
    display: flex;
    gap: 3.75rem;
    position: relative;
}

.features__decor {
    position: absolute;
    top: 0;
    right: -52px;
}

.features__item {}

.item-features {
    transition: all 0.8s;
    opacity: 0;
    transform: translate(0px, 30%);
}

.item-features.show {
    opacity: 1;
    transform: translate(0px, 0px);
}



.item-features:nth-child(3) {


    margin-top: 4.5625rem;
}

.item-features:last-child {
    margin-top: 8.6875rem;
}

.item-features__image {
    position: relative;
    max-width: 100%;
    display: block;
}

.item-features__image img {
    max-width: 100%;
}

.item-features__image:not(:last-child) {
    margin-bottom: 1.125rem;
}

.item-features__image:hover .item-features__arrow {
    opacity: 1;
}

.item-features__arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(255, 116, 37, 0.79) url('../img/features/arrow.svg') no-repeat center;
    backdrop-filter: blur(5px);
    width: 70px;
    height: 70px;
    opacity: 0;
    transition: all 0.5s ease;
}

.item-features__arrow img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-features__title {
    display: block;
    transition: all 0.3s ease;
}

.item-features__title:hover {
    color: #FF7425;
}

@media (max-width:61.99875em) {
    .features__header {
        flex-direction: column;
        align-items: start;
        gap: 2rem;
    }

    .features {
        padding-bottom: 5rem;
    }
}

@media (max-width:47.99875em) {
    .features__items {
        flex-direction: column;
        align-items: center;
    }

    .features__item:nth-child(3) {
        margin: 0;
    }

    .features__item:last-child {
        margin: 0;
    }
}

@media (max-width:37.5em) {
    .features__decor {
        top: -50px;
    }
}

@media (max-width:30em) {
    .features {
        padding-bottom: 2rem;
    }

    .features__title {
        font-size: 2rem;
    }
}

/* features */
/* about */
.about {
    padding-bottom: 9.0625rem;
}

.about__container {
    display: flex;
    align-items: center;
    gap: 1.875rem;
    justify-content: space-between;
    position: relative;
}

.about-decor {
    position: absolute;
    top: -30px;
    right: -35px;
}

.about__images {
    position: relative;
    display: inline-block;
}

.about__image__decor {
    position: absolute;
    right: 0;
    top: 54px;
    z-index: -1;
}

.about__image {}

.about__image-1 {
    position: relative;
    display: inline-block;
}

.about__image-1 img {
    max-width: 100%;
}

.about__image__circle {
    position: absolute;
    z-index: -1;
    bottom: -50px;
    left: 42%;
    transform: translate(-50%, 0);
}


.about__content {}

.content-about {
    max-width: 30rem;
}

.content-about__subtitle {
    margin-bottom: 0.375rem;
}

.content-about__title {
    margin-bottom: 2rem;
}

.content-about__text {
    margin-bottom: 2rem;
}

.content-about__list {}

.content-about__list:not(:last-child) {
    margin-bottom: 3rem;
}

.content-about__item {
    font-weight: 600;
    line-height: 1.4;
    color: #CCCCCC;
    padding-left: 2.125rem;
    background: url('../img/about/check.svg') no-repeat center left;
}

.content-about__item:not(:last-child) {
    margin-bottom: 0.875rem;
}

.content-about__number {
    display: flex;
    gap: 4.8125rem;
}

.content-about__persent {
    font-weight: 600;
    font-size: 2.1875rem;
    line-height: 1.4;
    color: #FFFFFF;
}

._decor {
    position: relative;
}

._decor::after {
    content: "";
    position: absolute;
    right: -38px;
    top: 35%;
    height: 20px;
    width: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.content-about__type {
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #888888;
}

.content-about__col-1 {}

.content-about__col-2 {}

.content-about__col-3 {}

@media (max-width:61.99875em) {
    .about {
        padding-bottom: 5rem;
    }

    .about__container {
        flex-direction: column-reverse;
    }

    .decor {
        position: absolute;
        top: -30px;
        right: -25px;
    }

    .about__images {
        margin: 0 auto;
    }
}

@media (max-width:37.5em) {
    .about__image__decor {
        display: none;
    }
}

@media (max-width:30em) {
    .about {
        padding-bottom: 2.5rem;
    }

    .content-about__number {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
    }

    ._decor::after {
        display: none;
    }

    .content-about__list:not(:last-child) {
        margin-bottom: 2rem;
    }
}

/* about */
/* value */
.value {
    padding-bottom: 5rem;
}

.value__container {
    display: flex;
    align-items: center;
    gap: 8.125rem;
    justify-content: space-between;
}

.value__column {}

.value__column:last-child {
    max-width: 29.375rem;
}

.value__row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.value__row:not(:last-child) {
    margin-bottom: 3.125rem;
}

.value__number {
    font-weight: 700;
    font-size: 3.75rem;
    line-height: 1.35;
    color: #FFFFFF;
}

.value__box {}

.value__type {
    margin-bottom: 1.5rem;
}

.value-box__text {}

.value__subtitle {
    margin-bottom: 0.375rem;
}

.value__title {
    margin-bottom: 2rem;
}

.value__text {
    margin-bottom: 3.75rem;
}

.value__links {
    display: flex;
    gap: 6rem;
}

.value__link {
    padding-left: 23px;
}

.value__link::before {
    left: 0;
}

.value__link-play {
    position: relative;
}

.value__link-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -65px;
    width: 50px;
    height: 50px;
    transform: translate(0, -50%);
    border-radius: 50%;
    display: inline-block;
    background: #FF7425 url('../img/value/play.svg') no-repeat center;
    transition: all 0.3s ease;
}

.value__link-play:hover:before {
    background: #ff75257e url('../img/value/play.svg') no-repeat center;
}

@media (max-width:68.75em) {

    .value__container {
        gap: 3rem;
    }
}

@media (max-width:61.99875em) {
    .value__container {
        flex-direction: column-reverse;
    }

    .value__row {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .value__row:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    .value__column {
        max-width: 29.375rem;
    }
}

@media (max-width:32.5em) {
    .value__links {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .value__link {
        padding-left: 0;
    }

    .value__link::before {
        left: -23px;
    }
}

@media (max-width:30em) {
    .value {
        padding-bottom: 2rem;
    }
}

/* value */
/* portfolio */
.portfolio {
    padding-bottom: 7.8125rem;
}

.portfolio__container {
    display: flex;
    gap: 1.75rem;
    justify-content: space-between;
}

.portfolio__content {
    max-width: 29.375rem;
}

.content-portfolio {}

.content-portfolio__sub-title {}

.content-portfolio__title {
    margin-bottom: 1.3125rem;
}

.content-portfolio__text {}

.content-portfolio__text:not(:last-child) {
    margin-bottom: 3.875rem;
}

.content-portfolio__link {}

.portfolio__acordeon {
    position: relative;
    z-index: 2;
    display: inline-block;
}

.portfolio__image {
    position: absolute;
    top: 5rem;
    right: -3.625rem;
    z-index: -1;
}

.portfolio__item {}

.item-portfolio {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1rem;
    max-width: 42rem;
}

.item-portfolio:not(:last-child) {
    margin-bottom: 0.875rem;
}

.item-portfolio__block {
    display: flex;
    gap: 0.875rem;
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0.625rem;
}



.item-portfolio__block::before {
    content: "";
    position: absolute;
    top: 70%;
    right: 0;
    transform: translate(0, -70%);
    background-color: #fff;
    width: 20px;
    height: 2px;
    transition: all 0.3s ease;
    display: block;
}

.item-portfolio__block::after {
    content: "";
    position: absolute;
    top: 70%;
    right: 0;
    transform: translate(0, -70%) rotate(90deg);
    width: 20px;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
    display: block;
}

.item-portfolio__block.active.item-portfolio__block::after {
    content: "";
    transform: translate(0, -60%) rotate(180deg);
    background-color: #FF7425;
}

.item-portfolio__block.active.item-portfolio__block::before {
    content: "";
    width: 0;
}

.item-portfolio__title {
    align-self: flex-end;
    white-space: nowrap;
    padding-right: 1rem;
}

.item-portfolio__title span {
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #bbbbbb;
    white-space: normal;
}

.item-portfolio__text {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.item-portfolio__text.active {
    max-height: 10rem;
    transition: all 0.7s ease;
}

.item-portfolio__block img {
    max-width: 100%;
}

@media (max-width:68.75em) {
    .portfolio__container {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width:61.99875em) {
    .portfolio {
        padding-bottom: 5rem;
    }

}

@media (max-width:47.99875em) {
    .portfolio__image {
        display: none;
    }

    .content-portfolio__link {
        padding-left: 23px;
    }

    .content-portfolio__link::before {
        left: 0;
    }

    .content-portfolio__text:not(:last-child) {
        margin-bottom: 2rem;
    }

    .item-portfolio__title {
        font-size: 1.5em;
    }
}

.item-portfolio br {
    display: none;
}

@media (max-width:30em) {
    .portfolio {
        padding-bottom: 2rem;
    }

    .item-portfolio__title {
        font-size: 1.3rem;
    }

    /* .item-portfolio__block img {
        display: none;
    } */

    .item-portfolio br {
        display: block;
    }

    .item-portfolio__title {
        white-space: normal;
    }
}


/* portfolio */
/* reviews */
.reviews {
    padding-bottom: 8.125rem;
}

.reviews__container {
    display: flex;
    gap: 5rem;
    justify-content: space-between;
    min-width: 0;
    position: relative;
}

.reviews-decor-1 {
    position: absolute;
    top: -90px;
    left: -30px;
}

.reviews-decor-2 {
    position: absolute;
    bottom: 0;
    right: -52px;
}

.reviews__image {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    max-height: 450px;
}

.reviews__image img {
    max-width: 100%;
}

.reviews__image::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.reviews__image-decor {
    position: absolute;
    bottom: -37px;
    right: -40px;
}

.reviews__content {
    position: relative;
    padding-bottom: 2.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.swiper {}

.reviews-swiper {}

.swiper-wrapper {
    max-width: 45rem;
}

.reviews-swiper-wrapper {}

.swiper-slide {}

.reviews-slide {}

.reviews-slide__quote {
    margin-bottom: 1.875rem;
    display: block;
}

.reviews-slide__text {
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #FFFFFF;
    margin-bottom: 2.5rem;
    max-width: 700px;
}

.reviews-slide__person {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.reviews-slide__avatar {
    overflow: hidden;
}

.reviews-slide__avatar img {
    border-radius: 50%;
    transform: scale(1.02);
}

.reviews-slide-person__about {}

.reviews-slide__name {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #FFFFFF;
    margin-bottom: 3px;
}

.reviews-slide__job {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.6;
    text-transform: uppercase;
    color: #FF7425;
}

.swiper-button-prev {
    position: absolute;
    bottom: 0 !important;
    left: 0 !important;
    top: 100% !important;
    background: url('../img/reviews/prev.svg')center no-repeat #333333;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    opacity: 1 !important;
    transition: all 0.3s ease;
    z-index: 20;
}

.swiper-button-prev:hover {
    background: url('../img/reviews/prev.svg')center no-repeat #46444473;
}

.swiper-button-prev::after {
    display: none;
}

.swiper-button-next {
    position: absolute;
    top: 100%;
    left: 65px !important;
    background: url('../img/reviews/next.svg')center no-repeat #333333;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    opacity: 1 !important;
    transition: all 0.3s ease;
    z-index: 20;
}

.swiper-button-disabled {
    opacity: 0.7 !important;
}

.swiper-button-next:hover {
    background: url('../img/reviews/next.svg')center no-repeat #46444473;
}

.swiper-button-next::after {
    display: none;
}

@media (max-width:61.99875em) {
    .reviews {
        padding-bottom: 5rem;
    }

    .reviews__container {
        flex-direction: column-reverse;
    }

    .reviews__image {
        align-self: center;
    }
}

@media (max-width:30em) {
    .reviews {
        padding-bottom: 4rem;
    }

    .reviews-decor-1 {
        top: -40px;
    }

    .reviews-decor-2 {
        position: absolute;
        bottom: -100px;
        right: -52px;
    }
}

/* reviews */
/* great */
.great {
    padding-bottom: 5.625rem;
}

.great__container {
    position: relative;
}

.great-decor {
    position: absolute;
    bottom: -50px;
    right: -35px;
}

.great__header {
    display: flex;
    margin-bottom: 5.875rem;
    justify-content: space-between;
    gap: 3rem;
    align-items: center;
}

.great__title {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 3.75rem;
    line-height: 1.35;
    color: #FFFFFF;
    max-width: 41.875rem;
}

.great__btn {
    text-align: center;
    position: relative;
    z-index: 3;
    display: block;
    width: 250px;
    height: 250px;
    background-color: #333333;
    border-radius: 50%;
    align-self: center;
    transition: all 0.3s ease;
}

.great__btn:hover {
    background-color: #333333;
}

.great__btn:hover .great__link {
    color: #FF7425;
}

.great__link {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    align-self: center;
    transform: translate(0, -50%);
}

.great__btn img {
    position: absolute;
    top: 60%;
    left: 50%;
    align-self: center;
    transform: translate(-50%, -60%);
    display: block;
}

.great__body {
    display: flex;
    gap: 8rem;
    justify-content: space-between;
}

.great__acordeon {
    max-width: 35.625rem;
}

.acordeon-great {}

.acordeon-great__item {
    padding: 1.25rem;
    background: #222222;
}

.acordeon-great__item:not(:last-child) {
    margin-bottom: 1.25rem;
}

.acordeon-great__title {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #FFFFFF;
    position: relative;
    transition: all 0.3s ease;
    padding-right: 2.5rem;
}

.acordeon-great__title::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 2rem;
    height: 2px;
    width: 7px;
    transform: rotate(-30deg);
    background-color: #fff;
    transition: all 0.3s ease;
}

.acordeon-great__title::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 2.36rem;
    height: 2px;
    width: 7px;
    transform: rotate(30deg);
    background-color: #fff;
    transition: all 0.3s ease;
}

.acordeon-great__title.active {
    margin-bottom: 1rem;
}

.acordeon-great__title.active.acordeon-great__title::before {
    transform: rotate(30deg);
}

.acordeon-great__title.active.acordeon-great__title::after {
    transform: rotate(-30deg);
}

.acordeon-great__text {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.great__content {}

.content-great {
    max-width: 30rem;
}

.content-great__subtitle {
    margin-bottom: 0.25rem;
}

.content-great__title {
    margin-bottom: 1.625rem;
}

.content-great__text {
    margin-bottom: 2.5rem;

}

.content-great__link {
    padding-left: 23px;
}

.content-great__link::before {
    left: 0;
}

@media (max-width:75em) {
    .great__body {
        gap: 4rem;
    }
}

@media (max-width:61.99875em) {
    .great__body {
        flex-direction: column-reverse;
        align-items: center;
    }

    .great__header {
        flex-direction: column;
        text-align: start;
    }

    .great-decor {
        position: absolute;
        bottom: -50px;
        right: -25px;
    }

    .great__btn {
        width: 100%;
        height: 100%;
        background: inherit;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .great__btn:hover {
        background: inherit;
    }

    .great__link {
        position: relative;
    }

    .great__btn img {
        position: relative;
    }

    .great__title {
        font-size: 3rem;
    }
}

@media (max-width:37.5em) {
    .acordeon-great__title::before {
        right: 1rem;
    }

    .acordeon-great__title::after {
        right: 1.35rem;
    }

    .great__header {
        margin-bottom: 2rem;
    }
}

@media (max-width:30em) {
    .great {
        padding-bottom: 2rem;
    }

    .great__title {
        font-size: 2rem;
    }

    .great__btn img {
        position: relative;
        top: 0;
        left: 0;
    }

    .great__btn {
        text-align: start;
    }
}

/* great */
/* blog */
.blog {
    padding-bottom: 6.25rem;
}

.blog__container {}

.blog__header {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3.75rem;
}

.blog-col-1 {
    max-width: 27.5rem;
}

.blog__subtitle {
    margin-bottom: 0.25rem;
}

.blog__title {}

.blog-col-2 {
    max-width: 29.375rem;
}

.blog__text {
    margin-bottom: 2.3rem;
}

.blog__link {
    display: inline-block;
    padding-left: 23px;
}

.blog__link::before {
    left: 0;
}

.blog__body {
    display: flex;
    gap: 1.875rem;
}

.body-blog {}

.body-blog-col-1 {}

.body-blog__image img {
    max-width: 100%;
}

.body-blog__content {
    max-width: 30rem;
    background-color: #181818;
    margin-left: 21%;
    margin-top: -15%;
    transform: translate(10%, 20%);
    opacity: 0;
    transition: all 0.8s;
}

.body-blog__content.show {
    opacity: 1;
    transform: translate(0px, 0px);
}

.body-blog__about {
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #888888;
    margin-bottom: 0.5rem;
}

.body-blog__title {
    margin-bottom: 1.5rem;
}

.body-blog__text {
    margin-bottom: 1.5rem;
}

.body-blog__link {
    display: inline-block;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    color: #FFFFFF;
    padding-right: 1.5rem;
    background: url('../img/blog/arrow.svg') center right no-repeat;
    transition: all 0.3s ease;
}

.body-blog__link:hover {
    padding-right: 2rem;
}

.body-blog-col-2 {}

@media (max-width:61.99875em) {
    .blog__header {
        align-items: center;
    }

    .body-blog__title {
        margin-bottom: 1rem;
    }

    .body-blog__text {
        margin-bottom: 1rem;
    }
}

@media (max-width:47.99875em) {
    .blog {
        padding-bottom: 4rem
    }

    .blog__header {
        flex-direction: column;
        gap: 2rem;
    }

    .blog__body {
        flex-direction: column;
    }

    .body-blog__content {
        margin-top: -13%;
    }

    .blog-col-1 {
        max-width: 29.375rem;
    }
}

@media (max-width:30em) {
    .blog {
        padding-bottom: 2rem;
    }
}

/* blog */
/* footer */
.footer {
    padding-top: 6.25rem;
    padding-bottom: 2rem;
}

.footer__main {}

.main-footer {}

.main-footer__container {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin-bottom: 3.125rem;
}

.main-footer-col-1 {
    flex: 0 0 270px;
}

.main-footer__logo {
    margin-bottom: 1.5rem;
}

.main-footer__text {
    margin-bottom: 1.875rem;
}

.main-footer__tel {
    display: inline-block;
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.82;
    color: #FFFFFF;
    padding: 0.5rem 1rem 0.5rem 2.4rem;
    background: #FF7425 url('../img/footer/phone.svg') 10% 50% no-repeat;
    transition: all 0.3s ease;
}

.main-footer__tel:hover {
    background-color: #ff7525af;
}

.main-footer-col-2 {}

.main-footer__title-sm {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 2rem;
}

.mein-footer__menu {
    display: flex;
    gap: 1.875rem;
}

.menu-footer {}

.menu-footer__list {}

.menu-footer__item {}

.menu-footer__item:not(:last-child) {
    margin-bottom: 0.625rem;
}

.menu-footer__link {
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.82;
    color: #AAAAAA;
    transition: all 0.3s ease;
}

.menu-footer__link:hover {
    text-decoration: underline;
    color: #fff;
}

.main-footer-col-3 {
    align-self: center;
    flex: 1 1 auto;
}

.main-footer__social {}

.main-footer-soc__list {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.875rem;
}

.main-footer-soc__item {}

.main-footer-soc__link {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;
    transition: all 0.3s ease;
}

._1 {
    background: linear-gradient(180deg, #0052FF 33.93%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

._2 {
    background: linear-gradient(180deg, #09BBFF 19.64%, rgba(255, 255, 255, 0.96) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

._3 {
    background: linear-gradient(180deg, #EA4C89 17.86%, #FFFFFF 117.86%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

._4 {
    background: linear-gradient(157.57deg, #565BC9 46.91%, #CC3385 73.95%, #F69E54 92.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.main-footer-soc__link:hover {
    opacity: 0.75;
}

.main-footer__title {}

.main-footer__title a {
    white-space: nowrap;
    text-decoration: underline;
    color: #fff;
}

.footer__bottom {}

.bottom-footer {}

.bottom-footer__container {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.5rem;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #888888;
}

.bottom-footer__copy {}

.bottom-footer__support {
    display: flex;
    gap: 3.125rem;
    align-items: center;
}

.bottom-footer__item {}

.bottom-footer__item:hover {
    text-decoration: underline;
}

@media (max-width:75em) {
    .main-footer__container {
        flex-wrap: wrap;
        justify-content: initial;
    }
}

@media (max-width:37.5em) {
    .bottom-footer__container {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width:30em) {
    .main-footer-soc__list {
        flex-direction: column;
    }
}

/* footer */