/*
Theme Name: K Hair Lounge

*/

@import url('https://fonts.cdnfonts.com/css/glacial-indifference-2');

@font-face {
	font-family: 'seasons';
	src: url('fonts/fontspring-demo-theseasons-reg.woff2') format('woff2'),
		 url('fonts/fontspring-demo-theseasons-reg.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'beautifully';
	src: url('fonts/fonnts.com-bdscript-regular-1.woff2') format('woff2'),
		 url('fonts/fonnts.com-bdscript-regular-1.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

*,
*:before,
*:after {
  box-sizing: border-box;
}

*:focus {
	outline:none !important;
	
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;

}

body {
	margin:0;
	padding:0;
	font-family: 'Glacial Indifference', sans-serif;
	font-size: 18px;
	color:#000000;
	background-color:#EBDBCC;
	position: relative;
	width: 100%;
	overflow-x: hidden
}

img {
	max-width: 100%;
	height: auto
}

ul {
	padding:0;
	margin:0;
	list-style: none
}

a, a:hover {
	text-decoration: none;
	transition: color 0.3s ease-in-out
}

a {
	color: #000000;
}

a:hover {
	color:#DDAF87;
}

figure {
	margin:0;
	padding:0
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
	opacity: 0;
	transform: translateY(20px); /* Starts slightly lower */
  }
  to {
	opacity: 1;
	transform: translateY(0); /* Ends at original position */
  }
}


#header {
	position: relative;
	width: 100%;
	height: auto;
	background-color:#000000;
}

.logo {
	margin:0 auto;
	width:250px;
}

#main-menu {
	width: 100%;
	background-color: #000000;
	text-align: center;
}

	#main-menu ul li {
		display: inline-block;
		text-transform: uppercase;
		font-size: 20px;
		letter-spacing: 1px !important;
		font-family: 'seasons' !important;
		padding:10px 20px;
		transition:0.3s ease-in-out
	}
	
	#main-menu ul li:hover {
		background-color:#000000;
		color:#ddaf87
	}
	
		#main-menu ul li:hover > a {
			color:#ddaf87
		}
		
.mega-menu-item .button {
	background:none;
	margin:0 auto;
	font-family: 'Glacial Indifference', sans-serif;
	padding:0;
	border-radius: 0;
	border:0;
	text-transform: none;
	font-size: 20px
}

.mega-indicator {
	margin:0 !important
}

.inner {
	position: relative;
	width:90%;
	max-width:1275px;
	margin:0 auto
}
	
.title h2 {
	font-family: 'seasons';
	font-size: 45px;
	font-weight: 100 !important;
	text-transform: uppercase;
	margin:0;
	padding:0;
	color:#ddaf87;
}

.title h3 {
	font-family: 'beautifully';
	font-size: 85px;
	margin:0;
	padding:0;
	font-weight: 100 !important;
	margin-top:-60px;
	margin-bottom: 20px
}

.button {
	background-color: #ddaf87;
	border:3px solid #ddaf87;
	border-radius: 100px;
	color:#f7f3ef;
	padding:10px 30px;
	display: table;
	text-transform: uppercase;
	transition: 0.3s ease-in-out;
	cursor: pointer;
}

	.button:hover {
		background-color:none;
	}

#quote-section {
	position: relative;
	width: 100%;
	height:900px;
	background:url('images/quotebg.png');
	background-size: cover
}

	#quote-section .inner {
		position: relative;
		padding-top: 60px;
		margin:0 auto;
	}
		
		#quote-section .button.scroll {
			position: absolute;
			border:3px solid #ffffff;
			background:none;
			color:#ffffff;
			top:450px;
			left:50%;
			transform: translate(-50%, -200px);
			padding:10px 50px;
			font-size: 25px
		}
	
		#quote-section .inner .quotetext {
			position: relative;
			margin:0 auto;
			text-align: center;
			max-width: 1200px;
			width:100%
		}
		
			#quote-section .inner .quotetext img {
				width: 45%;
			}
			
		.quotetext1, .quotetext2, .quotetext3 {
			opacity: 0
		}
		
		.quotetext1-animation {
			animation: fadeIn 1s ease-in forwards;
			animation-delay: 0.3s
		}
		
		.quotetext2-animation {
			animation: fadeIn 1s ease-in forwards;
			animation-delay: 0.9s
		}
		
		.quotetext3-animation {
			animation: fadeIn 1s ease-in forwards;
			animation-delay: 1.5s
		}
		
