/*-----------------------------------------------------------------------------------
    Template Name:             Builders || Reponsive HTML5 Template
    Template URI:              ....................................
    Description:               ....................................
    CoDer :                    Hassan Rasu. 
    CoDer's Site URL:          ....................................
	Coder's facebook account:  https://web.facebook.com/hassan.rasu
	Coder's mail:              hassanrasu04@gmail.com
	skype ID:                  hassan.rasu4
    Version:                   1.0
-----------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------------
    
      CSS INDEX
    =============
    
    01. IMPORTED FONTS
    02. DEFAULT CSS
    03. PAGINATION
    04. BTN TO TOP CSS
    05. SITE PRELOADER CSS
    06. BREADCROUMB ARES CSS
    07. HEADER TOP AREA CSS
    08. RESPONSIVE MENU CSS
    09. LOGO AREA CSS
    10. MAINMENU AREA CSS
    11. MAIN SLIDER AREA CSS
    12. QOUTES AREA CSS
    13. ABOUT AREA CSS
    14. SERVICE AREA CSS
    15. SINGLE SERVICE CSS
    16. WORK AREA CSS
    17. SINGLE WORK CSS
    18. ABOUT BOTTOM AREA CSS
    19. LATEST BLOG AREA CSS
    20. BLOG PAGE CSS
    21. SINGLE BLOG PAGE CSS
    22. CLIENT SAY AREA CSS
    23. FOOTER AREA CSS
    24. ABOUT PAGE CSS
    25. 404 PAGE CSS
    26. COMINGSOON PAGE CSS
    27. CONTACT PAGE CSS



-------------------------------------------------------------------------------------*/

/* ================================================================================ 

                            01. IMPORTED FONTS

 ================================================================================ */

@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i');

@import url('https://fonts.googleapis.com/css?family=Philosopher:400,400i,700,700i');

@import url('https://fonts.googleapis.com/css?family=Oswald:400,600,700');


/* ================================================================================ 

                            02. DEFAULT CSS

 ================================================================================ */

body {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    line-height: 28px;
    color: #333;
    font-weight: 300
}
html, body{
    height: 100%
}
img {
    max-width: 100%;
    height: auto
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}
a {
    color: #555;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
a:hover, a:focus {
    text-decoration: none;
    color: #555;
}
ul, ol {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}
input[type="submit"] {
    background: #ea9b0f none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-family: "Oswald",sans-serif;
    font-size: 14px;
    font-weight: 400;
    height: 50px;
    letter-spacing: 1px;
    line-height: 25px;
    padding: 10px 20px;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
input[type="submit"]:hover {
    background: #2b2c36 none repeat scroll 0 0;
    color: #fff;
}
.builders-btn {
    background: #ea9b0f none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-family: "Oswald",sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 10px 20px;
    text-transform: uppercase;
}
.builders-btn:hover {
    background: #2b2c36 none repeat scroll 0 0;
    color: #fff;
}
.builders-btn-brdr {
    background: #ea9b0f none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-family: "Oswald",sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 5px 10px;
    text-transform: uppercase;
    border: 2px solid #ea9b0f;
    margin: 0
}
.builders-btn-brdr:hover {
    background: #2b2c36 none repeat scroll 0 0;
    color: #fff;
    border: 2px solid #ea9b0f
}
.builders-section-title{
    margin-bottom: 50px;
    text-align: center;
}
.builders-section-title > h2 {
    font-size: 44px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: capitalize;
}
.builders-section-title > p {
  font-size: 17px;
}
.sp_100 {
    padding: 100px 0;
}
.sp_b {
    padding-bottom: 100px;
}
.sp_t {
    padding-top: 100px;
}
.sp_t_50 {
    padding-top: 50px;
}
.sp_b_50 {
    padding-bottom: 50px;
}
.sp_t_25 {
    padding-top: 25px;
}
.sp_b_25 {
    padding-bottom: 25px;
}
.sp_50 {
    padding: 50px 0;
}
.sp_15{
    padding: 15px 0
}
.sp_25{
    padding: 25px 0
}

/* ================================================================================ 

                            03. PAGINATION

 ================================================================================ */

.pagination {
    margin: 20px 0 0;
}
.pagination-box {
    text-align: center;
}
.pagination a {
    color: #555 !important;
    border: 1px solid #ea9b0f !important
}
.pagination .active > a, .pagination a:hover {
    background: #ea9b0f none repeat scroll 0 0 !important; 
    color: #fff !important
}

/* ================================================================================ 

                            04. BTN TO TOP CSS

 ================================================================================ */

.btntoTop:before {
    color: #fff;
    content: "";
    display: inline-block;
    font: 20px "FontAwesome";
    vertical-align: middle;
}
.btntoTop {
    background-color: #212121;
    border: 2px solid #212121;
    border-radius: 2px;
    bottom: 30px;
    cursor: pointer;
    height: 44px;
    line-height: 36px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: fixed;
    right: 30px;
    text-align: center;
    -webkit-transition: opacity 0.4s ease 0s;
    transition: opacity 0.4s ease 0s;
    width: 44px;
    z-index: 99999;
}
.btntoTop.active {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}
.btntoTop.active:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #e5aa0a;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.btntoTop.active.btntoTop:hover:before {
    color: #e5aa0a;
}

/* ================================================================================ 

                            05. SITE PRELOADER CSS

 ================================================================================ */

.builders-site-preloader {
    background: #fff none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 9999999999;
}
.sk-cube-grid {
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    position: absolute;
    top: 50%;
    width: 40px;
    -webkit-transition: .5s;
    transition: .5s;    
}

.sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #e5aa0a ;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    } 35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1); 
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    } 35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1); 
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    } 35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1); 
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    } 35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    } 
}


