/*Barber Shop Template By DynamicLayers*/

/*  ==========================================================================
Table of Contets
==========================================================================

1.0 Common Styles
2.0 Header / Navigation
3.0 Slider Section
4.0 About Section
5.0 Food Menu Section
6.0 CTA Section
7.0 Special Foods Section
8.0 Food Gallery Section
9.0 Testimonial Section
10.0 Reservation Section
11.0 Blog Section
12.0 Sponsor Section
13.0 Footer Widget Section
14.0 Footer Section
15.0 Page Style Section
16.0 Single Blog Section
17.0 Contact Section
18.0 Scroll To Top

==========================================================================
DynamicLayers
========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Lato|Prata|Work+Sans:600&display=swap');

/*  ==========================================================================
1.0 Common Styles
========================================================================== */
*{
padding: 0;
margin: 0;
}
body{
background-color: #fff;
font-family: 'Lato', sans-serif;
font-size: 16px;
line-height: 26px;
color: #777;
font-weight: 400;
letter-spacing: -0.2px;
position: relative;
overflow-x: hidden;
}
h1{
font-family: 'Prata', sans-serif;
-webkit-font-smoothing:antialiased;
color: #fff;
}
h2, h3, h4, h5, h6{
font-family: 'Prata', sans-serif;
-webkit-font-smoothing:antialiased;
color: #282828;
}
h1{
font-size: 52px;
line-height: 62px;
margin: 0 0 10px;
letter-spacing: -0.02em;
font-weight: 400;
}
h2{
font-size: 36px;
color: #303133;
margin: 0 0 8px;
font-weight: 400;
line-height: 48px;
letter-spacing: -0.04em;
}
h3,h4{
margin: 0 0 10px;
font-weight: 400;
line-height: 1.4;
color: #303133;
letter-spacing: -0.01em;
}
h3{
font-size: 17px;
}
h4{
font-size: 15px;
}
h5,h6{
font-size: 14px;
margin: 0 0 10px;
}
img{
border: none;
outline:none;
}
.logo img{
width:225px;
}
ul{
display: block;
list-style: none;
padding: 0;
margin: 0;
}
p, li, a, span{}
p{
font-size: 16px;
margin-bottom: 15px;
}

a, a:hover {
text-decoration: none;
color: var(--accent-gold);
}

.center{
text-align:center !important;
color: var(--accent-gold);
}
::-webkit-scrollbar {
width: 10px;
height: 10px
}

::-webkit-scrollbar-thumb {
cursor: pointer;
background: var(--accent-gold);
}

::selection {
background-color: var(--accent-gold);
color: #fff
}

-webkit-::selection {
background-color: var(--accent-gold);
color: #fff
}

::-moz-selection {
background-color: var(--accent-gold);
color: #fff
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
color: #888 !important;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
color: #888 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
color: #888 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{
color: #888 !important;
}
button{
border: none;
background: none;
}
/* Helper Class */
.padding{
padding: 80px 0;
}

.no-padding{
padding: 0;
}
.padding-10{padding: 10px;}
.padding-15{padding: 15px;}
.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.ml-5{ margin-left: 5px; }
.ml-10{ margin-left: 10px; }
.mt-15{ margin-left: 15px; }
.fz-28{ font-size: 28px; }
.fz-24{ font-size: 24px; }
.fz-22{ font-size: 22px; }
.fz-20{ font-size: 20px; }
.fz-18{ font-size: 18px; }
.fz-16{ font-size: 16px; }
.display-block{ display: block; }
.text-black{
color: #282828;
}
.text-white{
color: #ffffff;
}
.align-left{
text-align: left;
}
.align-right{
text-align: right;
}
.align-center{
text-align: center;
}
.fl-right{
float: right;
}
.fl-left{
float: left;
}
.overlay{
width: 100%;
position: relative;
z-index: 1;
}
.overlay:before{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.bg-grey{
background-color: #fcf9f5;
}
.bd-bottom{
border-bottom: 2px solid #eee;
}
.bg-dark{
background-color: #222227;
}

/* Preloader Styles */
#preloader{
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #fff;
height: 100%;
width: 100%;
-webkit-transition: all .5s .5s ease;
-moz-transition: all .5s .5s ease;
transition: all .5s .2s ease;
}
.loader{
position:absolute;
top: 50%;
left: 0;
right: 0;
width: 80px;
height: 80px;
display: block;
margin: auto;
margin-top: -30px;
}
body.loaded #preloader{
opacity: 0;
visibility: hidden;
}

/* Button Style */
.btn_group{}
.btn_group a{
margin: 5px;
}
.default_btn{
font-family: "Work Sans",sans-serif;
letter-spacing: 0;
background-color: var(--accent-gold);
color: #fff;
line-height: 45px;
display: inline-block;
padding: 0 25px;
border-radius: 0;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.default_btn:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #222227;
-webkit-transform-origin: right center;
   -moz-transform-origin: right center;
    -ms-transform-origin: right center;
        transform-origin: right center;
-webkit-transform: scale(0, 1);
   -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
     -o-transform: scale(0, 1);
        transform: scale(0, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.default_btn:hover{
color: #fff;
}
.default_btn:hover:before{
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
    transform-origin: left center;
-webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
     -o-transform: scale(1, 1);
        transform: scale(1, 1);
}

.default_btn.btn_sm{
line-height: 40px;
padding: 0 15px;
}
/*Section Heading*/
.section_heading{
}
.section_heading h3{
color: var(--accent-gold);
font-weight: 400;
}
.section_heading h2{
font-size: 36px;
line-height: 48px;
font-weight: 400;
letter-spacing: 0;
}
.heading-line{
margin-top: 20px;
height: 10px;
background: url(../img/heading-line.png) center center no-repeat;
position: relative;
}
/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
color: var(--accent-gold);
}
/* ==========================================================================
Header Section
========================================================================== */
.header-section{
background-color: #222227;
width: 100%;
height: 80px;
z-index: 999;
position: fixed;
left: 0;
top: 0;
padding: 0;
display: flex;
align-items: center;
}
.navbar-fixed-top.header-section{
background-color: #222227;
-moz-box-shadow: 0 2px 5px rgba(16,16,16,.08);
-webkit-box-shadow: 0 2px 5px rgba(16,16,16,.08);
box-shadow: 0 2px 5px rgba(16,16,16,.08);
height: 80px;
border-bottom: 0;
padding: 0;
}

.navbar-fixed-top ul.nav > li > a{
color: #ddd;
}
.navbar-fixed-top ul.nav > li > a:hover,
.navbar-fixed-top ul.nav > li > a:focus,
.navbar-fixed-top ul.nav > li.active > a{
color: #ddd;
}
.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section{
transition: all 0.3s ease-in-out;
}
.navbar{
border: medium none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
margin: 0;
position: relative;
padding: 0;
}
.navbar-header {
padding: 17px 0;
}
.navbar-header .brand{
font-size: 25px;
color: #fff;
font-family: 'Poppins', sans-serif;
letter-spacing: -1px;
font-weight: 600;
margin-left: 13px;
}
.navbar-header .nav-btn{
padding: 8px;
border-radius: 1px;
}
.navbar-header .nav-btn .icon-bar{
background-color: #fff;
width: 18px;
}
.navbar-fixed-top .navbar-header .nav-btn .icon-bar{
background-color: #777;
}
.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus{
opacity: 0.8;
}

/*Dropdown Style
==================*/
#mainmenu li ul{
background-color: var(--accent-gold);
width: 200px;
height: auto;
position: absolute;
left: 0;
top: 140%;
visibility: hidden;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
z-index: 999;
}
#mainmenu li:hover > ul{
visibility: visible;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
top: 100%;
}
#mainmenu li ul li{
border-bottom: 1px solid #333;
display: block;
position: relative;
padding: 0;
}
#mainmenu li ul li:last-child{
border: none;
}
#mainmenu li ul li a{
font-family: 'Work Sans', sans-serif;
line-height: 45px;
display: block;
padding: 0 15px;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.2px;
color: #ddd;
text-transform: uppercase;
-webkit-transition: color 0.3s ease 0s, padding 0.3s ease 0s;
transition: color 0.3s ease 0s, padding 0.3s ease 0s;
}
#mainmenu li > ul > li:hover a{
background-color: var(--accent-gold);
color: #fff;
}
#mainmenu li > ul ul{
background-color: #fff;
left: 200px;
}
#mainmenu li > ul li:hover > ul li a{
color: #777;
}
#mainmenu li ul li:hover > ul{
top: 0;
opacity: 1;
visibility: visible;
}
#mainmenu li > ul li:hover > ul li > a:hover{
background-color: transparent;
color: #fff;
}
#mainmenu li ul li li a:hover{
color: #ffca3f !important;
}
/* Nav Menu */
#navbar{
z-index: 999;
padding: 0 15px;
}
ul.nav{}
ul.nav > li{
position: relative;
}
ul.nav > li > a{
color: #ddd;
font-family: 'Work Sans', sans-serif;
display: inline-block;
vertical-align: middle;
padding: 0 20px;
letter-spacing: 0;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
line-height: 80px;
z-index: 1;
}

