/***************************************************************************************************************
||||||||||||||||||||||||||       MASTER STYLESHEET FOR INTERRIO          |||||||||||||||||||||||||||||||||||||||
****************************************************************************************************************
||||||||||||||||||||||||||                TABLE OF CONTENT               |||||||||||||||||||||||||||||||||||||||
****************************************************************************************************************
****************************************************************************************************************

01. Imported styles
02. Flaticon reset styles
03. Header styles
04. Mainmenu styles
05. Rev_slider_wrapper styles
66. Welcome area Style
07. Service area style
08. Latest project area style
09. Testimonial area style
10. Latest blog area style 
11. Brand area style
12. Footer area style
13. Single service style
14. Pricing table area style
15. Press release style 
16. Faq area style
17. 404 page style style
18. Blog page style
19. Blog single style
20. Blog with sidebar style
21. Shop page style style
22. Shop with sidebar Style
23. Shop single Style
24. Cart page style style
25. Contact page style

****************************************************************************************************************
||||||||||||||||||||||||||||            End TABLE OF CONTENT                ||||||||||||||||||||||||||||||||||||
****************************************************************************************************************/



/* Imported styles */

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



@import url(bootstrap.min.css);
@import url(font-awesome.min.css);
@import url(jquery.bxslider.css);

@import url(jquery.bootstrap-touchspin.css);


/*** Price filter***/



@import url(../fonts/flaticon/flaticon.css);
@import url(../assets/jquery-ui-1.11.4/jquery-ui.css);
/*** Revolution slider ***/


/*** Revolution slider ***/






@font-face {
  font-family: "OilBats";
  src: url(../fonts/custom-font/OilBats.ttf);
}



/*==============================================
   Base Css
===============================================*/
html,
body { height: 100% }
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #9a9a9a;
  line-height: 28px;
  font-weight: 300;
  overflow-x: hidden;
}
button:focus{
  outline: none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}
h3 {
 
}
h4 {

}
a,
a:hover,
a:active,
a:focus {
  text-decoration: none;
  outline: none;
  border: none;
}
img {
	max-width: 100%;
    height: auto;
}
i {
	font-style: normal;
}
.p0 {
	padding: 0 !important;
}
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}


.thm-btn {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
  border: 2px solid #d5ac63;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  transition: all 500ms ease;
  line-height: 14px;
}
.bg-cl-1{
  background: #d5ac63;  
}
.thm-btn:hover{
  background: #141414;  
  border: 2px solid #d5ac63;
  color: #fff;
}



.sec-title {
  margin-top: -5px;
  padding-bottom: 40px;
  position: relative;
}
.sec-title h2 {
  color: #252525;
  font-size: 32px;
  font-weight: 700;
  line-height: 34px;
  text-transform: uppercase;
  margin: 0;
}
.sec-title h2 span{
  color: #d5ac63;
}
.sec-title span.decor {
  background: #d5ac63 none repeat scroll 0 0;
  height: 2px;
  width: 78px;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.sec-title span.decor:before{
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  background: #d5ac63;
  border-radius: 50%;
  content: "";
}


.sec-title-two{
  margin-top: -7px;
  padding-bottom: 27px;
  position: relative;    
}
.sec-title-two h3{
  color: #252525;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin: 0;
  text-transform: uppercase;    
}

/* jQuery ui dropdown  */


/* jQuery ui dropdown Icon style */


/* jQuery ui dropdown Sub item style */



/* jQuery ui dropdown Hover style */



/* Update header Style */
@keyframes menu_sticky {
  0%   {margin-top:-150px;}
  50%  {margin-top: -90px;}
  100% {margin-top: 0;}
}
.header-area.stricky-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #FFFFFF;
  animation-name: menu_sticky;
  animation-duration: 0.60s;
  animation-timing-function: ease-out;
  -webkit-box-shadow: 0px 13px 30px -12px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 13px 30px -12px rgba(0,0,0,0.75);
  box-shadow: 0px 13px 30px -12px rgba(0,0,0,0.75);
}

.header-area.stricky-fixed .outer-box .logo {
  padding: 25px 0;
}
.header-area.stricky-fixed .main-menu .navigation li a {
  padding: 30px 40px 29px 0;
}
.header-area.stricky-fixed .main-menu .navigation > li.dropdown > a::after {
  top: 28px;
}
.header-area.stricky-fixed .main-menu .navigation > li > ul > li > a {
  padding: 15px 15px 15px 20px;
}
.header-area.stricky-fixed .main-menu .navigation > li > ul > li ul li a{
  padding: 15px 15px 15px 20px; 
}
.header-area.stricky-fixed .outer-box .cart-btn {
  top: 31px;
}
.header-area.stricky-fixed .outer-box .search-box-btn {
  top: 30px;
}




/* scroll to top styles */
.scroll-to-top {
  background: #d5ac63;
  border: 2px solid #d5ac63;
  border-radius: 5%;
  bottom: 25px;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 30px;
  font-weight: normal;
  height: 45px;
  line-height: 36px;
  position: fixed;
  right: 15px;
  text-align: center;
  transition: all 500ms ease 0s;
  width: 45px;
  z-index: 99999;
  -webkit-box-shadow: 0px 8px 23px -6px rgba(27,27,27,1);
  -moz-box-shadow: 0px 8px 23px -6px rgba(27,27,27,1);
  box-shadow: 0px 8px 23px -6px rgba(27,27,27,1);
}
.scroll-to-top:hover {
  border: 2px solid #d6a041;
  color: #fff;
  background: #1b1b1b;
}






/* Post pagination styles */




/* Overlay styles */
.overlay{
  background-color: rgba(0,0,0, .60);
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #fff;	
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 450ms ease-out 0s;
  transition: all 450ms ease-out 0s;
  -webkit-transform: rotateY(180deg) scale(0.5,0.5);
  transform: rotateY(180deg) scale(0.5,0.5);    
}
.overlay .box{
  display: table;
  height: 100%;
  width: 100%;    
}
.overlay .box .content{
  display: table-cell;
  text-align: center;
  vertical-align: middle;    
}



/*==============================================
    Top bar Area Css
===============================================*/
.top-bar-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    background-color: #111; /* или нужный цвет */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.top-bar-area .contact-info-left ul li {
  display: inline-block;
  float: left;
  margin-right: 30px;
  font-size: 14px;
  color: #fff;
}
.top-bar-area .contact-info-left ul li:last-child{
  margin-right:0;
}
.top-bar-area .contact-info-left ul li span:before{
  color: #d5ac63;
  padding-right: 6px;
}
.top-bar-area .contact-info-left ul li span.envelop:before {
  position: relative;
  top: 3px;
}

