@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body { font-family: "Poppins", sans-serif;}
.bannerWrap {height: 100vh;}
.bannerWrap .swiper-slide {height: auto;}
.bannerGridWrp {background: #000;}
.bannerGridWrp .col {transition: all 1s ease; opacity: 0; position: relative; transform:scale(0.90)}
.swiper-slide-active .bannerGridWrp .col {transform: scale(1); opacity: 1;}




.bannerGridPic {height: 100%; position: relative;}
.bannerGridPic:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; transition: all 1s ease;}

.bannerGridPic img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

.bannerGridTxt {color: white!important; padding: 1rem!important;}
.bannerGridTxt h2 {font-size: 54px; font-weight:  900; color: #fff !important;font-family: "Poppins", sans-serif!important;}
.bannerGridTxt h2 span {opacity: 0; transition: all 0.3s ease-in-out; color: #fff !important;}
.bannerGridWrp .col:hover .bannerGridTxt h2 span {opacity: 1; transition-delay: .5s;}
.bannerGridTxt h3{ color: #7bc86e; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-color: transparent; background-image: linear-gradient(90deg, #7bc86e 17%, #52bbf9 100%); font-family: "Poppins", Sans-serif; font-size: 28px; font-weight: 700;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}

.bannerGridTxt p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; font-size:16px;}
.bannerGridTxt a {font-size: 16px;}
.bannerPic {width: 100%; height: 100%;}
.bannerPic img {width: 100%; height: 100%; display: block; object-fit: cover;}

.bannerTxt {width: 100%; position: absolute; top: 50%; left: -100%; transform: translateY(-50%); color:#fff; transition: all 2s ease-in-out; opacity: 0; visibility: hidden; filter: blur(3.5px);}
.swiper-slide-active .bannerTxt {left: 0; opacity: 1; visibility: visible; transition-delay: .1s; filter: blur(0);}
.bannerTxt .bannerTxtInner {max-width: 700px;}
.bannerTxt .bannerTxtInner h2 {font-weight: 700; font-size: 3rem; color: #fff !important;font-family: "Poppins", sans-serif!important;}

.bannerWrap .swiper-pagination {display: flex; justify-content: center; bottom: 2rem;}
.bannerWrap .swiper-pagination span {display: block; width: 1rem; height: 1rem; background: transparent; border: 1px solid #fff; opacity: 1; transform: scale(.5); transition: all 0.3s ease-in-out;}
.bannerWrap .swiper-pagination span.swiper-pagination-bullet-active {background: #fff; transform: scale(1);}

.bannerCta {color: #fff; position: relative; text-decoration: none; color: inherit;}
.bannerCta:hover {color: inherit;}
.bannerCta::after {content: ''; transition: all 0.3s ease-in-out; vertical-align: middle; display: inline-block; width: 1rem; height: 1rem; background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%2352bbf9' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z' clip-rule='evenodd'/></svg>");
    background-repeat: no-repeat;
    background-size: 100%;}
    .bannerCta:hover:after {margin-left: .5rem;}
 
@media(min-width:991.99px){
    .bannerGridWrp .col:hover {flex: 2; transition-delay: 0!important;}
    .bannerGridTxt {position: absolute; bottom: 10rem; left: 0; width: 100%;}
    .bannerGridWrp .col:hover .bannerGridPic:after {opacity: 0;}

}
@media(max-width:1200px){
    .bannerGridTxt h2 {font-size: 4rem;}
    .bannerGridTxt h3 {font-size: 1.5rem;}
}
@media(max-width:991.99px){
    .bannerGridPic {position: absolute; top: 0; left: 0; width: 100%;}
    .bannerGridTxt h2, .bannerTxt .bannerTxtInner h2 {font-size: 2rem;   position: relative;}
    .bannerGridTxt h2::after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 2rem; height: 2rem; background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4' clip-rule='evenodd'/></svg>");
        background-repeat: no-repeat;
        background-size: 100%;}

    .col.active    .bannerGridTxt h2::after {background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8' clip-rule='evenodd'/></svg>");
        background-repeat: no-repeat;
        background-size: 100%;}


    

    .bannerGridTxt h2 span {opacity: 1;}

    .bannerGridTxtHide {display: none; position: relative; z-index: 1; margin-top: 1rem;}

    .bannerWrap {height: auto;}
}

@media(max-width:575.99px){
    .bannerGridTxt {padding: 2rem 1rem;}
    .bannerGridTxt h2, .bannerTxt .bannerTxtInner h2 {font-size: 1.5rem; }
}