/***************************************************************************************************************
||||||||||||||||||||||||||       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
10. Latest blog area style 
12. Footer area style
13. Single service style
18. Blog page style
19. Blog single style
20. Blog with sidebar 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(hover.css);
@import url(jquery.bxslider.css);
@import url(owl.carousel.css);
@import url(owl.theme.default.min.css);
@import url(animate.min.css);
@import url(jquery.bootstrap-touchspin.css);
@import url('jquery.fancybox.css');
@import url('prettyPhoto.css');

/*** Price filter***/
@import url(../assets/price-filter/nouislider.css);
@import url(../assets/price-filter/nouislider.pips.css);
/*** single shop slide ***/

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





@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;
  background: #f6f0dc;
}
button:focus{
  outline: none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}
h3 {
 
}
h4 {

}

p{
  color: #1b1b1b !important;
  font-weight: 400;
}
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 #fff;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  transition: all 500ms ease;
  line-height: 14px;
}
.bg-cl-1{
  background: #1b1b1b;  
}
.thm-btn:hover{
  background: #141414;  
  border: 2px solid #fff;
  color: #fff;
}



.sec-title {
  margin-top: -5px;
  padding-bottom: 20px;
  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: #1b1b1b;
}
.sec-title span.decor {
  background: #1b1b1b none repeat scroll 0 0;
  height: 2px;
  width: 78px;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.g-title:before{
  background: #fff !important;
}
.sec-title span.decor:before{
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  background: #1b1b1b;
  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  */
.ui-selectmenu-button span.ui-selectmenu-text {
  display: block;
  line-height: 25px;
  overflow: hidden;
  padding: 12px 15px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
}
.ui-state-default {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #eaeaea;
    border-radius: 0;
    color: #9e9e9e;
    font-size: 14px;
    font-weight: normal;
    height: 50px;
    outline: medium none;
    width: 100% !important;
    margin-bottom: 17px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0
}

/* jQuery ui dropdown Icon style */
.ui-state-default .ui-icon {
    background: none
}
.ui-selectmenu-button span.ui-icon {
    margin-top: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.ui-selectmenu-button span.ui-icon {
  display: block;
  float: right;
  height: 48px;
  position: relative;
  text-indent: 0;
  top: 0;
  width: 48px;
}
.ui-selectmenu-button span.ui-icon::before {
  color: #9e9e9e;
    content: "\f0d7";
  font-family: FontAwesome;
  font-size: 18px;
  overflow: visible;
  position: absolute;
  right: 15px;
  top: 12px;
}

/* jQuery ui dropdown Sub item style */
.ui-widget-content {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #eaeaea !important;
  color: #9e9e9e;
  font-family: "Poppins",sans-serif;
  font-size: 14px;
}
.ui-selectmenu-menu .ui-menu {
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 0;
}
.ui-menu .ui-menu-item {
  cursor: pointer;
  margin: 0;
  min-height: 0;
  padding: 8px 15px;
  position: relative;
}

/* jQuery ui dropdown Hover style */
.ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  background: #fff none repeat scroll 0 0;
  border: none;
  color: #252525;
  font-size: 14px;
}


/* 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: #751d09;
  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: 13px 0;
}
.header-area.stricky-fixed .main-menu .navigation li a {
  padding: 10px  10px  10px 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: #1b1b1b;
  border: 2px solid #fff;
  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 #fff;
  color: #fff;
  background: #1b1b1b;
}


/* Post pagination styles */
.post-pagination li {
    display: inline-block;
    margin: 0 3px;
}
.post-pagination li a {
  background: #fff;
  border: 2px solid #f7f7f7;
  color: #292929;
  display: block;
  font-size: 18px;
  font-weight: 600;
  height: 55px;
  padding: 12px 0;
  -webkit-transition: all 500ms ease 0s;
  transition: all 500ms ease 0s;
  width: 55px;
  font-family: 'Montserrat', sans-serif;
}
.post-pagination li.active a, .post-pagination li:hover a {
  background: #fdc716;
  color: #fff;
  border: 2px solid #fdc716;
}



/* 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{
  /* background: #751d09; */
  background: #f6f0dc;
  padding: 5px 0 6px;
}
.top-bar-area .contact-info-left {
  
}
.top-bar-area .contact-info-left ul li {
  display: inline-block;
  float: left;
  margin-right: 30px;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}
.top-bar-area .contact-info-left ul li:last-child{
  margin-right:0;
}
.top-bar-area .contact-info-left ul li span:before{
  color: #fff;
  font-weight: 500;
  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: #fff!important;
  font-size: 14px;
  margin: 0;
}
.top-bar-area .contact-info-right .phnumber span::before {
  color: #fff;
  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: #fff;
}





/*==============================================
    Header Area Css
===============================================*/
.header-area {
background: #751d09;
}
.header-area .outer-box {
  padding-right: 0px;
  position: relative;
}
.header-area .outer-box .logo {
  float: left;
  position: relative;
  transition: all 500ms ease 0s;
  padding: 13px 0;
}

/* Search css*/
.header-area .outer-box .search-box-btn {
  position: absolute;
  right: 0;
  top: 44px;
}
.header-area .outer-box .search-box-btn .toggle-search button {
  background: none;
  border: none;
  padding: 0;
  color: #252525;
  font-size: 15px;
  width: 30px;
  height: 30px;
}



/* Mainmenu css*/
.main-menu {
  /* float: right; */
  position: relative;
}
.main-menu .navbar-collapse {
  padding: 0px
}
.main-menu .navigation {
  /* float: right; */
  margin: 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.main-menu .navigation li {
  /* float: left; */
  margin-left: 10px;
  padding: 0;
  position: relative;
}

.main-menu .navigation li a {
  color: #fff !important;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  opacity: 1;
  padding: 10px 10px 10px 0;
  position: relative;
  text-transform: uppercase;
  /* transition: all 500ms ease 0s; */
}

.main-menu .navigation li a span.main-menu .navigation li a:hover span,.main-menu .navigation li a span:hover{
  color: #fff !important;
}
.main-menu .navigation > li.dropdown > a {
  padding-right: 10px
}
/* .main-menu .navigation > li.dropdown > a:after {
  font-family: 'FontAwesome';
  content: "\f107";
  position: absolute;
  top: 33px;
  right: 23px;
  font-size: 14px;
  transition: all 500ms ease 0s;
} */
.main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a {
  color: #fff !important;
  opacity: 1;
}
.main-menu .navigation > li > ul {
  position: absolute;
  left: 0px;
  top: 140%;
  width: 250px;
  padding: 0px;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  border-bottom: 3px solid #fff;
  /* transition: all 500ms ease; */
}
.main-menu .navigation > li:hover > ul {
  top: 100%;
  opacity: 1;
  visibility: visible;
}
.main-menu .navigation > li > ul > li {
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  border-top: 1px solid #e6e6e6;
}
.main-menu .navigation > li > ul > li:first-child{
  border: none;
}
.main-menu .navigation > li > ul > li > a {
  background: #f7f7f7;
  color: #252525;
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 15px 15px 15px 20px;
  position: relative;
  text-transform: uppercase;
  /* transition: all 500ms ease 0s; */
}
.main-menu .navigation > li > ul > li:hover > a {
  color: #fff;
  background-color: #252525;
}


.main-menu .navigation > li > ul > li.dropdown > a:after{
  font-family: 'FontAwesome';
  content: "\f105";
  position:absolute;
  right:20px;
  top:15px;
  display:block;
  color:#252525;
  font-size:14px;
  text-align:center;
  z-index:5;
  font-weight: 400;
}
.main-menu .navigation > li > ul > li.dropdown:hover > a:after{
  color:#fff;	
}

.main-menu .navigation > li > ul > li > ul{
  position:absolute;
  left:110%;
  top:0px;
  width:220px;
  padding:0px;
  z-index:100;
  border-bottom: 3px solid #fff;
  border-left: 1px solid #fdfcfc;
  visibility:hidden;
  opacity:0;
  /* transition:all 500ms ease; */
}
.main-menu .navigation > li > ul li:hover ul {
  left: 100%;
  opacity: 1;
  visibility: visible;
}

.main-menu .navigation > li > ul > li ul li {
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  border-top: 1px solid #e6e6e6;
}
.main-menu .navigation > li > ul > li ul li:first-child{
  border-top: none;
}
.main-menu .navigation > li > ul > li ul li a{
  background: #f7f7f7;
  color: #252525;
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 15px 15px 15px 20px;
  position: relative;
  text-transform: uppercase;
  /* transition: all 500ms ease 0s;     */
}
.main-menu .navigation > li > ul > li  > ul > li:hover > a{
  background-color: #252525;	
  color: #fff;
}

.main-menu .navbar-collapse > ul li.dropdown .dropdown-btn {
  position: absolute;
  right: 10px;
  top: 6px;
  width: 34px;
  height: 30px;
  border: 1px solid #ffffff;
  background: url(../images/icon/submenu-icon.png) center center no-repeat;
  background-size: 20px;
  cursor: pointer;
  z-index: 5;
  display: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  -moz-border-radius: 3px;
}



/*** 
=============================================
    Rev Slider Wrapper style
=============================================
***/
.rev_slider_wrapper .slide-content-box h1 {
  color: #ffffff;
  font-size: 80px;
  font-weight: 900;
  line-height: 90px;
  margin: 0px 0 14px;
  text-transform: uppercase;
}
.rev_slider_wrapper .slide-content-box h1 span{
  font-family: "OilBats";  
  color: #fff;
  /* font-size: 20px !important; */
}


.rev_slider_wrapper .slide-content-box h3 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 22px;
}
.rev_slider_wrapper .slide-content-box h3 span{
  color: #fff;
}

.rev_slider_wrapper .slide-content-box .button a{
  padding: 17px 40px 15px;
  border-radius: 0;
  transition: all 500ms ease !important;
  -moz-transition: all 500ms ease !important;
  -webkit-transition: all 500ms ease !important;
  -ms-transition: all 500ms ease !important;
  -o-transition: all 500ms ease !important;
}
.rev_slider_wrapper .slide-content-box .button a.bdr{
  border: 2px solid #949494;
}



/*** 
=============================================
    Welcome Area style
=============================================
***/
.welcome-area {
  padding-bottom: 50px;
      padding-top: 60px;
}
.welcome-area .text-holder { }
.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;
}
.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: #fff;
  font-family: "OilBats";
  line-height: 30px;
  margin-top: 5px;
}


