:root {
    --brand: #01b5fb;
    --sub: #6ac754;
    --body: #516171;
    --border: rgba(0, 0, 0, 0.08);
    --shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}

/* Main Header Styles */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #291f13;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* LOGO */
.brand-logo img {
    height: 70px;
    width: auto;
}

/* ===========================================
           DESKTOP NAVIGATION
        =========================================== */

.primary-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-nav>li {
    position: relative;
    margin: 0 5px;
}

.primary-nav>li>a {
    display: block;
    padding: 28px 18px;
    color: #ffffff;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.primary-nav>li>a:hover {
    color: #B88746;
}

/* ===========================================
           MEGA MENU
        =========================================== */

.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 90%;
    transform: translateX(-50%);
    background: #fff;
    min-width: 1100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 30px;
    margin-top: 10px;
}

.primary-nav>li:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

/* SMALL MENU DIVIDER */
.menu-divider {
    width: 70%;
    height: 1px;
    background: rgba(184, 135, 70, 0.301);
    margin: 10px 0 12px 0;
    list-style: none;
}

/* MEGA MENU HEADING */
.mega-column h4 a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.2;
}

/* ICON */
.mega-column h4 a i {
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 2px;
}

/* TEXT ALIGNMENT */
.mega-column h4 a span {
    display: inline-block;
}

.mega-column h4 {
    font-size: 16px;
    color: #B88746;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.mega-column h4 i {
    margin-right: 8px;
}

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

.mega-column ul li a {
    color: #555;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 0;
    display: block;
    transition: 0.3s;
}

.mega-column ul li a:hover {
    color: #B88746;
    padding-left: 5px;
}

/* BOOK BUTTON WRAPPER */
.mega-book-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(184, 135, 70, 0.281);
}

