.banner__slider {
    height: 820px;
    position: relative;

    .swiper-slide {
        height: 820px;
        width: 100%;
    }

    .banner__image {
        height: 820px;

        img {
            width: 100%;
            height: 100% !important;
            object-fit: cover;
        }
    }

    .banner__slide {
        position: relative;
        overflow: hidden;
        
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 2;
        }
    }

    .banner__content {
        position: absolute;
        top: 50%;       
        left: 50%;
        width: 100%;
        z-index: 3;
        transform: translate(-50%, -50%);
        max-width: 630px;
    
        @media(max-width: 991px) {
           padding: 0 30px;
        }
    }

    .banner__title, .banner__description {
        color: #fff;
    }

    .banner__title {
        font-size: 60px;
        line-height: 70px;
        font-weight: 700;
        margin-bottom: 15px;
        
        @media(max-width: 991px) {
            font-size: 50px;
            line-height: 60px;
        }
    
        @media(max-width:767px) {
            font-size: 40px;
            line-height: 50px;
        }
    
        @media(max-width:575px) {
            font-size: 30px;
            line-height: 40px;
        }
    }

    .banner__description {
        font-size: 18px;
        line-height: 30px;
        margin-bottom: 42px;
    
        @media(max-width: 400px) {
            margin-bottom: 32px;
        }
    }

    
    .tt-btn {
        padding: 10px 41px;

        &:before {
            transition: all 0.6s ease-in-out;
        }

        &:hover {
            color: #fff;

            &:after {
                border-image-source: linear-gradient(90deg, #fff 100%, #fff 100%);
            }
        }

        &.btn-outline {
            margin-left: 20px;
            color: #fff;
            border-color: #fff;
            
            @media(max-width: 400px) {
                margin-left: 0;
                margin-top: 20px;
            }

             &:before {
                transition: all 0.6s ease-in-out;
            }

            &:after {
                border-image-source: linear-gradient(90deg, #fff 100%, #fff 100%);
            }

            &:hover {
                border-color: $color__theme;

                &:after {
                    border-image-source: linear-gradient(90deg, #2acaff 25%, #13ade6 75%);
                }
            }
        }
    }

    .swiper-slide-active {
        .banner__title {
            animation: fadeInUp 1s both 1s;
        }

        .banner__description {
            animation: fadeInUp 1s both 1.2s;
        }

        .tt-btn {
            animation: fadeInUp 1s both 1.5s;

            &.btn-outline {
                margin-left: 20px;
                color: #fff;
                border-color: #fff;

                &:hover {
                    border-color: $color__theme;
                }
            }
        }
    }

    .swiper-pagination {
        width: auto !important;
        left: auto !important;
        right: 160px;
        bottom: auto !important;
        transform: translateY(-50%);
        top: 50%;
        
        @media(max-width: 1200px) {
            right: 50px;
        }
        
        @media(max-width: 767px) {
            display: none;
        }

        .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.2);
            opacity: 1;
            width: 8px;
            height: 20px;
            border-radius: 6px;
            outline: 0;
            transition: all 0.3s ease-in-out;
            display: block;
            left: auto;
            right: 0;
            margin: 15px 0 !important;

            &.swiper-pagination-bullet-active {
                background: #fff;
                height: 30px;
            }

        }
    }
}