.welcome-area .gallery {
  position: relative;
  margin-top: 5px;
}
.welcome-area .gallery .video-gallery {
  width: 310px;
  height: 280px;
  text-align: center;
  border: 6px solid #f7f7f7;
  position: relative;
  transition: border-color 0.4s ease 0s;
  overflow: hidden;
}
.welcome-area .gallery .video-gallery img {
  transform: scale(1);
  transition: all 0.5s ease 0s;
  width: 100%;
}
.welcome-area .gallery .video-gallery .overlay-gallery {
  background-color: transparent;
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  transition: background-color 0.4s ease 0s;
}
.welcome-area .gallery .video-gallery .overlay-gallery .icon-holder{
  display: table;
  height: 100%;
  width: 100%;    
}
.welcome-area .gallery .video-gallery .overlay-gallery .icon-holder .icon{
  display: table-cell;
  vertical-align: middle;    
}
.welcome-area .gallery .video-gallery .overlay-gallery .icon-holder .icon a img{
  width: auto;
  transform: scale(1);
  transition: all 0.5s ease 0s;
}
.welcome-area .gallery .gallery-bg-img {
  /* position: absolute;
  right: 15px;
  top: 50px;
  z-index: -1; */
  /* margin-left: -25px; */
}

.welcome-area .gallery .video-gallery:hover .overlay-gallery {
  background-color: rgba(213, 172, 99, 0.70);
}
.welcome-area .gallery .video-gallery:hover img {
  transform: scale(1.1);
}
.welcome-area .gallery .video-gallery .overlay-gallery .icon-holder .icon a:hover img{
  transform: scale(1.1);
}