.top-bar-area .contact-info-right {
  position: relative;
  padding-left: 290px;
  margin-left: 30px;
}
.top-bar-area .contact-info-right .phnumber {
  position: absolute;
  top: 0;
  left: 0;
}
.top-bar-area .contact-info-right .phnumber p {
  color: #ffffff;
  font-size: 14px;
  margin: 0;
}
.top-bar-area .contact-info-right .phnumber span::before {
  color: #d5ac63;
  display: inline-block;
  padding-right: 6px;
  position: relative;
  top: 3px;
  font-size: 18px;
}

.top-bar-area .contact-info-right .language-switcher {
  left: 175px;
  position: absolute;
  top: 0;
}


.top-social-links {
  position: absolute;
  right: 0;
  top: 2px;
}
.top-social-links ul li {
  display: inline-block;
  margin-left: 15px;
}
.top-social-links ul li a i {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  transition: all 500ms ease 0s;
  width: 20px;
  height: 20px;
  display: block;
  text-align: center;
  line-height: 20px;
}
.top-social-links ul li a:hover i{
  color: #d5ac63;
}





/*==============================================
    Header Area Css
===============================================*/
.header-area {

}
.header-area .outer-box {
  padding-right: 120px;
  position: relative;
}
.header-area .outer-box .logo {
  float: left;
  position: relative;
  transition: all 500ms ease 0s;
  padding: 40px 0;
}

/* Search css*/




/* Mainmenu css*/




/*** 
=============================================
    Rev Slider Wrapper style
=============================================
***/



/*** 
=============================================
    Welcome Area style
=============================================
***/
.welcome-area {
  padding-top: 100px;
  padding-bottom: 100px;
  
}

.welcome-area p{
  color: #000;
  
}

.welcome-area .text-holder h3{
  color: #252525;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  margin: 0 0 0px;
}
.welcome-area .text-holder .bottom {
  margin-top: 30px;
  padding-left: 215px;
  position: relative;
  min-height: 60px;
}
.welcome-area .text-holder .bottom .button {
  position: absolute;
  top: 0;
  left: 0;
}
.welcome-area .text-holder .bottom .button a{
  padding: 17px 30px 15px;
}
.welcome-area .text-holder .bottom .title h3 {
  color: #252525;
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  position: relative;
  top: 10px;
}
.welcome-area .text-holder .bottom .title h3 span{
  color: #d5ac63;
  font-family: "OilBats";
  line-height: 30px;
  margin-top: 5px;
}





/*** 
=============================================
    Service Area style
=============================================
***/
.service-area {
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 50px;
  padding-top: 100px;
  position: relative;
  z-index: 1;
}
.service-area::before {
  background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.service-area .sec-title {
  padding-bottom: 44px;
}
.service-area .sec-title h2 {
  color: #ffffff;
}

.single-service-item{
  margin-bottom: 41px;    
}
.single-service-item .img-holder{
  display: block;
  overflow: hidden;
  position: relative; 
}
.single-service-item .img-holder img{
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;    
}
.single-service-item .img-holder .overlay .box .content a i{
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 20px;
  height: 45px;
  line-height: 48px;
  transition: all 500ms ease 0s;
  width: 45px; 
}
.single-service-item:hover .img-holder .overlay{
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotateY(0deg) scale(1,1);
  transform: rotateY(0deg) scale(1,1);    
}
.single-service-item:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.single-service-item .img-holder .overlay .box .content a:hover i{
  background: #d5ac63;
}

.single-service-item .text-holder h3 {
  color: #d5ac63;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 20px 0 6px;
  text-transform: capitalize;
}
.single-service-item .text-holder h3 span{
  color: #fff;
}
.single-service-item .text-holder p{
  color: #c1c1c1;
}



/*** 
=============================================
    Latest Project Area style
=============================================
***/
.latest-project-area{
  padding-top: 100px;
  padding-bottom: 70px;
  overflow: hidden;
}
.latest-project-area .sec-title {
  padding-bottom: 44px;
}
.latest-project-area .container-fluid {
  padding-left: 30px;
  padding-right: 30px;
}
.latest-project-area .project-filter {
  margin-bottom: 73px;
  margin-left: -20px;
  margin-right: -20px;
}
.latest-project-area .project-filter li {
  display: inline-block;
  float: left;
  margin: 0;
}

.latest-project-area .project-filter li span {
  color: #9a9a9a;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  transition: all 500ms ease 0s;
  font-family: 'Roboto', sans-serif;
}
.latest-project-area .project-filter li:last-child span:after{
  content: "";
}
.latest-project-area .project-filter li span::after {
  color: #eaeaea;
  content: "/";
  display: inline-block;
  margin: 0 20px 0 20px;
}
.latest-project-area .project-filter li.active span, 
.latest-project-area .project-filter li:hover span {
  color: #d5ac63;
}

.single-project-item {
  padding-bottom: 30px;
}
.single-project-item .img-holder {
  display: block;
  overflow: hidden;
  position: relative;     
}
.single-project-item .img-holder img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;      
}


.single-project-item .img-holder .overlay .box .content a h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0 0 3px;
  transition: all 500ms ease;
}
.single-project-item .img-holder .overlay .box .content p {
  font-weight: 400;
  color: #d5ac63;
  margin: 0;
}
.single-project-item:hover .img-holder .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotateY(0deg) scale(1,1);
  transform: rotateY(0deg) scale(1,1);      
}
.single-project-item:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.single-project-item .img-holder .overlay .box .content a h3:hover{
  color: #d5ac63;
}

.latest-project-area .single-project-item .img-holder .overlay .box .content .icon-holder {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  border-radius: 50%;
  height: 40px;
  position: absolute;
  right: 15px;
  top: 15px;
  transition: all 500ms ease 0s;
  width: 40px;
}
.latest-project-area .single-project-item .img-holder .overlay .box .content .icon-holder a i {
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  line-height: 40px;
  transition: all 500ms ease;
}
.latest-project-area .single-project-item .img-holder .overlay .box .content .icon-holder:hover{
  background: #d5ac63;    
} 