/* ================================================================================ 

                            06. BREADCROUMB ARES CSS

 ================================================================================ */

.builders-breadcroumb-area {
    background: #000 none repeat scroll 0 0;
    color: #eee
}
.breadcromb-left {
    margin-top: 27px;
}
.breadcromb-left h2 {
    font-weight: 400;
    font-size: 26px;
    text-transform: capitalize
}
.breadcromb-left > ul {
    margin-top: 10px;
    text-align: left;
}
.breadcromb-left li {
    display: inline-block;
    font-style: italic;
    font-weight: 700;
    margin: 0 5px;
}
.breadcromb-left li a{
    color: #ea9b0f 
}
.breadcromb-left, .breadcromb-right {
    margin-top: 27px;
}
.breadcromb-right > h2 {
    font-weight: 400;
    text-align: right;
    font-size: 26px
}
.breadcromb-right > p {
    font-weight: 700;
    margin-top: 10px;
    text-align: right;
}

/* ================================================================================ 

                            07. HEADER TOP AREA CSS

 ================================================================================ */

.builders-header-top-area{
    background: #2b2c36 none repeat scroll 0 0;
    color: #fff
}
.builders-top-left > p {
    font-weight: 400;
    text-transform: capitalize;
}
.builders-header-top-area ul {
    text-align: right;
}
.builders-header-top-area ul li {
    display: inline;
    margin: 0 5px;
}
.builders-header-top-area ul li a {
    display: inline-block;
    color: #fff
}
.builders-header-top-area ul li a:hover{
    color: #ea9b0f
}

/*===========================================================================

                            08. RESPONSIVE MENU CSS

=============================================================================*/

.builders-responsive-menu{
    display: none;
    position: absolute;
    right: 0;
    top: 0px;
    width: 100%;
    z-index: 9;
}
.slicknav_nav a{
    font-size: 16px;
    margin: 0;
    text-transform: capitalize;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.slicknav_menu {
  background: transparent;
}
.slicknav_menutxt {
    display: none !important;
}
.slicknav_arrow {
    float: right;
}
.slicknav_nav a:hover{
    border-radius: 0;
}
.slicknav_nav .slicknav_row:hover{
    border-radius: 0
}
.slicknav_nav a:hover, .slicknav_nav .slicknav_row:hover {
  background: #ffb606 none repeat scroll 0 0;
}
.slicknav_nav li {
    border-bottom: 1px solid #aaa;
}
.slicknav_nav li:last-child{
    border-bottom: 0px solid #aaa
}
.slicknav_nav {
    border-top: 1px solid #535353;
    background:  #000 none repeat scroll 0 0
}
.slicknav_btn{
    margin-bottom: 15px;
    margin-right: 20px;
    background-color: #000 !important;
    line-height: 0
}
.slicknav_menu .slicknav_icon {
  float: none !important;
    margin: 0

}
.slicknav_icon-bar {
    height: 3px !important;
    margin: 5px 0;
    width: 30px !important;
}
.slicknav_menu .slicknav_icon-bar {
    background-color: #fff;
}

/* ================================================================================ 

                            09. LOGO AREA CSS

 ================================================================================ */

.builders-logo-area {
    padding-bottom: 50px;
    padding-top: 25px;
}
.builders-logo h1 {
    background: #000 none repeat scroll 0 0;
    color: #ea9b0f;
    display: inline-block;
    font-family: "Philosopher",sans-serif;
    font-size: 21px;
    font-weight: 700;
    margin: 8px 0;
    padding: 10px 15px;
    text-transform: uppercase;
    position:relative;
    z-index: 99
}
.builders-logo span {
    color: #eee;
    margin: 0
}
.builders-logo-right {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    float: right;
}
.builders-logo-icon {
    color: #ea9b0f;
    font-size: 30px;
    line-height: 55px;
    margin-right: 13px;
}
.builders-logo-text > h4 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 3px;
    margin-top: 5px;
    text-transform: uppercase;
    color: #555
}
.builders-logo-text p {
    color: #000;
}