/* Service Column Book Button */
.service-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #B88746 0%, #8B6636 100%);
    color: #fff;
    text-align: center;
    border-radius: 25px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.service-book-btn:hover {
    background: linear-gradient(135deg, #8B6636 0%, #6B4E26 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(184, 135, 70, 0.4);
    color: #fff;
}

/* MOBILE */
@media (max-width: 768px) {

    .mega-book-wrap {
        justify-content: center;
        margin-top: 20px;
    }

    .service-book-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
           SINGLE DROPDOWN
        =========================================== */

.standard-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.primary-nav>li:hover .standard-dropdown {
    opacity: 1;
    visibility: visible;
}

.standard-dropdown li a {
    color: #333;
    padding: 10px 20px;
    display: block;
    font-size: 14px;
    text-decoration: none;
}

/* ===========================================
           CTA BUTTON (DESKTOP)
        =========================================== */

.cta-button {
    background: linear-gradient(135deg, #B88746, #8B6636);
    color: #fff;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    margin-left: 15px;
    transition: .3s ease;
}

.cta-button:hover {
    background: linear-gradient(135deg, #8B6636, #6B4E26);
    transform: translateY(-2px);
    color: #fff;
}

/* ===========================================
           MOBILE MENU
        =========================================== */

.mobile-toggle {
    display: none;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    color: #B88746;
}

@media (max-width:768px) {

    .cta-button {
        display: none;
    }

    .header-container {
        height: 70px;
    }

    .mobile-toggle {
        display: block;
    }

    /* MOBILE NAV */
    .primary-nav {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        overflow-y: auto;
        transition: 0.4s ease;
    }

    .primary-nav.active {
        left: 0;
    }

    .primary-nav>li {
        width: 100%;
        border-bottom: 1px solid #eee;
        margin: 0;
    }

    .primary-nav>li>a {
        padding: 18px 0;
        width: 100%;
        color: #000 !important;
        font-size: 16px;
        font-weight: 600;
    }

    .primary-nav>li>a i {
        float: right;
        transition: transform 0.3s ease;
    }

    .primary-nav>li.active>a i {
        transform: rotate(180deg);
    }

    /* FIX: Dropdown Visibility + Background + Padding */
    .mega-dropdown,
    .standard-dropdown {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        background: #fff;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        transition: max-height .4s ease;
        box-shadow: none;
        transform: none;
    }

    .primary-nav li.active .mega-dropdown,
    .primary-nav li.active .standard-dropdown {
        max-height: 2000px;
        padding: 15px 0;
    }

    .primary-nav {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }


    /* Stop grid on mobile */
    .mega-grid {
        display: block !important;
        grid-template-columns: none !important;
    }

    /* Ensure each item takes full width */
    .mega-column {
        width: 100%;
        margin-bottom: 20px;
        background: #f9f9f9;
        padding: 15px;
        border-radius: 8px;
        margin-right: 40px !important;
    }



    .mega-column h4 {
        color: #B88746 !important;
        font-size: 15px;
        margin-bottom: 12px;
        border-bottom: 2px solid #B88746;
        padding-bottom: 8px;
        display: inline-block;
        max-width: fit-content;
    }

    /* Make list items stack line by line */
    .mega-column ul li {
        width: 100%;
        display: block;
    }

    .mega-column ul li a {
        display: block;
        width: 100%;
        padding: 10px 12px;
        border-bottom: 1px solid #e0e0e0;
        color: #333 !important;
        font-size: 14px;
        line-height: 1.5;
    }

    .mega-column ul li:last-child a {
        border-bottom: none;
    }

    .mega-column ul li a:hover {
        background: #f0f0f0;
        color: #B88746 !important;
        padding-left: 12px;
    }

    /* Subsection titles */
    .mega-column ul li strong {
        display: block;
        color: #B88746 !important;
        font-size: 14px;
        padding: 10px 8px;
        font-weight: 600;
    }

    /* Book buttons in mobile */
    .service-book-btn {
        margin-top: 12px;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 8px;
        max-width: 200px;
    }
}

/*header end*/

/*why chosse us start*/
/* .treatment-section {
    background: #ffffff;
    padding: 40px 0;
}

.treatment-img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.treatment-title {
    font-size: 42px;
    font-weight: 600;
    color: #191919;
    line-height: 1.3;
    margin-bottom: 20px;
}

.treatment-title .treatment-italic {
    font-style: italic;
    font-weight: 400;
    color: #191919;
}

.treatment-subtitle {
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 500;
    color: #B88746;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: bold;
}

.treatment-desc {
    font-size: 16px;
    line-height: 1.9;
    max-width: 500px;
}

@media (max-width: 991px) {
    .treatment-title {
        font-size: 32px;
    }

    .treatment-desc {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .treatment-section {
        padding: 50px 20px;
    }

    .treatment-title {
        font-size: 28px;
        text-align: center;
    }

    .treatment-desc {
        text-align: left;
        font-size: 16px;
    }

    .treatment-img {
        width: 100%;
    }
} */

/*why choose us end*/

/* CTA Start */
.cta-section {
    width: 100%;
    padding: 80px 20px;
    background: url(../img/image-4/cta-gallery.jpg) top/cover no-repeat fixed;
    background-attachment: fixed;
    position: relative;
}

@media (max-width: 768px) {
    .cta-section {
        background-attachment: fixed !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }
}


.cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}

.cta-section .container {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

.cta-subtitle {
    font-size: 16px;
    color: #f9f9f9;
    max-width: 700px;
    margin: 0 auto 30px auto;
    font-family: 'Poppins', sans-serif;
}


.cta-btn {
    padding: 12px 28px;
    background: var(--brand);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.cta-btn:hover {
    background: var(--sub);
    color: white;
    transform: translateY(-3px);
}

/*cta end*/



/*hairextension gallery*/
/* Section Heading */
/* ===== GALLERY SECTION ===== */
.gallery-section {
    background-color: #fff;
    margin-top: 80px;
}

.custom-gallery {
    column-count: 4;
    column-gap: 15px;
    margin-top: 30px;
}

/* Each clickable card */
.gallery-item {
    display: block;
    margin-bottom: 15px;
    break-inside: avoid;
    /* ✅ prevents image from splitting across columns */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    /* clips hover overlay only, not the image */
    cursor: pointer;
}

/* ✅ Images show fully — NO fixed height, NO object-fit: cover */
.gallery-item img {
    width: 100%;
    height: auto;
    /* ✅ natural full height, zero cropping */
    display: block;
    border-radius: 10px;
    transition: transform 0.4s ease;
}

/* Search icon overlay — hidden by default */
.gallery-item i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #fff;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* Dark overlay on hover */
.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
    border-radius: 10px;
}

/* Hover: show overlay + icon + slight zoom */
.gallery-item:hover::before {
    opacity: 1;
}

.gallery-item:hover i {
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .custom-gallery {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .custom-gallery {
        column-count: 2;
        column-gap: 10px;
    }

    .gallery-item {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .custom-gallery {
        column-count: 1;
    }
}

/*hairextension gallery end*/

/* Path */
.banner-area {
    position: relative;
    min-height: 400px;
    color: #fff;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(../img/image-1/);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-title {
    color: #fff;
    text-transform: uppercase;
    font-size: 58px;
    font-weight: 900;
}

@media (max-width: 767px) {
    .banner-title {
        font-size: 48px;
    }
}

@media (max-width: 575px) {
    .banner-title {
        font-size: 32px;
    }
}

.banner-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    /* max-width: 1170px; */
    margin: 0 auto;
    width: 100%;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.banner-heading {
    /* text-align: center; */
    text-align: left;
}

.breadcrumb {
    padding: 0;
    background: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
}

.breadcrumb li a,
.breadcrumb .breadcrumb-item,
.breadcrumb li a:focus {
    color: #fff !important;
    text-decoration: none;
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}

.banner__item {
    position: relative;
    overflow: hidden;
}

.banner__item:hover .banner__item__text a:after {
    width: 40px;
    background: #e53637;
}

.banner__item.banner__item--middle {
    /* margin-top: -75px; */
    margin-top: -25px;
}

.banner__item.banner__item--middle .banner__item__pic {
    float: none;
}

/* .banner__item.banner__item--middle .banner__item__text {
	position: relative;
	top: 0;
	left: 0;
	max-width: 100%;
	padding-top: 22px;
} */

.banner__item.banner__item--last {
    /* margin-top: 100px; */
    margin-top: 350px;
}

.banner__item__pic {
    float: right;
}

.banner__item__text {
    max-width: 300px;
    position: absolute;
    left: 0;
    top: 140px;
}

.banner__item__text h2 {
    color: #111111;
    font-weight: 700;
    line-height: 46px;
    margin-bottom: 10px;
}

.banner__item__text a {
    display: inline-block;
    color: #111111;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 3px 0;
    position: relative;
}

.banner__item__text a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #111111;
    content: "";
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}


@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner__item.banner__item--middle {
        margin-top: 0;
    }

    .banner__item.banner__item--last {
        margin-top: 0;
    }

    .banner__item {
        margin-bottom: 40px;
    }

    .banner {
        padding-bottom: 60px;
    }
}


@media only screen and (max-width: 767px) {
    .banner__item.banner__item--middle {
        margin-top: 0;
    }

    .banner__item.banner__item--last {
        margin-top: 0;
    }

    .banner__item {
        margin-bottom: 40px;
    }

    .banner {
        padding-bottom: 60px;
    }

    .banner__item__pic {
        float: none;
    }

    .banner__item__pic img {
        min-width: 100%;
    }

    .banner__item__text {
        max-width: 100%;
        position: relative;
        top: 0;
        padding-top: 22px;
    }
}

@media only screen and (min-width: 967px) {
    .banner__item__pic img {
        height: 450px;
        object-fit: cover;
    }
}

.spad {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media only screen and (min-width: 967px) {
    .banner__item__pic .middle {
        padding: 0px 150px 0px 0px;
    }

    .banner__item__pic .last {
        padding: 0px 150px 0px 0px;
    }

    .banner__item.banner__item--last .banner__item__text {
        margin-left: 300px;
    }

    .banner__item--middle .banner__item__text {
        margin-left: 300px;
    }
}

.btn-slide,
.btn-path {
    color: #fff !important;
}

/*path end*/

/* ===== About Section ===== */
.about-section {
    padding: 70px 0;
    background: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-container {
    position: relative;
    z-index: 2;
}

/* ===== Decorative Side Panels ===== */
.about-deco {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100vw - 960px) / 2);  /* fills space outside container */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    pointer-events: none;
    z-index: 1;
}

.about-deco-left  { left: 0; }
.about-deco-right { right: 0; transform: scaleX(-1); }

/* Vertical golden line */
.deco-line-v {
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 1.5px;
    background: linear-gradient(to bottom, transparent, #B88746 30%, #B88746 70%, transparent);
    left: 50%;
    transform: translateX(-50%);
}

/* Glowing orbs */
.deco-orb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #B88746;
    opacity: 0.25;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.deco-orb-1 { top: 22%; width: 14px; height: 14px; opacity: 0.35; }
.deco-orb-2 { top: 50%; width: 10px; height: 10px; opacity: 0.45; }
.deco-orb-3 { top: 78%; width: 14px; height: 14px; opacity: 0.35; }

/* Diamond shape */
.deco-diamond {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 22px;
    height: 22px;
    border: 1.5px solid #B88746;
    opacity: 0.5;
}

/* Dot grid pattern */
.deco-dots-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 120px;
    background-image: radial-gradient(circle, #B88746 1.2px, transparent 1.2px);
    background-size: 12px 12px;
    opacity: 0.18;
}

/* ===== Text ===== */
.about-description {
    font-size: 15px;
    text-align: left;
    color: #444;
    max-width: 860px;
    margin: 10px auto;
    line-height: 1.9;
}

/* Highlight Important Words */
.highlight-text {
    color: #B88746 !important;
    font-weight: 600;
}

/* ===== Hide deco on smaller screens ===== */
@media (max-width: 1200px) {
    .about-deco {
        width: calc((100vw - 720px) / 2);
    }

    .about-description {
    font-size: 15px;
    text-align: center;
    color: #444;
    max-width: 860px;
    margin: 10px auto;
    line-height: 1.9;
}
}

@media (max-width: 992px) {
    .about-deco {
        display: none; /* not enough space — hide cleanly */
    }
}

/*team*/
/* .team-section {
    background: #fafafa;
} */

.team-title {
    font-size: 36px;
    font-weight: 700;
}

.team-subtitle {
    color: #555;
    font-size: 16px;
    text-align: center;
}

.team-card {
    background: #fff;
    border-radius: 12px;
    transition: 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.team-img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

.team-role {
    font-size: 14px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team-desc {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}

/*team end*/


/* ABOUT PAGE CTA */
.about-cta-section {
    width: 100%;
    padding: 80px 20px;
    background: url(../img/image-4/about-cta.jpg) center/cover no-repeat fixed;
    position: relative;
}

/* Overlay */
.about-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}

.about-cta-section .container {
    position: relative;
    z-index: 1;
}

.about-cta-title {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    /* font-family: 'Poppins', sans-serif; */
}

/* SOCIAL ICON WRAPPER */
.about-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* SOCIAL ICON */
.social-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 28px;
    text-decoration: none;

    transition: all 0.35s ease;
}

/* HOVER */
.social-icon:hover {
    background: #B88746;
    color: #fff;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(184, 135, 70, 0.4);
}

/* SUBTITLE */
.about-cta-subtitle {
    font-size: 16px;
    max-width: 760px;
    margin: 0 auto 30px auto;
    color: #f2f2f2;
    line-height: 1.8;
    font-family: 'Poppins', sans-serif;
}

/* BUTTON */
.about-cta-btn {
    padding: 12px 30px;
    background: #B88746;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.about-cta-btn:hover {
    background: #191919;
    transform: translateY(-3px);
    color: #fff;
}

/* MOBILE */
@media (max-width: 768px) {

    .about-social-icons {
        gap: 14px;
    }

    .social-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .about-cta-btn {
        width: 100%;
        justify-content: center;
        font-size: 15px;
        padding: 14px 18px;
    }

    .about-cta-subtitle {
        font-size: 14px;
        line-height: 1.7;
    }
}

/*contact start*/
.contact-banner {
    width: 100%;
    height: 350px;
    background: url('../img/image-4/contact-banner.jpg') center/cover no-repeat;
    display: flex;
    position: relative;
}

.contact-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.banner-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.contact-banner-title {
    position: relative;
    color: var(--brand);
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.banner-caption {
    color: #fff !important;
    font-size: 18px;
    margin-top: 10px;
    opacity: 0.9;
}

.contact-link {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.contact-link:hover {
    color: #ffffff;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .contact-banner {
        height: 260px;
    }

    .contact-banner-title {
        font-size: 25px;
    }

    .banner-caption {
        color: #fff !important;
        font-size: 12px;
        margin-top: 10px;
        opacity: 0.9;
    }

    .contact-banner-subtitle {
        font-size: 12px;
    }
}


/* Center alignment wrapper */
.contact-title-wrap,
.faq-title-wrap {
    text-align: center;
}

/* ─────────────── INFO BOX BASE STYLE ─────────────── */
.info-box {
    background: var(--brand);
    border-radius: 12px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transition: all 0.35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ─────────────── HOVER EFFECT ─────────────── */
.info-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
    background: var(--sub);
}

/* ─────────────── ICON STYLE ─────────────── */
.info-box i {
    font-size: 42px;
    color: #fff;
    /* your theme color */
    margin-bottom: 15px;
    transition: 0.3s ease;
}

.info-box:hover i {
    color: var(--brand);
    /* secondary color */
}

/* ─────────────── TITLE STYLE ─────────────── */
.info-box-title {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #fff !important;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.info-box h5 {
    color: #fff !important;
}

/* ─────────────── TEXT / PARAGRAPH STYLE ─────────────── */
.info-box p {
    margin: 0;
    font-size: 16px;
    color: #f5f5f5;
    line-height: 1.6;
}

/* ─────────────── MOBILE FIXES ─────────────── */
@media (max-width: 576px) {
    .info-box {
        padding: 28px 18px;
    }

    .info-box i {
        font-size: 36px;
    }

    .info-box-title {
        font-size: 20px;
    }
}


/* Fix height on all boxes inside Bootstrap columns */
.contact-info .col-md-4 {
    display: flex;
}

.contact-info .col-md-4 .info-box {
    width: 100%;
}

.text-brand {
    color: var(--sub);
}

/*contact end*/

/*footer*/
.footer {
    /* background-color: white; */
    background-color: #87699c;
}

/* Footer Logo Default Size (Desktop) */
.footer .nav-brand img {
    max-width: 25%;
    /* adjust size here */

    padding-bottom: 10px;
    object-fit: contain;
}

/* Tablet */
@media (max-width: 992px) {
    .footer .nav-brand img {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .footer .nav-brand img {
        width: 20%;
    }
}

.footer a {
    color: #ffffff !important;
    text-decoration: none;
}

.footer a:hover {
    color: #ffffff !important;
    /* you can change the green shade */
}

.footer-head {
    color: var(--sub);
    font-weight: 900;
}

.footer-color {
    color: #ffffff !important;
    /* color: black; */
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: #ffff;
    /* background-color: white; */
    /* background-color: black;
  border: 1px solid var(--brand); */
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    line-height: 35px;
    /* color: black; */
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: white;
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .3);
}

.footer .copyright a {
    color: white;
}

.footer .copyright a:hover {
    color: #b9babc;
}

/*footer end*/

/* FAQ Wrapper start*/
#faqAccordion .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    background: #efefef;
}

/* Question Button */
#faqAccordion .accordion-button {
    background: #f8f8f8;
    color: #333;
    font-weight: 600;
    padding: 18px;
    border: none;
    font-size: 16px;
    box-shadow: none;
    transition: all 0.3s ease;
}

/* Hover Effect */
#faqAccordion .accordion-button:hover {
    background: #efefef;
}

/* When FAQ is Open */
#faqAccordion .accordion-button:not(.collapsed) {
    background: var(--brand);
    color: #fff;
    box-shadow: none;
    border-bottom: 1px solid #eee;
}

/* Remove Bootstrap Default Arrow */
#faqAccordion .accordion-button::after {
    background-image: none !important;
    color: var(--brand) !important;
    content: "+";
    font-size: 20px;
    font-weight: bold;
    margin-left: auto;
    transition: transform .3s ease;
}

/* Rotate icon when open */
#faqAccordion .accordion-button:not(.collapsed)::after {
    color: #fff !important;
    content: "-";
    transform: rotate(180deg);
}