/*** 
=============================================
    Slogan Area style
=============================================
***/
.slogan-area {
  background-attachment: scroll;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 68px;
  padding-top: 66px;
  position: relative;
  z-index: 1;  
}
.slogan-area::before {
  background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.slogan-area .slogan {
  padding: 0 140px;
}
.slogan-area .slogan h2{
  color: #d5ac63;
  font-size: 28px;
  font-weight: 400;
  line-height: 44px;
  text-align: center;
  transform: scale(1);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;   
}
.slogan-area .slogan:hover h2{
  color: #fff;
  transform: scale(1.1);    
}


/*** 
=============================================
    Working Area style
=============================================
***/
.working-area{
  padding-top: 100px;
  padding-bottom: 50px;
}
.working-area .sec-title {
  padding: 0 165px 40px;
}
.working-area .sec-title p {
  font-size: 18px;
  line-height: 32px;
  margin: 16px 0 0px;
}
.working-area .single-working-item {
  padding-bottom: 40px;
}
.working-area .single-working-item .icon-box {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #f7f7f7;
  border-radius: 50%;
  display: block;
  height: 180px;
  padding: 9px;
  position: relative;
  width: 180px;
  margin: 0 auto;
  transition: all 500ms ease;
}

.working-area .single-working-item .icon-box .icon {
  background: #f7f7f7 none repeat scroll 0 0;
  border-radius: 50%;
  display: block;
  height: 160px;
  width: 160px;
  text-align: center;
  line-height: 160px;
  color: #d5ac63;
  font-size: 50px;
  transition: all 500ms ease;
}
.working-area .single-working-item .icon-box .icon span:before{
  font-size: 50px;
}
.working-area .single-working-item .icon-box .count {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #f7f7f7;
  border-radius: 50%;
  display: block;
  height: 45px;
  left: 5px;
  position: absolute;
  text-align: center;
  top: 10px;
  width: 45px;
  transition: all 500ms ease;
}
.working-area .single-working-item .icon-box .count h3 {
  color: #252525;
  font-size: 18px;
  line-height: 45px;
  font-weight: 700;
  transition: all 500ms ease;
}
.working-area .single-working-item .text-box { }
.working-area .single-working-item .text-box h3 {
  color: #252525;
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 21px 0 9px;
}
.working-area .single-working-item .text-box p {
  margin: 0;  
}
.working-area .single-working-item:hover .icon-box{
  background: #d5ac63;
} 
.working-area .single-working-item:hover .icon-box .count{
  background: #d5ac63;
}
.working-area .single-working-item:hover .icon-box .count h3{
  color: #fff;
}


/*** 
=============================================
    Testimonial Area style
=============================================
***/



/*** 
=============================================
    Latest blog Area style
=============================================
***/




/*** 
=============================================
    Brand Area style
=============================================
***/




/*** 
=============================================
    Footer area style
=============================================
***/
.footer-area {
  background: #1b1b1b none repeat scroll 0 0;
  padding-bottom: 75px;
  padding-top: 80px;
}
.single-footer-widget .footer-logo {
  padding: 0 0 27px;
}
.single-footer-widget .interrio-info {
  overflow: hidden;
  margin: 0 0 30px;
}
.single-footer-widget .interrio-info p {
  margin: 0;
}
.single-footer-widget .interrio-info p span{
  color: #d5ac63;
  font-weight: 700;
}
.single-footer-widget .footer-contact-info {
  overflow: hidden;
}
.single-footer-widget .footer-contact-info li {
  border-bottom: 1px solid #242424;
  margin-bottom: 7px;
  padding-bottom: 9px;
  padding-left: 30px;
  position: relative;
}
.single-footer-widget .footer-contact-info li:last-child{
  border-bottom: 0px solid #242424;  
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.single-footer-widget .footer-contact-info li .icon-holder {
  position: absolute;
  top: 0;
  left: 0;
}
.single-footer-widget .footer-contact-info li .icon-holder span:before{
  color: #d5ac63;
  font-size: 20px;
}
.single-footer-widget .footer-contact-info li .icon-holder.time span::before {
  top: 3px;
  position: relative;
}
.single-footer-widget .footer-contact-info li .text-holder {}
.single-footer-widget .footer-contact-info li .text-holder p {
  margin: 0;
  color: #c1c1c1;
}

.single-footer-widget .title {
  padding-bottom: 40px;
  padding-top: 6px;
}
.single-footer-widget .title h3 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  text-transform: capitalize;
}
.single-footer-widget .popular-news { }
.single-footer-widget .popular-news .single-popular-news-item {
  padding-left: 105px;
  position: relative;
  margin-bottom: 40px;
}
.single-footer-widget .popular-news .single-popular-news-item:last-child{
  margin-bottom: 0;    
}
.single-footer-widget .popular-news .single-popular-news-item .img-holder {
  width: 80px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.single-footer-widget .popular-news .single-popular-news-item .img-holder img{
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;       
}
.single-footer-widget .popular-news .single-popular-news-item .img-holder .overlay .box .content a i {
  font-size: 16px;
  transition: all 500ms ease 0s; 
  color: #fff;
}
.single-footer-widget .popular-news .single-popular-news-item:hover .img-holder .overlay{
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotateY(0deg) scale(1,1);
  transform: rotateY(0deg) scale(1,1);    
}
.single-footer-widget .popular-news .single-popular-news-item:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.single-footer-widget .popular-news .single-popular-news-item .img-holder .overlay .box .content a:hover i{
  color: #d5ac63;
}
.single-footer-widget .popular-news .single-popular-news-item .text-holder {
  position: relative;
  top: -8px;
}
.single-footer-widget .popular-news .single-popular-news-item .text-holder p {
  color: #c1c1c1;
  margin: 0 0 10px;
 transition: all 500ms ease;
}
.single-footer-widget .popular-news .single-popular-news-item .text-holder .info {
  overflow: hidden;
}
.single-footer-widget .popular-news .single-popular-news-item .text-holder .info li {
  border-right: 1px solid #d5ac63;
  display: inline-block;
  float: left;
  line-height: 15px;
  margin-right: 10px;
  padding-right: 10px;
  color: #d5ac63;
  transition: all 500ms ease;
}
.single-footer-widget .popular-news .single-popular-news-item .text-holder .info li:last-child{
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
.single-footer-widget .popular-news .single-popular-news-item .text-holder a:hover p{
  color: #d5ac63;
}


.single-footer-widget .subscribe-form {
  overflow: hidden;
  position: relative;
  top: -10px;
}
.single-footer-widget .subscribe-form p {
  color: #c1c1c1;
  margin: 0 0 11px;
}
.single-footer-widget .subscribe-form form {
  position: relative;  
}
.single-footer-widget .subscribe-form form input[type=text] {
    background: #1e1e1e;
    border: 1px solid #242424;
    color: #c1c1c1;
    display: block;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    height: 50px;
    padding-left: 15px;
    padding-right: 55px;
    position: relative;
    -webkit-transition: all 500ms ease 0s;
    transition: all 500ms ease 0s;
    width: 100%;  
}
.single-footer-widget .subscribe-form form button {
    background: #1e1e1e none repeat scroll 0 0;
    border-left: 2px solid #242424;
    color: #d5ac63;
    display: block;
    height: 50px;
    padding: 10.5px 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transition: all 500ms ease 0s;
    transition: all 500ms ease 0s;
    width: 50px;
    border-top: 1px solid #242424;
    border-right: 1px solid #242424;
    border-bottom: 1px solid #242424;
}
.single-footer-widget .subscribe-form form input[type=text]:focus {
    border: 1px solid #d5ac63;
    background: #c1c1c1;
    color: #1b1b1b;
}
.single-footer-widget .subscribe-form form input[type=text]:focus + button, 
.single-footer-widget .subscribe-form form button:hover {
    background: #d5ac63 none repeat scroll 0 0;
    color: #1b1b1b;
    border-color: #d5ac63;
}



.single-footer-widget .subscribe-form h4 {
  color: #c1c1c1;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 28px;
  margin: 12px 0 10px;
}

.single-footer-widget .latest-project {}
.single-footer-widget .latest-project .latest-project-items {
  overflow: hidden;
  margin-top: -5px;
}
.single-footer-widget .latest-project ul li {
  display: inline-block;
  float: left;
  position: relative;
}
.single-footer-widget .latest-project ul li .img-holder {
  overflow: hidden;
  position: relative;
}
.single-footer-widget .latest-project ul li .img-holder img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;     
}
.single-footer-widget .latest-project ul li .img-holder .overlay .box .content a i {
  font-size: 16px;
  transition: all 500ms ease 0s; 
  color: #fff;  
}
.single-footer-widget .latest-project ul li:hover .img-holder .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotateY(0deg) scale(1,1);
  transform: rotateY(0deg) scale(1,1);      
}
.single-footer-widget .latest-project ul li:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);  
}
.single-footer-widget .latest-project ul li .img-holder .overlay .box .content a:hover i {
  color: #d5ac63;    
}