#info-section {
	position: relative;
	text-align: center;
	margin-top: -350px;
	font-size: 0;
	overflow:hidden
}
	
	#info-section .block {
		background-color:#1e1e1e;
		color: #f7f3ef;
		width:49%;
		border-radius: 80px 80px 0 0;
		display: inline-block;
		vertical-align: top;
		padding: 25px 0;
		font-size: 18px;
		padding-bottom: 9999px;
		  margin-bottom: -9999px;
	}
	
		#info-section .block:first-child {
			margin-right: 2%;
		}
		
		#info-section .block ul li {
			margin-bottom: 10px
		}
		
		#info-section .block ul li a {
			color:#f7f3ef;
			transition:color 0.5s ease-in-out
		}
		
			#info-section .block ul li a:hover {
				color:#DDAF87;
			}
	
		#info-section .block .left {
			display: inline-block;
			width: calc(50% - 15px);
			text-align: right;
			border-right: 1px solid #f7f3ef;
			padding-right: 15px;
		}
	
		#info-section .block .right {
			display: inline-block;
			width: calc(50% - 15px);
			text-align: left;
			padding-left: 15px;
		}
		
		#info-section .block .icon {
			display: inline-block;
			vertical-align: middle;
			position: relative;
			width:30px;
			margin-right: 10px;
		}

	
#pricing-section {
	position: relative;
	text-align: center;
	background-color: #000000;
}

	#pricing-section .inner {
		background-color:#1e1e1e;
		padding-top: 30px;
		padding-bottom:30px
	}
	
	#pricing-section .title h2 {
		font-size: 80px;
		margin-bottom: -90px
	}
	
	#pricing-section .title h3 {
		color:#f7f3ef;
		font-size: 120px;
		margin-bottom:10px
	}
	
	#pricing-section .menu-item {
		display: inline-block;
		border:3px solid #ddaf87;
		border-radius: 50px;
		font-size: 24px;
		padding:10px 40px;
		color: #ddaf87;
		text-transform: uppercase;
		margin:0 1%;
		transition:0.3s ease-in-out;
		cursor: pointer
	}
		
		#pricing-section .menu-item:hover {
			background-color: #ddaf87;
			color:#f7f3ef !important
		}
	
#booking-section {
	position: relative;
	text-align: center;
	background-color: #000000;
}

	#booking-section .inner {
		background-image:url('images/bookingbg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-top: 50px;
		padding-bottom: 200px
	}
	
	#booking-section .title h2 {
		font-size: 110px;
		margin-bottom: -90px
	}
	
	#booking-section .title h3 {
		color:#f7f3ef;
		font-size: 120px;
		margin-bottom:10px
	}
	
	#booking-section .button {
		font-size:30px;
		margin:0 auto;
		padding:10px 100px;
		color:#f7f3ef !important
	}
	
		#booking-section .button:hover {
			background:none !important;
			color: #DDAF87 !important
		}
	
.policy-section {
	background-color:#ddaf87;
}

.service-section.womens, .service-section.kids {
margin:0 auto -32px!important;
display: block !important;
position: relative;
color:#f7f3ef;
background: #ddaf87;
}

	.service-section.womens .title h2,
	.service-section.kids .title h2,
	.service-section.womens .title h3,
	.service-section.kids .title h3 {
		color:#f7f3ef;
	}
	
	.service-section.womens .title h2,
	.service-section.kids .title h2 {
		margin-top: 50px
	}
	
	.service-section.womens .title h3:after,
	.service-section.kids .title h3:after {
		background-color:#f7f3ef;
	}
	
	.service-section p {
		width:75%;
		margin:0 auto 20px;
	}
	
	.service-section.womens .wp-element-button,
	.service-section.kids .wp-element-button {
		background-color:#f7f3ef;
		border: 3px solid #f7f3ef;
		color:#ddaf87;
		transition:all 0.3s ease-in-out
	}
	
		.service-section.womens .wp-element-button:hover,
		.service-section.kids .wp-element-button:hover {
			background-color:#DDAF87 !important;
			border: 3px solid #f7f3ef !important;
			color:#f7f3ef !important;	
		}

