@import url('https://fonts.googleapis.com/css?family=Charmonman|Fondamento|Great+Vibes');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Arizonia');
*{
    margin:0;
    padding:0;
}


html, body {
    overflow-x: hidden;
}
body {
    overflow: hidden !important;
    width: 100%;
    height: 100%;
    font-family: 'Lato', sans-serif;
}

p,li{
    font-size:1.2rem;
    font-weight:300;
}
.max-viewport{
    min-height:100vh;
}
.viewport-60{
    min-height:60vh;
}


#main-nav{
    background-color: #c1877e!important;
    border-bottom:6px solid #140711;
}

.navbar .nav-link{
    font-weight:700;
    font-size:1rem;
    text-transform:uppercase;
    padding-left:1rem !important;
    padding-right:1rem !important;
    color:#fff !important;
}
a.nav-link.active{
    border-left:5px solid #140711;
}

a{
    color:#fff;
}
a:hover{
    color:#fff; 

}



/* header section*/
header {
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('../img/mansionthree.jpg');
    height:100vh;
    background-size:cover;
    background-position:center;
    background-attachment:scroll;
    position: relative;
 
}

i{
    color:#7c221e;
}

.navbar-brand{
    font-family: 'Arizonia', cursive;
  
}
h6.logo{
    font-size:2rem; 

}


a[href^="tel"] {
    color: inherit; /* Inherit text color of parent element. */
    text-decoration: none; /* Remove underline. */
    /* Additional css `propery: value;` pairs here */
  }



/* end of Main Navigation section*/



h1{
font-weight:700;
}

h2,
h3{
    font-weight:400;
    text-transform:uppercase;
   
}
h1{
    color:#fff;
    font-size:2.4rem;
    word-spacing:0.1rem;
    letter-spacing:1px;

}

h2{
    font-family: 'Great Vibes', cursive;
    font-size:2.1rem;
    text-align:center;
    text-transform:capitalize;
}

h2:after{
    display:block;
    height:4px;
    background-color:#7c221e;
    content:"";
    width:100px;
    margin:0 auto;
    margin-top:30px;
}

h3{
    font-size:1.8rem;
    margin-bottom:15px;
    padding-top:10px;
    text-transform:uppercase;
}
h4{
    font-size:1.5rem;
}
/* nav scrolling offset*/
.offset:before{
    height:3.5rem;
    content:"";
    display:block;
}


/*=================================================================
 BUTTONS section
 =================================================================*/
 .svg-inline--fa.fa-w-16,
 .svg-inline--fa.fa-w-18,
 .svg-inline--fa.fa-w-14{
    color:#c1877e;
   float:left;
}

a{
    color:#fff; 
}
a:link,
a:active{
 
    text-decoration:none;
}
.navbar-toggler{
       outline: none !important;
        border: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    
}


/* buttons*/
.btn:link,
.btn:visited,
input[type=submit]{
    display:inline-block;
    padding:10px 30px;
    font-weight:400;
    text-decoration: none;
    transition:background-color 0.2s, border 0.2s, color  0.2s;
    margin-bottom:6px;
}
button.form-control.btn,
.btn-full:link,
.btn-full:visited,
input[type=submit]
{  
    background-color:#7c221e;
    border:1px solid #7c221e;
    color:#fff;

}


.btn{
    background-color:#7c221e;
    border:1px solid #fff;
    color:#fff;
    text-transform:uppercase;
}
.btn-ghost:link,
.btn-ghost:visited{
    border:1px solid #fff;
    color:#fff;
}

.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active{
    background-color:#c1877e;
}


.btn-full:hover,
.btn-full:active,
input[type=submit]{
    background-color:#7c221e;
    
    
}

.btn-ghost:hover,
.btn-ghost:active
{
    background-color:#7c221e;
    color:#fff;
 
   
}
.btn-back-to-top{
    position:fixed;
    bottom:20px;
    right:20px;
    font-size:22px;
    padding:3px 15px;
    border-radius:0;
    display:none;
    background-color:#000;
   
         }
 
/*================================================================================
SECTION SERVICES
==================================================================================*/







/*================================================================================
SECTION SHOW-MORE
==================================================================================*/
 .show-more{
    padding:50px;
    background-color:#c1877e;
}

.decor-showcase{
    list-style:none;
    width:100%;
}

.decor-showcase li{
    display:block;
    float:left;
    width:33.3%;
}

.decor-photo{
    width:100%;
    margin:0;
    overflow:hidden;
    background:#000;
}

.decor-photo img{
    opacity:0.7;
    width:100%;
    height:auto;
    transform:scale(1.15);
    transition:transform 0.5s, opacity 0.5s;
}

.decor-photo img:hover{
    transform:scale(1.03);
    opacity:1;
}

/*================================================================================
SECTION WORKS
==================================================================================*/

.section-works{
    background-color:#f4f4f4;
}
.work-photo{
   
    width: 80%;
    height:auto;
    transition:transform 0.5s;
}

.work-photo:hover{
    transform:scale(1.03);
    
}


.works-steps div{
    margin-top:30px;
    color:#fff;
    border:2px solid #7c221e;
    display:inline-block;
    height:35px;
    width:30px;
    text-align:center;
    padding:5px;
    float:none;
    font-size:13px;
    margin-right:25px;
    background-color:#7c221e;
}

.works-steps p{
margin-top:20px;
margin-bottom:30px;
}





/*================================================================================
SECTION CONTACT FORM
==================================================================================*/
#contact {
    background-color:#140711;
}

#contact-left{
    padding-top:35px;
}
#contact-right{
    padding-top:35px;
}

#contact form{
    padding:5px;
    color:#fff;
    position:relative;
}


#contact h2{
    color:#fff;
}

#contact p{
color:#fff;

}

h4{
text-transform:uppercase;
color:#fff;
}

li{
    list-style: none;

}

form {
    margin-top:20px;
    transition: all 4s ease-in-out;

}

.form-control {
    width:350px;
    background:transparent;
    color:#fff;
    font-size:16px;
    text-transform:uppercase;
}


input{
    height:10px
}



form .submit:hover{
    background-color:rgb(87, 6, 6);
    cursor:pointer;
}

/*=================================================================
 footer section
 =================================================================*/

footer{
    background-color:#c1877e;
    padding:30px;
}

footer p{
    color:#fff;
    margin-top:20px;

}