/*** 
=============================================
    Footer bottom area style
=============================================
***/
.footer-bottom-area {
    background: #141414 none repeat scroll 0 0;
    padding-bottom: 23px;
    padding-top: 18px;
}
.footer-bottom-area .copyright-text p {
    color: #c1c1c1;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    font-family: 'Lato', sans-serif;
}
.footer-bottom-area .copyright-text p a {
    color: #d5ac63;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
.footer-bottom-area .copyright-text p a:hover{
  color: #fff;
}

.footer-bottom-area .footer-menu {
  float: right;
  position: relative;
  top: 3px;
}
.footer-bottom-area .footer-menu ul li {
  display: inline-block;
  margin: 0 0 0 20px;
}
.footer-bottom-area .footer-menu ul li a i{
  color: #ffffff;
  font-size: 16px;
  transition: all 500ms ease;
}
.footer-bottom-area .footer-menu ul li a:hover i{
  color: #d5ac63;
}



/*** 
=============================================
    Breadcrumb area style
=============================================
***/




/*** 
=============================================
    About Interrio area style
=============================================
***/




/*** 
=============================================
    Choose area style
=============================================
***/



/*** 
=============================================
    Team area style
=============================================
***/




/*** 
=============================================
    Slogan-area.bg-clr-1 style
=============================================
***/
.slogan-area.bg-clr-1 {}
.slogan-area.bg-clr-1::before {
  background: rgba(213, 172, 99, 0.93) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.slogan-area.bg-clr-1 .slogan {
  padding: 0 70px;
}
.slogan-area.bg-clr-1 .slogan h2{
  color: #ffffff;
}



/*** 
=============================================
    Fact counter area style
=============================================
***/




/*** 
=============================================
    Not found area style
=============================================
***/




/*** 
=============================================
    Faq content area style
=============================================
***/




/*** 
=============================================
    Press Release Content Area style
=============================================
***/




/*** 
=============================================
    Press Release Item Area style
=============================================
***/




/*** 
=============================================
    Testimonial v2 Area style
=============================================
***/




/*** 
=============================================
    Blog Area style
=============================================
***/




/*** 
=============================================
    Blog Standard Area style
=============================================
***/


/*** 
=============================================
    Blog Standard Area style
=============================================
***/




/*** 
=============================================
    Contact v1 Area style
=============================================
***/


/*** 
=============================================
    Google map Area style
=============================================
***/
.google-map-area {
  position: relative;
}
#contact-google-map {
  height: 480px;
  width: 100%;
}



/*** 
=============================================
    Contact v2 Area style
=============================================
***/




/*** 
=============================================
    Contact v2 Form Area style
=============================================
***/




/*** 
=============================================
    Project Area style
=============================================
***/
#project-area {
  padding-bottom: 100px;
  padding-top: 80px;
}
#project-area .project-filter {
  margin-bottom: 60px
}
#project-area .project-filter li {
  display: inline-block;
  margin: 0 3px;
}
#project-area .project-filter li span {
  background: #fff;
  border: 1px solid #ebebeb;
  color: #9a9a9a;
  display: block;
  font-size: 16px;
  font-weight: 400;
  padding: 10px 29px;
  text-transform: capitalize;
  border-radius: 0px;
  cursor: pointer;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}
#project-area .project-filter li.active span, 
#project-area .project-filter li:hover span {
  background: #252525;
  color: #d5ac63;
  border: 1px solid #252525;
}
#project-area .single-project-item .img-holder .overlay .box .content .icon-holder {
  position: absolute;
  right: 15px;
  top: 15px;
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transition: all 500ms ease 0s;
}
#project-area .single-project-item .img-holder .overlay .box .content .icon-holder a i {
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  line-height: 40px;
}
#project-area .single-project-item .img-holder .overlay .box .content .icon-holder:hover{
  background: #d5ac63;
}
#project-area .loadmore-btn a {
  padding: 16px 45px;
  margin-top: 20px;
}



