/*-----------------------
    banner
------------------------*/
.banner .fancybox-item {
    margin-bottom: 0;
}

.banner-1 {
    .container-fluid {
        padding: 0 50px;
    }
}

.banner-2 {
    .heading__desc {
        font-size: 17px;
        line-height: 27px;
        font-weight: 600;
    }

    .carousel-wrap {
        position: relative;
        height: 100%;
        min-height: 350px;
    }

    .carousel {
        position: absolute;
        bottom: 0;
        right: -15px;
        width: 370px;
        background-color: $color-theme;
        padding: 50px 50px 44px;
        z-index: 10;

        .owl-dots {
            margin: 0;
            position: absolute;
            top: 30px;
            right: 30px;

            .owl-dot.active span {
                border-color: #fff;
            }
        }

        .counter-item {
            text-align: left;

            .counter,
            .counter__subtitle {
                display: inline-block;
            }

            .counter {
                margin-right: 18px;
            }
        }
    }
}

.banner-3 {
    .inner-padding {
        padding: 110px 50px;
    }

    .heading__title {
        margin-bottom: 21px;
    }

    .heading__desc {
        font-size: 17px;
        font-weight: 500;
        line-height: 27px;
    }

    .list-items {
        display: flex;
        flex-wrap: wrap;

        li {
            flex-basis: 50%;
        }
    }
}

.banner-4 {
    .banner-content {
        margin: 0 20px;
        background-color: $color-theme;
        padding: 80px 90px;
    }

    .heading__desc {
        font-weight: 500;
    }
}

/* Extra Large Size Screens */
@media only screen and (min-width:1400px) {
    .banner-1 .container-fluid {
        padding: 0 110px;
    }

    .banner .inner-padding {
        padding-right: 110px;
        padding-left: 110px;
    }
}

/* Medium Size Screens */
@include md-screens {

    .banner-1 .container-fluid {
        padding: 0 30px;
    }

    .banner-4 .banner-content {
        margin: 0;
        padding: 50px 60px;
    }
}

/* Mobile Phones and tablets */
@include xs-sm-screens {
    .banner-1 {
        .container-fluid {
            padding: 0 30px;
        }
    }

    .banner-4 .banner-content {
        margin: 0;
        padding: 20px 30px;
    }
}

/* Extra Small Devices */
@include xs-screens {
    .banner-1 {
        .container-fluid {
            padding: 0 20px;
        }
    }

    .banner-2 .carousel {
        width: 320px;
        padding: 20px;
    }

    .banner-2 .heading__desc {
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
    }

    .banner-3 .list-items {
        display: block;
    }
}

@media only screen and (max-width: 450px) {
    .fancybox-item .fancybox__title {
        font-size: 12px;
        line-height: 17px;
    }
}