/* ================================================================================ 

                            10. MAINMENU AREA CSS

 ================================================================================ */

.builders-mainmenu-area {
    margin-top: -40px;
    min-height: 70px;
    position: absolute;
    width: 100%;
    z-index: 99;
}
.main-menu {
    min-height: 70px;
    background: #ea9b0f none repeat scroll 0 0
}
.builders-mainmenu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.builders-mainmenu ul li {
    display: inline-block;
    position: relative;
}
.builders-mainmenu ul li a {
    display: block;
    font-weight: 700;
    padding: 22px 10px;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    color: #fff
}
.builders-mainmenu ul li a:hover{
    color: #2b2c36
}
.builders-mainmenu ul .current_page_item > a {
    color: #2b2c36;
}
.builders-mainmenu ul li ul{
    background:#2b2c36 none repeat scroll 0 0;
    border-top: 2px solid #fff;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 100%;
    -webkit-transform:scaleY(0);
            transform:scaleY(0);
    -webkit-transform-origin: 50% 0 0;
            transform-origin: 50% 0 0;
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    visibility: hidden;
    width: 220px;
    text-align: left
}
.builders-mainmenu ul li:hover ul{
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform:scaleY(1);
            transform:scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(.52, 1.64, .85, .92);
            transition-timing-function: cubic-bezier(.52, 1.64, .85, .92)
}
.builders-mainmenu ul li ul li {
    border-bottom: 1px solid #555;
    display: block;
}
.builders-mainmenu ul li ul li:last-child {
    border-bottom: 0px solid #555;
}
.builders-mainmenu ul li ul li a {
    display: block;
    padding: 10px 15px;
    text-transform: capitalize;
    color: #fff !important
}
.builders-mainmenu ul li ul li a:hover{
    background: #ea9b0f none repeat scroll 0 0;
    color: #fff
}
.builders-mainmenu ul li:hover a{
    color: #2b2c36
}
.builders-search-box {
    display: block;
    float: right;
    font-size: 23px;
    line-height: 35px;
    position: relative;
    text-align: right;
    top: 15px;
    width: 100%;
}
.builders-main-search-icon{
    color: #fff
}
.builders-main-search {
    background: #fff none repeat scroll 0 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    padding: 30px;
    position: absolute;
    right: -15px;
    text-align: center;
    top: 150px;
    -webkit-transition: all 0.4s ease 0.4s;
    transition: all 0.4s ease 0.4s;
    visibility: hidden;
    width: 450px;
    z-index: -99;
}
.builders-main-search > form{
    position: relative
}
.builders-search-box:hover .builders-main-search {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    position: absolute;
    right: -15px;
    top: 50px;
    visibility: visible;
    width: 450px;
    z-index: 99;
}
.builders-main-search input[type="search"] {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #000;
    color: #000;
    font-size: 17px;
    height: 50px;
    padding: 7px 75px 7px 7px;
    position: relative;
    width: 100%;
}
.builders-main-search input[type="submit"] {
    position: absolute;
    right: 0px;
    top: 0
}
.main-search-left {
    border-color: rgb(234, 155, 15)  transparent;
    border-style: solid;
    border-width: 110px 73px 0 0;
    content: "";
    height: 100%;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    width: 60%;
    z-index: -999;
}

