*{
    margin:0;
    padding:0;
}
body{
    margin:0;
    padding:0;
    font-family: 'Raleway', sans-serif;
}
a{
    text-decoration:none;
    color:inherit;
}

.button:hover{
    background:#5cdb95;
    box-shadow:5px 10px 45px 2px rgba(0,0,0,0.5);
    color: #262626;
}
.wrapper{
    max-width:100%;
    /* width:100; */
    min-width:320px;
    margin:0;
    padding:0;
    
}

.container{
    max-width:100%;
   
}
.hero-header{
    max-width:100%;
    /* background:#05386b; */
    height:600px;
    color:#5cdb95;
    background:url('img/designing2.jpg');
    background-size:cover;
    background-position:bottom;
    /* display:flex; */
    position:relative;
}

nav{
    max-width:100%;
    margin:0 auto;
    padding:20px;
    /* display:flex; */
    box-sizing:border-box;
    /* background:#000; */
    align-items:center;
    position:relative;
    z-index:10;
    text-align:center;
}



nav .logo{
    flex:1;
    font-size:2em;
    line-height:2em;
    
    font-weight:bolder;
    border-bottom:.5px solid #999;
}
nav .logo span{
    font-weight:lighter;
}
nav ul{
    margin:0;
    padding:0;
    display:flex;
    justify-content: space-around;
    flex:1;
    list-style:none;
    margin-top:1em;
}

nav ul li{
   padding:0 10px;  
  
}

nav ul li a{
    text-decoration:none;
    color:#fff;
    line-height:2em;
}

nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active{
    color:#5cdb95;
}

.op-layer{
    position:absolute;
    height:auto;
    width:100%;
    background:rgba(0,0,0,0.6);
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
}

.header-content-box{
    position:relative;
    height:400px;
    z-index:11;
    display:flex;
}

.header-contents{
    margin:auto;
    color:#fff;
    text-align:center;
}

.header-contents h1{
    font-size:1.5rem;
}

.header-contents p{
   
    padding:0px;
    font-size:1.4rem;
    font-weight:lighter;
    margin-bottom:40px;
    line-height:1.8;
}

.button{
   
    font-size:1rem;
    color:#5cdb95;
    transition:all .5s ease;
    /* line-height:1.5rem; */
    padding:8px 30px;
    border:2px solid #5cdb95;
    text-transform:uppercase;

}
section{
    /* background:#05386b; */
}
.about{
    width:100%;
    height:500px;
    background:url('background-chair-holiday.jpg');
    background-size:cover;
    position:relative;
}

.about-content{
    width:100vw;
    min-width:320px;
    height:300px;
        /* background:rgba(0,0,0,0.9); */
        background:#232323;
        /* color:#5cdb95; */
        color:#fff;
        position:absolute;
        top:-5em;
        z-index:20;
        padding:40px;
        box-sizing:border-box;
        box-shadow:5px 10px 50px 0px  #232323;
        left:0;
}

.parallax-box{
    transition:initial;
}
.inner-about-content{
    border:1px solid #5cdb95;
    border-right:1px solid #5cdb95;
    border-bottom:1px solid #5cdb95;
    width:100%;
    height:100%;
    padding:20px;
    margin:auto;
    box-sizing:border-box;
    
}

.inner-about-content h2{
    position :absolute;
    top:20px;
    background:#232323;
    padding:0 10px;
    color:#5cdb95;
}

.inner-about-content p{
    font-size:.8em;
    font-weight:lighter;
    line-height:1.65;
    padding-left:10px;
}

.work-sec h2{
    font-size:2rem;
    text-align:center;
    /* background:#262626; */
    line-height:5em;
    /* color:#05386b; */
    color:#737373;
    letter-spacing:5px;
    /* text-transform:uppercase; */
    font-weight:400;
}

.work-container{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap:0px;
    /* grid-auto-rows:minmax(100px, auto); */
    margin:0 auto;
    max-width:1900px;
    min-width:320px;
}

.work-container::after {
    content: "";
    clear: both;
    display: table;
  }
@media (max-width:1096px){
    .work-container{
        grid-template-columns:repeat(2, 1fr);
    }
}
@media (max-width:596px){
    .work-container{
        grid-template-columns:repeat(1, 1fr);
    }
}
.work-box{
    max-width:calc(100%);
    height:300px;
    position:relative;
}
.work-overlay{
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.7);
    width:100%;
    height:0;
    transition:.5s  ease;
    overflow:hidden;
    text-align:center;
}