/*** 
=============================================
    Pro Manasory V2 Area style
=============================================
***/




/*** 
=============================================
    Pro Classic V1 Area style
=============================================
***/



/*** 
=============================================
    Pro Classic V2 Area style
=============================================
***/




/*** 
=============================================
    Pro Classic V3 Area style
=============================================
***/
.pro-classic-v3-area .single-project-item .img-holder .overlay-style-2 .box .content .text-holder {
  height: 60px;
  padding-top: 18px;
}
.pro-classic-v3-area .single-project-item .img-holder .overlay-style-2 .box .content .text-holder a h3 {
  font-size: 18px;
  margin: 0 0 3px;
}
.pro-classic-v3-area .post-pagination {
  padding-top: 30px;
}



/*** 
=============================================
    Pro Fullwidth Area style
=============================================
***/
.pro-fullwidth-area .container-fluid {
  padding-left: 30px;
  padding-right: 30px;
}



/*** 
=============================================
    Pro Grid v1 Area style
=============================================
***/
#project-grid-area{
  padding-top: 73px;
  padding-bottom: 70px;
}
#project-grid-area .project-filter {
  margin-bottom: 50px;
}
#project-grid-area .project-filter li {
  display: inline-block;
  margin: 0;
}
#project-grid-area .project-filter li span {
  color: #9a9a9a;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  display: block;
  text-transform: capitalize;
  transition: all 500ms ease 0s;
}
#project-grid-area .project-filter li span::after {
  color: #eaeaea;
  content: "/";
  display: inline-block;
  margin: 0 20px;
}
#project-grid-area .project-filter li.active span, 
#project-grid-area .project-filter li:hover span {
  color: #d5ac63;
}
#project-grid-area .single-project-item .img-holder .overlay .box .content .icon-holder {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  border-radius: 50%;
  height: 40px;
  position: absolute;
  right: 15px;
  top: 15px;
  transition: all 500ms ease 0s;
  width: 40px;
}
#project-grid-area .single-project-item .img-holder .overlay .box .content .icon-holder a i {
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  line-height: 40px;
  transition: all 500ms ease;
}
#project-grid-area .single-project-item .img-holder .overlay .box .content .icon-holder:hover{
  background: #d5ac63;    
} 



/*** 
=============================================
    Pro Withtext Area style
=============================================
***/
#project-area.pro-withtext-area .single-project-item{
  padding-bottom: 27px;
}
#project-area.pro-withtext-area .single-project-item .img-holder .overlay .box .content .icon-holder {
  background: transparent;
  border-radius: 50%;
  height: 40px;
  transition: all 500ms ease 0s;
  width: 40px;
  position: static;
  text-align: center;
  margin: 0 auto;
}
#project-area.pro-withtext-area .single-project-item .img-holder .overlay .box .content .icon-holder a span::before {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
}
#project-area.pro-withtext-area .single-project-item .img-holder .overlay .box .content .icon-holder:hover{
  background: #d5ac63;
}

#project-area.pro-withtext-area .single-project-item .text-holder {
  padding-top: 22px;
}
#project-area.pro-withtext-area .single-project-item .text-holder a h3{
  color: #252525;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 4px;
  text-transform: capitalize;
}
#project-area.pro-withtext-area .single-project-item .text-holder p{
  color: #d5ac63;
  font-weight: 400;
  margin: 0;
  line-height: 16px;
}
#project-area.pro-withtext-area .post-pagination {
  padding-top: 40px;  
}



/*** 
=============================================
    Project Single v1 Area style
=============================================
***/
.project-single-v1-area {
  padding-bottom: 70px;
  padding-top: 80px;
}
.project-single-v1-area .carousel-indicators {
  bottom: 0;
}
.project-single-v1-area .carousel-indicators li {
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 10px;
  margin: 5px;
  width: 10px;
}
.project-single-v1-area .carousel-indicators .active li{
  background-color: #fff;
  height: 10px;
  margin: 5px;
  width: 10px;
  transition: all 500ms ease;
}
.project-single-v1-area #project-single-carousel{ }
.project-single-v1-area #project-single-carousel .single-item .img-holder img {
  width: 100%;
}


#project-single-area .project-info {}
#project-single-area .project-info h3 {
  color: #252525;
  font-size: 24px;
  font-weight: 700;
  margin: -4px 0 27px;
  text-transform: uppercase;
}
#project-single-area .project-info .project-info-list {
  overflow: hidden;
  margin-top: 30px;
  margin-left: -30px;
  margin-right: -30px;
}
#project-single-area .project-info .project-info-list li {
  border-bottom: 1px solid #f7f7f7;
  float: left;
  margin: 0 30px 20px;
  overflow: hidden;
  padding-bottom: 11px;
  padding-left: 20px;
  position: relative;
  width: 155px;
}
#project-single-area .project-info .project-info-list li .icon-holder {
  left: 0;
  position: absolute;
  top: -5px;
}
#project-single-area .project-info .project-info-list li .icon-holder i {
  font-size: 14px;
  color: #d5ac63;
}
#project-single-area .project-info .project-info-list li .text-holder {}
#project-single-area .project-info .project-info-list li .text-holder h5 {
  color: #252525;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  margin: 0 0 3px;
}
#project-single-area .project-info .project-info-list li .text-holder p {
  margin: 0;  
}


.project-single-v1-area .project-description-content {
  padding-top: 50px;
}
.project-single-v1-area .project-description-content h3 {
  color: #252525;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 27px;
  text-transform: uppercase;
}
.project-single-v1-area .project-description-content .project-manager-box {
  background: #f7f7f7 none repeat scroll 0 0;
  border-left: 1px solid #d5ac63;
  margin: 32px 0 0;
  overflow: hidden;
  padding: 15px 30px 21px 75px;
  position: relative;
}
.project-single-v1-area .project-description-content .project-manager-box::before {
  background: #d5ac63 none repeat scroll 0 0;
  content: "";
  height: 90%;
  left: 2px;
  position: absolute;
  top: 0;
  width: 1px;
}
.project-single-v1-area .project-description-content .project-manager-box::after {
  content: "\f10d";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #e6e6e6;
  font-size: 30px;
  position: absolute;
  top: 23px;
  left: 23px;
}
.project-single-v1-area .project-description-content .project-manager-box h4 {
  color: #9a9a9a;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 32px;
  margin: 0 0 12px;
}
.project-single-v1-area .project-description-content .project-manager-box h5 {
  color: #252525;
  font-size: 18px;
  font-weight: 500;
}
.project-single-v1-area .project-description-content .project-manager-box h5 span {
  color: #d5ac63;
  font-size: 16px;
  font-weight: 400;
}