/* ================================================================================ 

                            11. MAIN SLIDER AREA CSS

 ================================================================================ */

.slide-item-1 {
    background: rgba(0, 0, 0, 0.3) url("slider-1.jpg") repeat scroll 0 0;
}
.slide-item-2 {
    background: rgba(0, 0, 0, 0.3) url("slider-2.jpg") repeat scroll 0 0;
}

.slide-item-3 {
    background: rgba(0, 0, 0, 0.3) url("slider-3.jpg") repeat scroll 0 0;
}
.builders-main-caption{
    background: rgba(0, 0, 0, 0.58) none repeat scroll 0 0
}

.builders-main-slide {
    background-color: #eee;
    background-position: center center;
    background-size: cover;
    height: 560px;
}
.builders-main-caption{
    display: table;
    height: 100%;
    width: 100%;
}
.builders-caption-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    
}
.builders-caption-cell h2 {
    color: #fff;
    font-family: "Oswald",sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: capitalize;
}
.builders-caption-cell p {
    color: #fff;
    font-family: "Oswald",sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 20px 0;
    text-transform: capitalize;
    text-shadow: 0px 0px 2px #000
}
.builders-caption-cell a {
    margin: 0 5px;
}
.builders-slide .owl-prev {
    background: rgba(186, 186, 186, 0.35) none repeat scroll 0 0 ;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 27px !important;
    height: 50px;
    left: 3%;
    line-height: 35px;
    position: absolute;
    top: 45%;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 50px;
    padding: 5px;
    text-align: center
}
.builders-slide .owl-next {
    background: rgba(186, 186, 186, 0.35) none repeat scroll 0 0 ;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 27px !important;
    height: 50px;
    line-height: 35px;
    position: absolute;
    right: 3%;
    top: 45%;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 50px;
    padding: 5px;
    text-align: center
}
.builders-slide .owl-prev:hover, .builders-slide .owl-next:hover{
    background: #ea9b0f none repeat scroll 0 0;
    color: #fff;
}

/* ================================================================================ 

                            12. QOUTES AREA CSS

 ================================================================================ */

.builders-qoutes-area{
    position: relative;
    background: #2b2c36 none repeat scroll 0 0;
}
.builders-qoutes-area h2 {
    color: #fff;
    font-weight: 400;
    text-transform: capitalize;
    margin: 7px 0;
    font-size: 26px
}
.quotes-left {
  text-align: left;
}
.quotes-right {
  text-align: right;
}

/* ================================================================================ 

                            13. ABOUT AREA CSS

 ================================================================================ */

.home-about-right > h2 {
    color: #555;
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: capitalize;
}
.home-about-img-1 > img {
  width: 100%;
}

/* ================================================================================ 

                            14. SERVICE AREA CSS

 ================================================================================ */

.builders-home-service-area, .builders-service-area {
    background: #f9f9f9 none repeat scroll 0 0;
}
.single-service {
    margin-bottom: 50px;
}
.single-serive-img img {
    width: 100%;
}
.single-service > h3 {
    color: #555;
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
    text-transform: capitalize;
}
.single-service > a {
    color: #222;
    font-weight: 700;
}
.single-service > a:hover {
    color: #ea9b0f ;
}
.single-service > a > i{
    padding-left: 5px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}
.single-service > a:hover > i{
    padding-left: 10px
}

/* ================================================================================ 

                            15. SINGLE SERVICE CSS

 ================================================================================ */