.work-contents{
    position:absolute;
    white-space: nowrap;
   top:45%;
   left:50%;
   transform:translate(-50%, -50%);
   overflow:hidden;
   padding:20px;
   box-sizing:border-box;
   color:#5cdb95;
   width:100%; 
}

.work-box:hover > .work-overlay{
    height:40%;
}

.work-contents h3{
    display:block;
    /* text-transform:uppercase; */
    color:#fff;
    margin-bottom:25px;
    font-weight:300;
    
}
.work-box img{
    width:100%;
    height:100%;
    overflow:hidden;
    
}

.work-contents p{
    line-height:1.5;
    padding-top:10px;
}

.btn-sml{
    font-size:.8rem;
    margin-top:20px;
}

.like-sec{
    max-width:100%;
    min-width:320px;
    text-align:center;
    /* height:300px; */
    background:#5cdb95;
    color:#000;
    padding:0 0 3em 0;
    box-sizing:border-box; 
}

.like-sec h2{
    font-size:2em;
    font-weight:800;
    letter-spacing:3px;
    line-height:1em;
    padding-top:30px;
}

.like-sec p{
    font-size:1.6rem;
    font-weight:300;
    margin-bottom:2rem;
}

.btn-black{
    background:transparent;
    color:#262626;
    border:2px solid #262626;
    margin-bottom:100px;
}

footer{
    width:100%;
    min-width:320px;
    background:#262626;
    color:#fff;
    padding:30px;
    box-sizing:border-box;
   
}

.foot-wrap{
    width:100%;
    align-items:center;
    text-align:center;
    /* display:flex;
    flex-wrap:wrap; */
    /* justify-content:space-between; */
}



.foot{
  padding:2em 1em;
  border-bottom:.5px solid #333;

}

.foot.one{
    flex:3;
    padding:20px 20px;
    
}
.foot.two{
    flex:1;
}
.foot.three{
    flex:1;
}
.foot.four{
    flex:1;
}

.foot ul{
    margin:0;
    padding:0;
    list-style:none;
}

footer ul li{
    font-size:inherit;
    line-height:1.8;
    font-weight:300;
    
}
.foot h4{
    padding-bottom:1em;
}
.foot p{
    font-size:1rem;
    line-height:1.65;
    padding: 0 20px;
    font-weight:300;
}
footer h5{
    text-align:center;
    font-weight:300;
    color:#bfbfbf;
    letter-spacing:2px;
    margin-top:1em;
}
@media (min-width: 900px){
    .wrapper{
        max-width:1901px;
        margin:0 auto;
    }
   .container{
       max-width:1200px;
       margin:0 auto;
   }
   
    .foot-wrap{
        display:flex;
        flex-wrap:wrap;
        text-align:left;

    }  
    .foot{
        border-bottom:0px solid #262626;
    }
    .header-contents h1{
        font-size:3rem;
    }
    .header-contents p{
   
        padding:0px;
        font-size:2.5rem;
        font-weight:lighter;
        margin-bottom:60px;
    }

    .button{
        font-size:1.5rem;
    }

    .work-sec h2{
        font-size:2.9rem;

    }

    .btn-sml{
        font-size:1rem;
    }

    .like-sec h2{
        font-size:3em;
    }
    .like-sec p{
        font-size:3.1rem;
    }
}

@media (min-width:768px){
    nav{
        display:flex;
        transition:.5s ease;

    }

    nav ul{
        justify-content:flex-end;
        margin-top:0px;
    }

    nav .logo{
        border-bottom:none;
        text-align:left;
    }
}

@media (min-width: 576px){
    .about-content{
        width:300px;
        transition:.2s ease;
        left:5em;
        height:300px
    }
    .inner-about-content p{
        font-size:.9em;
    }
    .inner-about-content{
        box-sizing:content-box;
        width:98%;
        height:98%;
        border-right:30px solid #5cdb95;
        border-bottom:30px solid #5cdb95;
    }
    .like-sec h2{
        font-size:2.5em;
        line-height:2em;
    }
    .like-sec p{
        font-size:2.1rem;
    }
}


@media (min-width: 576px) and (max-width: 900px){
    .header-contents h1{
        font-size:1.9rem;
    }
    .header-contents p{
        font-size:2rem;
    }

    
}