/* Hair Adda Custom Styles: moved from inline page styles */

/* ===== From services.php ===== */
@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Open+Sans:wght@400;500;600;700&family=Syne:wght@500;600;700&display=swap');

	.vs-pricing-wrapper.price-layout1 {
		--theme-color: #ad8858;
		--title-color: #222222;
		--body-color: #666666;
		--white-color: #ffffff;
		--menu-image-height: 420px;
		--title-font: 'Syne', sans-serif;
		--body-font: 'Open Sans', sans-serif;
		--subtitle-font: 'Handlee', cursive;
		--section-space: 120px;
		--section-space-mobile: 80px;
		--section-title-space: 50px;
		background-color: #f3f6f7;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		color: var(--body-color);
		font-family: var(--body-font);
		padding-top: var(--section-space);
		padding-bottom: var(--section-space);
		overflow: hidden;
	}

	.vs-pricing-wrapper.price-layout1 .title-area {
		text-align: center;
		margin-bottom: calc(var(--section-title-space) - 15px);
	}

	.vs-pricing-wrapper.price-layout1 .sec-icon {
		margin-bottom: 36px;
		line-height: 1;
	}

	.vs-pricing-wrapper.price-layout1 .sec-icon img {
		margin-top: -0.2em;
	}

	.vs-pricing-wrapper.price-layout1 .sub-title {
		font-size: 26px;
		line-height: 1;
		display: block;
		color: var(--theme-color);
		font-family: var(--subtitle-font);
		font-weight: 300;
		margin-bottom: 18px;
		text-transform: none;
	}

	.vs-pricing-wrapper.price-layout1 .sec-title {
		font-size: 50px;
		font-weight: 600;
		margin: -0.25em 0 13px 0;
		color: var(--title-color);
		font-family: var(--title-font);
		line-height: 1.2;
	}

	.vs-pricing-wrapper.price-layout1 .price-menu-tabs {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin: 0 0 35px 0;
		padding: 0;
		border: 0;
	}

	.vs-pricing-wrapper.price-layout1 .price-menu-tabs .nav-link {
		border: 1px solid #d6c2a3;
		background: #fff;
		color: var(--title-color);
		border-radius: 999px;
		padding: 11px 24px;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		font-family: var(--body-font);
	}

	.vs-pricing-wrapper.price-layout1 .price-menu-tabs .nav-link.active {
		background: var(--theme-color);
		color: var(--white-color);
		border-color: var(--theme-color);
	}

	.vs-pricing-wrapper.price-layout1 .price-menu-tabs .nav-link:hover {
		background: var(--title-color);
		color: var(--white-color);
		border-color: var(--title-color);
	}

	@media (min-width: 1500px) {
		.vs-pricing-wrapper.price-layout1 .gx-70 {
			--bs-gutter-x: 70px;
		}
	}

	.vs-pricing-wrapper.price-layout1 .slick-track>[class*=col] {
		flex-shrink: 0;
		width: 100%;
		max-width: 100%;
		padding-right: calc(var(--bs-gutter-x) / 2);
		padding-left: calc(var(--bs-gutter-x) / 2);
		margin-top: var(--bs-gutter-y);
	}

	.vs-pricing-wrapper.price-layout1 .price-list {
		width: 390px;
		max-width: 100%;
	}

	.vs-pricing-wrapper.price-layout1 .price-list ul {
		margin: 0 0 20px 0;
		padding: 0;
		list-style-type: none;
	}

	.vs-pricing-wrapper.price-layout1 .price-list li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		transition: all ease 0.4s;
	}

	.vs-pricing-wrapper.price-layout1 .price-list .border-middle {
		border: 1px dashed #bcbcbc;
		flex: 1 0 0%;
		width: 100%;
		height: 1px;
		background-color: var(--white-color);
		margin: 3px 20px 0 25px;
		opacity: 0.6;
	}

	.vs-pricing-wrapper.price-layout1 .price-list .price,
	.vs-pricing-wrapper.price-layout1 .price-list .package {
		margin: 0;
		font-weight: 500;
		font-family: var(--body-font);
		color: var(--body-color);
	}

		.vs-pricing-wrapper.price-layout1 .price-list-box {
			position: relative;
			--space-x: 70px;
			--space-y: 50px;
			min-height: var(--menu-image-height);
			overflow: hidden;
		}

		.vs-pricing-wrapper.price-layout1 .price-list-box .price-content {
			background-image: linear-gradient(90deg, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0.9) 100%);
			width: max-content;
			max-width: 100%;
			margin: 0 auto;
			height: auto;
			padding: var(--space-y) var(--space-x) 36px;
			box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.05);
			position: relative;
			z-index: 1;
			opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transition: all ease 0.6s;
		transform: scaleY(0.5);
		transform-origin: 0 0;
	}

			.vs-pricing-wrapper.price-layout1 .price-list-box .price-img {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: auto;
				height: var(--menu-image-height);
				transform: none;
				z-index: -1;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}

		.vs-pricing-wrapper.price-layout1 .price-plan-slide .slick-track {
			display: flex;
			align-items: flex-start;
		}

		.vs-pricing-wrapper.price-layout1 .price-plan-slide .slick-slide {
			height: auto;
		}

		.vs-pricing-wrapper.price-layout1 .price-plan-slide .slick-slide>div {
			height: auto;
		}

	.vs-pricing-wrapper.price-layout1 .price-list-box .price-title {
		margin-top: -0.27em;
		font-weight: 600;
		margin-bottom: 15px;
		font-size: 30px;
		opacity: 0;
		visibility: hidden;
		transition: all ease 0.4s;
		color: var(--title-color);
		font-family: var(--title-font);
	}

	.vs-pricing-wrapper.price-layout1 .price-list-box .price-list li {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-20px);
		transition: all ease 0.4s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-content {
		opacity: 1;
		visibility: visible;
		transform: scaleY(1);
		transition-delay: 0.2s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-title {
		opacity: 1;
		visibility: visible;
		transition-delay: 0.3s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(1) {
		transition-delay: 0.2s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(2) {
		transition-delay: 0.3s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(3) {
		transition-delay: 0.4s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(4) {
		transition-delay: 0.5s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(5) {
		transition-delay: 0.6s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(6) {
		transition-delay: 0.7s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(7) {
		transition-delay: 0.8s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(8) {
		transition-delay: 0.9s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(9) {
		transition-delay: 1s;
	}

	.vs-pricing-wrapper.price-layout1 .slick-active .price-list-box .price-list li:nth-of-type(10) {
		transition-delay: 1.1s;
	}

	.vs-pricing-wrapper.price-layout1 .price-plan-slide:not(.slick-initialized) .price-list-box .price-content,
	.vs-pricing-wrapper.price-layout1 .price-plan-slide:not(.slick-initialized) .price-list-box .price-title,
	.vs-pricing-wrapper.price-layout1 .price-plan-slide:not(.slick-initialized) .price-list-box .price-list li {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

		@media (max-width: 1199px) {
		.vs-pricing-wrapper.price-layout1 {
			--menu-image-height: 320px;
		}

		.vs-pricing-wrapper.price-layout1 .sec-title {
			font-size: 42px;
		}

		.vs-pricing-wrapper.price-layout1 .sub-title {
			font-size: 24px;
		}

			.vs-pricing-wrapper.price-layout1 .price-list-box {
				--space-x: 40px;
				--space-y: 40px;
				min-height: var(--menu-image-height);
			}

				.vs-pricing-wrapper.price-layout1 .price-list-box .price-title {
					font-size: 26px;
					margin-bottom: 15px;
				}

				}

		@media (max-width: 991px) {
		.vs-pricing-wrapper.price-layout1 .sec-title {
			font-size: 36px;
		}

				.vs-pricing-wrapper.price-layout1 .sub-title {
					font-size: 20px;
				}

				}

		@media (max-width: 767px) {
		.vs-pricing-wrapper.price-layout1 {
			--menu-image-height: 220px;
			padding-top: var(--section-space-mobile);
			padding-bottom: var(--section-space-mobile);
		}

		.vs-pricing-wrapper.price-layout1 .sec-title {
			font-size: 30px;
		}

		.vs-pricing-wrapper.price-layout1 .price-menu-tabs {
			gap: 8px;
			margin-bottom: 24px;
			flex-wrap: wrap;
		}

		.vs-pricing-wrapper.price-layout1 .price-menu-tabs .nav-link {
			padding: 10px 18px;
			font-size: 14px;
		}

		.vs-pricing-wrapper.price-layout1 .price-list {
			width: 100%;
		}

		.vs-pricing-wrapper.price-layout1 .price-list ul {
			margin: 0 0 30px 0;
		}

		.vs-pricing-wrapper.price-layout1 .price-list li {
			margin-bottom: 5px;
		}

		.vs-pricing-wrapper.price-layout1 .price-list .border-middle {
			margin: 3px 10px 0 10px;
		}

		.vs-pricing-wrapper.price-layout1 .price-list .price,
		.vs-pricing-wrapper.price-layout1 .price-list .package {
			font-size: 16px;
		}

		.vs-pricing-wrapper.price-layout1 .price-list-box {
			--space-x: 20px;
			--space-y: 30px;
		}

		.vs-pricing-wrapper.price-layout1 .price-list-box .price-title {
			font-size: 24px;
			margin-bottom: 15px;
		}

					.vs-pricing-wrapper.price-layout1 .price-list-box .price-img {
						position: relative;
						height: var(--menu-image-height);
						width: 100%;
						left: auto;
						right: auto;
						top: auto;
						bottom: auto;
						transform: none;
						z-index: 0;
						background-position: center center;
					}

		.vs-pricing-wrapper.price-layout1 .price-list-box .price-content {
			width: 100%;
		}

		.vs-pricing-wrapper.price-layout1 .price-list-box .price-list ul {
			margin: 0 0 25px 0;
		}

		.vs-pricing-wrapper.price-layout1 .price-list-box .price-content,
		.vs-pricing-wrapper.price-layout1 .price-list-box .price-title,
		.vs-pricing-wrapper.price-layout1 .price-list-box .price-list li {
			opacity: 1;
			visibility: visible;
			transform: none;
		}
	}

/* ===== From index.php ===== */
.franchise__area {
		position: relative;
		padding: 110px 0;
		margin: 30px 0 20px;
		background-image: linear-gradient(120deg, rgba(9, 10, 16, 0.92) 0%, rgba(41, 29, 19, 0.82) 52%, rgba(173, 136, 88, 0.62) 100%), url('../img/bg/booking.jpg');
		background-size: cover;
		background-position: center;
	}

	.franchise__area-content {
		max-width: 780px;
		color: #fff;
	}

	.franchise__area-content .subtitle__two,
	.franchise__area-content .subtitle__one,
	.franchise__area-content h2,
	.franchise__area-content p {
		color: #fff;
	}

	.franchise__area-list {
		margin: 20px 0 28px;
	}

	.franchise__area-list p {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.franchise__area-list i {
		margin-right: 8px;
		color: #f5b45f;
	}

	.franchise__area-btns {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.franchise__area .franchise-secondary-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 13px 28px;
		border: 1px solid #fff;
		color: #fff;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.franchise__area .franchise-secondary-btn:hover {
		background: #fff;
		color: #111;
	}

	@media (max-width: 767px) {
		.franchise__area {
			padding: 80px 0;
		}

		.franchise__area-content h2 {
			font-size: 30px;
			line-height: 1.3;
		}
	}

/* ===== From gallery.php ===== */
/* Gallery Layout Styles */
.salon-gallery-section {
  padding: 40px 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  background-color: #1a1a1a; /* Placeholder color */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

/* Luxury Hover Effect */
.gallery-item:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* Responsive adjustment for 21:9 feel on large screens */
@media (min-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== From includes/footer.php ===== */
.footer-copyright-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.floating-contact {
        position: fixed;
        right: 2px;
        bottom: 250px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .floating-contact a {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .floating-contact a:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    }

    .floating-contact .whatsapp-btn {
        background: #25d366;
    }

    .floating-contact .call-btn {
        background: #0bbd7c;
    }

    @media (max-width: 767px) {
        .floating-contact {
            right: 12px;
            bottom: 150px;
        }

        .floating-contact a {
            width: 44px;
            height: 44px;
            font-size: 20px;
        }
    }

@media (max-width: 767px) {
    .footer-copyright-layout {
        gap: 8px;
    }
}

/* ===== Contact page conflict fixes ===== */
.contact-page-clean .contact__area-bottom {
  position: static;
  display: flex;
  justify-content: flex-end;
}

.contact-page-clean .contact__area-bottom-form {
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-page-clean .contact__area-bottom-form.page {
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 540px;
  margin: 0;
  padding: 32px;
}

.contact-page-clean .contact__area-info-item-content h5 {
  max-width: 100%;
}

.contact-page-clean .contact__area-bottom-form form input,
.contact-page-clean .contact__area-bottom-form form textarea {
  background: #ffffff;
  color: var(--body-color);
  border: 1px solid #d9d9d9;
}

.contact-page-clean .contact__area-bottom-form form input:focus,
.contact-page-clean .contact__area-bottom-form form textarea:focus {
  border-color: var(--primary-color);
  color: var(--body-color);
}

.contact-page-clean .contact__area-bottom-map iframe {
  height: 460px;
  border: 0;
}

@media (max-width: 991px) {
  .contact-page-clean .contact__area-bottom {
    justify-content: flex-start;
  }

  .contact-page-clean .contact__area-bottom-form.page {
    max-width: 100%;
    margin: 0 0 30px 0;
  }
}