/*** 
=============================================
    Service Area style
=============================================
***/
.service-area {
  /* background-attachment: fixed;
  background-position: center top; */
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 50px;
  padding-top: 40px;
  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: 24px;
}
.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: #fff;
}


.single-service-item .text-holder h3 {
  color: #fff;
  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;
}



.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%;  
  height: 180px;    
}


.single-project-item .img-holder .overlay .box {
  
}
.single-project-item .img-holder .overlay .box .content {
  
}
.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: #fff;
  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: #fff;
}


/*** 
=============================================
    Working Area style
=============================================
***/
.working-area{
  padding-top: 50px;
  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: #fff;
  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: #fff;
} 
.working-area .single-working-item:hover .icon-box .count{
  background: #fff;
}
.working-area .single-working-item:hover .icon-box .count h3{
  color: #fff;
}

.latest-blog-area .single-blog-item {
  margin-bottom: 50px;
  transition: all 500ms ease;
  border: solid 1px #1b1b1b;
  height: 455px;
  position: relative;
}
.single-blog-item .img-holder{
  display: block;
  overflow: hidden;
  position: relative;  
}
.single-blog-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: 50%;
  margin: 15px auto;
  max-height: 150px;
  display: block;   
}
.single-blog-item .img-holder .overlay .box .content a i {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  border-radius: 50%;
  color: #1b1b1b;
  display: inline-block;
  font-size: 16px;
  height: 45px;
  line-height: 46px;
  transition: all 500ms ease 0s;
  width: 45px;   
}
.single-blog-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-blog-item:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.single-blog-item .img-holder .overlay .box .content a:hover i{
  background: #fff;
}

.single-blog-item .text-holder {
  border: 0px solid #f7f7f7;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 0px;
 transition: all 500ms ease;
}  
.single-blog-item .text-holder .blog-title {
  color: #1b1b1b;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  padding: 8px 0 5px;
  display: block;
 transition: all 500ms ease;
 text-transform: uppercase;
 text-align: center;
}
.single-blog-item .text-holder .meta-info {
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 14px;
}
.single-blog-item .text-holder .meta-info li {
  display: inline-block;
  margin: 0 8px;
  color: #c1c1c1;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
}
.single-blog-item .text-holder .meta-info li i{
  color: #c1c1c1;
  font-size: 16px;
  display: inline-block;
  padding-right: 8px;
}
.single-blog-item .text-holder .meta-info li a{
  color: #c1c1c1;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif; 
  transition: all 500ms ease;
}

.single-blog-item .text-holder .text {
  
}
.single-blog-item .text-holder .text p {
  margin: 0;  
}
.single-blog-item .text-holder .text .readmore {
  color: #252525;
  font-family: "Roboto",sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  padding: 13px 0 0;
  transition: all 500ms ease;
  position: absolute;
  bottom: 7px;
}
.single-blog-item .text-holder .text .readmore i{
  display: inline-block;
  padding-left: 5px;
}

.latest-blog-area .single-blog-item:hover{
  -moz-box-shadow: 0px 2px 4px #c1c1c1;
  -webkit-box-shadow: 0px 2px 4px #c1c1c1;
  box-shadow: 0px 2px 4px #c1c1c1; 
}
.single-blog-item .text-holder .blog-title:hover{
  color: #252525;
}
.single-blog-item .text-holder .meta-info li a:hover{
  color: #fff;
}
.single-blog-item .text-holder:hover .text .readmore {
  color: #1b1b1b;
}


/*** 
=============================================
    Footer area style
=============================================
***/
.footer-area {
  background: #1b1b1b none repeat scroll 0 0;
  padding-bottom: 0px;
  padding-top: 30px;
}
.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: #fff;
  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: #fff;
  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: #fff !important;
}

.single-footer-widget .title {
  padding-bottom:22px;
  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: 0;
  position: relative;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.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: 80px;
  position: relative;
  margin-right: 10px;
}
.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%;
  height: 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: #fff;
}
.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: #fff !important;
  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 #fff;
  display: inline-block;
  float: left;
  line-height: 15px;
  margin-right: 10px;
  padding-right: 10px;
  color: #fff;
  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: #fff;
}


.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: #fff;
    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 #fff;
    background: #c1c1c1;
    color: #1b1b1b;
}
.single-footer-widget .subscribe-form form input[type=text]:focus + button, 
.single-footer-widget .subscribe-form form button:hover {
    background: #fff none repeat scroll 0 0;
    color: #1b1b1b;
    border-color: #fff;
}



.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: #fff;    
}

/*** 
=============================================
    Footer bottom area style
=============================================
***/
.footer-bottom-area {
    background: #f6f0dc none repeat scroll 0 0;
    padding-bottom: 23px;
    padding-top: 18px;
}
.footer-bottom-area .copyright-text p {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    font-family: 'Lato', sans-serif;
}
.footer-bottom-area .copyright-text p a {
    color: #fff;
    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: left;
  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: #1b1b1b;
  font-size: 16px;
  transition: all 500ms ease;
}
.footer-bottom-area .footer-menu ul li a:hover i{
  color: #1b1b1b;
}



/*** 
=============================================
    Breadcrumb area style
=============================================
***/
.breadcrumb-area {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;

}

.breadcrumb-area .container-fluid{
  padding-top: 50px;
  padding-bottom: 50px;
  background: #00000070;
}

