/*
Theme Name: Spa Salon Elementor
Theme URI: 
Author: wptexture
Author URI: https://testerwp.com/
Description: Spa Salon Elementor. Theme is a clean, minimal, free business WordPress theme made for business, Parlour, Nails,  Facial, SWaxing, Hair school,  Massages,  Barber, Human body, Hair, Hairdresser stores and preferably ideal for any type of online store websites. Spa Salon Elementor is a beautiful, fast, lightweight, responsive, extremely customizable theme. The theme options panel is too easy to use, and the theme is also fully responsive to each & every device like Mobile, iPads etc. Furthermore, It also offers features such as tabbed product carousel, ribbon, product carousel featured banner, etc. Spa Salon Elementor theme is so responsive that it works on every device such as mobile, desktop, iPods, etc. And we have ensured that your new store looks amazing everywhere.
Version: 1.0
Requires at least: 5.4
Tested up to: 6.0 
Requires PHP: 5.6
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/license-list.html#GNUGPLv3
Text Domain: spa-salon-elementor
Template: beauty-parlour-elementor
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, wide-blocks, block-editor-patterns, block-editor-styles, block-themes, buddyPress, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, front-page-posting, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, style-variations, template-editing, theme-options, threaded-comments, translation-ready, blog, e-commerce, education, entertainment, food-and-drink, news, portfolio

Spa Salon Elementor WordPress Theme, Copyright 2025, wptexture
Spa Salon Elementor is distributed under the terms of the GNU GPL

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@font-face {
	font-family: 'welearn';
	src: url('fonts/WebYekan.woff') format('woff');
}



/* menu */

.web-header-section {
    padding: 10px 0;
    background-color: #f8f6f1;
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}

/* Navigation Menu */
.web-header-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.web-header-section ul li {
    padding: 0 15px;
}

.web-header-section ul li a {
    position: relative;
    color: #3f3f3f;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.3s ease;
    padding-bottom: 5px; /* space for underline */
}

.web-header-section ul li a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #dc3545;
    left: 0;
    bottom: 0;
    transition: width 0.4s ease;
}

.web-header-section ul li.active a,
.web-header-section ul li a:hover {
    color: #dc3545;
}

.web-header-section ul li a:hover::after {
    width: 100%;
}


/* Book Button Hover */
.btn-outline-danger:hover {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}


/* end menue */






/* Slider */


.web-slider-section {
    width: 100%;
    margin: 0; /* ✅ No gap at top or bottom */
    background-color: #f8f6f1;
    background-size: cover; /* ✅ Use cover for a more professional look */
    background-repeat: no-repeat;
    padding: 0; /* ✅ Make sure no padding too */
}

.web-slider-section .carousel-indicators {
    bottom: -70px;
}

.web-slider-section .carousel-indicators li {
    height: 10px;
    background: #818181;
    border: 0;
    border-radius: 20px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

.web-slider-section .carousel-indicators li:hover {
    background: #3a5653;
}

.web-slider-section .carousel-indicators li.active {
    width: 45px;
    background: #3a5653;
}



.carousel-control-prev, 
.carousel-control-next {
    width: 30px;  /* Adjust the width */
    height: 30px; /* Adjust the height */
}

.carousel-control-prev-icon, 
.carousel-control-next-icon {
    width: 20px; /* Reduce icon size */
    height: 20px;
}

.carousel-item {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(63, 63, 63, 0.5); /* White with 50% opacity */
    z-index: 1;
}

.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    text-align: center;
    padding: 15px;
}

.carousel-caption h2{
    color: #fff !important;
    /* background: #e8e3dd47; */
    /* border-radius: 1rem; */
    background: #ffffff00;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
}

.carousel-caption a{
    border-radius: 0.5rem;
}

.carousel-caption a:hover{
    background-color: #fff;
    color: #dc3545;
    border: 2px solid #dc3545;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.caption-content {
    max-width: 800px; /* Adjust based on your needs */
    margin: 0 auto;
}

/* endslider */


/* summary */

.summary {
    padding: 60px 0;
}

.summary .heading {
    /* font-size: 2.5rem; */
    /* font-weight: 700; */
    color: #2C2C2C; /* main text color */
    text-align: center;
    margin-bottom: 20px;
}

.summary .heading::after {
    content: '';
    display: block;
    width: 80px;
    border: 2px solid #DC3545;
    margin: 20px auto;
    margin-top: 10px;
}

.summary p.text-muted {
    text-align: center;
    font-size: 1rem;
    color: #6C757D;
    margin-bottom: 50px;
}

.summary .content {
    margin-top: 30px;
}

.summary .image-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.summary .image-container img {
    width: 100%;
    border-radius: 10px;
    display: block;
}

/* .summary .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    transition: background 0.4s ease;
    border-radius: 10px;
} */