.project-single-v1-area .related-project-items {
  overflow: hidden;
  padding-top: 100px;
}
.project-single-v1-area .related-project-items .sec-title {
  padding-bottom: 44px;
}
.project-single-v1-area .related-project-items .single-project-item {}
.related-project-items .img-holder .overlay .box .content .icon-holder {
  background: transparent none repeat scroll 0 0;
  border-radius: 50%;
  height: 40px;
  margin: 0 auto;
  position: static;
  text-align: center;
  transition: all 500ms ease 0s;
  width: 40px;
}
.related-project-items .img-holder .overlay .box .content .icon-holder a span::before {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
}
.related-project-items .img-holder .overlay .box .content .icon-holder:hover {
    background: #d5ac63 none repeat scroll 0 0;
}
.related-project-items .single-project-item .text-holder {
  padding-top: 22px;
}
.related-project-items .single-project-item .text-holder a h3 {
  color: #252525;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 10px;
  text-transform: capitalize;
}
.related-project-items .single-project-item .text-holder p {
  color: #d5ac63;
  font-weight: 400;
  line-height: 16px;
  margin: 0;
}



/*** 
=============================================
    Project Single v2 Area style
=============================================
***/
.project-single-v2-area {
  padding-bottom: 70px;
  padding-top: 80px;
}
.project-single-v2-area .single-project-item .img-holder .overlay .box .content .icon-holder {
  background: transparent none repeat scroll 0 0;
  border-radius: 50%;
  height: 40px;
  margin: 0 auto;
  position: static;
  text-align: center;
  transition: all 500ms ease 0s;
  width: 40px;  
}
.project-single-v2-area .single-project-item .img-holder .overlay .box .content .icon-holder a span::before {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;  
}
#project-single-area .project-info .share-project {
  padding-left: 150px;
  position: relative;
}
#project-single-area .project-info .share-project .title {
  left: 0;
  position: absolute;
  top: 6px;
}
#project-single-area .project-info .share-project .title h5 {
  color: #252525;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}
#project-single-area .project-info .share-project .social-share {
  padding-left: 40px;
}
#project-single-area .project-info .share-project .social-share ul li {
  display: inline-block;
  margin-right: 15px;
}
#project-single-area .project-info .share-project .social-share ul li a i {
  color: #9a9a9a;
  font-size: 14px;
}


#project-single-area .bottom {
  border-bottom: 1px solid #f7f7f7;
  border-top: 1px solid #f7f7f7;
  margin: 48px 0 0;
  overflow: hidden;
  padding-bottom: 20px;
  padding-top: 20px;
}
#project-single-area .bottom .button a {
  color: #252525;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  transition: all 500ms ease;
}
#project-single-area .bottom .button a:hover{
  color: #fdc716;
}
#project-single-area .bottom .button a i {
  display: inline-block;
  font-size: 18px;
  padding-right: 10px;
  position: relative;
  top: 1px;
}
#project-single-area .bottom .button.next a i{
  padding-right: 0px;
  padding-left: 10px;
}


#project-single-area .bottom .icon-holder a i {
  color: #252525;
  font-size: 24px;
  position: relative;
  top: 4px;
  transition: all 500ms ease 0s;
}
#project-single-area .bottom .icon-holder a:hover i{
  color: #d5ac63;
}



/*** 
=============================================
    Service Page Area Style
=============================================
***/
.service-page-area {
  padding-bottom: 40px;
  padding-top: 100px;
}
.service-page-area .single-service-item {
  margin-bottom: 60px;
}
.service-page-area .single-service-item .text-holder {
  
}
.service-page-area .single-service-item .text-holder h3 {
  color: #252525;
}
.service-page-area .single-service-item .text-holder p {
  color: #9a9a9a;
  font-size: 16px;
  line-height: 28px;
  margin: 0 0 21px;
}
.service-page-area .single-service-item .text-holder .readmore{
  color: #252525;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid #f7f7f7;
  height: 45px;
  width: 130px;
  line-height: 42px;
  display: block;
  text-align: center;
  transition: all 500ms ease;
}
.service-page-area .single-service-item:hover .text-holder .readmore{
  background: #252525;
  border-color: #252525;
  color: #d5ac63;
}



/*** 
=============================================
    Slogan V2 Area Style
=============================================
***/
.slogan-v2-area {
  background-attachment: scroll;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 47px;
  padding-top: 43px;
  position: relative;
  z-index: 1;
}
.slogan-v2-area::before {
  background: rgba(213, 172, 99, 0.93) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.slogan-v2-area .slogan-v2 .text{
  width: 70%; 
  float: left;
}
.slogan-v2-area .slogan-v2 .text h2 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
}
.slogan-v2-area .slogan-v2 .button a {
  background: #ffffff none repeat scroll 0 0;
  border: 2px solid #ffffff;
  color: #252525;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  margin: 15px 0;
  text-align: center;
  text-transform: uppercase;
  width: 185px;
  transition: all 500ms ease;
}
.slogan-v2-area .slogan-v2 .button a:hover{
  background: transparent;
}

/*** 
=============================================
    Checkout Area style
=============================================
***/




/*** 
=============================================
   Account area  style
=============================================
***/




/*** 
=============================================
   Shop area  style
=============================================
***/




/*** 
=============================================
   Shop Withsidebar area  style
=============================================
***/



/*** 
=============================================
    Shopping Cart area  style
=============================================
***/




/*** 
=============================================
   Shop Single area  style
=============================================
***/



/*** 
=============================================
   Shop Single area  style
=============================================
***/




/*** 
=============================================
   Shop Single area  style
=============================================
***/




/*** 
=============================================
   Commercial Design area  style
=============================================
***/




/*** 
=============================================
   Appoinment area  style
=============================================
***/





/*** 
=============================================
   Pricing Table area  style
=============================================
***/




/*** 
=============================================
   Pricing Table area  style
=============================================
***/


.footer-area {
  padding: 50px 0;
  background-color: #1c1c1c;
  color: #fff;
}