.service-section.mens, .service-section.extensions {
margin:0 auto -32px !important;
display: block !important;
position: relative;
color:#DDAF87;
background:#f7f3ef
}

.service-section.womens .tablepress>:where(tbody)>tr>*,
.service-section.kids .tablepress>:where(tbody)>tr>* {
	color: #F7F3EF !important
}

.service-section.mens .tablepress>:where(tbody)>tr>*,
.service-section.extensions .tablepress>:where(tbody)>tr>* {
	color:#DDAF87 !important
}

.service-section table {
	width:80% !important;
}

.service-section .tablepress caption {
	display: none !important
}

.service-section .column-1 {
	text-align: left !important
}

.image-fill {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.service-section.womens .image-fill {
  background-image: url("https://khairlounge.com/wp-content/uploads/2026/04/womens-1-1.png");
}

.service-section.mens .image-fill {
  background-image: url("https://khairlounge.com/wp-content/uploads/2026/04/mens-1-1.png");
}

.service-section.kids .image-fill {
  background-image: url("https://khairlounge.com/wp-content/uploads/2026/04/kids-1-1.png");
}

.service-section.extensions .image-fill {
  background-image: url("https://khairlounge.com/wp-content/uploads/2026/04/extensions-1-1.png");
}

:where(.wp-block-columns.is-layout-flex), :where(.wp-block-columns.is-layout-flex), :where(.is-layout-flex) {
	gap: 0 !important
}

	.service-section .title h2 {
		font-family: 'seasons';
		font-size: 75px;
		font-weight: 100 !important;
		text-transform: uppercase;
		margin:20px auto 0;
		padding:0;
		color:#DDAF87;
		text-align: center
	}
	
	.service-section .title h3 {
		font-family: 'beautifully';
		font-size: 95px;
		margin:0;
		padding:0;
		font-weight: 100 !important;
		margin-top:-70px;
		margin-bottom: -10px;
		text-align: center;
		color:#DDAF87;
		position: relative
	}
	
		.service-section .title h3:after {
			content:'';
			position: absolute;
			width:10%;
			height:1.5px;
			background:#ddaf87;
			left: 45%;
			bottom:0;
		}
	
	.service-section tr td:first-child {
		text-align: right;
		font-size: 30px !important;
		font-family: 'seasons';
	}
	
	.service-section table, .service-section tbody, .service-section tr, .service-section td {
		border:none !important;
	}
	
	.service-section .wp-block-button {
		margin:25px auto !important
	}
	
	.service-section .wp-element-button {
		background-color:#ddaf87;
		border: 3px solid #ddaf87;
		color:#f7f3ef;
		margin:0 auto !important;
		font-size:30px;
		padding:20px 0;
		transition:all 0.3s ease-in-out
	}
	
	.service-section .wp-element-button:hover {
		border:3px solid #ddaf87!important;
		background-color:#F8F3EF!important;
		color:#ddaf87 !important
	}
	
.products-section.kmurph, .products-section.livingproof, .products-section.icon {
	margin-top: -35px !important
}

.products-section .image-fill {
	background-color: #ffffff!important;
	background-size: contain !important;
}	

.products-section.davines .image-fill {
  background-image: url("https://khairlounge.com/wp-content/uploads/2026/04/dav-logo.png");
}

.products-section.kmurph .image-fill {
  background-image: url("https://khairlounge.com/wp-content/uploads/2026/04/km-logo.png");
}

.products-section.livingproof .image-fill {
  background-image: url("https://khairlounge.com/wp-content/uploads/2026/04/lp-logo.png");
}

.products-section.icon .image-fill {
  background-image: url("https://khairlounge.com/wp-content/uploads/2026/04/icon-logo.png");
}

.products-section.davines.mobile, .products-section.kmurph.mobile, .products-section.livingproof.mobile, .products-section.icon.mobile {
	display: none;
}

#booking-page .content {
	width:100%;
	position: relative;
	margin:0 auto;
	background: #000000;
	padding:50px 200px 50px;
	color:#f7f3ef
}

#booking-page .title {
	text-align: center
}

#booking-page .title h1 {
	font-family: 'seasons';
	font-size: 110px;
	font-weight: 100 !important;
	text-transform: uppercase;
	margin:0;
	padding:0;
	color:#ddaf87;
}

