@font-face {
    font-family: raleway;
    src: url(../fonts/Raleway/Raleway-Light.ttf);
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: raleway;
    src: url(../fonts/Raleway/Raleway-Regular.ttf);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: raleway;
    src: url(../fonts/Raleway/Raleway-SemiBold.ttf);
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: raleway;
    src: url(../fonts/Raleway/Raleway-Bold.ttf);
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: montserrat;
    src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: montserrat;
    src: url(../fonts/Montserrat/Montserrat-Medium.ttf);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: montserrat;
    src: url(../fonts/Montserrat/Montserrat-SemiBold.ttf);
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: montserrat;
    src: url(../fonts/Montserrat/Montserrat-ExtraBold.ttf);
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: icon;
    src: url(../fonts/icon/icon.ttf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --white: #fff;
    --light: #f0f4f7;
    --light-secondary: #ceddf4;
    --blue: #76A3C5;
    --dark: #272a38;
    --text: #484848;
    --text-light: #727272;
    --light-gray: #c4c4c4;

    --font-main: raleway, sans-serif;
    --font-secondary: montserrat, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-secondary);
}
body {
    background: var(--light);
}
a {
    text-decoration: none;
}
p {
    color: var(--text);
}
img {
    width: 100%;
    height: 100%;
    display: flex;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: fit-content;
    background: transparent;
    border-radius: 30px;
    outline: none;
    border: 1px solid var(--white);
    font-size: 16px;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s linear;
    &.dark {
        background: var(--dark);
        border: 1px solid var(--dark);
        width: 240px;
        &::after {
            content: '\e90e';
        }
    }
    &.blue {
        background: var(--blue);
        border: 1px solid var(--blue);
        color: var(--white);
        width: 240px;
        &::after {
            content: '\e90e';
        }
    }
    &.transparent {
        border: 1px solid var(--white);
        color: var(--white);
        &.bl {
            border: 1px solid var(--blue);
            color: var(--blue);
        }
        &.d {
            border: 1px solid var(--dark);
            color: var(--dark);
        }
        &::after {
            content: '\e90e';
            margin-left: 40px;
        }
    }
    &.accent {
        position: relative;
        position: relative;
        background-color: transparent;
        color: white;
        border-radius: 20px;
        cursor: pointer;
        z-index: 1;
        > span:last-child {
            position: relative;
            z-index: 3;
        }
        .pulse-ring {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px;
            opacity: 0;
            z-index: -1;
            animation: shadow-pulse 3s cubic-bezier(0.25, 0, 0, 1) infinite;
        }
        .pulse-ring:nth-child(1) { animation-delay: 0s; }
        .pulse-ring:nth-child(2) { animation-delay: 1s; }
        .pulse-ring:nth-child(3) { animation-delay: 2s; }
    }
    &::after {
        color: inherit;
        transition: .3s linear;
        font-family: icon;
        margin-left: auto;
        margin-right: 0;
        font-size: 14px;
    }
}
.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1560px;
    width: 100%;
}
@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.7);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 15px rgba(255, 87, 34, 0);
    opacity: 0;
  }
}
@keyframes shadow-pulse-dark {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    opacity: 0;
  }
}
header {
    position: relative;
    height: 120px;
    width: 100%;
    display: flex;
    .wrapper {
        display: flex;
        position: relative;
        .logo {
            height: 80px;
        }
        .left {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            * {
                color: var(--dark);
                font-weight: 500;
                transition: 0.2s linear;
            }
            .menu {
                margin-left: 120px;
                .ws-menu {
                    display: flex;
                    > .item {
                        margin-right: 20px;
                        position: relative;
                        padding: 5px 0;
                        p {
                            display: flex;
                            align-items: center;
                            &::after {
                                font-family: icon;
                                content: '\e90b';
                                color: inherit;
                                font-size: 12px;
                                font-weight: inherit;
                                margin-left: 5px;
                                transition: .3s linear;
                            }   
                        }
                        .sub-menu {
                            position: absolute;
                            background:var(--white);
                            padding: 10px;
                            border-radius: 5px;
                            width: 200px;
                            z-index: 99;
                            box-shadow: 0 0 10px rgba(0, 0, 0, .2);
                            opacity: 0;
                            top: 80%;
                            visibility: hidden;
                            transition: 0.3s linear;
                            .item {
                                width: 100%;
                                display: flex;
                                margin-bottom: 4px;
                                position: relative;
                                a {
                                    display: flex;
                                    width: 100%;
                                    border-radius: 5px;
                                    padding: 10px;
                                }
                                &::after {
                                    content: '';
                                    position: absolute;
                                    width: 100%;
                                    bottom: -2px;
                                    height: 1px;
                                    opacity: 1;
                                    background: var(--light);
                                    z-index: -1;
                                }
                                &:last-child {
                                    margin-bottom: 0;
                                    &::after {
                                        display: none;
                                    }
                                }
                            }
                        }
                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
        .right {
            min-width: 500px;
            display: flex;
            justify-content: space-between;
            height: 100%;
            align-items: center;
            position: absolute;
            right: -100px;
            z-index: 9;
            .tel {
                color: var(--white);
                &::before {
                    content: '\e90d';
                    font-family: icon;
                    margin-right: 10px;
                }
            }
        }
        .burger-menu {
            display: flex;
            flex-direction: column;
            position: relative;
            width: 40px;
            min-width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-radius: 5px;
            z-index: 9;
            display: none;
            span, &::before, &::after {
                display: block;
                position: absolute;
                width: 26px;
                height: 2px;
                background: var(--dark);
                border-radius: 5px;
                top: 50%;
                left: 50%;
                transition: .3s linear;
            }
            span {
                transform: translate(-50%, -50%);
            }
            &::before {
                content: '';
                transform: translate(-50%, calc(-50% - 7px));
            }
            &::after {
                content: '';
                transform: translate(-50%, calc(-50% + 7px));
            }
            &.active {
                span {
                    opacity: 0;
                    visibility: hidden;
                }
                &::before {
                    transform: translate(-50%, -50%) rotate(45deg);
                }
                &::after {
                    transform: translate(-50%, -50%) rotate(-45deg);
                }
            }
        }
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--light);
        z-index: -1;
    }

    &.light {
        background: var(--white);
        .wrapper {
            .right {
                right: 0px;
            }
        }
    }
    &.transparent {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, .4);
        position: absolute;
        width: 100%;
        z-index: 99;
        .wrapper {
            .left {
                * {
                    color: var(--white);
                }
                .menu {
                    .ws-menu {
                        > .item {
                            .sub-menu {
                                .item {
                                    a {
                                        color: var(--dark);
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .right {
                position: relative;
            }
        }
        &::before {
            display: none;
        }
    } 
}
section {
    margin-top: 100px;
    h2 {
        font-size: 42px;
        font-weight: 600;
        font-family: var(--font-main);
        color: transparent;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(180deg, var(--dark) 0%, #8d99a5 100%);
        -webkit-background-clip: text;
        background-clip: text;
        span {
            color: var(--blue);
            -webkit-text-fill-color: var(--blue);
        }
    }
    .desc {
        margin-top: 12px;
        max-width: 900px;
    }
    .meta {
        display: grid;
        grid-template-columns: 1fr 240px;
        p, h2 {
            grid-column: 1;
        }
        .btn, .navigation {
            grid-row: 1 / 3;
            grid-column: 2;
            align-self: center;
        }
        .navigation {
            justify-content: end;
        }
    }
    > .items {
        margin-top: 60px;
    }
}
section.hero {
    margin-top: 0;
    .inner {
        max-width: 1920px;
        width: 100%;
        position: relative;
        margin: 0 auto;
        .wrapper {
            display: flex;
            height: 680px;
            .info {
                max-width: 800px;
                margin-top: 100px;
                h1 {
                    font-size: 60px;
                    margin-bottom: 50px;
                    background: linear-gradient(140deg, var(--dark) 0%, #8d99a5 80%);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    color: transparent;
                    font-weight: 600;
                    span {
                        font-weight: inherit;
                        color: var(--blue);
                        -webkit-text-fill-color: var(--blue);
                    }
                }
                ul {
                    display: flex;
                    flex-direction: column;
                    list-style: none;
                    max-width: 500px;
                    li {
                        margin-left: 20px;
                        position: relative;
                        font-size: 18px;
                        padding: 5px 0;
                        &::before {
                            position: absolute;
                            line-height: 22px;
                            top: 4px;
                            content: '•';
                            left: -10px;
                            color: var(--dark);
                            font-size: 20px;
                        }
                    }
                }
                .btn {
                    margin-top: 50px;
                }
                .label {
                    font-size: 18px;
                    font-weight: 700;
                    color: var(--blue);
                    background: var(--light-secondary);
                    padding: 8px 40px;
                    border-radius: 4px;
                    text-transform: uppercase;
                    margin-bottom: 10px;
                    display: block;
                    width: fit-content;
                    font-weight: 600;
                }
                .btn {
                    margin-top: 50px;
                }
            }
            .view {
                width: 620px;
                position: absolute;
                top: -120px;
                right: 0;
                /* z-index: -1; */
                height: 800px;
                display: flex;
                flex-direction: column;
                .slider {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    width: 100%;
                    position: relative;
                    border-radius: 0 0 0 6px;
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    .slides {
                        height: 100%;
                        display: flex;
                        position: absolute;
                        top: 0;
                        left: -100%;
                        width: 100%;

                        left: 0;
                        width: 100%;
                        transition: .5s ease-in-out;
                        .slide {
                            width: 100%;
                            min-width: 100%;
                            height: 100%;
                            display: flex;
                            img {
                                object-fit: cover;
                            }
                        }
                    }
                }
                .slides-info {
                    position: absolute;
                    bottom: 20px;
                    left: 20px;
                    width: calc(100% - 80px);
                    background: rgba(255, 255, 255, .8);
                    border-radius: 6px;
                    padding: 30px;
                    backdrop-filter: blur(10px);
                    /* position: relative;  */
                    .item {
                        display: flex;
                        gap: 80px;
                        opacity: 0;
                        visibility: hidden;
                        transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;    
                        position: absolute; 
                        top: 30px;
                        left: 30px;
                        width: calc(100% - 60px);
                        &.active {
                            opacity: 1;
                            visibility: visible;
                            position: relative;
                            top: 0;
                            left: 0;
                            width: 100%;
                        }
                        .el {
                            span {
                                font-size: 60px;
                                font-weight: 700;
                                font-family: var(--font-main);
                                color: var(--blue);
                            }
                            p {
                                font-size: 22px;
                                color: var(--dark);
                            }
                        }
                    }
                }
                .pagination {
                    display: flex;
                    height: 80px;
                    align-items: center;
                    justify-content: center;
                    z-index: 9;
                    .btn {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        justify-content: center;
                        &:first-child {
                            margin-right: 10px;
                        }
                        &::after {
                            content: none;
                        }
                        &::before {
                            font-family: icon;
                        }
                        &.next::before {
                            content: '\e90f';
                        }
                        &.prev::before {
                            content: '\e910';
                        }
                    }
                }
                &::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 120px;
                    background: rgba(39, 42, 56, .5);
                    z-index: 2;
                    top: 0;
                    left: 0;
                    backdrop-filter: blur(10px);
                }
            }
        }
    }
    
    &.main {
        .inner {
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: calc(100% - 400px);
                height: 100%;
                border-radius: 10px 0 10px 10px;
                background: var(--white);
                z-index: -1;
            }
        }
    }
    
    &.simp {
        .inner {
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: calc(100% - 400px);
                height: 100%;
                border-radius: 10px 0 10px 10px;
                background: var(--white);
                z-index: -1;
            }
        }
    }

    &.light {
        background: var(--light);
        .inner {
            .wrapper {
                height: 580px;
                .view {
                    width: 780px;
                    height: 780px;
                }
            }
        }
    }

    &.dark {
        position: relative;
        height: 600px;
        width: 100%;
        display: flex;
        overflow: hidden;
        img {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            object-fit: cover;
            filter: blur(3px);
            transform: scale(1.1);
        }
        .wrapper {
            position: relative;
            z-index: 9;
            height: calc(100% - 120px);
            margin-bottom: 0;
            margin-top: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            h1 {
                text-align: center;
                font-family: var(--font-main);
                color: var(--white);
                font-size: 60px;
                font-weight: 600;
                max-width: 1000px;
            }
            .breadcrumbs {
                display: flex;
                flex-wrap: wrap;
                margin-top: 20px;
                justify-content: center;
                align-items: center;
                > * {
                    margin-right: 5px;
                    font-size: 16px;
                    color: var(--white);
                    &:last-child {
                        margin-right: 0;
                    }
                }
                p {
                    color: var(--blue);
                }
            }
        }
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: var(--dark);
            opacity: .5;
        }
    }
}
section.services {
    .items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
        .item {
            height: 320px;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            .img {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: var(--dark);
                    opacity: .6;
                    z-index: 1;
                    transition: opacity 0.3s ease;
                }
            }
            .btn {
                position: absolute;
                top: 20px;
                right: 20px;
                z-index: 9;
                opacity: 0;
                transform: translateY(-10px);
            }
            .info {
                position: absolute;
                bottom: 20px;
                left: 20px;
                right: 20px;
                z-index: 9;
                h3 {
                    font-size: 24px;
                    color: var(--white);
                    font-weight: 600;
                    margin-bottom: 0; 
                    transition: margin-bottom 0.3s ease;
                }
                p {
                    font-size: 16px;
                    color: var(--white);
                    opacity: 0;
                    max-height: 0;
                    transform: translateY(20px);
                    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
                    margin: 0;
                    overflow: hidden;
                }
            }
        }
    }
}
section.marquee {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
    display: flex;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    .marquee-wrapper {
        display: flex;
        width: max-content;
        animation: marqueeContinuous 26s linear infinite;
        .text {
            display: flex;
            align-items: center;
            white-space: nowrap;
            p {
                margin: 0 20px;
                font-size: 60px;
                font-weight: 900;
                color: var(--light); 
                -webkit-text-stroke: 2px var(--dark);
                paint-order: stroke fill;
            }
            span {
                height: 60px;
                width: 1px;
                background: var(--dark);
            }
        }
        .items {
            display: flex;
            align-items: center;
            .item {
                margin: 0 10px;
                height: 120px;
                padding: 0 20px;
                display: flex;
                align-items: center;
                width: 380px;
                color: var(--dark);
                font-weight: 600;
                font-size: 16px;
                border-radius: 5px;
                &:nth-child(2n+1) {
                    background: var(--white);
                }
                &:nth-child(2n) {
                    border: 1px solid var(--dark);
                }
            }
        }
    }
}
@keyframes marqueeContinuous {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
section.advantages {
    padding: 80px 0;
    background: var(--white);
    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        .desc {
            max-width: 700px;
            text-align: center;
        }
        .items {
            width: 100%;
            display: grid;
            /* grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); */
            grid-template-columns: repeat(3, 1fr);
            .item {
                display: flex;
                align-items: center;
                flex-direction: column;
                margin-top: 60px;
                position: relative;
                .number {
                    color: var(--blue);
                    font-size: 100px;
                    font-family: var(--font-main);
                    font-weight: 700;
                    display: block;
                    margin-bottom: 10px;
                }
                p {
                    max-width: 320px;
                    color: var(--dark);
                    font-size: 20px;
                    font-weight: 500;
                    text-align: center;
                }
                &::after {
                    content: '';
                    height: 40%;
                    width: 1px;
                    background: var(--dark);
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                }
                &:last-child {
                    &::after {
                        display: none;
                    }
                }
            }
        }
    }
}
section.projects {
    .items {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
        grid-template-rows: repeat(4, 140px);
        .btn {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            border: 1px solid var(--blue);
            color: var(--blue);
            font-weight: 400;
            font-size: 18px;
            position: relative;
            justify-content: center;
            &::after {
                content: '\e90e';
                position: absolute;
                right: 10px;
                top: 10px;
                transition: .2s linear;
            }
        }
        .item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            img {
                object-fit: cover;
                object-position: center;
            }
            &:nth-child(2), &:nth-child(5) {
                grid-row: span 2;
            }
            &:nth-child(3), &:nth-child(4) {
                grid-row: span 3;
            }
            &.img {
                h3 {
                    position: absolute;
                    z-index: 9;
                    font-size: 24px;
                    font-weight: 500;
                    color: var(--white);
                    width: calc(100% - 40px);
                    bottom: 20px;
                    left: 20px;
                }
                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: var(--dark);
                    opacity: .6;
                    z-index: 1;
                    transition: opacity 0.3s ease;
                }
            }
        }
    }
}
section.text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    h2 {
        margin-right: 40px;
        width: 100%;
        max-width: 540px;
    }
    p {
        max-width: 900px;
    }
}
section.banner {
    &.max {
        margin-top: 0;
        width: 100%;
        height: 700px;
        position: relative;
        display: flex;
        flex-direction: column;
        background: url(../images/team.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        .headline {
            margin-top: auto;
            margin-bottom: 50px;
            position: relative;
            z-index: 9;
            h2 {
                font-size: 70px;
                color: var(--white);
                -webkit-text-fill-color: var(--white);
                max-width: 800px;
            }
        }
        .content {
            margin-bottom: 0;
            width: 100%;
            position: relative;
            z-index: 9;
            padding: 50px;
            .wrapper {
                display: flex;
                justify-content: space-between;
                width: 100%;
                p {
                    color: var(--white);
                    max-width: 900px;
                    font-weight: 400;
                    opacity: .8;
                }
                .btn {
                    margin-right: 0;
                    margin-left: auto;
                }
            }
            &::before {
                content: '';
                width: 100%;
                height: 1px;
                background: var(--white);
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: var(--dark);
            opacity: .6;
        }
    }
    &.min {
        height: 200px;
        position: relative;
        background: url(../images/banner-min.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        .wrapper {
            position: relative;
            z-index: 9;
            display: flex;
            align-items: center;
            height: 100%;
            h2 {
                color: var(--white);
                -webkit-text-fill-color: var(--white);
                font-size: 60px;
                font-weight: 600;

            }
            .btn {
                margin-left: auto;
                margin-right: 0;
                width: 320px;
            }
        }
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: var(--dark);
            opacity: .6;
        }
    }
    &.side {
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        img {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            object-fit: cover;
        }
        h2, p {
            position: relative;
            z-index: 9;
            margin-left: 60px;
            margin-right: 120px;
            color: var(--white);
            -webkit-text-fill-color: var(--white);
        }
        button {
            position: relative;
            z-index: 9;
            margin-left: 60px;
            margin-right: 120px;
        }
        h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        p {
            opacity: .9;
        }
        .btn {
            max-width: 320px;
            margin-top: 100px;
        }
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: var(--dark);
            opacity: .6;
        }
    }
}
section.certif {
    .items {
        width: 100%;
        position: relative;
        padding-bottom: 50px;
        .swiper-container {
            width: 100%;
            overflow: hidden;
            .swiper-slide {
                .item {
                    background: var(--white);
                    border-radius: 10px;
                    padding: 35px 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    img {
                        height: 400px;
                        width: auto;
                        object-fit: contain;
                    }
                    h3 {
                        margin-top: 30px;
                        color: var(--dark);
                        font-size: 22px;
                        font-weight: 600;
                        text-align: center;
                    }
                    p {
                        color: var(--light-gray);
                    }
                }
            }
        }
        .swiper-prev,
        .swiper-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            margin-top: -25px;
            border: none;
            padding: 0;
            width: 40px;
            height: 40px;
            justify-content: center;
            &::before {
                font-family: icon;
                color: var(--dark);
            }
        }
        .swiper-prev {
            left: -40px;
            &::before {
                content: '\e90a';
            }
        }
        .swiper-next {
            right: -40px;
            &::before {
                content: '\e912';
            }
        }
        .swiper-pagination {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            .swiper-pagination-bullet {
                background: var(--light-gray);
                opacity: 1;
            }
            .swiper-pagination-bullet-active {
                background: var(--dark);
            }
        }
    }
}
section.reviews {
    overflow: hidden;
    .meta {
        .navigation {
            display: flex;
            position: relative;
            align-self: end;
            .btn {
                background: var(--white);
                border-radius: 40px;
                width: 40px;
                height: 40px;
                padding: 0;
                justify-content: center;
                position: static;
                margin-top: 0;
                &.swiper-next {
                    margin-right: 0;
                    margin-left: 10px;
                }
                &::before {
                    font-family: icon;
                    color: var(--dark);
                    font-size: 16px;
                }
                &.swiper-next::before {
                    content: '\e910';
                }
                &.swiper-prev::before {
                    content: '\e90f';
                }
            }
        }
    }
    .swiper-container {
        margin-top: 20px;
        .swiper-slide {
            .item {
                background: var(--white);
                padding: 40px;
                border-radius: 10px;
                height: 340px;
                display: flex;
                flex-direction: column;
                .top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 40px;    
                    .profile {
                        width: 50px;
                        height: 50px;
                        border-radius: 25px;
                        &.t {
                            background: #cf8f8f;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            p {
                                font-size: 18px;
                                color: var(--dark);
                                font-weight: 600;
                            }
                        }
                    }
                    .name {
                        margin-left: 20px;
                        color: var(--dark);
                        font-size: 20px;
                        font-weight: 600;
                    }
                    .rate {
                        margin-left: auto;
                        margin-right: 0;
                        display: flex;
                        align-items: center;
                        p {
                            font-weight: 600;
                        }
                        .stars {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-left: 10px;
                            span {
                                &::before {
                                    content: '★';
                                    color: #D3AF37;
                                    font-size: 20px;
                                    line-height: 20px;
                                }
                            }
                        }
                    }
                }
                .content {
                    max-width: 600px;
                    p {
                        color: var(--text);
                        font-size: 16px;
                    }
                }
                .bottom {
                    margin-top: auto;
                    margin-bottom: 0;
                    display: flex;
                    padding-top: 20px;
                    border-top: 1px solid var(--light-gray);
                    p {
                        max-width: 400px;
                        color: var(--light-gray);
                        font-size: 15px;
                    }
                    .btn {
                        margin-left: auto;
                        margin-right: 0;
                        /* border: 1px solid var(--blue); */
                        /* color: var(--blue); */
                    }
                }
            }
        }
    }
}
section.contacts {
    padding: 40px 0;
    background: var(--white);
    .wrapper {
        display: grid;
        grid-template-columns: 40% 1fr;
        .left {
            margin-right: 80px;
            .desc {
                margin-bottom: 40px;
            }
            .item {
                display: grid;
                grid-template-columns: 40px 1fr;
                gap: 0 20px;
                margin-bottom: 30px;
                h3 {
                    align-self: center;
                    color: var(--dark);
                    font-size: 20px;
                    font-weight: 600;
                }
                p {
                    grid-column: 2;
                    font-size: 15px;
                    color: var(--light-gray);
                    max-width: 400px;
                    margin-bottom: 10px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                &::before {
                    font-family: icon;
                    content: '\e908';
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 1;
                    background: var(--light);
                    color: var(--blue);
                    font-size: 20px;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                &.address::before {
                    content: '\e908';
                }
                &.schedule::before {
                    content: '\e907';
                }
                &.phone::before {
                    content: '\e90d';
                }
                &.mail::before {
                    content: '\e913';
                }
            }
            .social {
                display: flex;
                a {
                    width: 40px;
                    height: 40px;
                    border-radius: 5px;
                    background: var(--light);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20px;
                    transition: .3s linear;
                    &:last-child {
                        margin-right: 0;
                    }
                    &::before {
                        font-size: 20px;
                        color: var(--dark);
                        font-family: icon;
                    }
                    &.tg::before {
                        content: '\e905';
                    }
                    &.vb::before {
                        content: '\e906';
                    }
                    &.ig::before {
                        content: '\e911';
                    }
                }
            }
        }
        .right {
            border-radius: 10px;
            overflow: hidden;
        }
    }
}
section.client {
    display: grid;
    grid-template-columns: 40% 1fr;
    max-width: 1920px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    > section {
        margin-top: 0;
    }
}
section.faq {
    padding: 60px 0 60px 100px;
    margin-right: auto;
    max-width: 936px;
    .items {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        .item {
            display: flex;
            flex-direction: column;
            margin-bottom: 2px;
            width: 100%;
            background: var(--white); 
            border-radius: 6px;
            .title {
                width: calc(100% - 4px);
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 20px;
                cursor: pointer;
                user-select: none;
                transition: .2s linear;
                margin: 2px;
                border-radius: 5px;
                h3 {
                    margin-right: 40px;
                    color: var(--dark);
                    font-size: 18px;
                    font-weight: 600;
                    font-family: var(--font-main), sans-serif;
                    span {
                        color: var(--blue);
                        font-family: inherit;
                        font-size: inherit;
                    }
                }
                > .btn {
                    margin-right: 0;
                    margin-left: auto;
                    position: relative;
                    width: 30px;
                    height: 30px;
                    border-radius: 5px;
                    border: none;
                    flex-shrink: 0;
                    &::before, &::after {
                        content: '';
                        position: absolute;
                        width: 18px; 
                        height: 2px;
                        background: var(--blue);
                        z-index: 1;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        transition: transform 0.3s ease, opacity 0.3s ease;
                    }
                    &::after {
                        transform: translate(-50%, -50%) rotate(90deg);
                    }
                }
            }
            .info {
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
                .inner {
                    padding: 10px 20px 32px 36px;
                    * {
                        font-size: 15px;
                        color: var(--text, #666);
                    }
                    p {
                        margin-bottom: 10px;
                    }
                    ul {
                        list-style: none;
                        li {
                            position: relative;
                            padding-left: 20px;
                            &::before {
                                content: '•';
                                position: absolute;
                                left: 0;
                                top: 0;
                                color: var(--blue);
                            }
                        }
                    }
                }
            }
            &.active {
                .info {
                    opacity: 1;
                }
                .title > .btn {
                    &::after {
                        transform: translate(-50%, -50%) rotate(0deg);
                        opacity: 0;
                    }
                    &::before {
                        transform: translate(-50%, -50%) rotate(180deg);
                    }
                }
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
/* section.faq {
    padding: 60px 0 60px 100px;
    margin-right: auto;
    max-width: 936px;
    .items {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        .item {
            display: flex;
            flex-direction: column;
            margin-bottom: 2px;
            width: 100%;
            background: var(--white);
            border-radius: 5px;
            .title {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 20px;
                h3 {
                    margin-right: 40px;
                    color: var(--dark);
                    font-size: 18px;
                    font-weight: 600;
                    font-family: var(--font-main);
                    span {
                        color: var(--blue);
                        font-family: inherit;
                        font-size: inherit;
                    }
                }
                > .btn {
                    margin-right: 0;
                    margin-left: auto;
                    position: relative;
                    width: 30px;
                    height: 30px;
                    border-radius: 5px;
                    border: none;
                    &::before, &::after {
                        content: '';
                        position: absolute;
                        width: 22px;
                        height: 2px;
                        background: var(--blue);
                        z-index: 1;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        transition: all 0.3s ease;
                    }
                    &::after {
                        transform: translate(-50%, -50%) rotate(90deg);
                    }
                }
            }
            .info {
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                transition: .3s linear;
                .inner {
                    padding: 0 20px 30px 36px;
                    * {
                        font-size: 15px;
                        color: var(--text);
                    }
                    p {
                        margin-bottom: 10px;
                    }
                    ul {
                        list-style: none;
                        li {
                            position: relative;
                            padding-left: 20px;
                            &::before {
                                content: '•';
                                position: absolute;
                                left: 0;
                                top: 0;
                                color: var(--blue);
                            }
                        }
                    }
                }
            }
            &.active {
                .info {
                    max-height: none;
                    opacity: 1;
                }
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
} */
footer {
    background: var(--white);
    padding: 100px 0 50px;
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px 80px;
        .left {
            .top {
                display: flex;
                margin-bottom: 20px;
                .logo {
                    max-width: 100px;
                    width: 100%;
                    display: flex;
                    img {
                        width: 100%;
                    }
                }
                .menu {
                    margin-left: auto;
                    margin-right: 0;
                    display: flex;
                    .ws-menu {
                        display: flex;
                        .item {
                            margin-right: 20px;
                            a {
                                color: var(--dark);
                            }
                            &:last-child {
                                margin-right: 0;
                            }
                        }
                    }
                }
            }
            .contacts {
                display: flex;
                flex-direction: column;
                margin-top: 50px;
                > a {
                    color: var(--dark);
                    font-size: 16px;
                    font-family: var(--font-main);
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    &::before {
                        margin-right: 10px;
                        font-size: 14px;
                        color: var(--dark);
                        font-family: icon;
                    }
                    &.call::before {
                        content: '\e90d';
                    }
                    &.mail::before {
                        content: '\e913';
                    }
                }
                .social {
                    display: flex;
                    a {
                        margin-right: 10px;
                        &::before {
                            font-size: 16px;
                            color: var(--dark);
                            font-family: icon;
                        }
                        &:last-child {
                            margin-right: 0;
                        }
                        &.tg::before {
                            content: '\e905';
                        }
                        &.vb::before {
                            content: '\e906';
                        }
                        &.ig::before {
                            content: '\e911';
                        }
                    }
                }
            }
        }
        .right {
            h3 {
                margin-bottom: 20px;
                font-size: 20px;
                color: var(--dark);
                font-weight: 600;
            }
            ul {
                display: flex;
                flex-direction: column;
                list-style: none;
                li {
                    position: relative;
                    margin-bottom: 2px;
                    border-bottom: 1px solid #dfe5ee;
                    display: flex;
                    a {
                        display: block;
                        padding: 10px 0 10px 25px;
                        color: var(--dark);
                        width: 100%;
                        transition: .2s linear;
                    }
                    &::before {
                        content: '\e90e';
                        font-size: 12px;
                        font-family: icon;
                        position: absolute;
                        top: 15px;
                        left: 0;
                        color: #dfe5ee;
                        transition: .2s linear;
                    }
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
        .lb {
            padding-top: 20px;
            width: 100%;
            border-top: 1px solid var(--light-gray);
            p {
                width: 80%;
                color: var(--light-gray);
                font-size: 14px;
            }
        }
        .rb {
            padding-top: 21px;
            a {
                color: var(--light-gray);
                display: flex;
                transition: .3s linear;
                position: relative;
                padding-left: 20px;
                &::before {
                    margin-right: 10px;
                    font-family: icon;
                    margin-top: 5px;
                    content: '\e90e';
                    font-size: 12px;
                    line-height: 16px;
                    transition: .3s linear;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
    }
}
@media screen and (max-width: 1820px) {
    .wrapper {
        /* max-width: 1200px; */
        width: calc(100% - 120px);
    }
    header {
        .wrapper {
            .logo {
                max-width: 90px;
                height: auto;
            }
            .right {
                right: -20px;
            }
            .left {
                .menu {
                    margin-left: 80px;
                }
            }
        }
    }
    section.hero {
        .inner {
            .wrapper {
                height: 620px;
                .view {
                    width: 580px;
                    height: 740px;
                    .slides-info {
                        .item {
                            .el {
                                span {
                                    font-size: 48px;
                                }
                                p {
                                    font-size: 18px;
                                }
                            }
                        }
                    }
                }
                .info {
                    h1 {
                        font-size: 48px;
                    }
                }
            }
        }
        &.light {
            .inner {
                .wrapper {
                    .view {
                        width: 620px;
                    }
                }
            }
        }
    }
    section.advantages {
        .wrapper {
            .items {
                .item {
                    p {
                        font-size: 18px;
                    }
                    .number {
                        font-size: 80px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1439px) {
    section {
        h2 {
            font-size: 36px;
        }
    }
    .wrapper {
        width: calc(100% - 100px);
        max-width: unset;
    }
    header {
        .wrapper {
            .left {
                .menu {
                    margin-left: 60px;
                }
            }
            .right {
                min-width: 470px;
                right: -10px;
                .btn {
                    font-size: 15px;
                }
            }
        }
    }
    section.hero {
        .inner {
            .wrapper {
                .view {
                    width: 540px;
                }
            }
        }
        &.light {
            .inner {
                .wrapper {
                    .view {
                        width: 540px;
                    }
                }
            }
        }
    }
    section.marquee {
        .marquee-wrapper {
            .text {
                p {
                    font-size: 48px;
                }
                span {
                    height: 48px;
                }
            }
        }
    }
    section.projects {
        .items {
            .btn {
                font-size: 16px;
            }
        }
    }
    section.banner {
        &.max {
            .headline {
                margin-bottom: 40px;
                h2 {
                    font-size: 60px;
                }
            }
            .content {
                padding: 40px 50px;
            }
        }
    }
}
@media screen and (max-width: 1279px) {
    section {
        h2 {
            font-size: 32px;
        }
        .desc {
            font-size: 15px;
            max-width: 700px;
        }
    }
    .btn {
        &.accent {
            color: var(--dark);
            border: 1px solid var(--dark);
            .pulse-ring {
                animation-name: shadow-pulse-dark;
            }
        }
    }
    .wrapper {
        width: calc(100% - 60px);
    }
    header {
        background: var(--light);
        height: 100px;
        .wrapper {
            position: relative;
            align-items: center;
            .logo {
                max-width: 80px;
            }
            .right {
                position: static;
                .tel {
                    color: var(--dark);
                }
            }
            .left {
                .menu {
                    position: absolute;
                    background: var(--white);
                    width: 300px;
                    right: 40px;
                    display: flex;
                    flex-direction: column;
                    top: calc(100% + 10px);
                    border-radius: 10px;
                    padding: 10px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
                    z-index: 99;
                    opacity: 0;
                    visibility: hidden;
                    .ws-menu {
                        display: flex;
                        flex-direction: column;
                        > .item {
                            display: block;
                            a {
                                display: block;
                                border-radius: 5px;
                                padding: 10px;
                            }
                            p {
                                display: block;
                                padding: 10px;
                                &::after {
                                    transform: rotate(90deg);
                                }
                            }
                            .sub-menu {
                                width: 100%;
                                margin-top: 10px;
                                border-radius: 0;
                                position: static;
                                padding: 0 0 0 5px;
                                margin-left: 10px;
                                opacity: 1;
                                visibility: visible;
                                background: none;
                                box-shadow: none;
                                border-left: 1px dashed var(--blue);
                            }
                        }
                    }
                    &.active {
                        right: 0;
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
            .burger-menu {
                display: flex;
                margin-left: 40px;
            }
        }
        &.transparent {
            .btn {
                &.accent {
                    color: var(--white);
                    border: 1px solid var(--white);
                    .pulse-ring {
                        animation-name: shadow-pulse;
                    }
                }
            }
            .wrapper {
                .right {
                    .tel {
                        color: var(--white);
                    }
                }
                .left {
                    * {
                        color: var(--dark);
                    }
                }
                .burger-menu {
                    span, &::before, &::after {
                        background: var(--white);
                    }
                }
            }
        }
    }
    section.hero {
        background: var(--white);
        .inner {
            .wrapper {
                flex-direction: column;
                height: auto;
                .view {
                    position: static;
                    flex-direction: row;
                    width: 100%;
                    max-width: 800px;
                    height: 600px;
                    margin-bottom: 80px;
                    .slider {
                        border-radius: 10px;
                        margin-right: 20px;
                    }
                    .pagination {
                        flex-direction: column;
                        height: fit-content;
                        .btn {
                            &.next {
                                margin-right: 0;
                                margin-bottom: 20px;
                            }
                        }
                    }
                    &::before {
                        display: none;
                    }
                }
                .info {
                    margin-top: 80px;
                    margin-bottom: 80px;
                    h1 {
                        font-size: 42px;
                        margin-bottom: 40px;
                    }
                    ul {
                        li {
                            font-size: 16px;
                        }
                    }
                    .btn {
                        margin-top: 40px;
                    }
                    .label {
                        font-size: 16px;
                    }
                }
            }
            &::before {
                display: none;
            }
        }
        &.light {
            .inner {
                .wrapper {
                    height: auto;
                    .view {
                        width: 100%;
                        height: 500px;
                    }
                }
            }
        }
        &.dark {
            .wrapper {
                h1 {
                    font-size: 48px;
                }
            }
        }
    }
    section.services {
        .items {
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            .item {
                .info {
                    h3 {
                        font-size: 22px;
                    }
                }
            }
        }
    }
    section.marquee {
        .marquee-wrapper {
            .text {
                p {
                    font-size: 40px;
                }
                span {
                    height: 40px;
                }
            }
        }
    }
    section.advantages {
        .wrapper {
            .items {
                grid-template-columns: 1fr;
                .item {
                    p {
                        font-size: 16px;
                        max-width: 220px;
                    }
                    .number {
                        font-size: 60px;
                    }
                    &::after {
                        width: 60px;
                        height: 1px;
                        bottom: -30px;
                        top: auto;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }
    }
    section.projects {
        .items {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(8, 120px);
            .btn {
                font-size: 15px;
            }
            .item {
                &.img {
                    h3 {
                        font-size: 18px;
                    }
                }
            }
        }
    }
    section.text {
        h2 {
            min-width: 260px;
        }
    }
    section.banner {
        &.max {
            height: 600px;
            .headline {
                margin-bottom: 40px;
                h2 {
                    font-size: 40px;
                }
            }
            .content {
                padding: 40px 30px;
                .wrapper {
                    p {
                        font-size: 15px;
                    }
                    .btn {
                        width: 100%;
                        margin-left: 20px;
                    }
                }
            }
        }
        &.min {
            .wrapper {
                h2 {
                    font-size: 42px;
                }
                .btn {
                    width: 240px;
                }
            }
        }
        &.side {
            padding: 80px 0;
            h2, p, .btn {
                margin-left: auto;
                margin-right: auto;
                width: calc(100% - 60px);
            }
            .btn {
                margin-left: 30px;
            }
        }
    }
    section.certif {
        .items {
            padding-left: 30px;
            padding-right: 30px;
            .swiper-prev {
                left: -10px;
            }
            .swiper-next {
                right: -10px;
            }
        }
    }
    section.contacts {
        padding: 80px 0;
        .wrapper {
            display: flex;
            flex-direction: column;
            .right {
                height: 600px;
                margin-top: 60px;
            }
            .left {
                margin-right: 0;
            }
        }
    }
    section.client {
        display: flex;
        flex-direction: column-reverse;
    }
    section.faq {
        max-width: unset;
        width: calc(100% - 60px);
        padding: 60px 0;
        margin: 0 auto;
    }
    footer {
        padding: 50px 0 40px;
        .wrapper {
            display: flex;
            gap: 0;
            flex-direction: column;
            > div {
                margin-bottom: 40px;
            }
            .top {
                align-items: center;
            }
            .lb {
                order: 4;
                margin-bottom: 0;
            }
        }
    }
}
@media screen and (max-width: 767px) {
    p {
        font-size: 15px;
    }
    section {
        h2 {
            font-size: 24px;
            max-width: 280px;
        }
        .meta {
            display: flex;
            flex-direction: column;
            align-items: start;
            .btn, .navigation {
                align-self: start;
                margin-top: 20px;
                width: 180px;
            }
        }
    }
    .btn {
        font-size: 15px;
        &.dark {
            width: 200px;
        }
    }
    .wrapper {
        width: calc(100% - 40px);
    }
    header {
        .wrapper {
            .right {
                display: none;
            }
            .left {
                .menu {
                    width: 100%;
                }
            }
        }
    }
    section.hero {
        .inner {
            .wrapper {
                .info {
                    margin-top: 100px;
                    margin-bottom: 60px;
                    h1 {
                        font-size: 24px;
                        margin-bottom: 30px;
                    }
                    ul {
                        li {
                            font-size: 15px;
                        }
                    }
                    .label {
                        font-size: 14px;
                        padding: 6px 15px;
                    }
                }
                .view {
                    flex-direction: column;
                    margin-bottom: 40px;
                    .slides-info {
                        padding: 20px;
                        left: 10px;
                        bottom: 10px;
                        width: calc(100% - 20px);
                        .item {
                            justify-content: space-between;
                            gap: 0;
                            width: calc(100% - 40px);
                            left: 20px;
                            top: 20px;
                            .el {
                                width: 50%;
                                span {
                                    font-size: 32px;
                                }
                                p {
                                    font-size: 15px;
                                }
                            }
                        }
                    }
                    .pagination {
                        flex-direction: row;
                        margin-top: 10px;
                        .btn {
                            &.next {
                                margin-right: 10px;
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
        &.dark {
            .wrapper {
                h1 {
                    font-size: 36px;
                }
            }
        }
    }
    section.services {
        .items {
            grid-template-columns: 1fr;
            .item {
                .btn {
                    opacity: 1;
                    transform: none;
                    visibility: visible;
                }
                .info {
                    h3 {
                        font-size: 18px;
                        margin-bottom: 10px;
                    }
                    p {
                        max-height: unset;
                        opacity: 1;
                        visibility: visible;
                        transform: none;
                        font-size: 15px;
                        opacity: .8;
                    }
                }
            }
        }
    }
    section.marquee {
        .marquee-wrapper {
            .text {
                p {
                    font-size: 28px;
                }
                span {
                    height: 30px;
                }
            }
            .items {
                .item {
                    height: 100px;
                    font-size: 15px;
                    width: 340px;
                }
            }
        }
    }
    section.projects {
        .items {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            .btn {
                height: 80px;
            }
            .item {
                &.img {
                    h3 {
                        bottom: 15px;
                        left: 15px;
                        font-size: 16px;
                    }
                }
            }
        }
    }
    section.text {
        flex-direction: column;
        h2 {
            width: 100%;
            margin-right: 0;
            margin-bottom: 20px;
        }
    }
    section.banner {
        &.max {
            .content {
                padding: 30px 20px;
                .wrapper {
                    flex-direction: column;
                    .btn {
                        margin-left: 0;
                        margin-top: 40px;
                        width: 140px;
                    }
                }
            }
        }
        &.min {
            height: auto;
            padding: 60px 0;
            .wrapper {
                flex-direction: column;
                align-items: center;
                h2 {
                    text-align: center;
                }
                .btn {
                    margin: 0;
                    margin-top: 40px;
                }
            }
        }
        &.side {
            padding: 60px 0;
            h2 {
                font-size: 28px;
                margin-left: 20px;
            }
            h2, p, .btn {
                width: calc(100% - 40px);
            }
            .btn {
                margin-left: 20px;
                margin-top: 60px;
                width: 260px;
            }
        }
    }
    section.certif {
        .items {        
            padding-left: 0;
            padding-right: 0;
            .swiper-prev {
                left: -10px;
            }
            .swiper-next {
                right: -10px;
            }
            .swiper-container {
                .swiper-slide {
                    img {
                        height: 300px;
                    }
                }
            }
        }
    }
    section.reviews {
        .meta {
            .navigation {
                align-self: start;
                width: fit-content;
            }
        }
        .swiper-container {
            margin-top: 10px;
            .swiper-slide {
                .item {
                    height: auto;
                    padding: 30px;
                    .top {
                        display: grid;
                        grid-template-columns: auto 1fr;
                        .profile {
                            width: 46px;
                            height: 46px;
                        }
                        .name {
                            font-size: 18px;
                        }
                        .rate {
                            align-self: start;
                            grid-column: 2;
                            margin-left: 20px;
                        }
                    }
                    .content {
                        margin-bottom: 40px;
                    }
                    .bottom {
                        flex-direction: column;
                        .btn {
                            margin-top: 20px;
                        }
                    }
                }
            } 
        }
    }
    section.contacts {
        .wrapper {
            .left {
                .item {
                    h3 {
                        font-size: 18px;
                    }
                }
            }
        }
    }
    section.faq {
        width: calc(100% - 40px);
        .items {
            .item {
                .title {
                    h3 {
                        font-size: 16px;
                        margin-right: 20px;
                    }
                }
                .info {
                    .inner {
                        padding: 10px 20px 20px 20px;
                    }
                }
            }
        }
    }
    footer {
        .wrapper {
            .left {
                .top {
                    flex-direction: column-reverse;
                    align-items: start;
                    a {
                        font-size: 15px;
                    }
                    .menu {
                        margin-bottom: 40px;
                        margin-left: 0;
                        .ws-menu {
                            flex-direction: column;
                            .item {
                                margin: 0;
                                display: flex;
                                a {
                                    display: flex;
                                    padding: 5px 0;
                                }
                            }
                        }
                    }
                }
            }
            .right {
                ul {
                    li {
                        a {
                            font-size: 15px;
                        }
                    }
                }
            }
            .lb {
                order: 4;
                margin-bottom: 0;
            }
            .rb {
                margin-bottom: 20px;
            }
        }
    }
}
@media screen and (hover: hover) {
    .btn:hover {
        &.accent {
            background: var(--white);
            color: var(--dark);
        }
        &.dark {
            background: var(--white);
            color: var(--dark);
        }
        &.blue {
            background: var(--white);
            color: var(--blue);
        }
        &.transparent {
            background: var(--white);
            color: var(--dark);
            &.bl {
                background: var(--blue);
                color: var(--white);
            }
        }
        &::after {
            transform: rotate(45deg);
        }
    }
    header {
        .wrapper {
            .left {
                .menu {
                    .ws-menu {
                        .item {
                            .sub-menu {
                                .item:hover {
                                    a {
                                        background: var(--blue);
                                        color: var(--white);
                                    }
                                    &::after {
                                        opacity: 0;
                                    }
                                }
                            }
                            &:has(.sub-menu):hover {
                                p {
                                    &::after {
                                        transform: rotate(180deg);
                                    }
                                }
                                .sub-menu {
                                    opacity: 1;
                                    visibility: visible;
                                    top: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    section.services {
        .items {
            .item {
                &:hover {
                    .img::after {
                        opacity: 0.75;
                    }
                    .btn {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    .info {
                        h3 {
                            margin-bottom: 10px;
                        }
                        p {
                            opacity: 1;
                            max-height: 100px;
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
    }
    section.marquee:hover {
        .marquee-wrapper {
            animation-play-state: paused;
        }
    }
    section.projects {
        .items {
            .btn:hover {
                background: var(--blue);
                color: var(--white);
                &::after {
                    color: var(--white);
                    transform: rotate(45deg);
                }
            }
        }
    }
    section.faq {
        .items {
            .item {
                .title:hover {
                    /* background: var(--blue); */
                    background: rgba(118, 163, 197, .5);
                    h3 {
                        span {
                            color: var(--white);
                        }
                    }
                    .btn {
                        &::before, &::after {
                            background: var(--white);
                        }
                    }
                }
            }
        }
    }
    section.contacts {
        .wrapper {
            .left {
                .social {
                    a:hover {
                        background: var(--dark);
                        &::before {
                            color: var(--white);
                        }
                    }
                }
            }
        }
    }
    footer {
        .wrapper {
            .right {
                ul {
                    li:hover {
                        &::before {
                            color: var(--blue);
                            transform: rotate(45deg);
                            top: 12px;
                        }
                        a {
                            padding-left: 40px;
                        }
                    }
                }
            }
            .rb {
                a:hover {
                    color: var(--dark);
                    padding-left: 30px;
                    &::before {
                        color: var(--blue);
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }
    @media screen and (max-width: 1279px) {
        header {
            .wrapper {
                .left {
                    .menu {
                        .ws-menu {
                            > .item {
                                a:hover {
                                    background: var(--blue);
                                    color: var(--white);
                                    &::after {
                                        color: var(--white);
                                        transform: rotate(45deg);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 767px) {
         section.services {
            .items {
                .item {
                    &:hover {
                        .img::after {
                            opacity: 0.5;
                        }
                    }
                }
            }
        }
    }
}