/* Answer Area */
#faqAccordion .accordion-body {
    font-size: 15px;
    color: #555;
    padding: 18px 20px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 480px) {
    #faqAccordion .accordion-button {
        padding: 14px;
        font-size: 15px;
    }

    #faqAccordion .accordion-body {
        padding: 15px;
        font-size: 14px;
    }
}

/* SPACE BETWEEN FAQ & FORM */
.faq-section .row {
    align-items: flex-start;
}

/* ── Fix the section & container to allow sticky ── */
.faq-section {
    overflow: visible !important;
}

.faq-section .container {
    overflow: visible !important;
}

.faq-section .row {
    align-items: flex-start !important;
    overflow: visible !important;
}

/* =========================================
   FAQ SECTION
========================================= */

.faq-section {
    position: relative;
}

/* =========================================
   FAQ SECTION
========================================= */

.faq-section {
    position: relative;
}

/* =========================================
   FORM STYLE
========================================= */

/* LAPTOP / DESKTOP ONLY */
@media (min-width: 992px) {

    .floating-form-wrap {
        width: 45%;
        margin-left: auto;
    }

    #floating-form {
        position: sticky;
        top: 120px;
    }
}

/* TABLET & MOBILE */
@media (max-width: 991px) {

    .floating-form-wrap {
        width: 100%;
    }

    #floating-form {
        position: relative !important;
        top: 0 !important;
    }
}