.breadcrumb-area ul{
  display: flex;
  align-items: center;
  color: #fff !important;
  justify-content: center;
}

.breadcrumb-area h1 {
  color: #f9f9f9;
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;

  text-transform: uppercase;
}

.breadcrumb-area .breadcrumb-bottom {
  background-color: rgba(0, 0, 0, 0.33);
  bottom: 0;
  height: 55px;
  left: 0;
  padding: 14px 0 15px;
  position: absolute;
  width: 100%;
}
.breadcrumb-area .breadcrumb-bottom .left ul {
  margin-left: -3px;
  margin-right: -3px;
}
.breadcrumb-area .breadcrumb-bottom .left ul li{
  color: #f9f9f9;
  font-size: 14px;
  font-weight: 300;
  display: inline-block;
  margin: 0 3px;
  text-transform: uppercase;
}
.breadcrumb-area .breadcrumb-bottom .left ul li a{
  color: #f9f9f9;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  transition: all 500ms ease;
}
.breadcrumb-area .breadcrumb-bottom .left ul li a:hover{
  color: #fff;
}
.breadcrumb-area .breadcrumb-bottom .right a{
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 300;
  transition: all 500ms ease;
}
.breadcrumb-area .breadcrumb-bottom .right a:hover{
  color: #fff;    
}
.breadcrumb-area .breadcrumb-bottom .right a i{
  display: inline-block;
  padding-right: 10px;
  font-size: 14px;
}



/*** 
=============================================
    About Interrio area style
=============================================
***/
.about-interrio-area {
  padding-bottom: 30px;
  padding-top: 50px;
}
.about-interrio-area .text-holder {
  
}
.about-interrio-area .text-holder h3 {
  color: #252525;
  font-size: 20px;
  font-weight: 500;
  margin: -7px 0 0px;
  line-height: 32px;
}
.about-interrio-area .text-holder h3 span {
  color: #fff;
}
.about-interrio-area .text-holder .signature-and-name {
  margin: 30px 0 0;
}
.about-interrio-area .text-holder .signature-and-name .signature {
  width: 180px;
}
.about-interrio-area .text-holder .signature-and-name .signature,
.about-interrio-area .text-holder .signature-and-name .name{
  display: table-cell;
  vertical-align: middle;
}
.about-interrio-area .text-holder .signature-and-name .name {
  padding-left: 30px;  
}
.about-interrio-area .text-holder .signature-and-name .name h4{
  color: #252525;
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 3px;
}
.about-interrio-area .text-holder .signature-and-name .name p{
  color: #fff;
  font-weight: 400;
  font-style: italic;
  margin: 0;
}

.about-interrio-area .single-item {
  
}
.about-interrio-area .single-item .img-holder {
  position: relative;
  overflow: hidden;
}
.about-interrio-area .single-item .img-holder img {
  transform: scale(1);
  transition: all 0.5s ease 0s;
  width: 100%;  
}
.about-interrio-area .single-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: 16px;
  height: 45px;
  line-height: 46px;
  transition: all 500ms ease 0s;
  width: 45px;  
}
.about-interrio-area .single-item:hover .img-holder .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotateY(0deg) scale(1,1);
  transform: rotateY(0deg) scale(1,1);       
}
.about-interrio-area .single-item:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);    
}
.about-interrio-area .single-item .img-holder .overlay .box .content a:hover i{
  background: #fff;
}

.about-interrio-area .single-item .text-box {
  margin: 28px 0 0;
}
.about-interrio-area .single-item .text-box h3 {
  color: #252525;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 14px;
}



/*** 
=============================================
    Choose area style
=============================================
***/
.choose-area {
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 42px;
  padding-top: 0px;
  position: relative;
  z-index: 1;  
}
.choose-area::before {
  background:#f6f0dc none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.choose-area .sec-title {
  padding-bottom: 15px;
}
.choose-area .sec-title h3 {
  color: #1b1b1b;
}
.choose-area .sec-title .border {
  background: #1b1b1b none repeat scroll 0 0;
  display: inline-block;
  height: 2px;
  margin: 24px 0 0;
  width: 70px;
}
.choose-area .single-item {
  margin-bottom: 0;
  padding-left: 0;
  position: relative;
  width: 100%;
  cursor: pointer;
}

.choose-area .single-item a{
  display: flex;
  align-items: center;

}
.choose-area .single-item .icon-holder {
  background: #751d09 none repeat scroll 0 0;
  height: 35px;
  width: 35px;
  transition: all 500ms ease;
  margin-right: 10px;
  cursor: pointer;
}

.choose-area .single-item .text-holder h3{
  color: #1b1b1b;
  font-size: 20px;
}
.choose-area .single-item .icon-holder span::before {
  color: #1b1b1b;
  display: block;
  font-size: 40px;
  padding: 21px 0;
}

.pdf-list li{
  display: inline-block;
  margin: 10px 5px;
  width: 15%;
}

.pdf-list1 li{
  display: inline-block;
  margin: 10px 0;
  width: 30%
}


.single-item a i {
  font-size: 25px;
  margin: 5px 7px;
  color: #fff;
  text-align: center;
}



/*** 
=============================================
    Team area style
=============================================
***/
.team-area {
  padding-bottom: 40px;
  padding-top: 0px;
}
.team-area .sec-title {
  padding-bottom: 45px;
}
.single-team-member {
  border: 0px solid #f7f7f7;
  padding: 0 9px;
}
.single-team-member .img-holder {
  display: block;
  overflow: hidden;
  position: relative;  
}
.single-team-member .img-holder img {
  transform: scale(1);
  transition: all 0.5s ease 0s;
  width: 100%; 
  height: 160px;
}
.art-image-sec{
  padding-bottom: 25px !important;
  margin-top: 5px;
}

