/* BANNER */
.banner {width: 100%;overflow: hidden;position: relative;}    
.bannertext {position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100%;z-index: 1;/*background-color: hsl(0deg 0% 0% / 45%);*/}
.webox {width: 100%;;position: relative;z-index: 1;}
.hmbo_wrap {display: flex;align-items: center;height: 100%;}

.js_hmbanner [class*="heading-"],
.js_hmbanner p { 
    color: var(--white);
}
.js_hmbanner .heading-20{
    line-height: 28px;
}

.js_hmbanner.slick-dotted.slick-slider{
    margin-bottom: 0;
}
.js_hmbanner {height:800px;}
.js_hmbanner .slide-img > img {width: 100%;height:800px;object-fit: cover;}

.js_hmbanner .slidediv video {
    object-fit: fill;
    height: 800px;
}

.js_hmbanner .slick-dots{
    bottom:15px;
}
.js_hmbanner .slick-dots li button{
    width: 20px;
    height: 20px;
    border:0;
    background: transparent;
    border-radius: 0;
}
.js_hmbanner  .slick-dots li{
    width: 20px;
    height: 20px;
}
.js_hmbanner .slick-dots li button:hover::after,
.js_hmbanner .slick-dots li.slick-active button::after{
    background: url(../../assets/images/svg/slick-house-icon-active.svg) no-repeat;
}
.js_hmbanner .slick-dots li button:before{
    content: none;
}

.js_hmbanner .slick-dots li button::after{
    content: "";
    position: absolute;
    top:0;
    left:0;
    right: 0;
    background: url(../../assets/images/svg/slick-house-icon.svg) no-repeat;
    width: 20px;
    height:20px;
}

.hm-portfolio .resp-tabs-list li:hover{
    background: #fff !important;
    color: var(--secondary-color) !important;
}


.hm-projects ,
.how-it-work ,
.hm-services{
    overflow: hidden;
}

.hm-projects .heading-40{
    max-width: 500px;
}

/* ******** || HOME CONTENT ||   ******** */

.hm-left{
    width:560px;
    padding-right: 100px;
}
.hm-right{
    width: calc(100% - 560px);
    column-count: 2;
    column-gap: 100px;
}
.hm-right .img-block{
    width: 520px;
}
.img-block-right{
    width: 320px;
    margin: 0 0 0 auto;
}
.content-wrap{
    margin: 50px 0 70px;
}
.services-container{
    position: relative;
    overflow: hidden;
}
/*.services-container > img{
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}
.services-container:hover > img{
transform: scale(1.1);
}*/


.services-container .blog-grid li{
    width: 50%;
}

.hm-top-content .hm-left .head-xs.head-line{
    position: relative;
}
.hm-top-content .hm-left .head-xs.head-line h2{
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.hm-top-content .hm-left .head-xs.head-line:before{
        content: "";
    position: absolute;
    top: 7px;
    left: -215px;
    width: 180px;
    height: 1px;
    background: #808080;
}




  .banner-content{
    opacity: 0;
    transform: translateY(20px);
    max-width: 745px;
  }




    



#logo {
      width: 200px;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      animation: moveLogo 1s ease-in-out 3.5s forwards;
      
    }

    #logo path,
    #logo line {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: draw 6s ease forwards;
    }

    #logo path:nth-child(1) { animation-delay: 0.4s; }
    #logo line             { animation-delay: 0.8s; }
    #logo path:nth-child(3) { animation-delay: 1.2s; }
    #logo path:nth-child(4) { animation-delay: 1.8s; }

    @keyframes draw {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes moveLogo {
      to {
        opacity: 0;
        transition: all 0.5s linear;
      }
    }

/* Content Reveal */
    #mainContent {
      opacity: 0;
      text-align: left;
      animation: fadeInUp 1s ease forwards;
      animation-delay: 4.5s;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


/* START MEDIA QUERY */

@media screen and (max-width: 1599.98px){

    /* ***** || TOP CONTENT || *****  */
    .hm-left {width: 495px;padding-right: 60px;}
    .hm-right {width: calc(100% - 495px);column-gap: 50px;}
    .hm-right .img-block {width: 480px;}
    .img-block-right {width: 300px;}
    .content-wrap {margin: 30px 0 40px;}

    /* ***** || HoW it work || *****  */
    
    /*.work-step-grid{column-gap: 60px;}*/
     
  }

@media screen and (max-width: 1439.98px){


    /* ***** || Banner || *****  */
    .js_hmbanner , .js_hmbanner .slide-img > img{height:700px;}

    .js_hmbanner .slidediv video {
        height: 700px;
    }

    /* ***** || TOP CONTENT || *****  */
    .hm-left {width: 350px;padding-right: 30px;}
    .hm-right {width: calc(100% - 350px);column-gap: 30px;}
    .hm-right .img-block {width: 440px;}
    .img-block-right {width: 270px;}
    .content-wrap {margin: 30px 0 15px;}
    .hm-left .heading-40{font-size: 28px;}

  /* ***** || HoW it work || *****  */

  /*.how-left{padding-right: 60px;width: calc(100% - 150px);}
  .how-right {width: 150px;}*/

  .hm-top-content .hm-left h1{font-size: 28px;}
   
}

@media screen and (max-width: 1199.99px){

    /* ***** || TOP CONTENT || *****  */
    .hm-left {width: 100%;padding-right: 0;margin-bottom: 30px;}
    .hm-left .badge {position: relative;}
    .hm-right {width:100%;column-gap: 30px;}
    .hm-right .img-block , .img-block-right{width: auto;}

    /* ***** || HoW it work || *****  */

    /*.how-left{padding-right: 0;width: 100%;}
    .how-right {display: none;}
    .house-logo{right:0;}
    .work-step-grid{margin-top: 35px;column-gap: 30px;}
    .work-step-grid .step-icon {margin-bottom: 15px;}
    .hm-top-content .hm-left .head-xs.head-line:before{
        content: none;
    }*/
   
}

@media screen and (max-width: 991.99px){
    .js_hmbanner .heading-20{
        font-size: 16px;
        line-height: 1.4;
    }
    .js_hmbanner, .js_hmbanner .slide-img > img ,
    .js_hmbanner .slidediv video{
        height: 550px;
    }
    .hm-top-content .hm-left h1 {font-size: 22px;}


     /* ***** || TOP CONTENT || *****  */
     .hm-right{column-count: 1;}
     .hm-right .img-block{margin-bottom: 30px;}

    /* ***** || HoW it work || *****  */
    /*.house-logo{display: none;}
    .how-left .intro {max-width: 100%;}
    .work-step-grid{grid-template-columns: repeat(2, 1fr);row-gap: 20px;}*/
   
}
@media screen and (max-width: 767.99px){

    /* ***** || Banner || *****  */
    .js_hmbanner , .js_hmbanner .slide-img > img ,
    .js_hmbanner .slidediv video{height:500px;}

    .hm-top-content .hm-left .head-xs.head-line h2{
        margin-bottom: 20px;
    }
    .logo-icon.mb-30{
        margin-bottom: 20px;
    }
    

    /* ***** || HoW it work || *****  */
    /*.work-step-grid{grid-template-columns: repeat(1, 1fr);}*/
   
}


@media screen and (max-width: 575.99px){
    /* ***** || Banner || *****  */
    .js_hmbanner , .js_hmbanner .slide-img > img ,
    .js_hmbanner .slidediv video{height:450px;}
    .services-container .blog-grid li{width: 100%;}
}