ul.nav li.phone{
font-size: 14px;
font-family: "Poppins",sans-serif;
color: #ddd;
font-weight: 600;
line-height: 80px;
padding-left: 50px;
}
ul.nav li.phone i{
color: var(--accent-gold);
margin-right: 5px;
}

ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li > a.active{
background: none;
color: #B42B36;
opacity: 1;
}
.menu-btn{
margin-left: 10px;
margin-top: 10px;
}

/* Header Btn
===============*/
.header-btn{
margin-left: 10px;
}
.header-btn .menu-btn{
background-color: var(--accent-gold);
font-family: "Work Sans",sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #fff;
padding: 0 30px;
height: 45px;
line-height: 45px;
display: block;
margin: 0;
}
.header-btn .menu-btn:hover{
opacity: 0.8;
}
/*Mobile Menu */
.menu-wrap{
position: relative;
}
.slicknav_menu {
background: none;
padding: 4px 0;
display:none;
width: 100%;
position: absolute;
right: 0;
top: 70px;
z-index: 1;
}
.slicknav_nav {
background-color: #fff;
}
.slicknav_btn{
background-color: transparent;
margin: -51px 0px 0px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row,
.slicknav_nav a,
.slicknav_nav a:hover{
-moz-border-radius: 0;
-webkit-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
.slicknav_nav .slicknav_row,
.slicknav_nav a {
padding: 10px 15px;
margin: 0;
color: #777;
}
.slicknav_nav a .caret{
display: none;
}
.slicknav_nav ul{
margin: 0;
}
.slicknav_nav ul li a{
padding-left: 30px;
font-size: 12px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover{
background-color: transparent;
color: #333;
}

/* ==========================================================================
3.0 Slider Section
========================================================================== */
.slider_section{}
.main_slide{
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
height: 670px;
}
.slider_content{}
.slider_content h3{
margin-bottom: 20px;
color: #ddd;
}
.slider_content h1{
margin-bottom: 20px;
color: #fff;
}
.slider_content p{
margin-bottom: 20px;
color: #ddd;
}
.main_slider .owl-nav{}
.main_slider .owl-nav div{
color: #fff;
width: 60px;
height: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
position: absolute;
left: 0;
top: calc(50% - 60px);
opacity: 0.5;
transition: all 0.5s ease-in-out;
}
.main_slider .owl-nav div:hover{
opacity: 1;
transition: all 0.5s ease-in-out;
}
.main_slider .owl-nav div.owl-next{
left: auto;
right: 0;
}
.main_slider .owl-dots{
width: 100%;
display: block;
text-align: center;
position: absolute;
left: 0;
bottom: 25px;
}
.main_slider .owl-dots div{
background-color: rgba(255,255,255,0.4);
width: 5px;
height: 5px;
border-radius: 50%;
display: inline-block;
margin: 0 3px;
transition: all 0.5s ease-in-out;
}
.main_slider .owl-dots div.active{
background-color: rgba(255,255,255,1);
-webkit-transform: scale(1.6);
transform: scale(1.6);
transition: all 0.5s ease-in-out;
}

/* Hero w/ Background Video */
.hero_section{
background-image: url("../img/hero-1.jpg");
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 95vh;
z-index: 1;
}
.hero_section .video_bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.hero_section .YTPOverlay{
background-color: rgba(17,17,17,0.6);
}
.hero_section .hero_content{}
.hero_section .hero_content h3{
color: #fff;
margin-bottom: 20px;
}
.hero_section .hero_content h1{
margin-bottom: 20px;
}
.hero_section .hero_content p{
margin-bottom: 30px;
color: #fff;
}

/* ==========================================================================
4.0 About Section
========================================================================== */
.about_section{}
.about_section h3{}
.about_content h2{
font-size: 36px;
line-height: 46px;
color: var(--accent-gold);
margin-bottom: 30px;
}
.about_content p{
margin-bottom: 30px;
}

.about_section .about_content{}
.about_section .about_content img{
margin-bottom: 20px;
}
.about_section .about_img img{
width: 60%;
border-radius: 5px;
box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.20);
}
.about_section .about_img_2{
margin: -180px 0 0 270px;
}
.about_section .about_img_3{
margin: -260px 0 0 40px;
}


.news-padding{
padding-bottom:30px !important;
}

/*About Style 2
================*/
.about_video{
position: relative;
}
.about_video img{
border-radius: 3px;
width: 100%;
}

.play-icon{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
}
.play-icon a{
background-color: #fff;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 50%;
color: var(--accent-gold);
font-weight: bold;
display: block;
transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
-webkit-animation: btn-anim 1s linear infinite;
animation: btn-anim 1s linear infinite;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
@keyframes btn-anim {
0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1);
}

100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0);
}
}
/* ==========================================================================
Why Us Section
========================================================================== */
.why_section{
position: relative;
}
.why_img{
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.why_img .img{
width: 100%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
position: absolute;
left: 0;
top: 0;
}
.why_section {}
.why_contant {
padding: 100px 0;
padding-left: 15px;
}

.why_section ul.list li{
display: block;
color: #777;
font-size: 16px;
padding-left: 35px;
position: relative;
margin-bottom: 20px;
}
.why_section ul.list li:before{
background-color: var(--accent-gold);
font-family: 'ElegantIcons';
content:  "\4e";
color: #fff;
font-size: 12px;
line-height: 25px;
text-align: center;
font-family: 'ElegantIcons';
content: "\4e";
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
/* ==========================================================================
9.0 Service Section
========================================================================== */
.comment-area a{
color: var(--accent-gold) !important;
}
.service_content img{
width: 100%;
border-radius: 50%;
margin-bottom: 15px;
}
.service_content h3{
font-size: 20px;
}
.service_content img:hover{
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.service_items .col-xs-6{
padding: 15px;
}
.service_item{
position: relative;
overflow: hidden;
color: #ddd;
border-radius: 10px;
}
.service_item h3{
color: #fff;
}
.service_item img{
transition: all 0.9s ease-in-out;
width: 100%;
}
.service_item:hover img{
-webkit-filter: grayscale(1);
filter: grayscale(1);
-webkit-transform: scale(1.2);
transform: scale(1.2);
transition: all 1s ease-in-out;
}
.service_item .post_info{
width: 100%;
height: auto;
display: block;
position: absolute;
left: 20px;
bottom: 20px;
}

/*Service Style 2
==================*/
.service_box{
background-color: #fff;
padding: 40px 30px;
text-align: center;
cursor: pointer;
-webkit-box-shadow: 0px 50px 100px 0px rgba(64, 1, 4, 0.1), 0px -6px 0px 0px rgba(248, 99, 107, 0.004);
box-shadow: 0px 50px 100px 0px rgba(64, 1, 4, 0.1), 0px -6px 0px 0px rgba(248, 99, 107, 0.004);
}
.service_box i{
font-size: 50px;
margin-bottom: 20px;
color: var(--accent-gold);
display: block;
}
.service_content i{
font-size: 50px;
margin-bottom: 20px;
color: var(--accent-gold);
display: block;
}
.service_box h3{
font-size: 22px;
}
/* ==========================================================================
Book Section
========================================================================== */
.book_section{
background-color: #222227;
position: relative;
}
.book_bg{
background-image: url(../img/book-bg.jpg);
background-repeat: no-repeat;
background-position: center left;
position: absolute;
width: 50%;
height: 100%;
left: 0;
top: 0;
}
.map_pattern{
background-image: url(../img/satellite-map.png);
background-size: contain;
background-position: right center;
opacity: 0.05;
position: absolute;
width: 100%;
height: 100%;
right: 0;
top: 0;
}
.appointment_form .book_content{}
.appointment_form .book_content h2{
color: #fff;
}
.appointment_form .book_content p{
color: #999;
}
.appointment_form .book_content{
margin-bottom: 30px;
}
.appointment_form{
padding: 40px;
}
.appointment_form .form-group{
margin-bottom: 0;
}
.appointment_form .form-control{
background-color: transparent;
height: 55px;
border: 3px solid rgba(255,255,255,0.3);
line-height: 52px;
color: #fff;
border-radius: 0;
}
.appointment_form .form-control:hover{
border: 3px solid rgba(255,255,255,0.3);
}
.appointment_form .form-control:focus{
border: 3px solid rgba(255,255,255,0.5);
box-shadow: none;
}
select.form-control:not([size]):not([multiple]){
height: 55px;
}
.nice-select.form-control{
width: 100%;
line-height: 52px;
padding: 0 15px;
}
.nice-select.form-control span{
color: #999;
font-size: 15px;
}
.nice-select .list{
background-color: #222227;
border-radius: 0;
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus{
background-color: var(--accent-gold);
}
.nice-select .option.selected{
display: none;
}
.nice-select .option{
border-bottom: 1px solid #444;
line-height: 45px;
}
.appointment_form .default_btn{
margin-top: 15px;
}
/* ==========================================================================
Gallery Section
========================================================================== */
.gallery_section{}
.gallery_section .portfolio_filter{
display: block;
text-align: center;
overflow: hidden;
}
.gallery_section .portfolio_filter li{
background-color: #eee;
color: #111;
border: 1px solid #ddd;
display: inline-block;
margin-left: -4px;
padding: 15px 25px;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
.gallery_section .portfolio_filter li.active{
background-color: #00c4ff;
color: #fff;
transition: all 0.5s ease-in-out;
}
.gallery_section .portfolio_items{}
.gallery_section .portfolio_items li{
padding: 1px;
}
.gallery_section .portfolio_items .portfolio_item{
position: relative;
overflow: hidden;
margin: 0;
}
.gallery_section .portfolio_items .portfolio_item img{
width: 100%;
}
.gallery_section .portfolio_items .portfolio_item .overlay{
width: 100%;
height: 100%;
display: block;
text-align: center;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.portfolio_items .portfolio_item:hover{
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.portfolio_items .portfolio_item .overlay a {
width: 100%;
height: 100%;
display: table;
color: #fff;
}
.portfolio_items .portfolio_item .overlay h3{
color: #fff;
text-transform: uppercase;
margin: 0;
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.portfolio_items .portfolio_item .overlay span{
display: block;
letter-spacing: 1px;
transform: translateY(10px);
transition: all 0.3s ease-in-out;
}
.portfolio_items .portfolio_item:hover .overlay span,
.portfolio_items .portfolio_item:hover .overlay h3{
transform: translateY(0px);
animation-delay: 0.2s;
transition: all 0.6s ease-in-out;
}

/*Gallery Filter*/
.gallery_section .gallery_filter{
display: block;
text-align: center;
overflow: hidden;
}
.gallery_section .gallery_filter li{
font-family: "Work Sans",sans-serif;
color: #555;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
display: inline-block;
margin: 0 10px;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
.gallery_section .gallery_filter li.active{
color: var(--accent-gold);
transition: all 0.5s ease-in-out;
}

/* ==========================================================================
Team Section
========================================================================== */
.team_section{}
.team_section .team_members{}
.team_section .team_members .col-xs-6{
padding: 15px;
}
.team_section .team_members .team_member{
position: relative;
overflow: hidden;
}
.team_section .team_members .team_member img{
width: 100%;
}
.team_section .team_members .team_member .overlay{
background-color: rgba(158,138,120,0.8);
display: block;
color: #fff;
text-align: center;
padding: 20px 0;
position: absolute;
left: 0;
bottom: -100px;
width: 100%;
}
.team_section .team_members .team_member:hover .overlay{
bottom: 0;
}
.team_section .team_members .team_member:hover img{
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.team_section .team_members .team_member .overlay h3{
color: #fff;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.team_section .team_members .team_member .overlay p{
margin: 0 0 5px;
font-family: "Work Sans",sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
}
.team-padding{
padding:15px !important;
}
/* ==========================================================================
9.0 Testimonial Section
========================================================================== */
.testimonial_section{
background-image: url(../img/skill-cutz-will-dort-clippers.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
-webkit-background-size: cover;
background-size: cover;
padding: 200px 0;
}
.testimonial_section i{
border: 2px solid #fff;
color: #fff;
font-size: 16px;
line-height: 35px;
width: 35px;
height: 35px;
border-radius: 50%;
margin-bottom: 15px;
}
.testimonial_items{}
.testimonial_item{
color: #fff;
text-align: center;
}
.testimonial_item h4{
font-size: 14px;
margin: 0 0 25px;
}
.testimonial_item p{
font-family: "Prata", sans-serif;
font-size: 24px;
line-height: 36px;
}

.testimonial_items .owl-dots{
display: block;
text-align: center;
}
.testimonial_items .owl-dots .owl-dot{
background-color: #ddd;
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin: 0 3px;
-webkit-transform: scale(0.6);
transform: scale(0.6);
transition: all 0.3s ease-in-out;
}
.testimonial_items .owl-dots .owl-dot.active{
background-color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
transition: all 0.3s ease-in-out;
}

/* ==========================================================================
Pricing Section
========================================================================== */
.pricing_section .price_wrap{}
.pricing_items .col-md-4{
padding: 15px;
}
.pricing_section .price_wrap h3{
background-color: var(--accent-gold);
display: inline-block;
padding: 10px 15px;
color: #fff;
margin: 0 0 20px;
}
.pricing_section .price_wrap .price_list{}
.pricing_section .price_wrap .price_list li{
margin-bottom: 40px;
position: relative;
}
.pricing_section .price_wrap .price_list li h4{
position: relative;
color: #ffffff;  /* Changed from #333 to white */
font-size: 18px;
letter-spacing: 0.5px;
margin: 0 0 6px;
overflow: hidden;
width: 90%;
font-weight: bold;  /* Added bold font weight */
}
.pricing_section .price_wrap .price_list li h4:after{
color: #bbb;
content: "--------------------"
"--------------------" "--------------------"
"--------------------";
font-weight: normal;
margin-left: 10px;
position: absolute;
top: -2px;
white-space: nowrap;
width: 0;
}
.pricing_section .price_wrap .price_list li span.price{
font-family: "Prata",sans-serif;
font-size: 24px;
color: var(--accent-gold);
font-weight: 700;
position: absolute;
top: 0;
right: 0;
}
.pricing_section .price_wrap .price_list li p{
margin: 0;
}
.pricing_section .menu_middle_content{}
.pricing_section .menu_middle_content img{
width: 100%;
margin-top: -30px;
margin-bottom: 15px;
}

/* ==========================================================================
Call To Action Section
========================================================================== */
.cta_section{
background-image: url(../img/skill-cutz-will-dort-clippers.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
background-size: cover;
padding: 200px 0;
width: 100%;
}
.cta_section .cta_content h2{
color: #fff;
font-size: 42px;
line-height: 56px;
margin-bottom: 15px;
}
.cta_section .cta_content p{
color: #ddd;
}
.pro_cta_content{}
.pro_cta_content h2{}
.pro_cta_content p{
margin-bottom: 30px;
}
/* ==========================================================================
Content Section
========================================================================== */
.content_section{}
.content_section .col-lg-4{
padding: 0;
}
.content_wrap{
position: relative;
}
.content_wrap:before{
content: '';
border: 2px solid rgba(255,255,255,0.3);
position: absolute;
right: 30px;
left: 30px;
top: 30px;
bottom: 30px;
}
.content_wrap img{
width: 100%;
}
.content_info{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px;
}
.content_inner{}
.content_inner h2{
font-size: 42px;
color: #fff;
}
.content_inner h3{
color: #ddd;
margin-bottom: 20px;
}
.content_inner a{
background-color: var(--accent-gold);
padding: 0 30px;
border-radius: 0;
height: 45px;
line-height: 45px;
text-align: center;
display: inline-block;
font-family: "Work Sans",sans-serif;
font-size: 12px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
}
.content_inner a:hover{
opacity: 0.8;
}
/* ==========================================================================
404 Eror Section
========================================================================== */
.not_found_section{
padding: 120px 0;
}

/* ==========================================================================
Blog Section
========================================================================== */
.blog-section{}
.blog-wrap{}
.blog-classic .col-lg-12:not(:last-of-type){
margin-bottom: 30px;
}
.blog-grid{ margin-top: -15px; }
.blog-item{
-webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}
.blog-item .blog-thumb{
position: relative;
}
.blog-item .blog-thumb .category{
background-color: var(--accent-gold);
padding: 5px 15px;
text-align: center;
color: #fff;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
font-family: "Work Sans",sans-serif;
position: absolute;
width: auto;
height: auto;
left: 0;
bottom: 0;
}
.blog-item .blog-thumb .category a{
color: #fff;
}
.blog-item .blog-thumb img{
width: 100%;
margin: 0;
}
.blog-item .blog-thumb img:hover{
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.blog-content{
background-color: #fff;
padding: 30px;
}
.blog-content h3{
line-height: 24px;
}
.blog-content h3 a{
color: #303133;
font-size: 18px;
line-height: 28px;
}
.blog-content h3 a:hover{
color: var(--accent-gold);
}
.blog-content .read-more{
font-family: "Work Sans",sans-serif;
color: #303133;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
position: relative;
padding-left: 40px;
}
.blog-content .read-more:hover{
color: var(--accent-gold);
}
.blog-content .read-more:before{
background-color: var(--accent-gold);
position: absolute;
content: "";
width: 30px;
height: 4px;
left: 0;
top: calc(50% - 2px);
}
/* Pagination
=============== */
.pagination-wrap{}
.pagination-wrap li{
display: inline-block;
margin: 0 5px;
}
.pagination-wrap.text-left li {
margin: 0 10px 0 0;
}
.pagination-wrap li a{
border: 1px solid #e5e5e5;
display: inline-block;
width: 40px;
height: 40px;
line-height: 38px;
text-align: center;
color: #303133;
font-weight: 600;
border-radius: 2px;
}
.pagination-wrap li a:hover{
background-color: var(--accent-gold);
color: #fff;
opacity: 1;
text-decoration: none;
}
.pagination-wrap li a.active{
background-color: var(--accent-gold);
border: 1px solid var(--accent-gold);
color: #fff;
}

/* Sidebar Style
=================*/
.sidebar-wrap{
padding-left: 40px;
}
.sidebar-wrap .widget-content{
margin-bottom: 40px;
}
.sidebar-wrap .widget-content h4{
font-size: 20px;
position: relative;
margin-bottom: 30px;
}
.sidebar-wrap .widget-content h4:before{
background-color: var(--accent-gold);
position: absolute;
content: "";
width: 20%;
height: 3px;
left: 0;
bottom: -10px;
}
.sidebar-wrap .widget-content .widget-links li a{
color: #303133;
}
.sidebar-wrap .widget-content .widget-links li a:hover{
text-decoration: underline;
}

/* Search Form Style
===================*/
.search-form{
position: relative;
margin-left: -2px;
}
.search-form .form-control{
background-color: #fcf9f5;
box-shadow: none;
width: 100%;
display: block;
border: 1px solid #e5e5e5;
color: #303133;
height: auto;
padding: 15px 20px;
border-radius: 2px;
padding-right: 60px;
}
.search-form .search-btn{
background-color: transparent;
font-size: 15px;
color: #303133;
width: 60px;
height: 100%;
position: absolute;
top: 0;
right: 0;
display: block;
padding: 10px 0;
opacity: 0.6;
}
.search-form .search-btn:focus,
.search-form .search-btn:hover{
opacity: 1;
cursor: pointer;
}
.search-form input::-webkit-input-placeholder{
color: #6a8695 !important;
}
.search-form input:-moz-placeholder{ /* Firefox 18- */
color: #6a8695 !important;
}
.search-form input::-moz-placeholder{  /* Firefox 19+ */
color: #6a8695 !important;
}
.search-form input:-ms-input-placeholder{
color: #6a8695 !important;
}

/* Thumbnails Post Style
========================*/
.thumb-post{}
.thumb-post li{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: top;
margin-bottom: 20px;
}
.thumb-post li:last-child{
margin-bottom: 0;
}
.thumb-post li img{
width: 100px;
display: block;

}
.thumb-post li a{
font-family: "Prata",sans-serif;
font-size: 15px;
font-weight: 600;
color: #303133;
padding-left: 15px;
letter-spacing: -0.5px;
}
.thumb-post li a:hover{
color: var(--accent-gold);
text-decoration: underline;
}

/* Tag Cloud Style
==================*/
.widget-content .tags{}
.widget-content .tags li{
display: inline-block;
}
.widget-content .tags li a{
display: inline-block;
background-color: var(--accent-gold);
padding: 5px 10px;
border-radius: 2px;
font-size: 12px;
color: #fff;
margin: 3px;
}
.widget-content .tags li a:hover{
background-color: #303133;
color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
Blog Single Section
========================================================================== */
.blog-thumb{}
.blog-thumb img{
width: 100%;
margin-bottom: 20px;
}
.blog-single-content{}
.blog-single-content h2 a{
font-size: 28px;
color: #303133;
}
.blog-single-content h2 a:hover{
color: var(--accent-gold);
}
.single-post-meta{
margin-bottom: 20px;
}
.single-post-meta li{
display: inline-block;
margin-right: 20px;
}
.single-post-meta li i{
font-size: 12px;
color: var(--accent-gold);
margin-right: 5px;
}
.single-post-meta li a{
display: inline-block;
font-family: "Work Sans",sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
color: #303133;
}
/* Blog Quote
===============*/
blockquote{
background-color: #fcf9f5;
padding: 40px;
border-left: 4px solid var(--accent-gold);
margin: 30px 0;
position: relative;
z-index: 1;
}
blockquote p{
font-family: "Prata",sans-serif;
font-size: 22px;
line-height: 32px;
color: #303133;
font-size: 20px;

}
blockquote span{
display: block;
margin-top: 20px;
color: #303133;
}

/* Post Tags Style
==================*/
.post-tags{
margin-top: 30px;
}
.post-tags li{
display: inline-block;
}
.post-tags li a{
display: inline-block;
background-color: var(--accent-gold);
padding: 5px 10px;
border-radius: 2px;
font-size: 12px;
color: #fff;
margin: 3px;
}
.post-tags li a:hover{
background-color: #303133;
color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Author Box Style
====================*/
.author-box{
display: flex;
align-items: center;
padding: 30px;
margin-top: 30px;
border-left: 4px solid var(--accent-gold);
}
.author-box img{
border-radius: 50%;
}
.author-info{
padding-left: 30px;
}
.author-info h3{
font-size: 18px;
line-height: 28px;
margin-bottom: 5px;
}
.author-box .social-icon{}
.author-box .social-icon li{
display: inline-block;
margin-right: 8px;
}
.author-box .social-icon li a{
font-size: 14px;
color: #303133;
}
.author-box .social-icon li a:hover{
color: var(--accent-gold);
}

/* Post Navigation
====================*/
.post-navigation {
border: 1px solid #e5e5e5;
margin-top: 40px;
margin-left: 0;
margin-right: 0;
}
.post-navigation .col{
padding: 20px;
}
.post-navigation .col:not(:last-of-type){
border-right: 1px solid rgba(17,17,17,0.04);
}
.post-navigation .col a{
color: #303133;
font-size: 12px;
text-transform: uppercase;
font-family: "Work Sans",sans-serif;
font-weight: 600;
display: flex;
align-items: center;
}
.post-navigation .col.next-post a{
justify-content: flex-end;
}
.post-navigation .col i{
display: inline-block;
font-size: 14px;
}
.post-navigation .ti-arrow-left{
margin-right: 10px;
}
.post-navigation .ti-arrow-right{
margin-left: 10px;
}
.post-navigation .col a:hover{
color: var(--accent-gold);
}
.post-navigation .col.prev-post .fa{
margin-right: 10px;
}
.post-navigation .col.next-post .fa{
margin-left: 10px;
}

/* Comments Style
==================*/
.comment-area a:hover{
text-decoration: none;
}

.comment-area a:focus{
outline: 0;
text-decoration: none;
}

.comment-area a{
color: var(--accent-gold);
}

.bullet{
padding-left: 30px;
list-style-type: disc;
margin: 0;
}

.blog-single-wrap .comments-area {
margin-top: 40px;
}
.blog-single-wrap .comments-area .comments {
border-bottom: 0;
}
.blog-single-wrap .comments-area li > div {
border-bottom: 1px solid rgba(17,17,17,0.05);
padding: 35px;
}
.blog-single-wrap .comments-area ol {
list-style-type: none;
padding-left: 0;
}
.blog-single-wrap .comments-area ol ul {
padding-left: 30px;
list-style-type: disc;
margin: 0;
}
.blog-single-wrap .comments-area ol > li:last-child div {
border-bottom: 0;
}
.blog-single-wrap .comments-area .comments-title{
font-size: 22px;
font-weight: 600;
}
.blog-single-wrap .comments-area li > div{
position: relative;
}
.blog-single-wrap .comments-area .comment-thumb{
position: absolute;
left: 35px;
}
.blog-single-wrap .comments-area .comment-thumb .comment-img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.blog-single-wrap .comments-area .comment-thumb .comment-img img{
border-radius: 50%;
}
.blog-single-wrap .comments-area .comment-main-area{
padding-left: 120px;
}
.blog-single-wrap .comments-area .comment-main-area p {
margin-bottom: 20px;
}
.blog-single-wrap .comments-area .comments-meta h4{
font-family: "Prata", sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: -1px;
}
.blog-single-wrap .comments-area .comments-meta h4 span{
font-family: "Work Sans", sans-serif;
font-weight: 600;
text-transform: none;
display: inline-block;
font-size: 12px;
text-transform: uppercase;
margin-left: 5px;
}
.blog-single-wrap .comments-area .comment-reply-link {
font-family: "Work Sans", sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--accent-gold);
display: inline-block;
text-transform: uppercase;
padding-left: 35px;
position: relative;
}
.blog-single-wrap .comments-area .comment-reply-link:before{
background-color: var(--accent-gold);
position: absolute;
content: "";
width: 30px;
height: 2px;
left: 0;
top: calc(50% - 1px);
}
.blog-single-wrap .comments-area .comment-reply-link:hover{
text-decoration: underline;
}
.blog-single-wrap .comment-respond {}
.blog-single-wrap .comment-respond .comment-reply-title{
font-size: 22px;
font-weight: 600;
letter-spacing: -1px;
margin-bottom: 20px;
}
.blog-single-wrap .comment-respond form input,
.blog-single-wrap .comment-respond form textarea {
background-color: #fcf9f5;
border: 1px solid #e5e5e5;
width: 100%;
height: 50px;
padding: 6px 15px;
margin-bottom: 15px;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
transition: all 0.3s;
}
.blog-single-wrap .comment-respond form input:focus,
.blog-single-wrap .comment-respond form textarea:focus {
border-color: var(--accent-gold);
}
.blog-single-wrap .comment-respond form textarea {
height: 200px;
padding: 15px;
}
.blog-single-wrap .comment-respond .form-inputs {
overflow: hidden;
}
.blog-single-wrap .comment-respond .form-inputs > input:nth-child(2) {
width: 49%;
float: left;
}
.blog-single-wrap .comment-respond .form-inputs > input:nth-child(3) {
width: 49%;
float: right;
}
.blog-single-wrap .comment-respond .form-submit input{
font-family: "Work Sans", sans-serif;
max-width: 180px;
background-color: var(--accent-gold);
color: #fff;
font-weight: 600;
font-size: 12px;
letter-spacing: 1px;
margin-bottom: 0;
border: 0;
outline: 0;
cursor: pointer;
border-radius: 0;
text-transform: uppercase;
}
.blog-single-wrap .comment-respond .form-submit input:hover {
opacity: 0.9;
}

/* ==========================================================================
12.0 Sponsor Section
========================================================================== */
.sponsor_section{
padding: 60px 0;
}
.sponsor_section .sponsor_items{}
.sponsor_section .sponsor_item img{
width: 100%;
}
.sponsor_section .sponsor_items li:hover img{
-webkit-transform: scale(0.9);
transform: scale(0.9)
}

/* ==========================================================================
12.0 Footer widget Section
========================================================================== */
.widget_section{
background-color: #222227;
padding: 100px 0;
}
.widget_social{
display: block;
text-align: left;
}
.widget_social li{
display: inline-block;
}
.widget_social li a{
color: #777;
font-size: 20px;
margin-right: 20px;
}
.widget_social li a:hover{
color: var(--accent-gold);
}
.opening_time{}
.opening_time li{
color: #999;
line-height: 35px;
}
.footer_widget{
color: #fff;
}
.footer_widget h3{
color: #fff;
}
.footer_widget p{
color: #999;
}
.subscribe_form {
display: block;
text-align: center;
padding: 5px 0;
}
.subscribe_form p{
color: #999;
}
.subscribe_form .form_input{
display: block;
background-color: rgba(255,255,255,0.4);
color: #fff;
border: none;
font-size: 14px;
line-height: 50px;
padding: 0 10px;
float: left;
width: 100%;
margin-bottom: 10px;
transition: all 0.5s ease-in-out;
}
.subscribe_form .form_input:focus{
box-shadow: none;
outline: none;
}
.subscribe_form .submit{
background-color: var(--accent-gold);
color: #fff;
font-family: "Work Sans", sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 50px;
display: inline-block;
padding: 0 10px;
float: left;
width: 100%;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.subscribe_form .submit:hover{
background-color: #897666;
transition: all 0.5s ease-in-out;
}
#subscribe-result{
display: none;
margin-top: 15px;
padding: 10px;
border: 1px solid #DEAA6E;
}
#subscribe-result.subs-result{
display: block;
}
.subscription-error{
color: #B60000;
}
.subscription-success{
color: #333;
}
.subscribe_form input::-webkit-input-placeholder{
color: #ddd !important;
}
.subscribe_form input:-moz-placeholder{ /* Firefox 18- */
color: #ddd !important;
}
.subscribe_form input::-moz-placeholder{  /* Firefox 19+ */
color: #ddd !important;
}
.subscribe_form input:-ms-input-placeholder{
color: #ddd !important;
}

/* ==========================================================================
14.0 Footer Section
========================================================================== */
.footer_section{
display: block;
background-color: #222227;
border-top: 1px solid #333;
padding: 30px 0;
}
.footer_section .copyright{
font-size: 14px;
color: #ddd;
}
.footer_social{
display: block;
text-align: right;
}
.footer_social li{
display: inline-block;
}
.footer_social li a{
font-family: "Work Sans",sans-serif;
color: #ddd;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin-left: 20px;
}
.footer_social li a:hover{
color: var(--accent-gold);
}

/* ==========================================================================
15.0 Page Style Section
========================================================================== */
/*Page Header */
.page_header{
background-image: url(../img/page-header.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
height: 500px;
position: relative;
z-index: 1;
}
.page_header .section_heading{}
.page_header .section_heading h2{
color: #fff;
}
.page_content_section{
border-bottom: 2px solid #eee;
}
.page_content_wrap {
padding: 35px 0;
}

.page_header_news{
background-image: url(../img/page-header-news.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
height: 500px;
position: relative;
z-index: 1;
}

.page_header_news .section_heading{}
.page_header_news .section_heading h2{
color: #fff;
}

/*Breadcrumb */
.breadcrumb{
background-color: transparent;
position: absolute;
right: 0;
top: calc(50% - 5px);
}

.breadcrumb li{}
.breadcrumb li a{
color: #ddd;
}

.breadcrumb li a:hover{
color: #fff;
}

/* ==========================================================================
27.0 Contact Section
========================================================================== */
/* ==========================================================================
Contact Section
========================================================================== */
.contact-section{
position: relative;
z-index: 1;
}
.contact-info h3{
line-height: 28px;
margin-bottom: 20px;
color: var(--accent-gold);
}

.contact-info .address{
color: #303133;
}

.contact-info h4{
font-size: 15px;
line-height: 28px;
}
.contact-info span{
margin-right: 5px;
}

/* Form Style
===============*/
.contact-form{
background-color: #fff;
padding: 50px 40px;
-webkit-box-shadow: 0px 50px 100px 0px rgba(64, 1, 4, 0.1), 0px -6px 0px 0px rgba(248, 99, 107, 0.004);
box-shadow: 0px 50px 100px 0px rgba(64, 1, 4, 0.1), 0px -6px 0px 0px rgba(248, 99, 107, 0.004);
border-radius: 3px;
}
.form-control{
background-color: #fff;
border-radius: 0;
padding: 15px 10px;
box-shadow: none;
border: 2px solid #eee;
}
.form-control:focus{
border-color: #fff;
box-shadow: none;
outline: none;
}
.form-group .default-btn{
box-shadow: none;
}
#form-messages{
display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
display: block;
}
/* Google Map*/
#google-map{
width: 100%;
height: 400px;
}

/* ==========================================================================
18.0 Scroll To Top
========================================================================== */
#scroll-to-top{
background-color: var(--accent-gold);
display: none;
width: 35px;
height: 35px;
text-align: center;
font-size: 14px;
line-height: 35px;
color: #fff;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 999;
}
#scroll-to-top:hover{
background-color: #897666;
color: #fff;
}

/* ==========================================================================
Klass Cutz Theme Colors - Complete Overhaul
========================================================================== */
:root {
    --primary-bg: #000000;
    --accent-gold: #F5C71A;
    --accent-gold-alt: #FFD700;
    --main-text: #FFFFFF;
    --secondary-text: #F4F4F4;
    --secondary-bg: #2D2D2D;
    --button-hover: #C59B06;
    --border-light: #FFEB99;
}

/* Global Background */
body {
    background: url('../img/background.jpeg') no-repeat center center fixed;
    background-size: cover;
    color: var(--main-text);
    position: relative;
}

/* Add a subtle overlay to ensure text readability */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 12px;
    background-color: var(--primary-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--accent-gold);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--button-hover);
}

::-webkit-scrollbar-track {
    background-color: var(--secondary-bg);
}

/* Header/Navbar */
.header-section {
    background-color: var(--primary-bg);
}

.navbar {
    background-color: var(--primary-bg);
}

ul.nav > li > a {
    color: var(--main-text);
}

ul.nav > li > a:hover,
ul.nav > li > a:focus {
    color: var(--accent-gold);
}

/* Buttons */
.default_btn {
    background-color: var(--accent-gold);
    color: var(--primary-bg);
    border: 2px solid var(--accent-gold);
}

.default_btn:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
    color: var(--primary-bg);
}

/* Section Headers */
.section_heading h2 {
    color: var(--accent-gold);
}

.section_heading h3 {
    color: var(--main-text);
}

.heading-line {
    background-color: var(--accent-gold);
}

/* Top Services Section */
.pricing_section {
    background-color: var(--primary-bg);
}

.price_wrap {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-light);
}

.price_wrap h3 {
    color: var(--accent-gold);
}

.price_list li h4 {
    color: var(--main-text);
}

.price_list li p {
    color: var(--secondary-text);
}

.price_list li span.price {
    color: var(--accent-gold);
}

/* Remove any red colors */
.contact-info h3,
.contact-info h4,
.footer_widget a,
a[style*="color:var(--accent-gold)"],
a[style*="color: var(--accent-gold)"] {
    color: var(--accent-gold) !important;
}

/* Footer */
.widget_section {
    background-color: var(--primary-bg);
}

.footer_section {
    background-color: var(--primary-bg);
    border-top: 1px solid var(--secondary-bg);
}

.footer_widget {
    color: var(--main-text);
}

.footer_widget h3 {
    color: var(--accent-gold);
}

.footer_widget p {
    color: var(--secondary-text);
}

/* Social Icons */
.widget_social li a {
    color: var(--secondary-text);
}

.widget_social li a:hover {
    color: var(--accent-gold);
}

/* Links */
a {
    color: var(--accent-gold);
}

a:hover {
    color: var(--button-hover);
}

/* Form Elements */
.form-control {
    background-color: var(--secondary-bg);
    border: 2px solid var(--secondary-bg);
    color: var(--main-text);
}

.form-control:focus {
    border-color: var(--accent-gold);
    background-color: var(--secondary-bg);
}

/* Contact Form */
.contact-form {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-light);
}

/* Service Content */
.service_content h3 {
    color: var(--accent-gold);
}

.service_content p {
    color: #000000;  
}

/* Section Headings - Change the text above main headings to black */
.section_heading h3 {
    color: #000000;  /* This targets "Klass Cutz Barbershop & Salon" text */
}

/* Pricing Section - Make disclaimer text white */
.pricing_section .section_heading p {
    color: #FFFFFF;  /* Makes "* Prices may vary..." text white */
}

/* Pricing Boxes - Ensure they match theme colors */
.price_wrap {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-light);
    color: var(--main-text);
}

/* Pricing Box Titles - Gold background with black text */
.price_wrap h3 {
    background-color: var(--accent-gold);  /* Gold background */
    color: #000000;  /* Black text */
    text-align: center;  /* Center the text */
    padding: 15px 20px;  /* Add some padding */
    margin: -20px -20px 20px -20px;  /* Extend to edges of box */
    border-radius: 5px 5px 0 0;  /* Rounded top corners */
    font-weight: bold;  /* Make text bold */
    text-transform: uppercase;  /* Make text uppercase */
    letter-spacing: 1px;  /* Add letter spacing */
}

.price_list li h4 {
    color: var(--main-text);  /* Service names like "Men's Haircut" */
}

.price_list li p {
    color: var(--secondary-text);  /* Service descriptions */
}

.price_list li span.price {
    color: var(--accent-gold);  /* Price amounts like "$40" */
}

/* Text Selection/Highlighting - Match Klass Cutz Theme */
::selection {
    background-color: var(--accent-gold);  /* Gold background when text is selected */
    color: #000000;  /* Black text on gold background */
}

::-webkit-selection {
    background-color: var(--accent-gold);  /* For Chrome/Safari */
    color: #000000;
}

::-moz-selection {
    background-color: var(--accent-gold);  /* For Firefox */
    color: #000000;
}

/* Contact Form - Single, Clean Rule */
.contact_form input,
.contact_form textarea,
.contact_form select {
    color: #FFFFFF;
}

/* Contact Form - "Send Us a Message" heading */
.contact_form h3 {
    color: #FFFFFF;
}

/* Global Caret Color for All Input Fields */
input, textarea, select {
    caret-color: var(--accent-gold);  /* Gold blinking cursor everywhere */
}

/* About Dropdown Menu - Klass Cutz Theme */
#mainmenu li ul {
    background-color: var(--secondary-bg);  /* Dark gray background */
    border: 1px solid var(--border-light);  /* Light gold border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);  /* Subtle shadow */
}

#mainmenu li ul li {
    border-bottom: 1px solid var(--secondary-bg);  /* Subtle separators */
}

#mainmenu li ul li:last-child {
    border-bottom: none;  /* No border on last item */
}

#mainmenu li ul li a {
    color: var(--main-text);  /* White text */
    background-color: transparent;  /* Transparent background */
    padding: 12px 20px;  /* Comfortable padding */
    transition: all 0.3s ease;  /* Smooth transitions */
    font-weight: normal;  /* Normal font weight */
}

#mainmenu li ul li a:hover {
    background-color: var(--accent-gold);  /* Gold background on hover */
    color: #000000;  /* Black text on gold background */
    transform: translateX(5px);  /* Slight slide effect */
}