.art-image1 .img-holder img{
height: 250px;
}

.single-team-member .img-holder .overlay{
  background-color: rgba(0, 0, 0, 0.8);  
}
.single-team-member .img-holder .overlay .box .content ul li {
  display: inline-block;
  margin: 0 8px;
}
.single-team-member .img-holder .overlay .box .content ul li a i {
  color: #f7f7f7;
  font-size: 16px;
}

.single-team-member:hover .img-holder .overlay{
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotateY(0deg) scale(1,1);
  transform: rotateY(0deg) scale(1,1);         
}
.single-team-member:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);  
}
.single-team-member .img-holder .overlay .box .content ul li a:hover i {
  color: #fff;
}

.single-team-member .text-holder {
  padding-top: 18px;  
}
.single-team-member .text-holder h3 {
  color: #252525;
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0 0 3px;
}
.single-team-member .text-holder p {
  color: #fff;
  font-size: 16px;
  margin: 0 0 3px;
}
.team-area .owl-controls {
  position: absolute;
  right: 0;
  top: -105px;
}
.team-area .owl-theme .owl-nav [class*="owl-"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 2px solid #751d09;
  border-radius: 50%;
  color: #751d09;
  font-size: 20px;
  height: 45px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  text-align: center;
  -webkit-transition: all 700ms ease 0s;
  transition: all 700ms ease 0s;
  width: 45px;
  font-weight: 900;
}
.team-area .owl-theme .owl-nav [class*="owl-"] i {
  font-size: 20px;
  font-weight: 900;
}
.team-area .owl-theme .owl-nav .owl-next {
    margin-left: 10px
}
.team-area .owl-theme .owl-nav [class*="owl-"]:hover {
  color: #751d09;
  border: 2px solid #751d09;
}

.team-area .bottom-text {
  padding: 41px 175px 0;
}
.team-area .bottom-text h3{
  color: #252525;
  font-size: 22px;
  font-weight: 300;
  line-height: 36px;
}
.team-area .bottom-text h3 a{
  color: #fff;
}


/*** 
=============================================
    Blog Area style
=============================================
***/
#blog-area {
  padding-bottom: 0px;
  padding-top: 40px;
}


.post-pagination li {
  display: inline-block;
  margin: 0 3px;
}
.post-pagination li a {
  background: #fff;
  border: 1px solid #f7f7f7;
  color: #252525;
  display: block;
  font-size: 18px;
  font-weight: 600;
  height: 55px;
  padding: 13px 0;
  -webkit-transition: all 500ms ease 0s;
  transition: all 500ms ease 0s;
  width: 55px;
}
.post-pagination li.active a, .post-pagination li:hover a {
  background: #252525;
  color: #fff;
  border: 1px solid #252525;
}

/*** 
=============================================
    Blog Standard Area style
=============================================
***/
.blog-standard-area .single-blog-item {
  margin-bottom: 50px;
  border: solid 1px #751d09;
  min-height: 400px;
}
.blog-standard-area .loadmore-button a {
  padding: 14px 35px;
}

/*** 
=============================================
    Blog Standard Area style
=============================================
***/
.blog-single-area { }
.blog-single-area .blog-post { }
.blog-single-area .single-blog-item {}
.blog-single-area .single-blog-item .img-holder img {
  transform: none;
}
.blog-single-area .single-blog-item .text-holder {
  border-bottom: medium none;
  border-left: medium none;
  border-right: medium none;
  padding: 0;
}
.blog-single-area .single-blog-item .text-holder .blog-title {
  font-size: 24px;
  padding: 35px 0 6px;
}
.blog-single-area .single-blog-item .text-holder .blog-title:hover{
  color: #252525;
}
.blog-single-area .single-blog-item .text-holder p.mar-bottom {
  margin-bottom: 13px;
}

.blog-single-area .middle-content-box {
  margin: 30px 0 33px;
  overflow: hidden;
}
.blog-single-area .middle-content-box .img-holder {
  width: 340px;
}
.blog-single-area .middle-content-box .img-holder,
.blog-single-area .middle-content-box .text-holder{
  display: table-cell;
  vertical-align: top;
}
.blog-single-area .middle-content-box .text-holder {
  padding-left: 30px; 
  position: relative;
}
.blog-single-area .middle-content-box .text-holder:before{
  content: "\f10d";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #f1f1f1;
  font-size: 24px;
  position: absolute;
  top: -3px;
  left: 30px;    
}
.blog-single-area .middle-content-box .text-holder {
  padding-left: 30px;
  padding-top: 32px;
  position: relative;
}
.blog-single-area .middle-content-box .text-holder h3 {
  color: #252525;
  font-size: 18px;
  font-weight: 500;
  margin: 20px 0 7px;
}
.blog-single-area .middle-content-box .text-holder h5 {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin: 0;
}

.blog-single-area .bottom-content-box {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 21px;
}

.blog-single-area .tag-social-share-box {
  overflow: hidden;
  padding-bottom: 24px;
  padding-top: 25px;
}
.blog-single-area .tag-social-share-box .tag p {
  color: #fff;
  margin: 0;
}
.blog-single-area .tag-social-share-box .tag p span {
  color: #252525;
  font-weight: 400;
  text-transform: uppercase;
}

.blog-single-area .tag-social-share-box .social-share {
  
}
.blog-single-area .tag-social-share-box .social-share h5 {
  color: #252525;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  top: 7px;
}
.blog-single-area .tag-social-share-box .social-share i {
  padding-left: 10px;
  display: inline-block;
}
.blog-single-area .tag-social-share-box .social-share .social-share-links {
  display: inline-block;
  float: left;
  margin-left: -3px;
  margin-right: -3px;
  padding-left: 20px;
  position: relative;
  top: -6px;
}