#booking-page .title h2 {
	font-family: 'beautifully';
	font-size: 120px;
	margin:0;
	padding:0;
	font-weight: 100 !important;
	margin-top:-90px;
	margin-bottom: 20px;
	text-transform: none;
	color:#f7f3ef
}

#contact-page .content {
	width:100%;
	position: relative;
	margin:0 auto;
	background: #000000;
	padding:50px 200px 0;
	color:#f7f3ef
}

#contact-page .title {
	text-align: center
}

#contact-page .title h1 {
	font-family: 'seasons';
	font-size: 90px;
	font-weight: 100 !important;
	text-transform: uppercase;
	margin:0;
	padding:0;
	color:#ddaf87;
}

#contact-page .title h2 {
	font-family: 'beautifully';
	font-size: 120px;
	margin:0;
	padding:0;
	font-weight: 100 !important;
	margin-top:-90px;
	margin-bottom: 20px;
	text-transform: none;
	color:#f7f3ef
}

#contact-page p.banner, #booking-page p.banner, #reviews-page p.banner {
	font-family: 'seasons';
	background-color:#ddaf87;
	color:#000000;
	text-align: center;
	font-size: 20px;
	padding:15px 0;
	margin-bottom: 40px;
	letter-spacing: 1px;
	border-radius: 100px
}

	#contact-page p.banner span.button, #booking-page p.banner span.button, #reviews-page p.banner span.button {
		border:3px solid #000000;
		display: inline;
		padding:5px 15px;
		font-size: 20px;
		text-transform: none;
		color:#000000;
		margin-left: 10px;
		transition: all 0.3s ease-in-out
	}
	
		#contact-page p.banner span.button:hover, #booking-page p.banner span.button:hover, #reviews-page p.banner span.button:hover {
			border:3px solid #f7f3ef;
			color:#f7f3ef
		}
		
#reviews-page .content {
	width:100%;
	position: relative;
	margin:0 auto;
	background: #000000;
	padding:50px 200px 50px;
	color:#f7f3ef
}

#reviews-page .title {
	text-align: center
}

#reviews-page .title h1 {
	font-family: 'seasons';
	font-size: 110px;
	font-weight: 100 !important;
	text-transform: uppercase;
	margin:0;
	padding:0;
	color:#ddaf87;
}

#reviews-page .title h2 {
	font-family: 'beautifully';
	font-size: 120px;
	margin:0;
	padding:0;
	font-weight: 100 !important;
	margin-top:-90px;
	margin-bottom: 20px;
	text-transform: none;
	color:#f7f3ef
}

#reviews-page .wp-block-column {
	border:3px solid #ffffff;
	padding:20px;
	margin:0 5px 0
}

	
#footer {
	background-color: #000000;
	padding:100px 0;
	color:#f7f3ef;
	text-align: center
}

	#footer .block {
		display: inline-block;
		vertical-align: top;
		padding:0 2%;
		text-align: left
	}
	
	#footer h4 {
		color:#f7f3ef;
		text-transform: uppercase
	}
	
	#footer a {
		color:#f7f3ef;
		transition:color 0.5s ease-in-out
	}
	
		#footer a:hover {
			color:#DDAF87
		}
	
	#footer .logo {
		margin-top: 30px;
		width: 100%
	}
	
		#footer .logo img {
			max-width: 100%
		}
	
	#footer .contact {
		color:#f7f3ef
	}
	
		#footer .contact .icon {
			display: inline-block;
			vertical-align: middle;
			position: relative;
			width:30px;
			margin-right: 10px;
		}
	
	#footer .block.logo {
		width:16%
	}
	
	#footer .block.map {
		width:30%
	}
	
		#footer .block.map iframe {
			max-width: 100%;
			width: 100%
		}
	
	#footer .block.hours {
		width:25%
	}
	#footer .hours .left {
		display: inline-block;
		width: calc(50% - 5px);
		text-align: left;
		border-right: 1px solid #f7f3ef;
		padding-right: 5px;
		vertical-align: top
	}
	
	#footer .hours .right {
		display: inline-block;
		width: calc(50% - 5px);
		text-align: left;
		padding-left: 5px;
		vertical-align: top
	}