.jws-banner {
    &.layout1 {

        .jws-banner-image {  
        transition: 0.3s all;  
        background-size: cover;
        background-position: center;
        position: absolute;
        width: 100%;
        height: 100%;
        }
        .jws-banner-inner {
            position: relative;
            border-radius: 5px;
            overflow: hidden;
            &:before {
                content:"";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: -moz-linear-gradient( 90deg, rgb(19,19,19) 0%, rgba(35,36,41,0) 100%);
                 background-image: -webkit-linear-gradient( 90deg, rgb(19,19,19) 0%, rgba(35,36,41,0) 100%);
                  background-image: -ms-linear-gradient( 90deg, rgb(19,19,19) 0%, rgba(35,36,41,0) 100%);
                  z-index: 1;
            }
            &:hover {
              .jws-banner-image  {
                    transform: scale(1.05);
                    -webkit-transform: scale(1.05);
              }  
            }
        }
        .jws-banner-content {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;  
            z-index: 2;
        }
        header {
            position:absolute;
            padding: 24px 0 0 21px;
        }
        footer {
            position:absolute;
            bottom: 0;
             padding: 0px 0 19px 23px;
        }
        .text-1 {
            font-size:13px;
            color: #ffffff;
        }
        .text-2 {
            font-size:20px;
            display: block;
            color: #ffffff;
            margin-bottom: -2px;
        }
        .text-3 {
            font-size:14px;
            color: #ffffff;
        }
    }
    &.layout2 {
        .jws-banner-inner { 
             position: relative;
            overflow: hidden;
            background-position: center;
            background-size: cover;
            }
       .jws-banner-content {
            position: absolute;
            width: 100%;
            top: 50%;
            z-index: 2;
            padding-left: 45px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            > span {
                display:block;
            }
            .text-1 {
              color:var(--main);
              font-weight: 500;
              margin-bottom: 18px;  
            }
            .text-2 {
               color: var(--light);
                font-weight: 500;
                font-size: 30px;
                line-height: 40px;
                margin-bottom: 29px;
                    margin-top: -1px;
            }
            .text-3 {
              color:var(--light);
              font-weight: 500;
              border-bottom: 1px solid var(--light);
              display: inline-block;
              line-height: 13px;  
            }
        } 
    }
    &.layout3 {
        .jws-banner-inner { 
             position: relative;
             overflow: hidden;
             margin: 0 auto;
             &:hover {
                .jws-banner-content {
                    transform: translateY(0);
                    -webkit-transform: translateY(0); 
                     .text-3 {
                        opacity: 1;
                    } 
                }
               
             }   
            }
       .jws-banner-images {
            position: absolute;
            width: 100%;
            height: 100%;
              background-position: center;
            background-size: cover;
       } 
       .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            z-index: 1;
       }     
       .jws-banner-content {
            position: absolute;
            width: 100%;
            bottom: 0;
            z-index: 2;
            padding-left: 38px;
            padding-bottom: 27px;
            transition: 0.3s all;
            transform: translateY(28px);
            -webkit-transform: translateY(28px);
                will-change: transform;
            > span {
                display:block;
            }
            .text-2 {
                color: var(--light);
                font-weight: 700;
                font-size: 20px;
                margin-bottom: 7px;
                margin-top: -1px;
            }
            .text-3 {
              color:var(--light);
              display: inline-block;
              line-height: 13px; 
              opacity: 0;
              transition: 0.3s all; 
              span {
                margin-left:7px;
              }
            }
        } 
    }
      .slick-dots {
        margin-top: 35px !important;
        li {
            border: none;
            width: 25px;
            height: 20px;
            margin: 0 5px;
            border-radius: 0;
            background: transparent !important;
            padding-top: 10px;
            button {
                display: block;
                border: none;
                width: 25px;
                height: 2px;
                border-radius: 0;
                background: #dedede;
                font-size: 0;   
            }
        &:before {
            display:none;
        }
        &.slick-active {
            button {
              background:  var(--main);  
            }
            
        }
    }
  } 
}
.jws-banner-nav {
        text-align: right;
        margin-bottom: 42px;
   .jws-carousel-btn {
        width: 45px;
        height: 45px;
        color: var(--heading);
        font-size: 32px;
        border: 2px solid var(--main);
        display:inline-block !important;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        transition: .3s all;
        background: #ffffff;
        &:hover {
            background: var(--main);
            color: #ffffff;  
        }
   } 
   .prev-item {
    margin-right: 16px;
   }
}