/* Ensure dropdown appears properly */
#mainmenu li:hover > ul {
    display: block;  /* Show dropdown on hover */
    opacity: 1;  /* Full opacity */
    visibility: visible;  /* Make visible */
}

/* HEADER NAVIGATION ACTIVE TABS - Gold Instead of Red */
.header-section .nav-link.active {
    color: var(--accent-gold);  /* Gold text for active header tabs */
}

/* RED OVERRIDE - Only use !important where absolutely necessary */
/* Override inline styles that can't be targeted with specificity */
[style*="color:var(--accent-gold)"],
[style*="color: var(--accent-gold)"],
[style*="color: var(--accent-gold)"],
[style*="color:rgb(180, 42, 54)"],
[style*="color: rgb(180, 42, 54)"],
[style*="color:rgba(180, 42, 54"],
[style*="color: rgba(180, 42, 54"],
[style*="color:#dc3545"],
[style*="color: #dc3545"],
[style*="color:#c82333"],
[style*="color: #c82333"],
[style*="color:#e74c3c"],
[style*="color: #e74c3c"],
[style*="color:#c0392b"],
[style*="color: #c0392b"] {
    color: var(--accent-gold) !important;  /* Only !important for inline styles */
}

/* Override inline background colors */
[style*="background-color:var(--accent-gold)"],
[style*="background-color: var(--accent-gold)"],
[style*="background-color: var(--accent-gold)"],
[style*="background-color:rgb(180, 42, 54)"],
[style*="background-color: rgb(180, 42, 54)"],
[style*="background-color:rgba(180, 42, 54"],
[style*="background-color: rgba(180, 42, 54"],
[style*="background-color:#dc3545"],
[style*="background-color: #dc3545"],
[style*="background-color:#c82333"],
[style*="background-color: #c82333"],
[style*="background-color:#e74c3c"],
[style*="background-color: #e74c3c"],
[style*="background-color:#c0392b"],
[style*="background-color: #c0392b"] {
    background-color: var(--accent-gold) !important;  /* Only !important for inline styles */
}