.footer-contact-info li {
  font-size: 15px;
  margin-bottom: 12px;
}

.footer-social-links ul.social-list {
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.footer-social-links ul.social-list li {
  list-style: none;
  display: flex;
  align-items: center;
  width: 50%;
  margin-bottom: 10px;
}

.footer-social-links .social-icon {
  width: 28px;       
  height: 28px;
  margin-right: 10px;
  filter: brightness(0) invert(1);
}

.footer-social-links a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-social-links a:hover {
  color: #f0c040;
}

.footer-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  .footer-map iframe {
    height: 300px;
    margin-top: 30px;
  }
  .footer-area .row {
    flex-direction: column;
  }
}

.hero-static {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background-color: #000;
}

.hero-static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9; 
}

.hero-static .hero-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 5vw;
  z-index: 2;
}

.hero-static .slide-content-box {
  max-width: 800px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4); 
  padding: 30px;
  border-radius: 10px;
}

.hero-static .slide-content-box h1 {
  color: #fff;
  font-size: 8vw;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}

.hero-static .slide-content-box h1 span {
  color: #e8b650; 
}

.hero-static .slide-content-box h3 {
  font-size: 5vw;
  margin-top: 20px;
  font-weight: 400;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
}

.hero-static .slide-content-box h3 span {
  color: #e8b650; 
}

.hero-static .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.hero-static .thm-btn {
  padding: 12px 24px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  font-size: 4vw;
  border: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 
}

.hero-static .bg-cl-1 {
  background-color: #e8b650; 
  color: #fff;
}