.summary .image-container:hover .image-overlay {
    background: rgba(0, 0, 0, 0.2);
}

.summary .btn-danger {
    background-color: #DC3545;
    border: none;
    padding: 10px 25px;
    margin-top: 20px;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

.summary .btn-danger:hover {
    background-color: #fff;
    color: #dc3545;
    border: 2px solid #dc3545;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
/* end summary  */




/* gallary */
.web-service-section {
	padding: 50px 0 100px;
	background-color: #f8f6f1;
	/* background: url(images/img-service-section.png) no-repeat;
	background-size: contain; */
}
.web-service-section .web-heading h2::after{
    content: '';
    display: block;
    width: 80px;
    border: 2px solid #DC3545;
    margin: 20px 0;
    margin-top: 10px;
}


.web-service-section .web-heading a{
	float: left;
}

.web-service-section .col-lg-6:nth-child(even) {
	margin: 40px 0 0;
}
.web-service-section .web-service-item {
	padding: 45px 30px;
	background: #fff;
	text-align: center;
	border-radius: 10px;
}
.web-service-section .web-service-item h4 {
	margin: 30px 0 20px;
	font-size: 1.15rem;
}
.web-service-section .web-service-item a {
	display: inline-block;
	position: relative;
	font-family: 'welearn';
	color: #3f3f3f;
	text-transform: uppercase;
	font-weight: 500
}
.web-service-section .web-service-item a:before {
	content: '';
	width: 20px;
	height: 2px;
	position: absolute;
	top: 15px;
	right: -30px;
	background: #3f3f3f;
}
.web-service-section .web-service-item a:hover {
	color: #3a5653;

}

/* end gallary */



/* Set equal height and width for all images in the tabs */
.elementor-image img {
    width: 100%; /* Ensures the images are responsive */
    height: auto; /* Maintains the aspect ratio */
    object-fit: cover; /* Ensures the image covers the container */
    max-height: 300px; /* Adjust the max height as per your design */
}

/* Ensures all the li elements have the same size */
.nav-tabs .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-tabs .nav-link {
    display: block;
    text-align: center;
    padding: 10px; /* Adjust the padding as needed */
    width: 100%; /* Ensures that all links have the same width */
    height: 100%; /* Ensures all links have the same height */
    min-height: 250px; /* Adjust based on your image size */
    box-sizing: border-box;
}

/* Add a consistent look to the images and tab items */
.nav-tabs .nav-item img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Set consistent font size for the tab text */
.nav-tabs .nav-link span {
    font-size: 16px; /* Adjust the font size as needed */
    display: block;
    margin-top: 10px; /* Space between image and text */
}



a{
font-family: welearn;

}

body {
    font-family: 'Muli', sans-serif;
    background-color: #f8f6f1 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/*font-family: 'Rubik'*/
	font-family: 'welearn';
}
:focus {
	outline: 0;
}
a {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

a:hover{
	text-decoration: none;
}
.clearfix{
	margin-top: 10rem;
}

.our_gallary {
	margin-top: 8rem;
	margin-bottom: 5rem;
}
.hover-effect:hover {
	transform: scale(1.1);
	/* increase the size of the image by 10% */
	transition: transform 0.2s ease-in-out;
	/* add a smooth transition effect */
}

p{
	text-align: left;
	color: #818181;
}
.center {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0;
}
.auto {
	margin: 0 auto;
}

.web-shadow{
box-shadow: 0 5px 20px rgba(0,0,0,.12);
border-radius: 1rem;
}


.section_contact .wpcf7 p input{
    width: 100%;
    margin-top: 1rem;
    border: 1.75px solid #3a5753;
    border-radius: 5px;
}

.section_contact .wpcf7 p.submine_contact input{
    color: #fff;
    background-color: #3a5653;
    border-color: #3a5653;
}

.section_contact .wpcf7 p.submine_contact input:hover{
   color: #fff;
  background-color: #21413d;
  border-color: #21413d;
}

    

.section_contact .wpcf7 p textarea{
    width: 100%;
    margin-top: 1rem;
    border: 1.75px solid #3a5753;
    border-radius: 5px;
}

.section_contact .wpcf7 p input:focus{
  color: #495057;
  background-color: #fff;
  border-color: #3A5668;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #3a5653;
}





img.our_servicess{
	width: 100%;
}



.logos{
	max-width: 150px !important;
	height: 100px !important;
}






.web-heading h1{
	color: #3f3f3f;
	font-size:3rem;
}

.web-heading span{
	color: #3a5653;
}
.web-heading h3{
	color: #3f3f3f;
}
.web-heading h2{
	color:#3f3f3f;
}
.web-heading p{
	color:#818181;
}

.colour-middrak{
	color:#3f3f3f;
}

.web-heading-2 h1{
	color: #3f3f3f;
	font-size:3rem;
}
.web-heading-2 span{
	color: #3a5653;
}
.web-heading-2 h3{
	color: #3f3f3f;
}
.web-heading-2 h2{
	color:#3f3f3f
}
.web-heading-2 p{
	color:#818181
}





.web-feature-section{
		/* background: url(images/img-feature-section.png);
	background-size: contain;
	background-repeat: no-repeat; */
}

.web-feature-section .web-feature-item{
margin: 0 0 30px;
padding: 60px 30px;
background:#fff;
border-radius: 10px; 
}



.web-about-section{
	padding: 100px 0;
	position: relative;
	background: url(images/img-about-section.png) no-repeat;
	background-size: contain;
	
	overflow: hidden;
	background-size: contain;
}
  .web-about-section:before{
  	content: '';
  	width: 800px;
  	height: 800px;
  	position: absolute;
	float: right;
  	top: 0;
  	background: url(images/img-about-1.png) !important;
  	background-repeat: no-repeat;
  }


.web-about-section .web-about-tab .nav li a{
padding: 20px 30px;
font-family: 'welearn';
font-weight: 500;
line-height: 1;
color: #3f3f3f;
border: 0;
border-bottom: 2px solid #dee2e6
}




.web-about-section .web-about-tab .nav li a.active{
	color: #3a5653;
	border-color: #3a5653;
}


.web-about-section .web-about-tab .tab-content ul li{
	color: #818181;
}

.web-steps-section{
	padding: 300px 0 0 0;
	background: url(images/img-step-section.png) no-repeat;
	background-size: contain;
}

.web-steps-section .web-steps-line {
	background: url(images/img-step-line.png) no-repeat;
	background-position: 14% 45%;
}
.web-steps-section .col-lg-3:nth-child(even) {
	margin: 225px 0 0;
}
.web-steps-section .web-steps-item {
	margin: 0 0 30px;
	padding: 60px 20px;
}






.web-counter-section {
	padding: 100px 0;
	background: #3a5653;
	color: #fff;
	border-radius: 5px;
}
.web-counter-section .web-counter-item span {
	display: block;
	font-family: 'welearn'
}
.web-counter-section .web-counter-item .web-counter-number {
	font-size: 2.5rem;
	font-weight: 700
}
.web-counter-section .web-counter-item .web-counter-name {
	font-size: 1.5rem;
	font-weight: 500
}

.web-pricing-section {
	padding: 100px 0;
	background-color: #f8f6f1;
	background-size: contain;
}
.web-pricing-section .nav {
	margin: 30px 0;
	border: 0;
}
.web-pricing-section .nav li a {
	padding: 45px;
	margin: 0 0 30px;
	background: #fff;
	color: #495057;
	border: 0;
	border-radius: 10px;
}
.web-pricing-section .nav li h4 {
	font-size: 1.15rem;
	font-weight: 500;
	color: #3a5653;
}
.web-pricing-section .nav li span {
	margin: 10px 0 0;
	font-family: 'Rubik';
	font-size: 2rem;
	font-weight: 700;
}
.web-pricing-section .nav li a.active {
	background: #E8E3DD;
	color: #fff;
}
.web-pricing-section .nav li a.active h4 {
	color: #fff;
}
.web-pricing-section .web-pricing-content {
	width: 100%;
	display: inline-block;
	padding: 60px 45px 45px;
	background: #fff;
	border-radius: 10px;
}
.web-pricing-section .web-pricing-content h4 {
	margin: 0 0 30px;
}
.web-pricing-section .web-pricing-content li {
	color: #818181;
	font-size: 1.15rem;
	line-height: 2;
	font-style: italic;
}
.web-pricing-section .web-pricing-content li .fa-check {
	float:right;
	margin-top: 13px;
	color: #3a5653;
	

}
.web-pricing-section .web-heading-2 h2::after {
    content: '';
    display: block;
    width: 80px;
    border: 2px solid #DC3545;
    margin: 20px auto;
    margin-top: 10px;
}


.web-review-section {
	padding: 100px 0;
	background: url(images/img-customer-section.png) no-repeat;
	background-size: contain;
}

.web-review-section .web-review-content{
	float: right;
	text-align: right;
}

.web-review-section .web-review-content p {
	margin: 0 0 30px;
	font-family: 'welearn';
	font-size: 1.5rem;
	font-style: italic;
	color: #818181
}
.web-review-section .web-review-content .name {
	display: block;
	font-family: 'welearn';
	font-weight: 700;
	font-size: 1.15rem
}
.web-review-section .carousel-control {
	position: absolute;
	bottom: 17%;
    left: 95%;
}
.web-review-section .carousel-control .carousel-control-prev,
.web-review-section .carousel-control .carousel-control-next {
	width: 45px;
	height: 45px;
	display: inline-block;
	margin: 3px;
	line-height: 50px;
	background: #3a5653;
	color: #fff;
	opacity: 1;
	border-radius: 4px;
}
.web-review-section .carousel-control .carousel-control-prev {
	left: -120px;
}

.web-strategy-section {
	width: 100%;
	display: inline-block;
	padding: 100px 0;
	background: #3a5653;
	color: #fff;
	font-family: 'welearn';
}
.web-strategy-section h2,
.web-strategy-section p {
	color: #fff;
	font-family:'welearn'; 
}
.web-strategy-section a {
	padding: 0.75rem 1.5rem;
	font-family: 'welearn'
}

.blog-section {
	padding: 80px 0;
  }

  .blog-section h2:after{
	content: '';
  display: block;
  width: 80px;
  border: 2px solid #DC3545;
  margin: 20px auto;
  margin-top: 10px;
}
  
  .carousel-item {
	padding: 20px;
  }
  
  .blog-card {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
  
  .blog-card img {
	width: 100%;
	height: 280px;
	object-fit: cover;
  }
  
  .blog-card-body {
	padding: 20px;
  }
  
  .blog-card-body h3 {
	color: #232323;
  }



  
  .blog-card-body p {
	color: #818181;
  }
  
  .blog-card-body a:hover {
    background-color: #fff;
    color: #dc3545;
    border: 2px solid #dc3545;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
  }
  

  


.web-footer-section {
	padding: 100px 0;
	/* background: #f8f9fa url(images/img-footer-section.png) no-repeat; */
	background-size: contain;
    background: #f4f1ec;
}
.web-footer-section strong {
	display: block;
	margin: 15px 0;
	font-family: 'Rubik';
	font-size: 1.25rem;
	font-weight: 500;
	text-transform: uppercase;
}
.web-footer-section .web-gallery-section ul li {
	width: 33.33%;
	float: left;
	padding: 5px 10px 5px 0;
	list-style: none;
}
.web-footer-section .web-gallery-section ul li img {
	width: 100%;
	height: 75px;
	border-radius: 4px;
	object-fit: cover;
}
.web-footer-section .web-menu-section li {
	position: relative;
	list-style: none;
}
.web-footer-section .web-menu-section li a {
	display: block;
	padding: 5px 0;
	color: #3f3f3f;
	font-size: 1.2rem;
	text-decoration: none;
}

.web-footer-section .web-menu-section li a:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #dc3545;
    left: 0;
    bottom: 0;
    transition: width 0.4s ease;
}




.web-footer-section .web-menu-section li.active a,
.web-footer-section .web-menu-section li a:hover {
    color: #dc3545;
}

.web-footer-section .web-menu-section li a:hover::after {
    width: 40%;
}


.web-footer-section form {
	width: 350px;
	position: relative;
	border-radius: 5px;
	overflow: hidden;
}
.web-footer-section form input {
	width: 100%;
	height: 45px;
	padding: 0 60px 0 15px;
	background: #3a5653;
	color: #fff;
	border: 0;
}
.web-footer-section form input::placeholder {
	color: #ffd5e1
}
.web-footer-section form button {
	width: 45px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: #fff;
	color: #3a5653;
	border: 0;
}
.web-footer-section .web-social-section {
	margin: 15px 0 0;
}
.web-footer-section .web-social-section ul li {
	display: inline-block;
	margin: 5px;
	font-size: 1.75rem;
	list-style: none;
}
.web-footer-section .web-social-section ul li:first-child a {
	color: #3b5998
}
.web-footer-section .web-social-section ul li:nth-child(2) a {
	color: #1da1f2
}
.web-footer-section .web-social-section ul li:nth-child(3) a {
	color: #34a853
}
.web-footer-section .web-social-section ul li:nth-child(4) a {
	color: #fd1d1d
}
.web-footer-section .web-social-section ul li:nth-child(5) a {
	color: #0088cc
}




.single{
	margin-top: 15rem !important;
}
.article-blog {
    width: 100%;
    display: inline-block;
    margin: 0 0 50px;
    padding: 30px;
    background: #fff;
    border-radius: 4px;
}
.article-blog h1 {
    display: inline-block;
    margin: 0 0 20px;
    font-size: 25px;
    color: #292b2c
}
.article-blog .article-info {
    float: left;
    padding: 2px 0 0;
}
.article-blog ul li {
    display: inline-block;
}
.article-blog ul li i {
    color: #2ecc71
}
.article-blog .article-thumb {
    margin: 0 0 15px;
    position: relative;
}
.article-blog .article-thumb figure {
    position: relative;
}
.article-blog .article-thumb img {
    border-radius: 4px;
    display: block;
	width: 65%;
    
}
.article-blog .article-thumb .blog-date {
    width: 70px;
    height: 70px;
    line-height: 25px;
    padding: 12px 5px;
    position: absolute;
    bottom: 15px;
    right: 75px;
    font-size: 2rem;
    background: #2ecc71;
    color: #fff;
    outline: 1px dashed #fff;
    outline-offset: -3px;
    text-align: center;
    box-shadow: 0 2px 20px 0 rgba(144, 144, 144, 0.2);
    -webkit-box-shadow: 0 2px 20px 0 rgba(144, 144, 144, 0.2);
    -moz-box-shadow: 0 2px 20px 0 rgba(144, 144, 144, 0.2);
    -o-box-shadow: 0 2px 20px 0 rgba(144, 144, 144, 0.2);
}
.article-blog .article-thumb .blog-date .month {
    font-size: 15px;
    line-height: 24px;
    display: block;
}



.page-header {
	margin: 0 0 50px;
	padding: 100px 0;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}
.page-header .page-title {
	font-size: 45px;
	color: #fff;
}
.page-section h2 {
	padding: 0 0 15px;
	position: relative;
}
.page-section h2:after {
	content: "";
	width: 45px;
	height: 2px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffd200;
}
.page-section .about-section h2:after {
	right: 0;
	left: auto;
}
.page-section .about-section {
	padding: 0 0 50px;
}
.page-section .about-section .about-section-content {
	padding: 0 0 0 30px;
}
.page-section .video-section {
	overflow: hidden;
	border-radius: 4px;
}
.page-section .team-section {
	padding: 50px 0 0;
}
.page-section .company-section {
	position: relative;
	background: #f9f9f9;
}
.page-section .company-section:before {
	content: "";
	width: 15px;
	position: absolute;
	margin: 0 auto;
	top: 0;
	right: 0;
	left: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #fff;
}
.page-section .company-section:after {
	content: "";
	width: 15px;
	position: absolute;
	margin: 0 auto;
	bottom: 0;
	right: 0;
	left: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid #fff;
}
.page-section .team-section .team-content {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}
.page-section .team-section .team-content .team-info {
	width: 90%;
	height: 90%;
	padding: 90px 0;
	position: absolute;
	top: 5%;
	left: 5%;
	-webkit-transform: scale(0.9);
	transform: scale(1.15);
	background-color: rgba(255, 210, 0, 0.8);
	opacity: 0;
	text-align: center;
	border-radius: 4px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.page-section .team-section .team-content:hover .team-info {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.page-section .team-section .team-content .team-info h5 {
	margin: 5px 0;
}



.about_us{
	margin-top: 10rem;
}

.map{
	margin-top: 10rem;
}


.scroll-tracker {
	position: fixed;
	inset: 0 0 auto;
	height: 0.5rem;
	background-color: rgb(0, 149, 255) !important;
	transform-origin: left !important;
}


/* service page  */
.service-section {
	text-align: center;
	padding: 50px 0;
}
.service-title {
	font-size: 32px;
	font-weight: bold;
}
.service-description {
	font-size: 14px;
	color: #666;
}
.book-now {
	margin: 20px 0;
	background-color: black;
	color: white;
	border: none;
	padding: 10px 20px;
}
.service-list {
	margin-top: 30px;
}
.service-item {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}
/* end */


/* hero section */
.hero-section {
    position: relative;
    width: 100%;
    height: 50vh;
    background: url('https://coiffure.vamtam.com/wp-content/uploads/2023/10/GettyImages-527880492.jpg') 
        no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* ✅ center text inside */
    overflow: hidden;
}

/* Black overlay */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% black overlay */
    z-index: 1;
}


.hero-section a:hover {
    background-color: #fff;
    color: #dc3545;
    border: 2px solid #dc3545;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Text Content */
.text-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 20px;
    border-radius: 8px;
    color: white;
}

/* Keep your original text size */
.text-content p.summary_resposive {
    font-size: inherit; /* ✅ do not change */
    font-weight: inherit; /* ✅ keep original */
    margin-bottom: 20px;
    color: white;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.text-content p{
	text-align: center;
}

/* Style Bootstrap btn-danger */
.btn-danger {
    background-color: #DC3545;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    transition: background-color 0.4s ease, transform 0.4s ease;
}

.btn-danger:hover {
    background-color: #bb2d3b;
    transform: scale(1.05);
}


/* end */






.expert h2 {
    text-align: center;
    position: relative; /* 🔥 Important for absolute ::after */
    display: block; /* 🔥 Important to center underline */
    margin: 0 auto 20px auto;
}
.expert h3 {
    text-align: center;
    position: relative; /* 🔥 Important for absolute ::after */
    display: block; /* 🔥 Important to center underline */
    margin: 0 auto 20px auto;
}

.expert h2::after {
    content: '';
    display: block;
    width: 80px;
    border: 2px solid #DC3545;
    margin: 10px auto 0 auto; /* 🔥 Center the red line */
}


.team-carousel-container {
	position: relative;
	width: 90%;
	margin: auto;
	overflow: hidden;
  }
  .team-carousel {
	display: flex;
	transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .team-carousel-item {
	min-width: 25%;
	box-sizing: border-box;
	padding: 20px;
	text-align: center;
	opacity: 0.8;
	transition: opacity 0.5s ease, transform 0.5s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
  }
  .team-carousel-item img {
	width: 100%;
	border-radius: 50%;
	max-width: 150px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	transition: transform 0.3s ease;
	margin-bottom: 15px;
  }
  .team-carousel-item p {
	margin-top: 0;
	font-weight: 600;
	color: #333;
	font-size: 1rem;
  }
  .team-carousel-item:hover {
	opacity: 1;
	transform: scale(1.05);
  }
  .team-carousel-item:hover img {
	transform: scale(1.1);
  }
  .team-carousel-buttons {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	padding: 0 20px;
  }
  .team-carousel-buttons button {
	background-color: #dc3545;
	color: #fff;
	border: none;
	padding: 12px 18px;
	cursor: pointer;
	border-radius: 50%;
	font-size: 1.2rem;
	opacity: 0.8;
	transition: background-color 0.3s, opacity 0.3s;
  }
  .team-carousel-buttons button:hover {
	background-color: #bb2d3b;
	opacity: 1;
  }
  .employees {
	margin-top: 40px;
	font-size: 1.8rem;
	font-weight: bold;
	color: #2c2c2c;
  }






  

@media only screen and (max-width: 576px){

    .navbar-toggler:not(:disabled):not(.disabled){
        background-color: #dc3545  !important;
        margin: 0 auto !important;
        display: block;
    }
    .navbar-dark .navbar-toggler { 
        color: #dc35455c;
    }


	.gallert_responsive{
		margin-bottom: 2rem;
	}
	
	h1.summary_resposive{
		text-align: center;
	}
	h2.summary_resposive{
		text-align: center;
	}

	h4.summary_resposive{
		text-align: center;
	}
	p.summary_resposive{
		text-align: center;
	}

	a.butom_responsive{
		margin: 0 auto;
		display: table;
		text-align: center;
	}
	label.butom_responsive{
		margin: 0 auto;
		display: table;
		text-align: center;
	}
	button.butom_responsive{
		margin: 0 auto;
		display: table;
		text-align: center;
		margin-bottom: 3rem;	
	}

	li.resposive_price{
		margin-bottom: 2rem
	}
    .navbar-collapse {
        display: none;
        width: 100%;
        background: #f8f6f1;
        position: absolute;
        top: 60px; /* Adjust based on header height */
        left: 0;
        z-index: 999;
        text-align: center;
        padding: 10px 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Show menu when expanded */
    .navbar-collapse.show {
        display: block;
    }

    /* Ensure menu items stack vertically */
    .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .navbar-nav li {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

    .navbar-nav li:last-child {
        border-bottom: none;
    }

    .navbar-nav a {
        display: block;
        width: 100%;
        padding: 10px 0;
        font-size: 1.2rem;
        text-decoration: none;
        color: #333;
    }

    /* Style the menu button */
    .navbar-toggler {
		border: none;
		background: transparent;
		outline: none;
		padding: 10px;
		position: absolute;
		left: 50%;
		top: 15px;
		transform: translateX(-50%);
		margin-top: 2.5rem;
    }

    .navbar-toggler-icon {
        display: none;
      }
      
      /* Custom hamburger wrapper */
      .custom-toggler-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #dc3545; /* red background */
        /* padding: 10px 20px; */
        border-radius: .5rem;
        transition: 0.3s;
      }
      
      /* Custom hamburger bars */
      .custom-toggler-icon .bar {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 3px 0;
        transition: 0.3s;
      }
      



    .menu-item {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .navbar-nav {
        background-color: white;
        padding: 10px;
        border-radius: 10px;
    }
    .web-header-section{
        box-shadow: 0 5px 20px rgba(0,0,0,.12);
        margin-bottom: 15rem;
		background: #E8E3DD !important;
    }
    .navbar{
        display:block;
        
    }
    .navbar-brand{
        margin-top: 5rem;
        margin: 4rem auto !important;
        text-align: center !important;
        display: block !important;
        align-items: center !important;
    }

    .navbar-nav li a::after {
        content: '';
        width: 0px;
        height: 0px;
        background: #e8e1d638;
        display: block;
        margin: 6px auto;
        transition: 0.3s;
    }
    .navbar-nav li a:hover::after {
        width: 20px;
        height: 2px;
        background: #dc3545; /* Red line under on hover */
    }
    

    .web-header-section ul{
        padding: 0 !important; 
    }
    
    .icon-pad{
        padding: 0 !important;
    }
    
    
	.web-header-section a:hover{
		
	}

    .web-header-section ul li {
        float: none !important;
        list-style: none;
        padding: 0 25px;
        display: block;
        text-align: center !important;
    }
    .web-header-section ul li a{
        display:block !important;
        margin: 2rem auto !important;
        align-items: center !important;
        font-size: 1.2rem;
        text-align: center !important;

    }

    a .insiwhite{
        background: white;
        color: #dc3545;
    }

    .navbar-toggler{
        width: 30%;
    margin-top: 4rem;
    }

    .web-heading h1{
        text-align: center !important;
        margin: 0 auto !important;
    }

    .web-menu-color{
        background-color: #212529 !important;
    }
    .respos{
        text-align: center !important;
        margin: 0 auto !important;
        display: block;
        }
    .contact h4{
        margin-top: 5rem;
        text-align: center !important;
    }
    .contact h5{
        margin-top: 1rem;
        text-align: center !important;
    }
    .respos-bottoms{
        margin: 5 auto !important;
        text-align: center !important;
        width: 100% !important;
    }
    .web-footer-section .web-menu-section ul{
        padding: 0 !important;
    }

    .web-heading h3{
        text-align: center !important;
        margin: 0 auto;
    }
    .web-heading h2{
        text-align: center !important;
        margin: 0 auto;
    }


    .web-service-section .web-heading h2::after{
    content: '';
    display: block;
    width: 80px;
    border: 2px solid #DC3545;
    margin: 0 auto;
    margin-top: 10px;
}
    .web-heading p{
        text-align: center !important;
        margin: 0 auto;
    }
    .summary a{
        margin: 0 auto;
        display: block;
    }
    .hero-section a {
        margin: 0 auto;
        display: block;   
    }

    .web-service-section .web-heading a{
        margin-bottom: 5rem !important;
        text-align: center;
        margin: 0 auto;
        display: inline-block;
        width: 100%;
    }

    .web-heading-2 p{
        margin: 0 auto;
        text-align: center !important;
        margin-bottom: 5rem !important;
    }

    .web-blog-section .web-blog-item .web-blog-content a.btn.btn-primary{
        width: 100%;
        margin: 0 auto;
        text-align: center !important;
        margin-top: 3rem !important;
    }

    .web-steps-section .web-steps-line{
        background: white !important;
    }

    
    .web-footer-section .web-menu-section li a{
        text-align: center;
        margin: 0 auto;
        padding: 10px 0 !important;
        font-size: 1.2rem !important;

    }
    .web-footer-section form{
        margin: 4rem auto;
    text-align: center;
    display: block;
    }

    .web-footer-section .web-social-section{
        margin: 4rem auto;
    text-align: center;
    display: block;
    }
    .web-footer-section form button {
        border: 2px solid #3a5653 !important;
    }
    .web-footer-section .web-menu-section li a:hover::after {
        width: 100%;
    }

    .web-footer-section ul li{
        text-align: center;
    }

    .footmargintop{
        margin-bottom: 5rem;
    }
}


@media only screen and (min-width: 768px) and (max-width: 991px) {


    .web-header-section {
        background: #000 !important;
        /* position: fixed; */
        width: 100%;
        top: 0;
        z-index: 9999;
      }
    
      /* Fix navbar collapse appearance */
      #collapsibleNavbar {
        background: #000 !important;
        padding: 0 !important;
        margin-top: 10px;
      }
    
      /* Make sure the nav links look clean */
      .navbar-nav .nav-link {
        color: white !important;
        padding: 12px 15px;
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }
    
      /* Prevent flashing open menu */
      .navbar-collapse.collapse:not(.show) {
        display: none !important;
      }
    
      .navbar-collapse.collapse.show {
        display: block !important;
      }
    
      /* Hide desktop book button in tablet mode */
      .d-none.d-md-block {
        display: none !important;
      }
    
    

      
    .navbar-toggler:not(:disabled):not(.disabled){
        background-color: #dc3545  !important;
        margin: 0 auto !important;
        display: block;
    }
    .navbar-dark .navbar-toggler { 
        color: #dc35455c;
    }


	.gallert_responsive{
		margin-bottom: 2rem;
	}
	
	h1.summary_resposive{
		text-align: center;
	}
	h2.summary_resposive{
		text-align: center;
	}

	h4.summary_resposive{
		text-align: center;
	}
	p.summary_resposive{
		text-align: center;
	}

	a.butom_responsive{
		margin: 0 auto;
		display: table;
		text-align: center;
	}
	label.butom_responsive{
		margin: 0 auto;
		display: table;
		text-align: center;
	}
	button.butom_responsive{
		margin: 0 auto;
		display: table;
		text-align: center;
		margin-bottom: 3rem;	
	}

	li.resposive_price{
		margin-bottom: 2rem
	}
    .navbar-collapse {
        display: none;
        width: 100%;
        background: #f8f6f1;
        position: absolute;
        top: 60px; /* Adjust based on header height */
        left: 0;
        z-index: 999;
        text-align: center;
        padding: 10px 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Show menu when expanded */
    .navbar-collapse.show {
        display: block;
    }

    /* Ensure menu items stack vertically */
    .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .navbar-nav li {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

    .navbar-nav li:last-child {
        border-bottom: none;
    }

    .navbar-nav a {
        display: block;
        width: 100%;
        padding: 10px 0;
        font-size: 1.2rem;
        text-decoration: none;
        color: #333;
    }

    /* Style the menu button */
    .navbar-toggler {
		border: none;
		background: transparent;
		outline: none;
		padding: 10px;
		position: absolute;
		left: 50%;
		top: 15px;
		transform: translateX(-50%);
		margin-top: 2.5rem;
    }

    .navbar-toggler-icon {
        display: none;
      }
      
      /* Custom hamburger wrapper */
      .custom-toggler-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #dc3545; /* red background */
        /* padding: 10px 20px; */
        border-radius: .5rem;
        transition: 0.3s;
      }
      
      /* Custom hamburger bars */
      .custom-toggler-icon .bar {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 3px 0;
        transition: 0.3s;
      }
      



    .menu-item {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .navbar-nav {
        background-color: white;
        padding: 10px;
        border-radius: 10px;
    }
    .web-header-section{
        box-shadow: 0 5px 20px rgba(0,0,0,.12);
        margin-bottom: 15rem;
		background: #E8E3DD !important;
    }
    .navbar{
        display:block;
        
    }
    .navbar-brand{
        margin-top: 5rem;
        margin: 4rem auto !important;
        text-align: center !important;
        display: block !important;
        align-items: center !important;
    }

    .navbar-nav li a::after {
        content: '';
        width: 0px;
        height: 0px;
        background: #e8e1d638;
        display: block;
        margin: 6px auto;
        transition: 0.3s;
    }
    .navbar-nav li a:hover::after {
        width: 20px;
        height: 2px;
        background: #dc3545; /* Red line under on hover */
    }
    

    .web-header-section ul{
        padding: 0 !important; 
    }
    
    .icon-pad{
        padding: 0 !important;
    }
    
    
	.web-header-section a:hover{
		
	}

    .web-header-section ul li {
        float: none !important;
        list-style: none;
        padding: 0 25px;
        display: block;
        text-align: center !important;
    }
    .web-header-section ul li a{
        display:block !important;
        margin: 2rem auto !important;
        align-items: center !important;
        font-size: 1rem;
        text-align: center !important;

    }

    a .insiwhite{
        background: white;
        color: #dc3545;
    }

    .navbar-toggler{
        width: 30%;
    margin-top: 4rem;
    }

    .web-heading h1{
        text-align: center !important;
        margin: 0 auto !important;
    }

    .web-menu-color{
        background-color: #212529 !important;
    }
    .respos{
        text-align: center !important;
        margin: 0 auto !important;
        display: block;
        }
    .contact h4{
        margin-top: 5rem;
        text-align: center !important;
    }
    .contact h5{
        margin-top: 1rem;
        text-align: center !important;
    }

    /* .navbar-expand-md .navbar-collapse{
        display: none !important;
    } */

    .contact h4{
        margin-top: 5rem;
        text-align: center !important;
    }
    .contact h5{
        margin-top: 1rem;
        text-align: center !important;
    }
    .respos-bottoms{
        margin: 5 auto !important;
        text-align: center !important;
        width: 100% !important;
    }
    .web-footer-section .web-menu-section ul{
        padding: 0 !important;
    }

    .web-heading h3{
        text-align: center !important;
        margin: 0 auto;
    }
    .web-heading h2{
        text-align: center !important;
        margin: 0 auto;
    }


    .web-service-section .web-heading h2::after{
    content: '';
    display: block;
    width: 80px;
    border: 2px solid #DC3545;
    margin: 0 auto;
    margin-top: 10px;
}
    .web-heading p{
        text-align: center !important;
        margin: 0 auto;
    }
    .summary a{
        margin: 0 auto;
        display: block;
    }
    .hero-section a {
        margin: 0 auto;
        display: block;   
    }

    .web-footer-section .web-menu-section li a{
        text-align: center;
        margin: 0 auto;
        padding: 10px 0 !important;
        font-size: 1.2rem !important;

    }
    .web-footer-section form{
        margin: 4rem auto;
    text-align: center;
    display: block;
    }

    .web-footer-section .web-social-section{
        margin: 4rem auto;
    text-align: center;
    display: block;
    }
    .web-footer-section form button {
        border: 2px solid #3a5653 !important;
    }
    .web-footer-section .web-menu-section li a:hover::after {
        width: 100%;
    }

    .web-footer-section ul li{
        text-align: center;
    }

    .footmargintop{
        margin-bottom: 5rem;
    }
  }