/* Override inline border colors */
[style*="border-color:var(--accent-gold)"],
[style*="border-color: var(--accent-gold)"],
[style*="border-color: var(--accent-gold)"],
[style*="border-color:rgb(180, 42, 54)"],
[style*="border-color: rgb(180, 42, 54)"],
[style*="border-color:rgba(180, 42, 54"],
[style*="border-color: rgba(180, 42, 54"],
[style*="border-color:#dc3545"],
[style*="border-color: #dc3545"],
[style*="border-color:#c82333"],
[style*="border-color: #c82333"],
[style*="border-color:#e74c3c"],
[style*="border-color: #e74c3c"],
[style*="border-color:#c0392b"],
[style*="border-color: #c0392b"] {
    border-color: var(--accent-gold) !important;  /* Only !important for inline styles */
}

/* Instagram Gallery Styles */
.instagram-gallery {
    margin-top: 30px;
}

.instagram-gallery .gallery_item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 20px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.instagram-gallery .gallery_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.instagram-gallery .gallery_link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.instagram-gallery .gallery_img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

/* Force Bootstrap grid to work */
.instagram-gallery .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.instagram-gallery .col-lg-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    display: block !important;
    visibility: visible !important;
}

@media (max-width: 991px) {
    .instagram-gallery .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767px) {
    .instagram-gallery .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.instagram-gallery .gallery_item:hover .gallery_img {
    transform: scale(1.1);
}

.instagram-gallery .gallery_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(180, 42, 54, 0.9), rgba(180, 42, 54, 0.7));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.instagram-gallery .gallery_item:hover .gallery_overlay {
    opacity: 1;
}