.hero-static .bdr {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.hero-static .thm-btn:hover {
  opacity: 0.85;
}

@media (min-width: 768px) {
  .hero-static .slide-content-box h1 {
    font-size: 48px;
  }

  .hero-static .slide-content-box h3 {
    font-size: 24px;
  }

  .hero-static .thm-btn {
    font-size: 16px;
  }
}
.phone-link {
  color: white;
  text-decoration: none; 
}

.phone-link:hover {
  color: #dddddd; 
}

.commercial {
  padding-top: 100px;
  padding-bottom: 100px;
 
}

.commercial p{
  color: #000;
 
}

.commercial .text-holder h3{
  color: #252525;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  margin: 0 0 0px;
}
.commercial .text-holder .bottom {
  margin-top: 30px;
  padding-left: 215px;
  position: relative;
  min-height: 60px;
}
.commercial .text-holder .bottom .button {
  position: absolute;
  top: 0;
  left: 0;
}
.commercial .text-holder .bottom .button a{
  padding: 17px 30px 15px;
}
.commercial .text-holder .bottom .title h3 {
  color: #252525;
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  position: relative;
  top: 10px;
}
.commercial .text-holder .bottom .title h3 span{
  color: #d5ac63;
  font-family: "OilBats";
  line-height: 30px;
  margin-top: 5px;
}

.commercial-photos {
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 50px;
  padding-top: 100px;
  position: relative;
  z-index: 1;
}
.commercial-photos::before {
  background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.commercial-photos .sec-title {
  padding-bottom: 44px;
}
.commercial-photos .sec-title h2 {
  color: #ffffff;
}

.commercial-photos-item{
  margin-bottom: 41px;    
}
.single-commerce-item .img-holder{
  display: block;
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
}
.single-commerce-item .img-holder img{
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;    
}
.single-commerce-item .img-holder .overlay .box .content a i{
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 20px;
  height: 45px;
  line-height: 48px;
  transition: all 500ms ease 0s;
  width: 45px; 
}
.single-commerce-item:hover .img-holder .overlay{
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotateY(0deg) scale(1,1);
  transform: rotateY(0deg) scale(1,1);    
}
.single-commerce-item:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.single-commerce-item .img-holder .overlay .box .content a:hover i{
  background: #d5ac63;
}

.single-commerce-item .text-holder h3 {
  color: #d5ac63;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 20px 0 6px;
  text-transform: capitalize;
}



.mobile-top-bar {
    display: none;
}


@media (max-width: 767px) {
    .top-bar-area {
        display: none; 
    }

    .mobile-top-bar {
        display: block;
        background-color: #111;
        color: #fff;
        padding: 10px 15px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }

    .burger-icon {
        font-size: 24px;
        cursor: pointer;
        user-select: none;
    }

    .mobile-contact-info {
        display: none;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .mobile-contact-info ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-contact-info li {
        margin-bottom: 8px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-contact-info a {
        color: #fff;
        text-decoration: none;
    }

    html, body {
    overflow-x: hidden; 
    width: 100%; 
    max-width: 100%; 
}
}


.single-service-item .img-holder {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 75%; 
}

.single-service-item .img-holder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
}


.single-service-item .img-holder img {
    transition: transform 0.3s ease;
}

.single-service-item:hover .img-holder img {
    transform: scale(1.05);
}

.single-commerce-item .img-holder {
    width: 100%;
    height: 250px; 
    overflow: hidden;
    position: relative;
}

.single-commerce-item .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.feedback-form-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    border-radius: 12px;
    background: #1c1c1c;
    color: #fff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.feedback-form-container h3 {
    font-size: 28px;
    margin-bottom: 25px;
    text-align: center;
    color: #fff;
    position: relative;
    padding-bottom: 15px;
}

.feedback-form-container h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: #f8b400;
}

/* Стили для строк формы */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-group {
    flex: 1;
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #f8b400;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(248, 180, 0, 0.2);
}

.submit-btn {
    width: 100%;
    padding: 16px;
    background: #f8b400;
    color: #222;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover {
    background: #ffc730;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


#form-success {
    margin-top: 20px;
    padding: 15px;
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid #28a745;
    border-radius: 8px;
    text-align: center;
    animation: fadeIn 0.5s ease;
}

#form-success p {
    margin: 0;
    color: #fff;
    font-size: 16px;
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .feedback-form-container {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .feedback-form-container h3 {
        font-size: 24px;
    }
}

.error-message {
    color: #ff6b6b;
    margin-top: 5px;
    font-size: 14px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


.single-project-item .img-holder {
    width: 100%;
    height: 250px; 
    overflow: hidden;
    position: relative;
}

.single-project-item .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.faq-section {
  background-color: #1c1c1c;
  padding: 100px 0;
  position: relative;
  z-index: 1;
}

.faq-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1c1c1c;
  z-index: -1;
}

.faq-accordion {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.faq-accordion h2 {
  color: #d2ae5d;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 60px;
  text-align: center;
  letter-spacing: 1px;
  font-family: 'Roboto', sans-serif;
}

.accordion-item {
  margin-bottom: 20px;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  background-color: #252525;
  transition: all 0.3s ease;
}

.accordion-item:hover {
  border-color: #d2ae5d;
}

.accordion-header {
  padding: 25px 30px;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  transition: all 0.3s ease;
  position: relative;
}

.accordion-header:hover {
  color: #d2ae5d;
}

.accordion-header::after {
  content: "+";
  color: #d2ae5d;
  font-size: 24px;
  font-weight: 300;
  transition: all 0.3s ease;
}

.accordion-header.active::after {
  content: "-";
}

.accordion-content {
  padding: 0 30px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  color: #e0e0e0;
  font-size: 16px;
  line-height: 1.6;
}

.accordion-content p {
  padding: 0 0 25px;
  margin: 0;
}


@media (max-width: 992px) {
  .faq-section {
    padding: 80px 0;
  }
  
  .faq-accordion h2 {
    font-size: 30px;
    margin-bottom: 40px;
  }
  
  .accordion-header {
    padding: 20px 25px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .faq-section {
    padding: 60px 0;
  }
  
  .faq-accordion h2 {
    font-size: 26px;
    margin-bottom: 30px;
  }
  
  .accordion-header {
    padding: 18px 20px;
  }
  
  .accordion-content {
    padding: 0 20px;
  }
  
  .accordion-content p {
    padding-bottom: 20px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: 50px 0;
  }
  
  .faq-accordion h2 {
    font-size: 22px;
    margin-bottom: 25px;
  }
  
  .accordion-header {
    padding: 15px;
    font-size: 15px;
  }
  
  .accordion-header::after {
    font-size: 20px;
  }
}


.reviews-section {
    background-color: #ffffff;
    padding: 60px 0;
    font-family: 'Roboto', sans-serif;
}

.reviews-container {
    width: 1000px; 
    margin: 0 auto;
    padding: 0 15px;
    position: relative; 
}

.section-title {
    color: #d2ae5d;
    font-size: 28px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 40px;
}

.swiper-container {
    width: 100%;
    overflow: hidden;
}

.review-card {
    background: #f9f9f9;
    border-radius: 5px;
    padding: 25px;
    height: 300px; 
    box-sizing: border-box;
    border-left: 3px solid #d2ae5d;
    margin: 0 10px;
}

.review-rating {
    color: #d2ae5d;
    font-size: 18px;
    margin-bottom: 15px;
}

.review-text {
    color: #333;
    font-size: 15px;
    line-height: 1.5;
}

.review-author {
    color: #d2ae5d;
    font-weight: 500;
    text-align: right;
    margin-top: 20px;
}

.swiper-pagination {
    position: relative;
    margin-top: 30px;
}

.swiper-button-next,
.swiper-button-prev {
    color: #d2ae5d;
    width: 40px;
    height: 40px;
    background: rgba(210, 174, 93, 0.1);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 10;
}

.swiper-button-next {
    right: -50px;
}

.swiper-button-prev {
    left: -50px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    content: '';
    
    font-family: 'Arial', sans-serif; 
}

.swiper-button-next::after {
    content: '→'; 
}

.swiper-button-prev::after {
    content: '←'; 
}


@media (max-width: 1040px) {
    .reviews-container {
        width: 100%;
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .review-card {
        height: auto;
        min-height: 300px;
    }
    .swiper-button-next {
        right: 10px;
    }
    .swiper-button-prev {
        left: 10px;
    }
}

.sticky-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 999;
            background-color: #d2ae5d; 
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 25px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        
        .sticky-btn:hover {
            background-color: #c19b4b;
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.25);
        }

        
        .sticky-btn i {
            font-size: 20px;
        }

        
        @media (max-width: 768px) {
            .sticky-btn {
                bottom: 20px;
                right: 20px;
                padding: 12px 20px;
                font-size: 14px;
            }
        }

        
.features-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 30px 0;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #d2ae5d;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background: #fff;
}

.card-icon {
    font-size: 30px;
    margin-right: 15px;
    min-width: 40px;
    text-align: center;
}

.card-content h4 {
    color: #252525;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #d2ae5d;
}

.card-content p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}


@media (max-width: 768px) {
    .feature-card {
        padding: 15px;
    }
    
    .card-icon {
        font-size: 24px;
        margin-right: 12px;
        min-width: 35px;
    }
    
    .card-content h4 {
        font-size: 16px;
    }
    
    .card-content p {
        font-size: 13px;
    }
}


.worker-image {
    position: relative;
    margin-top: 30px;
    text-align: center;
}

.worker-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    right: -10px;
    background: #d2ae5d;
    color: white;
    padding: 15px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.experience-badge .years {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.experience-badge .text {
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
}


@media (max-width: 768px) {
    .worker-image {
        margin-top: 50px;
    }
    
    .experience-badge {
        bottom: -15px;
        right: 50%;
        transform: translateX(50%);
    }
}

.consultation-section {
  background: rgba(0, 0, 0, 0.9);
  padding: 60px 0;
  position: relative;
}

.consultation-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.consultation-title {
  color: #d5ac63;
  font-size: 32px;
  font-weight: 400;
  flex: 1;
  margin: 0;
  text-align: left;
}

.consultation-content {
  flex: 2;
  text-align: left;
}

.consultation-text {
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.consultation-btn {
  display: inline-block;
  background-color: #d5ac63;
  color: #000;
  padding: 15px 35px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.consultation-btn:hover {
  background-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(213, 172, 99, 0.4);
}


@media (max-width: 768px) {
  .consultation-container {
    flex-direction: column;
    gap: 30px;
  }
  
  .consultation-title {
    text-align: center;
  }
  
  .consultation-content {
    text-align: center;
  }
}

.top-bar-btn-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.top-bar-quote-btn {
    display: inline-block;
    background-color: #d5ac63;
    color: #fff;
    padding: 12px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-bar-quote-btn:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(213, 172, 99, 0.4);
}


@media (max-width: 768px) {
    .top-bar-btn-container {
        justify-content: center;
        margin-top: 15px;
    }
    
    .mobile-top-bar .top-bar-quote-btn {
        display: block;
        text-align: center;
        margin: 15px auto;
        padding: 10px 20px;
    }
}