/* FORM CARD */
.fixed-enquiry-form {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px;
    border: 1px solid rgba(184, 135, 70, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* TITLE */
.fixed-enquiry-form h3 {
    font-size: 28px;
    font-weight: 700;
    color: #191919;
    margin-bottom: 12px;
}

/* SUBTITLE */
.form-subtitle {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 24px;
}

/* INPUTS */
.fixed-enquiry-form .form-control {
    height: 52px;
    border-radius: 12px;
    border: 1px solid #ddd;
    padding: 12px 16px;
    font-size: 15px;
    box-shadow: none;
    transition: 0.3s ease;
}

.fixed-enquiry-form textarea.form-control {
    min-height: 130px;
    resize: none;
}

.fixed-enquiry-form .form-control:focus {
    border-color: #b88746;
    box-shadow: 0 0 0 0.15rem rgba(184, 135, 70, 0.12);
}

/* BUTTON */
.enquiry-btn {
    height: 52px;
    border: none;
    border-radius: 50px;
    background: #b88746;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s ease;
}

.enquiry-btn:hover {
    background: #191919;
    color: #fff;
}

/* =========================================
   FLOAT ONLY IN DESKTOP & LAPTOP
========================================= */

@media (min-width: 992px) {

    #floating-form {
        position: sticky;
        top: 120px;
    }

}


/* MOBILE & TABLET = NORMAL */
@media (max-width: 991px) {

    #floating-form {
        position: relative !important;
        top: 0 !important;
    }

    .fixed-enquiry-form {
        margin-top: 30px;
        padding: 24px;
    }

    .fixed-enquiry-form h3 {
        font-size: 24px;
    }
}

