.banner_main{
     position: relative;
     &::after{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background:rgba(22, 109, 77, 0.729);

        clip-path: polygon(0 0, 55% 0, 80% 100%, 0% 100%);
    }

    .banner{
        overflow: hidden;
        .slick-active .bannerItem{
            -webkit-transform: scale(1.15);
            transform: scale(1.15);
        }
        .prev{
            height: 70px;
            width: 70px;
            color: white;
            font-size: 45px;
            background-color: rgba(226, 225, 225, 0.418);
            text-align: center;
            line-height: 70px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 5%;
            z-index: 5;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .next{
            height: 70px;
            width: 70px;
            color: white;
            font-size: 45px;
            background-color: rgba(226, 225, 225, 0.418);
            text-align: center;
            line-height: 70px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            right: 5%;
            z-index: 5;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .bannerItem{
            height: 100vh;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease;
            transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease;
            transition: transform 7000ms ease, opacity 1500ms ease-in;
            transition: transform 7000ms ease, opacity 1500ms ease-in, -webkit-transform 7000ms ease;
            z-index: 1;
        }
    }
    .banner_content{
         position: absolute;
         top: 40%;
         width: 100%;
         left: 0;
         transform: translateY(-40%); 
         z-index: 2;
         h3{
            font-size: 55px;
            font-weight: 900;
            color: $white;
            line-height: 65px;
         }
         h4{
            font-size: 22px;
            font-weight: 400;
            color: $white;
            line-height: 36px;
            padding: 5px 0;
         }
         h5{
            font-size: 28px;
            font-weight: 600;
            color: $white;
            line-height: 30px;
         }
    }
    .ban_card{
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         z-index: 3;
        .ban_CardItem{
            height: 220px;
            width: 100%;
            background-color: #ff4c4cbb;
            text-align: center;
            position: relative;
       .card_wrapper{
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
            h4{
                font-size: 38px;
                font-weight: 700;
                color: #f3f3f3;
                line-height: 48px;
            }
            a{
                font-size: 16px;
                font-weight: 500;
                color: $white;
                padding-top: 5px;
                &:hover {
                   color: $black;
                }
            }     
          }
          .arrow{
            text-align: end;
            position: absolute;
            bottom: 10px;
            right: 30px;
            i{
                font-size: 25px;
                color: $white;

            }
        }  
        }
        .card_2{
         background-color: #078ec8b0;
        }
        .card_3{
         background-color: #07b66abb;
        }
        .card_4{
        background-color: #f8e44bdd;
        }
    }
}