.instagram-gallery .gallery_info {
    text-align: center;
    color: white;
    padding: 20px;
}

.instagram-gallery .gallery_info h4 {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.instagram-gallery .gallery_info p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

/* Instagram Gallery Responsive */
@media (max-width: 768px) {
    .instagram-gallery .gallery_img {
        height: 200px;
    }
    
    .instagram-gallery .gallery_info h4 {
        font-size: 16px;
    }
    
    .instagram-gallery .gallery_info p {
        font-size: 12px;
    }
}

/* Instagram Gallery Styles */
.instagram_section {
    background: #f8f9fa;
    padding: 80px 0;
}

.instagram_gallery {
    margin-top: 40px;
}

.instagram_post {
    margin-bottom: 30px;
    text-align: center;
}

.instagram_post blockquote {
    margin: 0 auto;
    max-width: 100%;
}

.instagram_post .instagram-media {
    margin: 0 auto !important;
    max-width: 100% !important;
    min-width: auto !important;
}

/* Responsive Instagram embeds */
@media (max-width: 768px) {
    .instagram_post .instagram-media {
        min-width: 280px !important;
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .instagram_post .instagram-media {
        min-width: 250px !important;
        width: 100% !important;
    }
}

/* Make sections have consistent background like services page */
.about_section,
.service_section,
.pricing_section,
.testimonial_section {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-radius: 8px;
    margin: 20px 0;
    padding: 40px 0;
}

/* Ensure text is readable on dark backgrounds */
.about_section .section_heading h2,
.about_section .section_heading h3,
.service_section .section_heading h2,
.service_section .section_heading h3,
.pricing_section .section_heading h2,
.pricing_section .section_heading h3 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.about_section p,
.service_section p,
.pricing_section p {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Remove the border bottom from sections */
.bd-bottom {
    border-bottom: none !important;
}