/* faq end*/


/* --- HERO SECTION --- */
/* .hero-section {
    position: relative;
    min-height: 92vh;
    background-image: url(../img/image-4/parlorsection-background.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    padding: 150px 0;
    padding-bottom: 50px;

}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.562);
} */


.content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* HERO SECTION */
.hero-section {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 150px 0 50px;
    overflow: hidden;
    /* 🔥 important */
}

/* BACKGROUND IMAGE */
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔥 behaves like background-size: cover */
    z-index: 0;
}

/* OVERLAY */
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* --- LEFT SIDE CONTENT --- */
.left-content {
    flex: 1;
    max-width: 750px;
}

.section-tag {
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: #fff;
}

.main-heading {
    font-size: 1.7rem;
    line-height: 1.25;
    font-weight: bold;
    margin-bottom: 18px;
    color: #fff;
}

.intro-text {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #fff;
}

/* --- LIST ITEMS --- */
.service-item {
    margin-bottom: 16px;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding-left: 10px;
}

.service-title,
.service-description {
    display: inline;

}

.service-title::after {
    content: ": ";
}

.bullet {
    color: #fff;
    font-size: 18px;
    margin-top: 0px;
    list-style: disc;
    /* Standard bullet */
}

.service-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}

.service-description {
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.45;
    font-weight: 300;
}