.blog-single-area .tag-social-share-box .social-share .social-share-links li {
  display: inline-block;
  margin: 0 3px;
}
.blog-single-area .tag-social-share-box .social-share .social-share-links li a i {
  border: 2px solid #f7f7f7;
  border-radius: 50%;
  color: #c1c1c1;
  font-size: 14px;
  height: 40px;
  line-height: 36px;
  padding: 0;
  text-align: center;
  transition: all 500ms ease 0s;
  width: 40px;
  transition: all 500ms ease;
}
.blog-single-area .tag-social-share-box .social-share .social-share-links li a:hover i{
  background: #fff;
  border-color: #fff;
  color: #fff;
}

.blog-single-area .author-box {
  background: #f7f7f7 none repeat scroll 0 0;
  display: block;
  padding: 30px 30px 22px;
  position: relative;
}
.blog-single-area .author-box .img-holder{
  width: 85px;
}
.blog-single-area .author-box .img-holder,
.blog-single-area .author-box .text-holder{
  display: table-cell;
  vertical-align: top;
}
.blog-single-area .author-box .text-holder {
  padding-left: 30px;
}
.blog-single-area .author-box .text-holder h3 {
  color: #252525;
  font-size: 20px;
  font-weight: 500;
  margin: -2px 0 14px;
  text-transform: capitalize;
}
.blog-single-area .author-box .text-holder p{
 
}

.blog-single-area .author-box .text-holder .social-link {
  margin-left: -6px;
  margin-right: -6px;
  overflow: hidden;
}
.blog-single-area .author-box .text-holder .social-link li{
  display: inline-block;
  margin: 0 6px;
}
.blog-single-area .author-box .text-holder .social-link li a i{
  color: #9a9a9a;
  font-size: 14px;
  transition: all 500ms ease;
}
.blog-single-area .author-box .text-holder .social-link li a:hover i{
  color: #fff;
}


.blog-single-area .comment-box {
  overflow: hidden;
  padding-bottom: 50px;
  padding-top: 75px;
}
.blog-single-area .comment-box .title{
  padding-bottom: 36px;
}
.blog-single-area .comment-box .title h3 {
  color: #252525;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.blog-single-area .comment-box .single-comment-box {
  padding-left: 60px;
  position: relative;
  margin-bottom: 30px;
}
.blog-single-area .comment-box .single-comment-box .img-holder {
  left: 0;
  position: absolute;
  top: 0;
}

.blog-single-area .comment-box .single-comment-box .text-holder {
  border: 1px solid #f7f7f7;
  margin-left: 20px;
  padding: 15px 20px 5px;
}
.blog-single-area .comment-box .single-comment-box .text-holder .top {
  overflow: hidden;
  padding-bottom: 8px;
}
.blog-single-area .comment-box .single-comment-box .text-holder .top .date h5 {
  color: #252525;
  font-size: 16px;
  font-weight: 300;
}
.blog-single-area .comment-box .single-comment-box .text-holder .top .review-box {
  position: relative;
  top: -3px;
}
.blog-single-area .comment-box .single-comment-box .text-holder .top .review-box ul {
  margin-left: -0.5px;
  margin-right: -0.5px;
  overflow: hidden;
}
.blog-single-area .comment-box .single-comment-box .text-holder .top .review-box ul li {
  display: inline-block;
  margin: 0 0.5px;
}
.blog-single-area .comment-box .single-comment-box .text-holder .top .review-box ul li i {
  color: #fff;
  font-size: 14px;
}


