@red: #a71e23;
@light-grey: #ebebeb;
.font-title {
    font-family: 'Franklin Gothic Demi';
    font-size: 22px;
    line-height: 1;
    margin-bottom: 16px;
}
.title {
    .font-title;
    margin-top: 50px;
}
#banner-slider {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 25px !important;
    .slick-track {
        height: ~'calc(100vh - 414px)';
        .image {
            background-size: cover;
            display: flex;
            align-items: center;
            .banner-wrapper {
                color: white;
                border-left: 4px solid @red;
                .banner-title {
                    .font-title;
                    font-size: 48px;
                    line-height: 0.7;
                }
                .banner-content {
                    font-size: 24px;
                    line-height: 1;
                    margin-bottom: 0;
                }
            }
        }
    }
    .slick-dots {
        background-color: black;
        height: 32px;
        li {
            &, &.slick-active {
                button:before {
                    color: white;
                    font-size: 16px;
                }
            }
        }
    }
}
#welcome {
    margin-left: -15px;
    margin-right: -15px;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 1rem;
/*    align-items: center;
/*    justify-content: center;*/
/*    height: 200px;*/
    .welcome-title {
        .font-title;
        font-size: 30px;
        text-align: center;
    }
    .welcome-description {
        margin-bottom: 16px;
        text-align: center;
        p:first-child {
            margin-bottom: 0;
        }
    }
}

#services {
    padding: 100px 15px 70px;
    .services-title {
        .font-title;
        font-size: 36px;
        color: @red;
        text-align: center;
        margin-bottom: 4rem;
    }
    .service {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
    }
}
#reasons {
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
    .bg-left, .bg-right {
        position: absolute;
        width: 20%;
        z-index: -1;
    }
    .bg-left {
        top:0;
        left:0;
    }
    .bg-right {
        right:0;
        bottom:0;
    }
    .container {
        max-width: 960px;
    }
    .reasons-title {
        .font-title;
        font-size: 36px;
        color: @red;
    }
    .reason {
        padding-bottom: 50px;
    }
    hr {
        width: 100px;
        border: 3px solid @red;
        margin: 0 auto;
        border-radius: 25px;
        &:last-of-type {
            display:none;
        }
    }
    a {
        color: black;
        font-weight: bold;
        &.btn {
            color: white;
            &:hover {
                color: @red;
            }
        }
    }
}
#testimonials {
    background-color: @light-grey;
    margin-bottom: 70px;
    .container {
        padding-top: 90px;
        padding-bottom: 90px;
        max-width: 800px;
        text-align: center;
        position: relative;
        .quote-left, .quote-right {
            position: absolute;
            width: 20%;
        }
        .quote-left {
            top: 40px;
            left: -150px;
        }
        .quote-right {
            bottom: 40px;
            right: -150px;
        }
        .testimonals-title {
            .font-title;
            font-size: 30px;
        }
        .author {
            .font-title;
            padding: 16px 0;
            color: @red;
        }
    }
    .slick-prev, .slick-next {
        top: unset;
        bottom: -20px;
        &:before {
            color: @red;
            font-size: 30px;
        }
    }
    .slick-prev {
        left: 45%;
    }
    .slick-next {
        right: 45%;
    }
}

#message {
    position: relative;
    .success, .error {
        margin: 0 -15px;
        font-weight: bold;
        text-align: center;
        position: absolute;
        top: -55px;
        left: 0;
        right: 0;
    }
    .success {
        background-color: #9e9;
        color: green;
    }
    .error {
        background-color: #e99;
        color: red;
    }
}
@media only screen and (max-width: 991px) {
    .title {
        margin-top: 16px;
    }
    #banner-slider .slick-track {
        height: 270px;
        .image .banner-wrapper {
            background-color: rgba(0,0,0,0.5);
            padding: 16px;
            .banner-title {
                font-size: 39px;
            }
            .banner-content {
                font-size: 20px;
            }
        }
    }
    #welcome {
        .welcome-title {
            font-size: 22px;
        }
    }
    #services, #reasons, #testimonials .container {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #reasons {
        .bg-left, .bg-right {
            display: none;
        }
        .reason {
            padding-bottom: 16px;
        }
    }
    #testimonials {
        margin-bottom: 30px;
        .container {
            .quote-right, .quote-right {
                display: none;
            }
        }
    }
}
@media only screen and (max-width: 575px) {
    .font-big {
        font-size: 23px;
    }
    .font-middle {
        font-size: 16px;
    }
    .font-small {
        font-size: 14px;
    }
    .font-big, .font-middle, .font-small {
        line-height: 1.2;
    }
    .btn {
        .font-small;
    }
    #banner-slider .slick-track .image .banner-wrapper {
        .banner-title {
            .font-big;
        }
        .banner-content {
            .font-middle;
            margin-bottom: 0;
        }
    }
    #welcome {
        .welcome-title {
            .font-middle;
        }
        .welcome-description {
            .font-small;
        }
    }
    .title, #testimonials .container .testimonals-title, #testimonials .container .author {
        .font-middle;
    }
    p, .content, .quote {
        .font-small;
    }
    .service_icon img {
        width: 33px;
    }
    #reasons {
        padding-top: 0;
    }
    #reasons .reasons-title {
        .font-big;
    }
    #testimonials {
        .slick-prev {
            left: 39%;
        }
        .slick-next {
            right: 39%;
        }
    }
}