/* --- RIGHT WHITE BOX --- */
.right-info-box {
    background: #fff;
    width: 380px;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
    align-self: center;
}

.info-title {
    font-size: 1.35rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-text {
    font-size: 0.9rem;
    margin-bottom: 18px;
    line-height: 1.5;
    color: #444;
}

.info-list {
    list-style: none;
    padding-left: 0;
}

.info-list li {
    font-size: 0.9rem;
    margin-bottom: 10px;
    padding-left: 18px;
    position: relative;
}

.info-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #b88746;
    font-size: 14px;
}



/* LAPTOP VIEW (Reduce Slightly) */
@media (max-width: 1200px) {
    .main-heading {
        font-size: 1.9rem;
    }

    .intro-text,
    .service-description {
        font-size: 0.9rem;
    }
}

/* TABLET VIEW */
@media (max-width: 992px) {
    .content-wrapper {
        flex-direction: column;
        text-align: left;
        gap: 30px;
    }

    .right-info-box {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
}

/* MOBILE VIEW (Reduce More) */
@media (max-width: 768px) {
    .hero-section {
        /* padding: 70px 0; */
        padding-top: 110px;
    }

    .main-heading {
        font-size: 1.6rem;
    }

    .intro-text,
    .service-description {
        font-size: 0.85rem;
    }

    .right-info-box {
        padding: 22px;
    }
}

/* 👉 EXTRA SMALL MOBILE VIEW */
@media (max-width: 480px) {
    .content-wrapper {
        padding: 0 18px;
    }

    .main-heading {
        font-size: 1.4rem;
    }

    .intro-text,
    .service-description {
        font-size: 0.8rem;
    }
}

.care-guide-section {
    padding: 70px 20px;
    /* background: #f8f7f5; */
}

.care-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    /* Center text & image vertically */
    justify-content: space-between;
    gap: 60px;
}