.blog-single-area .add-comment-box {
  overflow: hidden;
}
.blog-single-area .add-comment-box .title {
  padding-bottom: 30px;
}
.blog-single-area .add-comment-box .title h3 {
  color: #252525;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;  
}
.blog-single-area .add-comment-box .add-rating-box {
  padding-bottom: 17px;
}
.blog-single-area .add-comment-box .add-rating-box h4 {
  color: #9a9a9a;
  font-size: 16px;
  font-weight: 300;
  margin: 0 0 3px;
}
.blog-single-area .add-comment-box .add-rating-box ul {
  
}
.blog-single-area .add-comment-box .add-rating-box ul li {
  border-right: 1px solid #ebebeb;
  display: inline-block;
  line-height: 20px;
  margin-right: 6px;
  padding-right: 10px;
}
.blog-single-area .add-comment-box .add-rating-box ul li:last-child{
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
.blog-single-area .add-comment-box .add-rating-box ul li a i{
  color: #d6d6d6;
  font-size: 12px;
}
.blog-single-area .add-comment-box .add-rating-box ul li a:hover i{
  color: #fff;
  transition: all 500ms ease;
}

.blog-single-area .add-comment-box .add-comment-form {}
.blog-single-area .add-comment-box .add-comment-form .field-label {
  color: #9a9a9a;
  display: block;
  font-size: 16px;
  font-weight: 300;
  padding: 0 0 2px;
}
.blog-single-area .add-comment-box .add-comment-form input[type="text"],
.blog-single-area .add-comment-box .add-comment-form textarea{
  background: #f7f7f7 none repeat scroll 0 0;
  border: 1px solid transparent;
  display: block;
  font-size: 16px;
  font-weight: 400;
  height: 50px;
  padding: 0 15px;
  width: 100%;  
  margin-bottom: 12px;
  transition: all 500ms ease;
}
.blog-single-area .add-comment-box .add-comment-form textarea {
  height: 100px;
  padding: 10px 15px;
  margin-bottom: 30px;
}
.blog-single-area .add-comment-box .add-comment-form button {
  background: #252525 none repeat scroll 0 0;
  border-color: #252525;
  color: #fff;
  padding: 14px 30px;
}
.blog-single-area .add-comment-box .add-comment-form input[type="text"]:focus{
  border-color: #fff;    
}
.blog-single-area .add-comment-box .add-comment-form textarea:focus{
  border-color: #fff;       
}
.blog-single-area .add-comment-box .add-comment-form button:hover{
  background: #fff;
  color: #fff;
}



/*** 
=============================================
    Contact v1 Area style
=============================================
***/
.contact-v1-area {
  padding-bottom: 40px;
  padding-top: 50px;
}
.contact-v1-area .sec-title {
  padding: 0 150px 40px;
}    
.contact-v1-area .sec-title h2 {
  margin: 0 0 16px;
}
.contact-v1-area .sec-title p{
  margin: 0;
  font-size: 18px;
  line-height: 32px;
}

.contact-v1-area .img-holder {
  
}
.contact-v1-area .img-holder img {
  width: 100%;
}
.contact-v1-area .contact-info {
  padding-top: 40px;
}
.contact-v1-area .contact-info .single-item {
  margin-bottom: 33px;
  padding-left: 30px;
  position: relative;
}
.contact-v1-area .contact-info .single-item .icon-holder {
  left: 0;
  position: absolute;
  top: -5px;
}
.contact-v1-area .contact-info .single-item .icon-holder span::before {
  color: #1b1b1b;
  font-size: 20px;
}

.contact-v1-area .contact-info .single-item .text-holder h5 {
  color: #252525;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}
.contact-v1-area .contact-info .single-item .text-holder p {
  line-height: 22px;
  margin: 0;
}

.contact-v1-area .contact-form-v1 form input[type="text"],
.contact-v1-area .contact-form-v1 form input[type="email"],
.contact-v1-area .contact-form-v1 form textarea{
  background: #f7f7f7 none repeat scroll 0 0;
  border: 1px solid transparent;
  display: block;
  height: 50px;
  margin-bottom: 20px;
  padding: 0 20px;
  width: 100%;
  transition: all 500ms ease;
}
.contact-v1-area .contact-form-v1 form textarea {
  height: 130px;
  padding: 11px 20px;
  margin-bottom: 30px;
}
.contact-v1-area .contact-form-v1 form button{
  padding: 17px 32px 15px;  
  transition: all 500ms ease;
}

.contact-v1-area .contact-form-v1 form input[type="text"]:focus{
  border-color: #fff;
}
.contact-v1-area .contact-form-v1 form input[type="email"]:focus{
  border-color: #fff;    
}
.contact-v1-area .contact-form-v1 form textarea:focus{
  border-color: #fff;    
}

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





/*** 
=============================================
    Pro Classic V1 Area style
=============================================
***/
.single-project-item .img-holder .overlay-style-2 {
  background: rgba(0, 0, 0, 0.80) none repeat scroll 0 0;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 100%;
  transition: all 450ms ease-out 0s;
  width: 100%;
}
.single-project-item .img-holder .overlay-style-2 .box{}
.single-project-item .img-holder .overlay-style-2 .box .content{}
.single-project-item .img-holder .overlay-style-2 .box .content .text-holder {
  top: auto;
  left: 0;
  bottom: 0;
  height: 70px;
  position: absolute;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.4s ease 0s, opacity 0.1s ease 0.3s;
  width: 100%;
  background: #fff;
  color: #252525;
  padding-top: 22px;
}
.single-project-item .img-holder .overlay-style-2 .box .content .text-holder a h3{
  color: #252525;
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
  text-align: center;
  margin: 0 0 3px;
}
.single-project-item .img-holder .overlay-style-2 .box .content .text-holder p{
  color: #fff;
  margin: 0;
  text-align: center;
}
.single-project-item .img-holder .overlay-style-2 .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;
  text-align: center;
}
.single-project-item .img-holder .overlay-style-2 .box .content .icon-holder a i{
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  line-height: 40px;   
}

.single-project-item:hover .img-holder .overlay-style-2 {
  opacity: 1;
  top: 0;
}
.single-project-item:hover .img-holder .overlay-style-2 .box .content .text-holder {
  opacity: 1;
  transform: translateY(0px);
  transition: transform 0.4s ease 0s, opacity 0.1s ease 0s;
}
.single-project-item:hover .img-holder img{
  transform: scale(1.1);
}
.single-project-item .img-holder .overlay-style-2 .box .content .icon-holder:hover {
  background: #fff none repeat scroll 0 0;
}
.pro-classic-v1-area .post-pagination {
  padding-top: 30px;
}


/*** 
=============================================
    Pro Grid v1 Area style
=============================================
***/
#project-grid-area{
  padding-top: 40px;
  padding-bottom: 30px;
}
#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: #1b1b1b;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  text-transform: uppercase;
  transition: all 500ms ease 0s;
}
#project-grid-area .project-filter li span::after {
  color: #1b1b1b;
  content: "/";
  display: inline-block;
  margin: 0 20px;
}
#project-grid-area .project-filter li:last-child span::after{
display: none;
}
#project-grid-area .project-filter li.active span, 
#project-grid-area .project-filter li:hover span {
  color: #751d09;
}
#project-grid-area .single-project-item .img-holder .overlay .box .content .icon-holder {
  background: rgb(246 240 220) none repeat scroll 0 0;
  border-radius: 50%;
  height: 40px;
  position: absolute;
  top: 50%;
  transition: all 500ms ease 0s;
  width: 40px;
  left: 50%;
  transform: translate(-50%, -50%);
}
#project-grid-area .single-project-item .img-holder .overlay .box .content .icon-holder a i {
  color: #751d09;
  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: #fff;    
} 





/*** 
=============================================
    Project Single v1 Area style
=============================================
***/
.project-single-v1-area {
  padding-bottom: 40px;
  padding-top: 0;
}
.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: #fff;
}
#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 #fff;
  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: #fff 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: #fff;
  font-size: 16px;
  font-weight: 400;
}


