.gsc-listing-banner-carousel{
   &.style-1{
      .listings-banner-item-content{
         position: relative;
         margin: 15px 0 30px;
         .number-listings{
            display: inline-block;
            background: $theme-color;
            color: $white;
            position: absolute;
            top: -15px;
            left: 30px;
            z-index: 11;
            font-size: 12px;
            padding: 2px 20px;
            border-radius: 4px;
         }
         .link-overlay{
            position: absolute;
            @include size(100%, 100%);
            top: 0;
            left: 0;
            z-index: 11;
         }
         .banner-image{
            position: relative;
            z-index: 1;
            &:after{
               content: '';
               position: absolute;
               background-image: -webkit-linear-gradient(to bottom,transparent 30%,rgba(0, 0, 0, .9) 100%);
               background-image: -moz-linear-gradient(to bottom,transparent 30%,rgba(0, 0, 0, .9) 100%);
               background-image: -ms-linear-gradient(to bottom,transparent 30%,rgba(0, 0, 0, .9) 100%);
               background-image: -o-linear-gradient(to bottom,transparent 30%,rgba(0, 0, 0, .9) 100%);
               background-image: linear-gradient(to bottom,transparent 30%,rgba(0, 0, 0, .9) 100%);
               @include size(100%, 100%);
               top: 0;
               left: 0;
               z-index: 1;
               transition: all 0.35s;
            }
         }
         .banner-content{
            position: absolute;
            bottom: 0;
            left: 0;
            @include size(100%, auto);
            z-index: 11;
            padding: 30px;
            text-align: center;
            @include transition(all 0.35s);
            &:before, &:after{
               content: '';
               position: absolute;
               width: 0;
               height: 50%;
               background: $white;
               transition: all 0.35s;
               z-index: 1;
            }
            &:before{
               top: 0;
               left: 0;
            }
            &:after{
               bottom: 0;
               right: 0;
            }
            .subtitle{
               font-family: $font-second;
               color: $theme-color;
               font-size: 34px;
               position: relative;
               z-index: 11;
            }
            .title{
               color: $white;
               font-size: 42px;
               font-weight: 700;
               margin: 0;
               position: relative;
               z-index: 11;
               @include media-breakpoint-down(xl){
                  font-size: 36px;
               }
               @include media-breakpoint-down(lg){
                  font-size: 30px;
               }
            }
            .link-term{
               @include size(46px, 46px);
               text-align: center;
               line-height: 45px;
               background: $theme-color;
               color: $white;
               font-size: 22px;
               border-radius: 50%;
               position: absolute;
               top: 0;
               right: 30px;
               z-index: 11;
               opacity: 0;
               transition: all 0.35s;
            }
         }
         &:hover{
            box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
            .banner-content{
               &:before, &:after{
                  width: 100%;
               }
               .title{
                  color: $black;
               }
               .link-term{
                  opacity: 1;
                  top: -23px;
               }
            }
         }
      }
      .owl-item.center{
         .listings-banner-item{
            .listings-banner-item-content{
               box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
               .banner-content{
                  &:before, &:after{
                     width: 100%;
                  }
                  .title{
                     color: $black;
                  }
                  .link-term{
                     opacity: 1;
                     top: -23px;
                  }
               }
            }
         }
      }
   }
   &.style-2{
      .listings-banner-item-content{
         border-radius: 4px;
         overflow: hidden;
         position: relative;
         .banner-content{
            padding: 30px;
            background: #F0F3F6;
            text-align: center;
            position: relative;
            &:before, &:after{
               content: '';
               position: absolute;
               width: 0;
               height: 2px;
               bottom: 0;
               background: $theme-color;
               transition: all 0.35s;
               z-index: 1;
            }
            &:before{
               left: 50%;
            }
            &:after{
               right: 50%;
            }
            .title{
               margin: 0;
               font-size: 20px;
               font-weight: 600;
            }
            .number-listings{
               font-size: 14px;
               font-weight: 500;
            }
            .link-term{
               @include size(46px, 46px);
               text-align: center;
               line-height: 45px;
               background: $theme-color;
               color: $white;
               font-size: 18px;
               border-radius: 50%;
               position: absolute;
               top: 0;
               right: 30px;
               z-index: 11;
               opacity: 0;
               transition: all 0.35s;
            }
         }
         .link-overlay{
            position: absolute;
            @include size(100%, 100%);
            top: 0;
            left: 0;
            z-index: 11;
         }
         &:hover{
            box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
            .banner-content{
               background: $white;
               &:before, &:after{
                  width: 50%;
               }
               .title{
                  color: $black;
               }
               .link-term{
                  opacity: 1;
                  top: -23px;
               }
            }
         }
      }
      .owl-item.center{
         .listings-banner-item{
            box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
            .banner-content{
               background: $white;
               &:before, &:after{
                  width: 50%;
               }
               .title{
                  color: $black;
               }
               .link-term{
                  opacity: 1;
                  top: -23px;
               }
            }  
         }
      }
   } 
   &.style-3{
      .listings-banner-item-content{
         border-radius: 4px;
         overflow: hidden;
         position: relative;
         &:after{
            content: '';
            background: $black;
            opacity: 0.36;
            position: absolute;
            @include size(100%, 100%);
            top: 0;
            left: 0;
            z-index: 1;
         }
         .banner-content{
            padding: 30px;
            text-align: center;
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 11;
            top: 50%;
            transform: translateY(-50%) scale(1);
            opacity: 1;
            transition: all 0.35s;
            .title{
               margin: 0;
               font-size: 30px;
               font-weight: 700;
               color: $white;
            }
         }
         .banner-hover{
            position: absolute;
            width: 100%;
            left: 0;
            top: 50%;
            transform:translateY(-50%) scale(0);
            z-index: 11;
            text-align: center;
            opacity: 0;
            transition: all 0.35s;
            padding: 15px 20px;
            .subtitle{
               font-size: 18px;
               color: $white;
               margin: 0 0 15px;
            }
            .number-listings{
               font-size: 12px;
               font-weight: 600;
               font-family: $font-second;
               color: $white;
               background: $theme-color;
               padding: 2px 20px;
               display: inline-block;
               border-radius: 4px;
               letter-spacing: 0.5px;
            }
         }
         .link-overlay{
            position: absolute;
            @include size(100%, 100%);
            top: 0;
            left: 0;
            z-index: 11;
         }
         &:hover{
            box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
            &:after{
               opacity: 0.6;
            }
            .banner-content{
               opacity: 0;
               transform:translateY(-50%) scale(0);
            }
            .banner-hover{
               opacity: 1;
               transform:translateY(-50%) scale(1);
            }
         }
      }
   }
}