/* TEXT SECTION */
.care-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #1a1a1a;
}

.care-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.care-list li {
    position: relative;
    margin-bottom: 22px;
    padding-left: 28px;
    line-height: 1.7;
    font-size: 1.12rem;
    color: #333;
}

/* Gold bullet */
.care-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #c9a96e;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: bold;
}

/* RIGHT IMAGE SECTION */
.care-images {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Increased height */
.care-img {
    width: 380px;
    height: 450px;
    /* Increased height */
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* --------- RESPONSIVE --------- */

@media (max-width: 992px) {
    .care-container {
        gap: 40px;
    }

    .care-img {
        width: 280px;
        height: 380px;
        /* proportional smaller version */
    }
}

@media (max-width: 768px) {
    .care-container {
        flex-direction: column;
        text-align: left;
        align-items: center;
    }

    .care-images {
        justify-content: center;
    }

    .care-img {
        width: 100%;
        max-width: 420px;
        height: auto;
        /* Auto height for mobile to avoid distortion */
        margin-top: 25px;
    }

    .care-title {
        font-size: 1.6rem;
    }

    .care-list li {
        font-size: 1rem;
    }
}

/*hair first extension end*/


/* Responsive Grid */
.custom-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0px 20px;
}

/* Each Item */
.gallery-item {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 3px solid #eee;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    position: relative;
    cursor: pointer;
}

.gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .35s ease;
}

.gallery-item:hover img {
    transform: scale(1.07);
}

/* Search Icon Overlay */
.gallery-item i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 1;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.gallery-item:hover i {
    opacity: 1;
}