.project-single-v1-area .related-project-items {
  overflow: hidden;
  padding-top: 50px;
}
.project-single-v1-area .related-project-items .sec-title {
  padding-bottom: 20px;
}
.project-single-v1-area .related-project-items .single-project-item {
  min-height: 300px;
}
.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: #751d09;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
}
.related-project-items .img-holder .overlay .box .content .icon-holder:hover {
    background: #fff none repeat scroll 0 0;
}
.related-project-items .single-project-item .text-holder {
  padding-top: 22px;
}
.related-project-items .single-project-item .text-holder h3 {
  color: #252525;
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 10px;
  text-transform: capitalize;
}
.related-project-items .single-project-item .text-holder p {
  color: #fff;
  font-weight: 400;
  line-height: 16px;
  margin: 0;
}



/*** 
=============================================
    Project Single v2 Area style
=============================================
***/

#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: #fff;
}




/* /////////// */

.more-btn{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7%;
  padding: 17px 30px 15px;
}

.icon img {
  width: 70px;
}

.parish-text{
  position: absolute;
  bottom: 0;
  margin: 0;
  background: #0000009e;
  text-align: center;
  color: #fff;
  padding: 5px;
  width: 100%;
  left: 0;
  min-height: 66px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-text{
  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsup {
	position: fixed;
	top: 50%;
	right: 10px;
	z-index: 999;
	display: inline-block;
}

.sec-title1{
color: #1b1b1b !important;
text-align: center;
margin-bottom: 20px;
}

.sec-title1 a{
  color: #751d09 !important;  
}

.address-map{
  width: 100%;
}

.design-desc-area{
  padding-top: 50px;
  padding-bottom: 10px;

}

.sec-title-two h3 img {
  margin-right: 15px;
}


@media(max-width:768px){
  .more-btn{
    bottom: 2%;
  }

  .rev_slider_wrapper .slide-content-box h1 {
    font-size: 20px !important;
  }
  .rev_slider_wrapper .slide-content-box h1 span{
     font-size: 20px !important; 
  }
  .tp-mask-wrap{
    left: 30px;
  }
}

.launc-section{
text-align: center;
width: 100VW;
}

.launc-section P{
  font-size: 50px;
  text-transform: uppercase;
  margin-top:40px;
  margin-bottom: 30px;
  line-height: initial;
  padding: 5px 10px;
}
.launc-section button{
  background: #751d09 !important;
  color: #fff;
  border: 0;
  min-width: 200px;
  padding: 8px;
  font-weight: 600;
}
.W-100{
  width: 100%;
}

@media(max-width:768px){
  .launc-section P{
    font-size: 40px;
  }
}

.prayer-button {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 22px;
  background-color: #b3aebd;
  color: #060000;
  text-decoration: none;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s, background-color 0.3s;
}

.prayer-button:hover {
  background-color: #655e6a;
  transform: translateY(-2px);
}

    /* Floating Avatar Button */
    #chatbot-launcher {
      position: fixed;
	  bottom: 70px;
      right: 1px;
      width: 65px;
      height: 65px;
      border-radius: 50%;
      background: url('../images/icon/chat_ai.png') center/cover no-repeat;
      background-color: transparent;
      border: 3px solid white;
      cursor: pointer;
      z-index: 999999;
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
      transition: transform .2s ease;
    }
#chatbot-launcher:hover,
#chatbot-launcher:active {
  transform: scale(1.4);
}
  
    /* Online Indicator */
    #chatbot-online-dot {
      position: absolute;
      width: 14px;
      height: 14px;
      background: #00d12a;
      border-radius: 50%;
      bottom: 4px;
      right: 4px;
      border: 2px solid white;
    }
  
    /* Chat Container */
    #chatbot-box {
      position: fixed;
      bottom: 100px;
      right: 20px;
      width: 360px;
      height: 500px;
      background: white;
      border-radius: 14px;
      display: none;
      flex-direction: column;
      box-shadow: 0 6px 25px rgba(0,0,0,0.25);
      z-index: 999999;
      overflow: hidden;
      resize: both;
    }
  
    /* Draggable Header */
    #chatbot-header {
      background: linear-gradient(135deg, #232f3e, #1a2430);
      padding: 12px;
      color: white;
      font-size: 1.2rem;
      cursor: grab;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #chatbot-header:active { cursor: grabbing; }
  
    #chatbot-close {
      cursor: pointer;
      font-size: 20px;
      padding: 5px;
    }
  
    /* Chat Area */
    #chatbot-messages {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      background: #f7f8fa;
    }
  
    .msg {
      padding: 10px 12px;
      border-radius: 12px;
      margin-bottom: 10px;
      max-width: 80%;
      animation: fadeIn .2s ease;
      line-height: 1.45;
    }
    .user-msg {
      background: #0073bb;
      color: white;
      margin-left: auto;
      border-bottom-right-radius: 4px;
    }
    .bot-msg {
      background: white;
      margin-right: auto;
      border-bottom-left-radius: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
  
    /* Input Area */
    #chatbot-input-area {
      padding: 10px;
      display: flex;
      gap: 6px;
      background: #fff;
    }
    #chatbot-input {
      flex: 1;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid #ccc;
    }
    #chatbot-send {
      padding: 8px 16px;
      background: #ff9900;
      border: none;
      border-radius: 10px;
      color: white;
      cursor: pointer;
    }
  
    /* Typing dots */
    .typing {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .typing span {
      width: 7px;
      height: 7px;
      background: #777;
      border-radius: 50%;
      animation: blink 1.1s infinite;
    }
    .typing span:nth-child(2) { animation-delay: .2s; }
    .typing span:nth-child(3) { animation-delay: .4s; }
  
    @keyframes blink {
        0%, 80%, 100% { opacity: 0.2; }
        40% { opacity: 1; }
    }
  
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
	/* Mobile responsive */
@media (max-width: 768px) {
  #chatbot-box {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
    bottom: 90px !important;
    height: 65vh !important;
    resize: none !important;
  }
}6