/*!
Theme Name: global-interior-building
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 
Tested up to:
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: global-interior-building
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: "Roboto Condensed", sans-serif; */
    /* font-family: "Poppins", sans-serif; */
}
html,body{overflow-x: hidden;}
a{text-decoration: none;}
ul{
    margin-bottom: 0 !important; 
    padding-left: 0 !important;
}
ul li{list-style: none;}

/*=========== header ===========*/
.main-head{position: relative;z-index: 9;}
.navbar {font-family: "Roboto Condensed", sans-serif; }
.navbar .navbar-nav li a{padding: 13px;color: #fff;}
.navbg .navbar-nav li.current_page_item a {color: #ffd000;}
.navbar-nav li a:hover{color: #FFFF00 !important; transition: all 0.4s ease 0s;}
.wser:hover .sermenu{display:block; transition: all 500ms ease;}
.dropdown-menu {background: #000000a3;}
.navbar .navbar-nav .dropdown .dropdown-menu li a {
    padding: 8px 0px 8px 20px;
    background: none;
}
/* .sub-menu{display: none;}
.current-menu-parent:hover .sub-menu{display: block;} */

.html-sub-menu{display: none;}
.html-sub-menu {
    position: absolute;
    right: -100%;
    top: 20px;
    background: #000000a8;
    padding: 5px 10px 5px 10px;
    border-radius: 3px;
    line-height: 30px;
}
.submenu1 .html-sub-menu {
    position: absolute;
    right: -100%;
    top: 20px;
    background: #000000a8;
    padding: 5px 10px 5px 10px;
    border-radius: 3px;
    line-height: 30px;
}
.submenu2 .html-sub-menu {
    position: absolute;
    right: -77%;
    top: 40px;
    background: #000000a8;
    padding: 5px 10px 5px 10px;
    border-radius: 3px;
    line-height: 30px;
}
.submenu4 .html-sub-menu {
    position: absolute;
    right: -85%;
    top: 90px;
    background: #000000a8;
    padding: 5px 10px 5px 10px;
    border-radius: 3px;
    line-height: 30px;
}
.submenu5 .html-sub-menu {
    position: absolute;
    right: -80%;
    top: 110px;
    background: #000000a8;
    padding: 5px 10px 5px 10px;
    border-radius: 3px;
    line-height: 30px;
}
.submenu1:hover .html-sub-menu{display: block;}
.submenu2:hover .html-sub-menu{display: block;}
/* .submenu3:hover .html-sub-menu{display: block;} */
.submenu4:hover .html-sub-menu{display: block;}
.submenu5:hover .html-sub-menu{display: block;}

/* Humburger */
.nav-icon {
    width: 25px;
    height: 25px;
    position: relative;
    /* margin: 50px auto; */
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.nav-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #fff !important;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.nav-icon span:nth-child(1) {
    top: 0px;
}

.nav-icon span:nth-child(2),
.nav-icon span:nth-child(3) {
    top: 8px;
}

.nav-icon span:nth-child(4) {
    top: 16px;
}

.nav-icon.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

.nav-icon.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.nav-icon.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

header .navbar button {
    outline: none;
    box-shadow: none !important;
}

header .navbar .navbar-toggler {
    border: none !important;
}
/* end of Humburger */


/*============= footer ===========*/
.footer-bg{background: #000;}
.copyright{padding: 10px;background: #222; font-family: "Poppins", sans-serif;}
.footer-info{padding: 40px 0 25px 0;}
.footerinfo{padding: 23px 0 20px 0;}
.footerinfo p {color: #fff;padding-top: 15px;font-size: 17px;font-family: "Roboto Condensed", sans-serif;}
.footer-info h5{
    font-size: 25px;
    font-weight: 600;
    color: #ffd000;
    font-family: "Roboto Condensed", sans-serif;
}
.footer-info ul li a{
    font-size: 18px;
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
}
.footer-info ul li{padding-bottom: 3px;}
.footer-info ul li a:hover{color: #f7c02d;transition: all 0.4s ease 0s;}
.information svg {font-size: 32px;color: #fff;padding-right: 5px;}
.information a {color: #fff;font-size: 16px;padding-left: 5px;}
.information a:hover{color: #f7c02d;transition: all 0.4s ease 0s;}
.information p {color: #fff;font-size: 16px;padding-left: 9px;}
.copyright p a{color: #fff;}
.copyright p a:hover{color: #f7c02d;transition: all 0.4s ease 0s;}
.copyright p{color: #fff;font-size: 16px;}
.information{padding-bottom: 10px;}
.information span{color: #c3cb66;font-weight: 500;}
.social-media a svg {
    font-size: 40px;
    color: #fff;
    background: #3b5998;
    padding: 10px;
    border-radius: 50px;
}
.social-media a svg:hover{color: #f7c02d;transition: all 0.4s ease 0s;}
.contact-section .social-media a {padding-right: 10px;padding-top:25px;}
.footer-bg .social-media a{margin-right: 10px;}
/*============= banner ==========*/
.hero-banner {
    position: relative;
    transform: translateY(-127px);
    /* z-index: -10; */
    margin-bottom: -127px;
}
.hero-banner video {
    height: 100vh;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    background-size: cover;
    background-position: center center;
}
.banner-content {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    font-family: "Roboto Condensed", sans-serif;
}
.banner-content h1 {
    font-size: 68px;
    color: #FFFFFF;
    margin: 0 0 24px;
    font-weight: 700;
    text-transform: uppercase;
}
.banner-content p {
    font-size: 20px;
    color: #FFFFFF;
    margin: 0 0 52px;
}
.view-btn {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 8px;
    line-height: 20px;
    padding: 13px 25px;
    /* position: relative; */
    transition: all 0.5s ease-in-out 0s;
    background: #f8dc74;
    color: #000;
    text-transform: uppercase;
}
.view-btn:hover {
    background: #000;
    color: #fff;
    transition: all 0.5s ease-in-out 0s;
}
/* .more-btn::before, .more-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
    border-radius: 4px;
}   
.more-btn::after {
    width: 0;
    left: auto;
    right: 0;
    background: #212121;
} */

/*========== inner banner ==========*/
.inner-banner{
    transform: translateY(-127px);
    margin-bottom: -127px;
}
.inner-banner-con{padding-top: 190px;}
.inner-banner-con h1{
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    /* text-align: center; */
    font-family: "Roboto Condensed", sans-serif;
}
.inner-banner-con h1 span{color: #b08c2c;}

.title {
    font-size: 33px;
    line-height: 34px;
    text-transform: uppercase;    
    color: #111111;
    font-weight: 700;
}
.title span {color: #b08c2c;}
.plan-wrap p {
    font-size: 15px;
    line-height: 26px;
    color: #3E3E3E;
    margin-bottom: 15px;
    width: 90%;
    margin: 5px 0 20px;
}
.planing-con{padding-left: 18px;}
.planing-con h5 {
    font-size: 20px;
    margin: 0px 0 7px;
    font-weight: 700;
}
.planing-con p {
    font-size: 15px;
    line-height: 26px;
    color: #3E3E3E;
    width: 80%;
}
.more-btn {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 8px;
    line-height: 20px;
    padding: 13px 25px;
    transition: all 0.5s ease-in-out 0s;
    background: #b08c2c;
    color: #fff;
}
.more-btn:hover {
    background: #000;
    color: #fff;
    transition: all 0.5s ease-in-out 0s;
}
.imgsec-wrp{position: relative;}
.imgsec-wrp img {
    width: 100%;
    height: 375px;
    object-fit: cover;
    margin-top: 12px;
}
.year-wrp {
    position: absolute;
    top: -28px;
    right: -30px;
    background: #fff;
    padding: 22px;
    border: 5px solid #f8dc74;
}
.year-wrp h4{
    font-size: 25px;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 20px;
}
.year-wrp h4 span{color: #b08c2c;}
.year{position: relative;}
.year span {
    text-transform: uppercase;
    font-size: 14px;
    opacity: 0.8;
    font-weight: 600;
}
.year h2{font-size: 80px;font-weight: 700; position: relative;z-index: 10;}
.year .roundSev {
    position: absolute;
    background: #fcd4c4;
    padding: 40px;
    top: 22px;
    right: 123px;
    border-radius: 50px;
}

/*============= company overview ===============*/
.overview-section{padding: 80px 0 80px 0;font-family: "Roboto Condensed", sans-serif;}
.overCount h3 {padding-top: 10px;}
.overCount h3 span {font-size: 40px;color: #fff;}
.overCount h4 {color: #fff;font-size: 20px;}

/*============== service ======================*/
.serTop-sec h2{
    font-size: 38px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
}
.serTop-sec h2 span {color: #b08c2c;}
.serTop-sec p {
    font-size: 15px;
    line-height: 26px;
    color: #3E3E3E;
    margin-bottom: 15px;
    width: 50%;
    margin: 0 auto;
}
.serviCon{padding-left: 20px;}
.serviCon a h4{
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    transition: all 0.4s ease 0s;
}
.serviCon p {
    font-size: 15px;
    line-height: 26px;
    color: #3E3E3E;
    margin-bottom: 15px;
}
.serviCon a h4:hover{
    color: #ffd000;
    transition: all 0.4s ease 0s;
}
/* .sergap{padding-top: 120px;} */
.counter {
    animation-duration: 1s;
    animation-delay: 0s;
}
/* .service-wrp:hover .serIcon svg {
    animation: 500ms ease-in-out 0s normal none 1 running tada;
} */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.service-wrp:hover .serIcon svg {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.contactwrp:hover .conIcon svg{
	-webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.service-icon span {
    background: #b08c2c;
    padding: 30px 19px 30px 18px;
    border-radius: 50%;
}
.serviceBox {
	position: relative;
/*     padding: 80px 40px 70px 40px; */
    border: 1px solid #e5e5e5;
	margin-bottom: 24px;
}
.service-icon {
    position: absolute;
    top: 90px;
    z-index: 999;
    left: 40%;
}
.service-content a h3 {
    font-size: 30px;
    line-height: 34px;
    color: #000;
    font-weight: 600;
	padding-top: 100px;
	font-family: "Roboto Condensed", sans-serif;
}
.serviceBox:hover .service-content a h3{
    color: #fff;
    transition: all 0.4s ease 0s;
}
.service-content p {
    font-size: 15px;
    line-height: 25px;
    color: #3E3E3E;
/* 	margin-bottom: 0; */
	width: 75%;
	margin: 0 auto;
}


.single-service-con h3{
    font-size: 27px; 
    font-weight: 700;
	margin-top: 35px;
    font-family: "Roboto Condensed", sans-serif;
}
.single-service-con p{
    font-size: 15px;
    line-height: 25px;
    color: #3E3E3E;
    margin-top: 15px;
}
.service-bnifit h3{
    font-size: 25px; 
    font-weight: 700;
    font-family: "Roboto Condensed", sans-serif;
}
.service-bnifit p{
    font-size: 15px;
    line-height: 25px;
    color: #3E3E3E;
    margin-top: 15px;
}
.service-bnifit .benifit-list li span {
    font-size: 28px;
    font-weight: 700;
    opacity: 0.4;
	font-family: "Poppins", sans-serif;
}
.service-bnifit .benifit-list li{
    font-size: 16px;
    line-height: 25px;
    color: #3E3E3E;
    margin-top: 15px;
}
.single-bottom h3{
    font-size: 35px; 
    font-weight: 700;
    font-family: "Roboto Condensed", sans-serif;
}
.single-bottom p{
    font-size: 15px;
    line-height: 25px;
    color: #3E3E3E;
    margin-top: 10px;
}
.service-contact{margin: 30px 0 30px 0;}
.service-contact .get-btn {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 8px;
    line-height: 20px;
    padding: 13px 25px;
    transition: all 0.5s ease-in-out 0s;
    background: #f8dc74;
    color: #000;
    text-transform: uppercase;
}
.service-contact .get-btn:hover {
    background: #000;
    color: #fff;
    transition: all 0.5s ease-in-out 0s;
}
.single-benifit-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.single-service-con img {
    height: 450px;
    width: 100%;
    object-fit: cover;
}

/*============ project ============*/
.projectbox a img {
    width: 100%;
    height: 373px;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}
/* .projectbox a img:hover{transform: scale(1.2);} */
/* .single-img {
    position: relative;
    width: 100%;
    float: left;
    margin: 0 1%;
}  
.img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #b08c2c66;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
}
.single-img:hover .img-overlay {height: 100%;}
.text {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-40%, -50%);
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    width: 100%;
    font-family: "Roboto Condensed", sans-serif;
} */
.project-section .row > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.zoom-icon span svg {
    position: absolute;
    top: 15px;
    right: 20px;
    display: none;
    transition: all 0.4s ease 0s;
    z-index: 9999;
    background: #fff;
    padding: 10px;
    border-radius: 50px;
}
.projectbox:hover .zoom-icon span svg {
    display: block !important;
    transition: all 0.4s ease 0s;
}


/*============ testimonials ==============*/
.testimonials-section .serTop-sec h2 {color: #fff  !important;}
.testimonials-section .serTop-sec p {color: #fff  !important;}
.testimonials-section{padding: 60px 0 80px 0;}
.testimonials-box {
    background: #fff;
    padding: 27px;
    border-radius: 5px;
    margin-right: 25px;
	height: 275px;
	position: relative;
}
.quote-icon{
	position: absolute;
	top: -14px;
	right: -6px;
}
.quote-icon svg{font-size: 86px;opacity: 0.2;}
.info{padding: 30px 0 0 20px;}
.info h4{
    font-size: 20px; 
    font-weight: 700;
    margin-bottom: 2px;
    font-family: "Roboto Condensed", sans-serif;
}
.info span{color: #ea622b;font-size: 16px;}
.testimonials-box p{
    font-size: 15px;
    line-height: 25px;
    color: #3E3E3E;
    margin-top: 15px;
}


.testimonial-sec .testimonials-box .info h4 {color: #fff;}
.testimonial-sec .testimonials-box p {color: #fff;}
.testimonial-sec .testimonials-box {
    margin-right: 0px;
    margin-bottom: 25px;
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.5)) !important;
	height: 280px;
}
.client-info img {
    width: 30%;
    border-radius: 50%;
}
/*============= blog ===============*/
.blog-card a img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}
.blog-info h3 a{
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    font-family: "Roboto Condensed", sans-serif;
}
.blog-card{margin-right: 20px;}
.blogimg {overflow: hidden !important;}
.blog-card a img:hover{transform: scale(1.2);}

/* .blogimg > a::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    background: #000 none repeat scroll 0 0;
    transition: all 0.4s ease-in-out 0s;
}
.blog-card:hover .blogimg > a::before {
    opacity: 0.5;
    visibility: visible;
}
.blogimg > a {
    display: block;
    position: relative;
}
 */

.blog-sec .blog-card {
    margin-right: 0px;
    margin-bottom: 25px;
    transition: all 0.4s ease 0s;
}
.blog-info:hover h3 a{
    color: #ffd000;
    transition: all 0.4s ease 0s;
}
.single-blog-con h3{
    font-size: 22px; 
    font-weight: 700;
    font-family: "Roboto Condensed", sans-serif;
}

/*=============== conversion ===============*/
.conversion{position: relative;}
/*--- before after slider ---*/
#comparison {
	width: 100%;
	padding-bottom: 100%;
    overflow: hidden; 
    position: relative;
    margin-bottom: -52%;
}
.before {
    position: absolute;
    bottom: 57px;
    left: 150px;
}
.before span {
    text-transform: uppercase;
    background: #f8dc74;
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    font-family: "Roboto Condensed", sans-serif;
}
.after {
    position: absolute;
    bottom: 57px;
    right: 150px;
}
.after span {
    text-transform: uppercase;
    background: #f8dc74;
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    font-family: "Roboto Condensed", sans-serif;
}
figure { 
    position: absolute;
	background-image: url('assets/images/banner-3.webp');
/* 	background-size: cover; */
	font-size: 0;
	width: 100%;
	height: 48%;
	margin: 0; 
}
#divisor { 
	background-image: url('assets/images/banner-4.webp');
/* 	background-size: cover; */
	position: absolute;
	width: 50%; 
	box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
	bottom: 0; 
    height: 100%;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    right: -2px;
    width: 3px;
    height: calc(50% - 25px);
    background: white;
    z-index: 3;
  }
  &::before {
    top: 0;
    box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
  }
  &::after {
    bottom: 0;
    box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
  }
}
#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  
  &::before,
  &::after {
    content: '';
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -6px;
  }
  &::before {
    border-right: 6px solid white;
    left: 50%;
    margin-left: -17px;
  }
  &::after {
    border-left: 6px solid white;
    right: 50%;
    margin-right: -17px;
  }
}

input[type=range]{
	-webkit-appearance:none;
	-moz-appearance:none;
	position: absolute;
	top: 24%; 
    left: -25px;
    transform: translateY(-50%);
	background-color: transparent;
	width: calc(100% + 50px); 
    z-index: 2;
  
  &:focus,
  &:active {
    border: none;
    outline: none;
  }
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid white;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
input[type=range]::-moz-range-track {
	-moz-appearance:none;
	height:15px;
	width: 100%;
	background-color: transparent; 
	position: relative;
	outline: none;    
}
/*--- before after slider end ---*/

/*============ contact =================*/
.confllwrp {
    background: #fafafa;
    padding: 35px;
}
.conInfo{padding-left: 20px;}
.conInfo h4 {
    font-size: 20px;
    font-weight: 700;
    font-family: "Roboto Condensed", sans-serif;
}
.conInfo p {
    font-size: 16px;
    color: #3E3E3E;
    margin-bottom: 15px;
    font-family: "Roboto Condensed", sans-serif;
}
.conInfo a {
    font-size: 17px;
    color: #3E3E3E;
    margin-bottom: 15px;
    font-family: "Roboto Condensed", sans-serif;
}
.mapwrp iframe{width: 100%;}

.contact-form input[type='text'], input[type='email'],input[type='tel'] {
    width: 100%;
    padding: 12px;
    border: none;
    outline: none;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
}
.contact-form textarea {
    width: 100%;
	height: 80px;
    padding: 12px;
    border: none;
    outline: none;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
}
.contact-form {
    box-shadow: 0 25px 45px rgba(1, 2, 2, 0.12);
    padding: 30px;
}
.contact-form input[type="submit"] {
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    line-height: 20px;
    padding: 13px 25px;
    transition: all 0.5s ease-in-out 0s;
    background: #f8dc74;
    color: #000;
    text-transform: uppercase;
	border: none;
}
.contact-form input[type="submit"]:hover {
    background: #000;
    color: #fff;
    transition: all 0.5s ease-in-out 0s;
}

/*============= gallery ============*/
.card-image{margin-bottom: 25px;}

.card-image a img {
    width: 100%;
    height: 285px;
    object-fit: cover;
	transition: all 0.5s ease-in-out 0s;
}

.card-image {overflow: hidden !important;}
.card-image a img:hover{transform: scale(1.2);}

/*==== 404 ====*/
.error404 .navbg{background: #000;}
.error-con h1 {
    font-size: 60px;
    font-weight: 700;
	margin-bottom: 20px;
    font-family: "Roboto Condensed", sans-serif;
}
.error-con a {
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    line-height: 20px;
    padding: 13px 25px;
    transition: all 0.5s ease-in-out 0s;
    background: #f8dc74;
    color: #000;
    text-transform: uppercase;
	border: none;
}
.error-con a:hover {
    background: #000;
    color: #fff;
    transition: all 0.5s ease-in-out 0s;
}

/* =================== */
.servImg img {
    width: 100%;
    height: 415px;
    object-fit: cover;
}

.single-blog-img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    padding-bottom: 20px;
}
.projectbox > .project-inner .wrproject  {
    display: block;
    position: relative;
}
.projectbox > .project-inner .wrproject:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    background: #000 none repeat scroll 0 0;
    transition: all 0.4s ease-in-out 0s;
}
.projectbox:hover > .project-inner .wrproject:before {
    opacity: 0.75;
    visibility: visible;
}
.projectbox .img-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 30px;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out 0s;
}
.projectbox:hover .img-overlay {
    opacity: 1;
    visibility: visible;
}
.projectbox:hover::before {
    width: 100%;
    right: auto;
    left: 0;
}
.projectbox:hover .wrproject::before {
    width: 100%;
    right: 0;
    left: auto;
}


.projectbox {
    position: relative;
    overflow: hidden;
}
.projectbox:hover::before {
    width: 100%;
    right: auto;
    left: 0;
}
.projectbox::before {
    background-color: #b08c2c;
    content: "";
    width: 0;
    height: 4px;
    top: 0;
    left: auto;
    right: 0;
    position: absolute;
    z-index: 2;
    transition: 0.3s;
}
.projectbox:hover::after {
    height: 100%;
    bottom: auto;
    top: 0;
}
.projectbox::after {
    background-color: #b08c2c;
    content: "";
    width: 4px;
    height: 0;
    top: auto;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 2;
    transition: 0.3s 0.25s;
}
.projectbox:hover .project-inner::before {
    width: 100%;
    right: 0;
    left: auto;
}
.projectbox .project-inner::before {
    background-color: #b08c2c;
    content: "";
    width: 0;
    height: 4px;
    bottom: 0;
    left: 0;
    right: auto;
    position: absolute;
    z-index: 2;
    transition: 0.3s 0.5s;
}
.projectbox:hover .project-inner::after {
    height: 100%;
    top: auto;
    bottom: 0;
}
.projectbox .project-inner::after {
    background-color: #b08c2c;
    content: "";
    width: 4px;
    height: 0;
    top: 0;
    bottom: auto;
    left: 0;
    position: absolute;
    z-index: 2;
    transition: 0.3s 0.75s;
}
.projectbox:hover .project-inner .wrproject img {transform: scale(1.2);}
.text {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    font-family: "Roboto Condensed", sans-serif;
} 
.text:hover {
    color: #f7c02d;
    transition: all 0.4s ease 0s;
}


.serviceBox {
    position: relative;
    overflow: hidden;
	height: 350px;
}
.serviceBox img {
    width: 100%;
	height: 100%;
	object-fit: cover;
    transition: all 0.5s ease 0s;
}
.serviceBox:hover img {
    transform: scale(1.2);
}
.serviceBox:hover .allwrp {
    background: rgba(0, 0, 0, 0.4);
}
.serviceBox .allwrp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    align-items: center;
    transition: all 0.3s ease 0s;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.serviceBox:hover .allwrp .service-content p{color: #fff;} 
.cat-name {
    color: #fff;
    font-weight: 500;
	letter-spacing: 2px;
    font-family: "Roboto Condensed", sans-serif;
}
.serviceBox:hover .service-icon span {
    background: #fff;
    padding: 30px 19px 30px 18px;
    border-radius: 50%;
	transition: all 0.3s ease-in-out 0s;
}
.overCount .plush{color: #fff;font-size: 31px;}


/*========================== responsive ===============================*/
@media only screen and (max-width: 768px) {
	.inner-banner-con {padding-top: 210px;}
    .banner-content h1 {font-size: 44px;}
    .banner-content p {font-size: 18px;}
    .imgsec-wrp {transform: translateY(60px);margin-bottom: 60px;}
    .year-wrp {right: 0px;padding: 22px;}
    .year h2 {font-size: 68px;}
    .year .roundSev {padding: 35px;right: 130px;}
    .plan-wrap p {font-size: 16px;width: 100%;}
    .serTop-sec h2 {font-size: 35px;}
    .serTop-sec p {font-size: 16px;width: 100%;}
    .sergap {padding-top: 35px;}
    .before {left: 20px;bottom: -122px;}
    .after {right: 20px;bottom: -122px;}
    .testimonials-box {width: 100%;}
    .blog-card {width: 100%;}
    .footer-info {padding: 10px 0 0px 0;}
    .single-service-con h3 {font-size: 22px;}
	.single-benifit-img {padding-top: 20px;}
	.single-bottom h3 {font-size: 22px;}
	.service-contact {margin: 43px 0 19px 0;}
	.service-bnifit h3 {font-size: 22px;}
	.imgsec-wrp{display: none;}
	.navbar-collapse .navbar-nav {background: #000;}
	.navbg{background: #000;}
	.nomobil {padding-top: 20px;}
	.nomobil .navbar-nav li{padding: 5px;}
	.nomobil .navbar-nav li a{font-size: 20px;}
	figure {height: 100%;}
	input[type=range] {top: 50%;}
	.testimonials-section {
    	transform: translateY(160px);
		margin-bottom: 160px;
	}
	.single-blog-img img {height: 100%;}
	.copyright p {font-size: 17px;}
}

/* Additional CSS */
.areas-services .areas-btn{
	    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 8px;
    line-height: 20px;
    padding: 10px 20px;
    transition: all 0.5s ease-in-out 0s;
    background: #f8dc74;
    color: #000;
    text-transform: uppercase;
	display: block;
}
.areas-services .areas-btn:hover{
	background: #000;
	color: #fff;
}
@media screen and (min-width:991px){
	.areas-services .areas-btn{
		width: 178px;
	}
}

/* Additional CSS */
/*-----------------------------------
Gallery Styling
------------------------------------*/
.gallery .filter-button-group{
	list-style: none;
	padding-left: 0;
}
 .gallery .filter-button-group li {
    background: #fff;
     border: 2px solid #b08c2c;
     color: #2c4a28;
     padding: 8px 25px;
     cursor: pointer;
     font-size: 13px;
     text-transform: uppercase;
     transition: all .5s ease-in-out;
     -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     -ms-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     border-radius: 6px;
}
@media screen and (max-width:768px){
	.gallery .filter-button-group li{
		 padding: 5px 15px;
	}
}

 .gallery .filter-button-group li.active,  .gallery .filter-button-group li:hover{
     background:#b08c2c;
     color: #fff;
    border: 2px solid #b08c2c;
 }

.gallery .gallery-img{
	position: relative;
}
.gallery .gallery-img-wrapper{
	position: relative;
	overflow: hidden;
}
.gallery .gallery-img-wrapper img{
	transition: all .5s ease-in-out;
	width: 100%;
	height: 356px;
	object-fit: cover;
	border-radius: 6px;
}
.gallery .gallery-img-wrapper img:hover{
	transform: scale(1.2);
	border-radius: 6px;
}
.gallery .gallery-img .icon-search{
	position: absolute;
/* 	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); */
	opacity: 0;
	transition: all .5s ease-in-out;
	background: #fff;
	padding : 26px;
	border-radius: 6px;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
}
.gallery .gallery-img .icon-search svg{
	width: 3em;
	height: 3em;
	color: #fff;
	
}
.gallery .gallery-img .icon-search h3,
.gallery .gallery-img .icon-search p{
	color: #b08c2c;
}
	.gallery .gallery-img .icon-search h3{
	
		text-transform: capitalize;
}
@media screen and (min-width:991px){
	.gallery .gallery-img .icon-search h3{
	
		font-size: 24px;
}
}
.gallery .gallery-img:hover .icon-search{
	opacity: 1;
}


.thank-you .areas-btn{
	    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 8px;
    line-height: 20px;
    padding: 10px 20px;
    transition: all 0.5s ease-in-out 0s;
    background: #f8dc74;
    color: #000;
    text-transform: uppercase;
}
.thank-you .areas-btn:hover{
	background: #000;
	color: #fff;
}