/* Tablet - 3 per row */
@media (max-width: 992px) {
    .custom-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile - 2 per row */
@media (max-width: 600px) {
    .custom-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .gallery-item i {
        font-size: 20px;
    }
}


/*hair second extension*/
.aftercare-section {
    padding: 30px 0px;
    background: #fff;
    padding-bottom: 0px;
}

.aftercare-section .main-title {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    color: #191919;
}

/* VIDEO BOX */
.aftercare-video-box {
    width: 90%;
    height: 400px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* BACKGROUND OVERLAY */
.aftercare-video-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../img/image-4/floral-background.png);
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    z-index: 1;
}

/* VIDEO */
.aftercare-video-box video {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 250%;
    object-fit: cover;
    /* 🔥 IMPORTANT: removes empty space */
    display: block;
}

/* TABLET */
@media (max-width: 992px) {
    .aftercare-video-box {
        height: 360px;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .aftercare-video-box {
        height: 300px;
        margin-bottom: 20px;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .aftercare-video-box {
        height: 240px;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .aftercare-section .main-title {
        text-align: center;
        font-size: 1.5rem;
    }
}

.quote-box {
    position: relative;
    padding: 30px 30px 30px 60px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.quote-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 28px;
    color: #B88746;
    /* your gold theme */
    opacity: 0.9;
}

.quote-box .main-title {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #191919;
    font-weight: 500;
}

/* subtle decorative line */
.quote-box::after {
    content: "";
    position: absolute;
    bottom: 15px;
    left: 60px;
    width: 60px;
    height: 2px;
    background: #B88746;
}

/* Responsive */
@media (max-width: 768px) {
    .quote-box {
        padding: 25px;
    }

    .quote-icon {
        position: static;
        margin-bottom: 10px;
    }

    .quote-box::after {
        left: 25px;
    }

    .quote-box .main-title {
        font-size: 1.2rem;
        line-height: 1.7;
        color: #191919;
        font-weight: 500;
    }
}


.container {
    max-width: 100%;
    padding: 20px 20px !important;
}

/* Sub heading style */
.sub-heading {
    font-size: 13px;
    letter-spacing: 3px;
    color: #6d6d6d;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Title style like screenshot */
.main-title {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    color: #000;
    margin-bottom: 30px;
}

/* Bullet Alignment + Typography */
.aftercare-list {
    list-style: disc;
    padding-left: 20px;
    margin-top: 0;
}

.aftercare-list li {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #111;
}


/* ---------- Responsive styling ---------- */
@media (max-width: 768px) {

    .main-title {
        font-size: 22px;
        line-height: 1.5;
    }

    .aftercare-list li {
        font-size: 16px;
        line-height: 1.8;
    }

    .aftercare-section {
        padding: 60px 20px;
    }
}

@media (max-width: 480px) {

    .main-title {
        font-size: 20px;
    }

    .aftercare-list li {
        font-size: 15px;
    }
}

/*hair second extension end*/

/*haie extension gallry*/
.untree_co-section {
    padding: 30px 0;
    position: relative;
}

.img-text-center {
    padding-bottom: 15px;
    font-size: 1.5rem;
    text-align: center;
}

@media (max-width: 480px) {

    .img-text-center {
        padding-bottom: 15px;
        text-align: center;
        font-size: 20px;
    }
}


@media (max-width: 991.98px) {
    .untree_co-section {
        padding: 50px 0;
    }
}

.untree_co-section .heading h3 {
    font-size: 35px;
    color: #000000;
}

@media (max-width: 991.98px) {
    .untree_co-section .heading {
        font-size: 20px;
    }
}

.untree_co-section .heading strong {
    font-weight: 700;
}

/* .text-center {
    padding-bottom: 25px;
} */


.item {
    border: none;
    margin-bottom: 30px;
    border-radius: 4px;
    display: block;
}

.item a {
    display: block;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    display: block;
}

.item a img {
    position: relative;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.item .item-wrap {
    display: block;
    position: relative;
}

.item .item-wrap:after {
    z-index: 2;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.item .item-wrap>i {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    -webkit-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    color: #ffffff;
    font-size: 1.7rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
}

.item .item-wrap:hover:after {
    opacity: 1;
    visibility: visible;
}

.item .item-wrap:hover i {
    margin-top: 0px;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.item:hover a img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

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

/*haie extension gallry end*/