HEX
Server: Apache/2.4.52 (Ubuntu)
System: Linux spn-python 5.15.0-89-generic #99-Ubuntu SMP Mon Oct 30 20:42:41 UTC 2023 x86_64
User: arjun (1000)
PHP: 8.1.2-1ubuntu2.20
Disabled: NONE
Upload Files
File: /var/www/html/CW-techs/wp-content/themes/cw-techs/scss/banner.scss
@import 'partials';
.banner-slider{
background-color: #18181A;
position: relative;
.custom-container2{
  max-width: 1440px;
    @media ($sm-1481){
        max-width: 1300px;
    }
    //  @media (max-width:1400px){
    //     max-width: 1200px;
    // }
    @media ($sm-767){
        max-width: 100%;
    }
}

  .slider-inner{
    .inner-sec{
      
        display: flex;
        justify-content: space-between;
        background-repeat: no-repeat;
        background-position: right;
             @media($sm-767){
        flex-direction: column;
      }
        
      }
    .slide1{
        padding: 218px 0px 165px 0px;
      background-repeat: no-repeat;
      background-position: right;
      background-size: cover;
      // background-size: 50% auto;
      @media($sm-1679){
        padding: 180px 0px 140px 0px;
      }
      @media($sm-1441){
        padding: 160px 0px 120px 0px;
      }
       @media($sm-1281){
        padding: 150px 0px 90px 0px;
      }
  
      @media($sm-767){
        flex-direction: column;
        padding: 130px 0px 90px 0px;
        padding-bottom: 0px;
      }
      .content{
        max-width: 550px;
        @media($sm-1281){
          max-width: 40%;
        }
        @media($sm-991){
          max-width: 50%;
        }
        @media($sm-767){
          width: 100%;
          max-width: 100%;
          padding-bottom: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
         padding: 0px 100px;
          flex-direction: column;
        }
        @media($sm-579){
          max-width: 100%;
           padding: 0px 30px;
        }
        .title{
          text-align: left;
          margin-bottom: 0px;
          padding-bottom: 14px;
          span{
            color: $primary;
            font-weight: 700;
          }
          @media($sm-767){
            text-align: center;
          }
          @media($sm-579){
            br{
              display: none;
            }
          }
        }
        .subtitle{
        font-family:$primary-font;
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0%;
        // text-transform: capitalize;
        color: #797993;
        padding-bottom: 33px;
        margin-bottom: 0px;
        @media($sm-1679){
          font-size: 16px;
          line-height: 24px;
          padding-bottom: 28px;
        }
        @media($sm-1441){
          font-size: 14px;
          line-height: 22px;
          padding-bottom: 25px;
          padding-right: 60px;
        }
        @media($sm-1199){
     
          padding-bottom: 20px;
        }
         @media($sm-991){
  
          padding-bottom: 15px;
        }
        @media($sm-767){
          padding-right: 0px;
          text-align: center;
        }

        }
      }
      
    .product-img{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 607px;
    @media($sm-1679){
        height: 480px;
    }
     @media($sm-1481){
          //  height: 509px;
        width: 909px;
    }
     @media($sm-1281){
                height: 450px;
        width: 775px;
    }
     @media($sm-1199){
              height: 400px;
        width: 734px;
    }
        @media($sm-991){
        height:319px;
        width: 423px;
    }
  
    @media($sm-767){
      position: unset;
      width: 100%;
     
    }
      @media($sm-579){
      height: 233px;
    }
    img{
      height: 100%;
      width: 100%;
          @media($sm-1481){
     object-fit: cover;
    }

    }
      }
          .mob-img{
      display: none;
      @media($sm-1481){
        display: block;
      }
    }
    .desk-img{
       @media($sm-1481){
        display:none;
      }
    }
    }
  }
}


// .sec-btn{
//     width: 225px;
//     height: 60px;
//     border: 0.75px solid #1C1C1F;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     background-color: #CD6429 !important;
//     color: #fff !important;
//     font-weight: 400;
//     font-size: 16px;
//     border-radius: 60px;
//     text-decoration: none;
//     justify-content: space-between;
//     padding: 21px 22px;
//     overflow: hidden;
//     position: relative;
//     span{
//         position: relative;
//         z-index: 1;
//     }
//     &::after{
//         content: "";
//         width: 0%;
//         height: 100%;
//         background-color: $white !important;
//         color: #CD6429 !important;
//         transform: translateX(-100%);
//         transition: width 0.2s linear;
//         position: absolute;
//         left: 0px;
//     }
//     &:hover{
//        color: #CD6429 !important;
//         &::after{
//         transform: translateX(0);
//         width: 100%;
//         border-radius: 30px;
//           color: #CD6429 !important;
//         }
//     }
// }


//