.how-it-work-list {
    margin-top: 50px;
}
.list-service {
    margin-bottom: 30px;
}
.list-service > h4 {
    color: #555;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* ================================================================================ 

                            16. WORK AREA CSS

 ================================================================================ */

.single-work {
    margin-top: 30px;
    position: relative
}
.element-item {
    float: left;
    margin: 30px 0 0;
    padding: 0 15px;
    width: 33.33%;
}
.project-btn {
    display: block;
    margin: 15px 0;
    text-align: center;
}
.project-btn > a:hover, .project-btn > a.current {
    background: #ea9b0f none repeat scroll 0 0;
    color: #fff;
}
.project-btn > a.current {
    cursor: default;
}
.project-btn > a {
    border: 1px solid #ddd;
    color: #555;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    margin: 0 5px;
    padding: 5px 15px;
    text-transform: capitalize;
}
.work-img > img {
    width: 100%;
}
.work-img {
    overflow: hidden;
    position: relative;
}
.work-img-overlay{
    background: rgba(0, 0, 0, 0.58)  none repeat scroll 0 0;
    height: 100%;
    position: absolute;
    top: 0;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 50% 0 0;
            transform-origin: 50% 0 0;
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    width: 100%;
}
.single-work:hover .work-img-overlay{
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
            transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.work-img-overlay h4 > a {
    color: #eee;
    font-size: 17px;
    font-weight: 400;
    left: 5%;
    position: absolute;
    text-transform: capitalize;
    top: 70%;
}
.work-img-overlay h4 > a:hover{
    color: #ea9b0f
}

/* ================================================================================ 

                            17. SINGLE WORK CSS

 ================================================================================ */

.single-project-img > img {
    width: 100%;
}
.single-project-text {
    margin-top: 0px;
}
.single-project-text > h3{
    color: #555;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 10px;
    text-transform: capitalize;
}
.single-project-text > ul {
    margin-top: 30px;
}
.single-project-text li{
    background: #eee none repeat scroll 0 0;
    float: none;
    margin: 5px 0;
    padding: 10px 15px;
    text-transform: capitalize
}
.single-project-text li > i{
    color: #ea9b0f;
    font-size: 18px;
    width: 30px;
}
.single-project-text li span{
    font-weight: 700;
    margin-right: 5px;
}
.builders-planning-area {
    background: #f9f9f9 none repeat scroll 0 0;
}
.planning-text > h3{
    color: #555;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 10px;
    text-transform: capitalize;
}
.planning-text > p {
    margin-bottom: 10px;
}

/* ================================================================================ 

                            18. ABOUT BOTTOM AREA CSS

 ================================================================================ */

.builders-about-bottom-area {
    background: #222 none repeat scroll 0 0;
    color: #fff
}
.single_about_bottom > img {
    width: 100%;
}
.single_about_bottom > h4{
    color: #eee;
    font-size: 18px;
    font-weight: 700;
    margin: 15px 0;
    text-transform: uppercase;
}
.builders-about-bottom-area p{
    color: #b4b4b4
}
.single-about-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
}
.single-about-list:last-child{
    margin-bottom: 0px
}
.single-about-list:hover .about_icon{
    background: #ea9b0f none repeat scroll 0 0
}
.about_icon {
    background: #2b2c36 none repeat scroll 0 0;
    font-size: 26px;
    height: 70px;
    line-height: 67px;
    margin-right: 15px;
    text-align: center;
    width: 70px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}
.about-bottom-one {
    margin-bottom: 20px;
    margin-top: 0
}
.about-bottom-one > h3 {
    color: #eee;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.about_text > h4 {
    font-weight: 700;
    margin: 7px 0;
    text-transform: capitalize;
}

/* ================================================================================ 

                            19. LATEST BLOG AREA CSS

 ================================================================================ */

.blog-img img {
    position: relative;
    width: 100%
}
.blog-img > h5 {
    background: #ea9b0f none repeat scroll 0 0;
    border-radius: 0 55px 55px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    height: 80px;
    line-height: 50px;
    position: absolute;
    right: 30px;
    text-align: center;
    top: 40%;
    width: 80px;
}
.blog-img > h5 span {
    display: block;
    line-height: 0;
    color: #fff
}
.single-latest-blog {
    box-shadow: 0 0 6px #ddd;
    margin-bottom: 50px
}
.blog-text {
    padding: 30px 20px 20px;
}
.blog-text > h4 {
    color: #555;
    font-size: 21px;
    font-weight: 700;
    margin: 10px 0;
}

/* ================================================================================ 

                            20. BLOG PAGE CSS

 ================================================================================ */

.single-blog-widget {
    border: 1px solid #e5e5e5;
    margin-bottom: 50px;
    margin-top: 0px;
    padding: 30px;
}
.single-blog-widget input {
    border: 1px solid #edeff8;
    background: transparent none repeat scroll 0 0;
    color: #000;
    font-size: 17px;
    height: 50px;
    padding: 7px 75px 7px 7px;
    position: relative;
    width: 100%;
}
.single-blog-widget button {
    background: #ea9b0f none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    padding: 0;
    position: absolute;
    right: 48px;
    width: 70px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}
.single-blog-widget button:hover{
    background: #2b2c36 none repeat scroll 0 0
}
.single-blog-widget > h3 {
    border-bottom: 1px solid #e5e5e5;
    color: #555;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    padding-bottom: 10px;
    text-transform: capitalize;
}
.single-blog-widget > ul {
    margin-top: 30px;
}
.single-blog-widget li {
    border-bottom: 1px solid #ddd;
    float: none;
}
.single-blog-widget li:last-child{
    border-bottom: 0px solid #ddd
}
.single-blog-widget a {
    display: block;
    padding: 10px 5px;
    text-transform: capitalize;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}
.single-blog-widget span {
    float: right;
}
.single-blog-widget a:hover{
    color: #ea9b0f 
}
.single-blog-widget ul.tag-widget li {
    display: inline-block;
    margin: 2px;
    border: medium none
}
.single-blog-widget ul.tag-widget li a {
    background: #333333 none repeat scroll 0 0;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    padding: 4px 12px;
}
.single-blog-widget ul.tag-widget li a:hover {
    background: #ea9b0f none repeat scroll 0 0;
}

/* ================================================================================ 

                            21. SINGLE BLOG PAGE CSS

 ================================================================================ */

.single-blog-title > h3 {
    color: #000;
    font-size: 22px;
    font-weight: 400;
    margin: 20px 0 10px;
    text-transform: capitalize;
}
.single-blog-title > p {
    display: inline-block;
    font-size: 17px;
    margin: 0 10px 0 0;
    text-align: center;
}
.single-blog-title p i {
    color: #ea9b0f;
    margin-right: 5px;
}
.builders-blog-desc {
    margin-top: 20px;
}
.builders-blog-desc p {
    padding: 5px 0
}
.builders-comment {
    margin-top: 40px;
}
.comment-list {
    margin-top: 40px;
}
.comment-count > h3 {
    color: #000;
    font-size: 22px;
    font-weight: 400;
    margin: 20px 0 10px;
    text-transform: capitalize;
}
.builders-comment-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
    padding-bottom: 30px;
}
.builders-comment-item img {
    margin-bottom: 0px;
}
.builders-comment-item h4 {
    color: #555;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
}
.builders-comment-item span {
    color: #777;
    font-size: 15px;
}
.builders-comment-item a {
    color: #555;
    font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.builders-comment-item a:hover{
    color: #ea9b0f
}
.builders-leave-comment > h3 {
    color: #000;
    font-size: 22px;
    font-weight: 400;
    margin: 20px 0 10px;
    text-transform: capitalize;
}
.ns-com-name {
    background: transparent none repeat scroll 0 0 !important;
    border: 1px solid #ddd !important;
    float: left !important;
    height: 45px !important;
    margin-bottom: 20px !important;
    margin-right: 20px !important;
    margin-top: 0 !important;
    padding: 10px 15px !important;
    width: 45% !important;
}
.comment {
    border: 1px solid #ddd;
    height: 160px;
    padding: 5px 15px;
    width: 93% !important; 
    margin-bottom: 20px;
}

/* ================================================================================ 

                            22. CLIENT SAY AREA CSS

 ================================================================================ */

.builders-client-say-area {
    
    background: url('b.jpg') center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    position: relative;
    width: 100%
}
.client-say-overlay {
    background: rgba(0, 0, 0, 0.77)  none repeat scroll 0 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.client-say-item-1 > img {
    border-radius: 50%;
    height: 120px;
    margin: 0 auto 20px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 120px !important;
}
.client-say-text {
    margin: 0 auto;
    width: 75%;
}
.client-say-text > p {
    color: #eee;
    font-weight: 400;
    text-align: center;
}
.client-say-text > h5 {
    color: #ea9b0f;
    font-size: 20px;
    font-weight: 400;
    margin: 10px 0;
    text-align: center;
    text-transform: capitalize;
}
.owl-dots {
    margin-top: 20px;
    text-align: center;
    line-height: 0
}
.owl-dots .owl-dot {
    display: inline-block;
}
.owl-theme .owl-dots .owl-dot span {
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
    background: #d6d6d6 none repeat scroll 0 0;
    border-radius: 30px;
    display: block;
    height: 10px;
    margin: 5px 7px;
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
    width: 10px;
}
.owl-dots .owl-dot.active span,  .owl-dots .owl-dot:hover span {
    background: #ea9b0f none repeat scroll 0 0;
}

/* ================================================================================ 

                            23. FOOTER AREA CSS

 ================================================================================ */

.builders-footer-area{
    background: #252525 none repeat scroll 0 0;
    color: #eee;
    font-size: 16px;
}
.single-footer{
    margin: 0
}
.buildes-footer-logo h2{
    background: #fff none repeat scroll 0 0;
    color: #ea9b0f;
    display: inline-block;
    font-family: "Philosopher",sans-serif;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 20px;
    padding: 10px 15px;
    text-transform: uppercase;
}
.buildes-footer-logo span {
    color: #000;
}
.buildes-footer-logo ul.footer-social {
    margin-top: 30px;
}
.buildes-footer-logo ul.footer-social li{
    display: inline-block
}
.buildes-footer-logo ul.footer-social li a {
    background-color: #333333 ;
    border-radius: 50%;
    display: block;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 40px;
    color: #777
}
.fb:hover {
    background: #4b6ea9 none repeat scroll 0 0 !important;
    color: #fff !important
}
.twitter:hover {
    background: #65bbf2 none repeat scroll 0 0 !important;
    color: #fff !important
}
.gp:hover {
    background: #dd4d41 none repeat scroll 0 0 !important;
    color: #fff !important
}
.linkedin:hover {
    background: #0075B5 none repeat scroll 0 0 !important;
    color: #fff !important
}
.buildes-footer-logo > h3 {
    color: #eee;
    font-size: 18px;
    margin: 0 0 20px;
    font-weight: 700;
    text-transform: capitalize
}
.buildes-footer-logo > p {
  font-size: 14px;
}
.buildes-footer-logo ul.footer-widget {
    margin-top: 35px;
}
.buildes-footer-logo ul.footer-widget li {
    display: inline-block;
    margin: 2px
}
.buildes-footer-logo ul.footer-widget li a {
    background: #333333 none repeat scroll 0 0;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    padding: 4px 12px;
}
.buildes-footer-logo ul.footer-widget li a:hover{
    background: #ea9b0f none repeat scroll 0 0
}
.contact-details {
    color: #ea9b0f;
    font-weight: 400
}
.contact-details > span {
    color: #fff;
    margin-left: 5px;
}
.buildes-footer-logo input[type="text"], input[type="email"] {
    background: #333 none repeat scroll 0 0 ;
    border: medium none ;
    font-size: 16px ;
    height: 40px ;
    margin: 5px 0 ;
    padding: 7px ;
    width: 100% ;
}
.buildes-footer-logo textarea {
    background: #333 none repeat scroll 0 0;
    border: medium none;
    margin: 5px 0;
    font-size: 16px;
    height: 120px;
    padding: 7px;
    width: 100% !important;
}
.builders-copyright-area {
    background: #000 none repeat scroll 0 0;
    font-weight: 700;
    font-size: 14px
}
.builders-copyright-left{
    text-align: left
}
.builders-copyright-right {
    text-align: right;
}
.builders-copyright-right p i {
    color: #ea9b0f ;
    margin: 0 5px;
}
.builders-copyright-right p span {
    color: #ea9b0f ;
    margin: 0 5px;
    font-weight: 900
}

/* ================================================================================ 

                            24. ABOUT PAGE CSS

 ================================================================================ */

.about-content-left > h3 {
    color: #555;
    font-weight: 400;
    text-transform: capitalize;
}
.about-content-left > p {
    padding-top: 20px;
}
.about-content-right {
    margin-top: 0px;
}

/* ================================================================================ 

                            25. 404 PAGE CSS

 ================================================================================ */

.builders-notfound-area h2 {
    font-size: 180px;
    font-weight: 300;
    line-height: 165px;
    margin-bottom: 30px;
}
.builders-notfound-area h3 {
    color: #555;
    margin-bottom: 30px;
}
.builders-notfound-area form {
    margin-bottom: 30px;
    position: relative;
}
.builders-notfound-area input {
    background: transparent none repeat scroll 0 0 !important;
    border: 1px solid #ddd !important;
    height: 50px !important;
    padding: 5px 100px 5px 10px !important;
    width: 100% !important;
}
.builders-notfound-area button {
    background: #ea9b0f none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 26px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 5px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100px;
}
.builders-notfound-area button:hover {
    background: #2b2c36 none repeat scroll 0 0;
}
.social-connect h4 {
    font-size: 23px;
    font-weight: 400;
    margin-top: 30px;
}
.social-connect > ul {
    margin-top: 30px;
}
.social-connect li {
    display: inline-block;
    margin: 0px 3px
}
.social-connect a {
    background: #eee none repeat scroll 0 0;
    border-radius: 0 55px 55px;
    color: #111;
    display: block;
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    width: 45px;
}
.builders-copyright-404 {
    margin-top: 30px;
}
.builders-copyright-404 i, span {
    color: #ea9b0f;
    margin: 0 5px;
}

/* ================================================================================ 

                            26. COMINGSOON PAGE CSS

 ================================================================================ */

.comingsoon-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.61);
}
.builders-comingsoon-area {
    background-color: #333;
    background-position: center center;
    background-size: cover;
    display: table;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}
