@import url('https://fonts.googleapis.com/css2?family=Hubot+Sans:ital,wght@0,200..900;1,200..900&family=Italianno&family=Jost:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap');


.fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
}

.fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
}

.fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
}

.fade-in{
    opacity:0;
    transition: all 1.3s ease-in;
}

.active-left,.active,.active-right,.active-down{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
}



.fadein{
opacity: 0;
}   


/* End Animations*/

.navbar{
    margin-bottom: -7em;
    background-color: rgba(0, 0, 0, 0.45)!important;
    box-shadow: none!important;
    position: relative;
    z-index: 10;

}

h1,h2,h3,h4,h5{
    font-family: 'Hubot Sans';
}

p{
    font-family: 'Hubot Sans';
}
.navbar li{
    margin: 0em 0.6em;
}

.navbar li a{
    font-family: 'Hubot Sans';
    color: white;
    border-bottom: 1px solid transparent;
}

.navbar li a.active{
    color: #e48b07!important;
    border-bottom: 1px solid #e48b07;
}

.navbar li a:hover{
    color: #e48b07!important;
    border-bottom: 1px solid #e48b07;
    transition-duration: 0.3s;
}

.carousel-1{
    background: url('../img/wesli-hero.jpg'), rgb(255,255,255) linear-gradient(267deg, rgba(255,255,255,0) 0%, rgba(2,4,5,1) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    height: 90vh;
    display: flex;
    align-items: center;
    z-index: -10;
    
}

.carousel-2{
    background: url('../img/hero-2.jpg'),rgb(255,255,255) linear-gradient(267deg, rgba(255,255,255,0) 0%, rgba(2,4,5,1) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    height: 90vh;
    display: flex;
    align-items: center;
    z-index: -10;
    
}

.carousel-3{
    background: url('../img/hero-3.jpg'), rgb(255,255,255) linear-gradient(267deg, rgba(255,255,255,0) 0%, rgba(2,4,5,1) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    height: 90vh;
    display: flex;
    align-items: center;
    z-index: -10;
    
}




.carousel-caption{
    bottom: 25%;
    text-align: start;
    
}

.carousel-caption p {
    font-family: 'Hubot sans';
    max-width:35%;
}

.carousel-caption h2{
    font-family: 'Italianno';
    font-weight: 300;
}

.carousel-caption h5{

    font-family: 'Hubot sans';
    font-weight: 600;
}

.main-btn{
    background-color: #e48b07;
    font-family: 'Hubot Sans';
    color: white;
    font-weight: 400;
    letter-spacing: 2px;
    border-radius: 0px;
    padding: 1em 2em;
}

.main-btn:hover{
    background-color: #df8633;
    color: black;

    scale: 1.05;
}



.about-img{
    background: url('../img/house-anim.jpg'), rgb(255,255,255) linear-gradient(267deg, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    

}

.services-bg{
    background: url('../img/bg-wesli.jpg')rgba(0, 0, 0, 0.75);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    
}

.item{
    border: 2px solid rgba(243, 151, 30, 0.616);
}



.owl-nav .owl-next{
    position: absolute;
    top: calc(45% - 25px);
    right: -40px;
    opacity: 1;
    font-size: 22px!important;
    color: rgba(190, 190, 190, 0.829)!important;
    z-index: 1;
    width: 40px;
    background-color: black!important;
    color: orange;
    border: 2px solid rgb(238, 238, 238)!important;
}

.owl-nav .owl-prev{
    position: absolute;
    top: calc(45% - 25px);
    color: rgba(190, 190, 190, 0.829)!important;
    left: -40px;
    opacity: 1;
    font-size: 22px!important;
    z-index: 1;
    width: 40px;
    background-color: black!important;
   
    border: 2px solid #ffffff!important;
}

.owl-nav .owl-next:hover{
    color: white!important;
}

.owl-nav .owl-prev:hover{
    color: white!important;
}


.content-border{
    border: 2px solid #242323;
    padding:3em 2em;
    padding-bottom: 1em;
    transition-duration: 0.3s;

}
.img-circle{
    background-color: #1f1f1f;
    border-radius: 50%;
    width: fit-content;
    padding: 1em;
    margin-bottom: -3em;
    border: 2px solid #1f1f1f;
    position: relative;
    z-index: 10;
    transition-duration: 0.3s;

}

.why-box:hover{
   
}

.why-box:hover .content-border{
   background-color: #1f1f1f;
   color: white;
   transition-duration: 0.3s;
   box-shadow: rgba(233, 231, 231, 0.65) 0px 5px 15px;
}
.why-box:hover .img-circle{
    border: 2px solid white!important;
}

.number-box{
    background-color: #ffba3b;
    width: fit-content;
    border-radius: 50%;
    padding: 0.2em 1.4em;
   
    color: white;
    margin-bottom: -3em;
    margin-left: -2em;
    z-index: 10;
    position: relative;
}

.service-box,.contact-box{
    background-color: rgba(27, 26, 26, 0.849);
    color: white;
    padding: 2em;
    border-radius: 10px;
}
.service-box:hover{
    background-color: #1f1f1f;
    box-shadow: rgba(224, 224, 224, 0.25) 0px 30px 60px -12px inset, rgba(92, 90, 90, 0.3) 0px 18px 36px -18px inset;
    transition-duration: 0.3s;
}


@media only screen and (max-width: 960px) {
    .carousel-caption {
      max-width: 100wh;
    }
    .carousel-caption p{
        max-width: 100%;
    }
    .navbar{
        background-color: rgba(0, 0, 0, 0.99)!important;
    }
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
      }
      .phone-nav{
        padding: 0.6em;
      }
    .hr-remove{
        display: none;
    }  
    .about-title{
        padding: 0px!important;
    }
      
    .about-img{
        width: 100%!important;
        margin-top: 1em;
    }
    .owl-nav .owl-next{
        position: absolute;
        top: calc(100% + 10px);
        right: 5em;
    }
    .owl-nav .owl-prev{
        position: absolute;
        top: calc(100% + 10px);
        left: 5em;
    }
    .number-box{
        margin: 0em;
        margin-bottom: -1.2em;
        padding: 0.4em 1.5em!important;
    }
    .why-box{
        padding: 0.6em;
    }
    .foot-pow{
        display: flex;
        justify-content: center!important;
        margin: 0.8em 0em;
    }
  }



#services-head{
    background: url('../img/renovation.jpg')rgba(0, 0, 0, 0.65);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    height: 65vh;
}  



#work-head{
    background: url('../img/work-wesli.jpg')rgba(0, 0, 0, 0.65);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    height: 65vh;
}  

#about-head{
    background: url('../img/hero-2.jpg')rgba(0, 0, 0, 0.65);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    height: 65vh;
}