main section {
    padding: 6em 0;
}

    main section .section-title {
        width: 100%;
        margin-bottom: 4em;
        text-align: center;
    }

        main section .section-title h1 {
            font-size: 2.5em;
            font-weight: 600;
            width: 100%;
            margin: 0;
            position: relative;
        }

        main section .section-title span {
            color: var(--primary);
            font-weight: 500;
            font-size: 1.05em;
            margin-bottom: 3em;
            display: block;
            margin-top: 0;
        }

    main section .section-body {
        width: 100%;
    }

main h1.top-seprator {
    position: relative;
}

    main h1.top-seprator:before {
        position: absolute;
        content: "";
        right: 0;
        top: -0.5em;
        width: 1.5em;
        background-color: var(--primary);
        height: 3px;
    }

main #banner {
    background: url('../img/home.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 0;
    padding-top: 5.5em;
}

    main #banner:before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        z-index: 0;
    }

    main #banner > div {
        z-index: 1;
    }

    main #banner .banner-main {
        padding: 9em 0 7em;
        color: var(--white);
    }

        main #banner .banner-main > h1 {
            margin: 0;
            font-size: 3.4em;
            font-weight: 500;
            margin-bottom: 0.4em;
            text-align:right;
        }


        main #banner .banner-main > p {
            margin: 0;
            font-size: 1.9em;
            font-weight: 200;
            margin-bottom: 1em;
            padding-left: 2em;
        }

    main #banner .features {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        transform: translateY(2em);
        margin-bottom: 2em;
    }

        main #banner .features .feature {
            width: calc(33.33% - 1.5em);
            background-color: var(--black);
            cursor: pointer;
            position: relative;
            border-radius: var(--border-radius);
        }

            main #banner .features .feature:last-of-type:after {
                background-color: var(--primary-dark);
                content: "";
                position: absolute;
                left: -1.5em;
                bottom: -1.3em;
                width: 14em;
                height: 5em;
                z-index: -1;
                border-radius: var(--border-radius);
            }

            main #banner .features .feature.active,
            main #banner .features .feature:hover {
                background-color: var(--primary);
            }

            main #banner .features .feature > div {
                padding: 3em;
                position: relative;
            }

            main #banner .features .feature svg {
                width: 4.5em;
                height: 4.5em;
                font-weight: 600;
                margin-bottom: 1em;
            }

                main #banner .features .feature svg path {
                    stroke: var(--primary);
                }

            main #banner .features .feature:hover svg path,
            main #banner .features .feature.active svg path {
                stroke: var(--white);
            }

            main #banner .features .feature h3 {
                font-weight: 600;
                font-size: 1.2em;
                position: relative;
                color: var(--white);
                margin-bottom: 1.8em;
                position: relative;
            }

                main #banner .features .feature h3:before {
                    position: absolute;
                    right: 0;
                    bottom: -0.6em;
                    content: "";
                    width: 2em;
                    height: 2px;
                    background-color: var(--primary);
                    border-radius: var(--border-radius);
                }

            main #banner .features .feature.active h3:before,
            main #banner .features .feature:hover h3:before {
                background-color: var(--white);
            }

            main #banner .features .feature p {
                font-size: 1em;
                font-weight: 200;
                width: 100%;
                color: var(--white-light);
                margin: 0
            }

            main #banner .features .feature:hover p {
                color: var(--white);
            }


main section#services {
}

    main section#services > div {
    }

    main section#services .section-body {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-wrap: wrap;
        width: 100%;
    }

    main section#services .service {
        background-color: rgba(255,255,255,0.05);
        width: calc(33.33% - 0.9em);
        position: relative;
        height: 5em;
        margin-bottom: 1.5em;
        display: flex;
        justify-content: start;
        align-items: center;
        overflow: hidden;
        border-radius: var(--border-radius);
    }

        main section#services .service.active,
        main section#services .service:hover {
            background-color: var(--primary);
        }

        main section#services .service svg:first-of-type {
            position: absolute;
            right: -2.8em;
            width: 4em;
            height: 4em;
            opacity: 0;
            transform: translateX(0);
        }

        main section#services .service svg path {
            fill: var(--white);
        }

        main section#services .service.active svg:first-of-type,
        main section#services .service:hover svg:first-of-type {
            opacity: 0.4;
            transform: translateX(-1.8em);
        }

        main section#services .service h4 {
            display: block;
            font-weight: 400;
            font-size: 1em;
            padding: 0 2em;
            margin: 0;
            transform: translateX(0);
        }

        main section#services .service.active h4,
        main section#services .service:hover h4 {
            transform: translateX(-1.8em);
        }

        main section#services .service svg.more {
            position: absolute;
            left: 2em;
            top: calc(50% - 0.7em);
            width: 1.4em;
            height: 1.4em;
            transform: translateX(0);
            opacity: 0.4;
        }

        main section#services .service.active svg.more,
        main section#services .service:hover svg.more {
            transform: translateX(-1em);
            opacity: 0.8;
        }

        main section#services .service > a {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: transparent;
            opacity: 0;
        }

main section#clients {
    background-color: #ffffff;
}

    main section#clients h1 {
        color: var(--black);
    }

    main section#clients .section-body {
        display: flex;
        justify-content: center;
        align-items: start;
        flex-wrap: wrap;
    }

        main section#clients .section-body .client {
            width: calc(20% - 3.1em);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin: 0 1.5em;
            margin-bottom: 4em;
            height: 5em;
            position: relative;
            cursor: pointer;
        }

            main section#clients .section-body .client img {
                width: 100%;
                max-width: 8em;
                object-fit: contain;
                object-position: center;
                height: 100%;
                cursor: pointer;
            }

            main section#clients .section-body .client span {
                /*   width: 100%;
            display: block;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0;
            transform: translateY(0);
            font-size: 0.9em;
            font-weight: 300;
            color: var(--black);*/
                display: none;
            }






@media (max-width:1400px) {
}

@media (max-width:1200px) {
}

@media (max-width:992px) {
    main #banner .features .feature {
        width: 100%;
        margin-bottom: 2em;
    }

    main section#services .service {
        width: calc(50% - 0.9em);
    }
}

@media (max-width:768px) {
    main h1.top-seprator::before {
        display: none;
    }

    main #banner .banner-main {
        text-align: center;
    }

        main #banner .banner-main > p {
            padding-left: 0;
        }

    main #banner .features .feature > div {
        text-align: center;
    }

    main #banner .features .feature h3::before {
        right: calc(50% - 1em);
    }

    main section#services .service {
        width: calc(100% - 0.9em);
    }

    main section#clients .section-body .client {
        width: calc(25% - 3.1em)
    }
}

@media (max-width:576px) {
    main #banner .banner-main {
        padding: 6em 0 4em;
    }

        main #banner .banner-main > h1 {
            font-size: 2.8em;
        }

        main #banner .banner-main > p {
            font-size: 1.7em
        }

    main section#clients .section-body .client {
        width: calc(33.33% - 3.1em)
    }
}

@media (max-width:450px) {
    main #banner .banner-main {
        padding: 5em 0 3em;
    }

    main section#services .service h4 {
        padding-left: 1em;
    }

    main section#services .service svg.more {
        display: none;
    }

    main section#clients .section-body .client {
        width: calc(33.33% - 2.7em);
        margin-right: 1.3em;
        margin-left: 1.3em;
    }
}