.comingsoon-bg {
    background-image: url("comingsoon_bg.jpg");
}
.builders-notfound-cell {
    display: table-cell;
    vertical-align: middle;
}   
.box-404:after {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.box-404 {
    color: #fff;
    font-size: 17px;
    padding: 30px;
    position: relative;
    z-index: 1;
}
.logo-comingsoon {
    margin-bottom: 30px;
}
.logo-comingsoon h2 {
    background: #000 none repeat scroll 0 0;
    color: #ea9b0f;
    display: inline-block;
    font-family: "Philosopher",sans-serif;
    font-size: 30px;
    font-weight: 700;
    margin: 8px 0;
    padding: 10px 15px;
    text-transform: uppercase;
}
.logo-comingsoon span {
    color: #eee;
}
.text-notfound form {
    margin: 30px 0;
    position: relative;
}
.text-notfound input {
    background: transparent none repeat scroll 0 0 !important;
    border: 1px solid #ddd !important;
    height: 50px !important;
    padding: 5px 100px 5px 10px !important;
    width: 100% !important;
}
.text-notfound button {
    background: #ea9b0f none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 26px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 5px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100px;
}
.text-notfound button:hover {
    background: #2b2c36 none repeat scroll 0 0;
}
.coming-soon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.coming-soon p{
    font-size: 18px;
    text-align: center;
    margin: 0px 5px;
    text-transform: uppercase;
    
    
}
.coming-soon p span{
    display: block;
    font-size: 40px;
    line-height: 90px;
    background: #ea9b0f none repeat scroll 0 0;
    width: 90px;
    height: 90px;
    border-radius:  0 75px 75px 75px;
    margin-bottom: 10px;
    color: #fff !important
}

/* ================================================================================ 

                            27. CONTACT PAGE CSS

 ================================================================================ */

.contact-left-form > h3, .contact-page-details > h3 {
    color: #555;
    font-size: 22px;
    font-weight: 700;
    margin: 10px 0;
    text-transform: capitalize;
}
.contact-left-form > form {
    margin-top: 30px;
}
.contact-left-form p {
    margin-bottom: 10px;
}
.contact-left-form > form label{
    display: block
}
.contact-left-form input[type="text"], input[type="tel"]  {
    background: transparent none repeat scroll 0 0 ;
    border: 1px solid #ddd ;
    height: 45px ;
    padding: 5px 10px ;
    width: 100% 
}
.contact-left-form input[type="email"] {
    background: transparent none repeat scroll 0 0 !important;
    border: 1px solid #ddd !important;
    height: 45px !important;
    padding: 5px 10px !important;
    width: 100% 
}
.contact-left-form textarea {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #ddd ;
    height: 140px;
    padding: 5px 10px;
    width: 100% !important;
}
.contact-page-details {
  margin-top: 0px;
}
.contact-para {
    margin-top: 30px;
}
.contact-para p i {
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    width: 20px;
    margin-right: 10px;
    color: #ea9b0f 
}
.contact-para p span {
    display: inline-block;
    width: 75px;
    color: #000
}
.contact-para > p {
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0;
}
.contact-para a:hover{
    color: #ea9b0f 
}
#googleMap {
    height: 320px;
}