/*======================================================
Base / Reset
======================================================*/

html {
    scroll-behavior: smooth;
}

/* Header + banner together fill this share of the viewport. --header-h must match the
   header's real height (logo height + its vertical padding + 1px border). */
/*:root {*/
/*    --header-h: 99px;*/
/*    --banner-vh: 78vh;*/
/*}*/

body {
    margin: 0;
    background-color: #000000;
    color: #ffffff;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 2000;
    padding: 10px 18px;
    background-color: #d4a85a;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.skip-link:focus {
    top: 16px;
    color: #000000;
    outline: 2px solid #ffffff;
}


/*======================================================
Common Components
======================================================*/

/* Section spacing */
.common-section-padding {
    padding: 60px 0;
}

/* Section base look */
.common-style {
    position: relative;
    background-color: #000000;
    color: #ffffff;
}

/* Button – gold outline on black, matches banner reference.
   Cinzel rather than Cormorant Garamond: Cormorant ships old-style (varying-height)
   figures, which made "(707) 399-9013" read unevenly. Cinzel has full lining figures. */
.common-btn {
    display: inline-block;
    padding: 15px 34px;
    border: 1px solid #d4a85a;
    background-color: #000000;
    color: #f0d48a;
    font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(212, 168, 90, 0.35), 0 0 22px rgba(212, 168, 90, 0.18);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.common-btn:hover {
    background-color: #d4a85a;
    color: #000000;
    box-shadow: 0 0 0 1px rgba(212, 168, 90, 0.6), 0 0 28px rgba(212, 168, 90, 0.4);
}

.common-btn:focus-visible {
    outline: 2px solid #f0d48a;
    outline-offset: 4px;
}

.common-btn-sm {
    padding: 10px 22px;
    font-size: 15px;
    letter-spacing: 0.08em;
}


/*======================================================
Header / Navigation
======================================================*/

/* Fixed height rather than padding + content: it makes the --header-h the hero subtracts
   exact, whichever column happens to be tallest. */
.header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 99999;
    width: 100%;
    padding: 6px 0;
    background-color: #0a0a0a;
    border-bottom: 1px solid #b8893f;
    box-shadow: 0 1px 0 rgba(240, 212, 138, 0.28), 0 10px 30px rgba(0, 0, 0, 0.6);
    transition: height 0.3s ease;
}

.header .container {
    width: 100%;
    /* max-width: 1420px; */
}

/* Logo */
.logo {
    position: relative;
}

.logo a {
    display: block;
    line-height: 0;
}

/* Explicit height, not img-fluid width: the logo is square, so a width-driven size in a
   col-2 would make the header ~250px tall. This is what keeps --header-h honest. */
.logo img {
    width: 80%;
    transition: 0.5s;
}

/* Compact header once the page is scrolled – class toggled in custom.js */
/* .header.is-scrolled {
    height: calc(var(--header-h) - 18px);
} */

.sticky {
  position: sticky !important;
  top: 0;
  width: 100%;
  background-color: #0a0a0a;
  z-index: 999;
  display: block;
  /* box-shadow: 0px 7px 6px #bfb7b7a8; */
}

.sticky .logo img {
    width: 55%;
}


/* Menu */
.menu nav {
    padding: 0;
}

.menu .nav-item {
    margin: 0 30px 0 0;
}

/*.menu .nav-item:last-child {*/
/*    margin: 0 0 0 12px;*/
/*}*/

.menu ul li a {
    display: inline-block;
    position: relative;
    padding: 0 24px;
    background: transparent;
    color: #f5f2ee;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 28px;
    text-transform: uppercase;
    transition: color 0.5s ease;
}

.menu ul li a:hover,
.menu ul li a:focus-visible,
.menu ul li a.active {
    color: #e5c38a;
}

.menu ul li a:focus-visible {
    outline: 2px solid #f0d48a;
    outline-offset: 4px;
}

/* Gold underline that grows in on hover, and stays on the current page */
.menu ul li::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    margin: 0 auto;
    background-color: #e5c38a;
    transition: width 0.5s ease;
}

.menu ul li:hover::after,
.menu ul li:focus-within::after,
.menu ul li.home::after {
    width: calc(100% - 48px);
}

/* Mobile toggle */
.menu .navbar-toggler {
    padding: 6px 12px;
    border: 1px solid #c9a46b;
    border-radius: 0;
    box-shadow: none;
}

.menu .navbar-toggler:focus {
    box-shadow: none;
    outline: 2px solid #f0d48a;
    outline-offset: 2px;
}

/* Appointment column */
.header-btn {
    text-align: center;
}

.by-appoint-txt {
    margin: 0 0 10px;
    color: #f5f2ee;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 28px;
    text-transform: uppercase;
}


/*======================================================
Hero / Banner Section
======================================================*/

.hero-section {
    display: flex;
    align-items: center;
    position: relative;
    /* Header + banner together = --banner-vh of the viewport */
    /* height: calc(var(--banner-vh) - var(--header-h)); */
    /* min-height: 380px; */
    /* max-height: 760px; */
    padding: 24px 0;
    overflow: hidden;
    /* isolation: isolate; */
    /* Single continuous ground for the whole banner – near-black with one soft warm
       glow behind the content. No separate left/right panel, so nothing can seam. */
    background-color: #020100;
    background-image:
        radial-gradient(ellipse 52% 58% at 28% 42%, rgba(72, 54, 30, 0.85) 0%, rgba(72, 54, 30, 0.28) 45%, rgba(72, 54, 30, 0) 75%),
        radial-gradient(ellipse 60% 70% at 72% 48%, rgba(46, 33, 17, 0.55) 0%, rgba(46, 33, 17, 0) 70%);
}

/* Portrait layer – full-bleed, feathered on every free edge and screen-blended so it
   dissolves into the section background instead of ending on a hard rectangle */
.hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
}

/* No object-fit crop: the photo is shown whole at its natural aspect and flush right, so
   the face reads zoomed out and sits on the right edge like the reference banner. */
.hero-bg-image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    max-width: none;
    mix-blend-mode: screen;
    -webkit-mask-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 16%, rgba(0, 0, 0, 0.7) 34%, rgba(0, 0, 0, 1) 54%),
        linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
    mask-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 16%, rgba(0, 0, 0, 0.7) 34%, rgba(0, 0, 0, 1) 54%),
        linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Content sits above the portrait layer. Deliberately no z-index: a stacking context
   here would cut the hero logo off from the section backdrop and kill its screen blend,
   so ordering is left to paint order (positioned, and later in the tree). */
.hero-section > .container {
    position: relative;
}

.hero-left {
    text-align: center;
}

.hero-content {
    max-width: 636px;
    margin: 0 auto;
}

/* Logo asset ships on solid black – screen blend lets the black fall away over the dark glow */
.hero-logo {
    width: 100%;
    max-width: 340px;
    margin: -26px auto -16px;
    mix-blend-mode: screen;
}

.hero-title {
    margin: 0 0 15px;
    font-weight: 500;
    line-height: 1;
}

.hero-title-line {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.3;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
}

.hero-title-script {
    display: block;
    padding: 0 10px 6px;
    color: #d9ab5c;
    font-family: "Great Vibes", "Cormorant Garamond", cursive;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 62px;
    text-transform: none;
    background-image: linear-gradient(180deg, #f3d98f 0%, #d4a85a 55%, #b8893f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* Fallback for browsers without CSS masking: lean harder on the screen blend so the
   portrait still merges into the black rather than showing a boxed edge */
   
   
/*@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {*/
/*    .hero-bg-image {*/
/*        opacity: 0.96;*/
/*    }*/
/*}*/


/*======================================================
About / Services Split Section
======================================================*/

.about-section {
    background-color: #050403;
    background-image:
        radial-gradient(ellipse 60% 70% at 22% 45%, rgba(58, 43, 24, 0.55) 0%, rgba(58, 43, 24, 0) 72%),
        radial-gradient(ellipse 60% 70% at 78% 45%, rgba(46, 34, 18, 0.45) 0%, rgba(46, 34, 18, 0) 72%);
    border-top: 1px solid #b8893f;
}

.about-section-inner {
    padding: 0;
}

/* Hairline rule between the two halves, matching the section's top border */
.about-col {
    border-right: 1px solid rgba(184, 137, 63, 0.55);
}

/* align-items centres the shorter column against the taller one */
.about-col,
.services-col {
    display: flex;
    align-items: center;
    padding: 74px 30px;
}

.about-col {
    padding-left: 0;
}

.services-col {
    padding-right: 0;
}

.about-content {
    max-width: 640px;
    margin: 0 auto;
}

.services-content {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* Shared headings */
.section-eyebrow {
    margin: 0;
    color: #e5c38a;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 1.2px;
    line-height: 1.4;
    text-transform: uppercase;
}

.section-heading {
    margin: 0;
    color: #e5c38a;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Fleuron rule under each heading */
.section-divider {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 14px 0 26px;
    color: #b8893f;
}

.services-content .section-divider {
    margin-left: auto;
    margin-right: auto;
}

.section-divider svg {
    display: block;
    width: 100%;
    height: auto;
}

/* About copy */
.about-title {
    margin: 0 0 24px;
    color: #e0b978;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.about-content p {
    margin: 0 0 18px;
    color: #ded6cc;
    font-size: 18px;
    line-height: 1.75;
}

.about-content p:last-of-type {
    margin-bottom: 30px;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.btn-arrow {
    width: 24px;
    height: 10px;
    flex: none;
}

/* Service icons */
/* Three per row, then two – wrap plus justify-content:center leaves the short
   final row centred on its own */
.service-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 34px 24px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.service-item {
    flex: 0 0 calc(33.333% - 16px);
}

/* Fixed box so every label starts on the same line whatever the icon's own bounds */
.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 118px;
    height: 118px;
    margin: 0 auto 16px;
    color: #d9ab5c;
}

.service-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Sized so "Scalp Treatments" holds on one line at the reference's two-line label shape */
.service-label {
    display: block;
    color: #ded6cc;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.service-item img{width:60%;}


/*======================================================
  Our Services / Featured Treatments Section
======================================================*/


.bella-services-section {
    position: relative;
    padding: 65px 0 75px;
    background-color: #050403;
    background-image:
        radial-gradient(
            ellipse 60% 80% at 50% 45%,
            rgba(58, 43, 24, 0.35) 0%,
            rgba(58, 43, 24, 0.08) 55%,
            rgba(58, 43, 24, 0) 80%
        );
    border-top: 1px solid rgba(184, 137, 63, 0.55);
}

/*------------------------------------------------------
  Heading
------------------------------------------------------*/

.bella-services-header {
    margin-bottom: 32px;
    text-align: center;
}

.bella-services-header .section-eyebrow {
    margin-bottom: 2px;
}

.bella-services-header .section-divider {
    margin: 8px auto 10px;
}

.bella-services-header h2 {
    margin: 0;
    color: #ded6cc;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.35;
}

/*------------------------------------------------------
  Services Row
------------------------------------------------------*/

.bella-services-row {
    align-items: flex-start;
}

.bella-service-item {
    text-align: center;
}

/*------------------------------------------------------
  Service Image
------------------------------------------------------*/

.bella-service-image {
    width: 100%;
    overflow: hidden;
    background-color: #15110c;
}

.bella-service-image img {
    transition: transform 0.5s ease;
}

.bella-service-item:hover .bella-service-image img {
    transform: scale(1.04);
}

/*------------------------------------------------------
  Service Content
------------------------------------------------------*/

.bella-service-content {
    padding-top: 7px;
}

.bella-service-content h3 {
    margin: 0 0 2px;
    color: #eee7dd;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.bella-service-content p {
    min-height: 48px;
    margin: 0 0 14px;
    color: #ded6cc;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
}

/*------------------------------------------------------
  Service Button
------------------------------------------------------*/

/* .bella-service-btn {
    display: inline-flex;
    font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 185px;
    padding: 9px 17px;
    border: 1px solid #b8893f;
    background-color: #050403;
    color: #e5c38a;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow:
        0 0 0 1px rgba(212, 168, 90, 0.18),
        0 0 15px rgba(212, 168, 90, 0.08);
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
} */

.bella-service-btn span {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.bella-service-btn:hover {
    background-color: #d4a85a;
    color: #000000;
    box-shadow:
        0 0 0 1px rgba(212, 168, 90, 0.6),
        0 0 22px rgba(212, 168, 90, 0.25);
}

.bella-service-btn:hover span {
    transform: translateX(3px);
}

.bella-service-btn:focus-visible {
    outline: 2px solid #f0d48a;
    outline-offset: 4px;
}



/*======================================================
  Bella Tu - Core Benefits Section
======================================================*/

.bella-benefits-section {
    position: relative;
    padding: 38px 0 42px;
    background-color: #000;
    border-top: 1px solid rgba(184, 137, 63, 0.55);
    border-bottom: 1px solid rgba(184, 137, 63, 0.55);
    overflow: hidden;
}



.bella-benefits-section .container {
    position: relative;
    z-index: 1;
    max-width: 1420px;
}

.bella-benefits-section .row {
    justify-content: center;
}

.bella-benefit-item {
    text-align: center;
    padding: 0 12px;
}

.bella-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    margin: 0 auto 4px;
}

.bella-benefit-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bella-benefit-item h3 {
    margin: 0 0 2px;
    color: #e5c38a;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
}

/* .bella-benefit-item p {
    margin: 0;
    color: #eee7dd;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25;
} */

.bella-benifit-col{width: 20%;}


/*======================================================
  Bella Tu - Appointment CTA Section
======================================================*/

.bella-appointment-section {
    position: relative;
    display: flex;
    align-items: center;
    background-image:
        linear-gradient(
            90deg,
            rgba(5, 4, 3, 0.88) 0%,
            rgba(5, 4, 3, 0.70) 38%,
            rgba(5, 4, 3, 0.20) 70%,
            rgba(5, 4, 3, 0.05) 100%
        ),
        url("../images/bella-tu-banner-img.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    height: 500px;
}

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

/*------------------------------------------------------
  Content
------------------------------------------------------*/

.bella-appointment-content {
    padding: 55px 0;
}

.bella-appointment-content h2 {
    margin: 0 0 25px;
    color: #e5c38a;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* .bella-appointment-content p {
    max-width: 780px;
    margin: 0 0 34px;
    color: #eee7dd;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.45;
} */

/*------------------------------------------------------
  Button
------------------------------------------------------*/

/* .bella-appointment-btn {
    display: inline-flex;
    font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 390px;
    padding: 15px 28px;
    border: 1px solid #b8893f;
    background: rgba(5, 4, 3, 0.65);
    color: #e5c38a;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow:
        0 0 0 1px rgba(212, 168, 90, 0.18),
        0 0 18px rgba(212, 168, 90, 0.10);
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
} */

#collapsibleNavbar{justify-content: center;}

.bella-appointment-btn span {
    font-size: 22px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.bella-appointment-btn:hover {
    background-color: #d4a85a;
    color: #050403;
    box-shadow:
        0 0 0 1px rgba(212, 168, 90, 0.65),
        0 0 25px rgba(212, 168, 90, 0.25);
}

.bella-appointment-btn:hover span {
    transform: translateX(4px);
}

.bella-appointment-btn:focus-visible {
    outline: 2px solid #f0d48a;
    outline-offset: 4px;
}


/*======================================================
  Bella Tu - Footer Information Section
======================================================*/

.bella-footer-section {
    position: relative;
    padding: 28px 0 30px;
    background-color: #050403;
    border-top: 1px solid rgba(184, 137, 63, 0.55);
    overflow: hidden;
}

.bella-footer-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 65% 100% at 50% 50%,
        rgba(58, 43, 24, 0.22) 0%,
        rgba(58, 43, 24, 0.06) 55%,
        rgba(58, 43, 24, 0) 80%
    );
}

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

.bella-footer-section .row {
    row-gap: 20px;
}

/*------------------------------------------------------
  Logo
------------------------------------------------------*/

.bella-footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.bella-footer-logo a {
    display: inline-block;
    line-height: 0;
}

.bella-footer-logo img {
    display: block;
    width: 190px;
    height: auto;
}

/*------------------------------------------------------
  Information
------------------------------------------------------*/

.bella-footer-info {
    display: flex;
    align-items: center;
    height: 100%;
}

.bella-footer-info p {
    margin: 0;
   color:#ded6cc;
    font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.45;
}

.bella-footer-info p a{
   color: #eee7dd;
    font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.45; 
    text-decoration: none;
}

/*------------------------------------------------------
  Social Links
------------------------------------------------------*/

.bella-footer-social {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.bella-footer-social a {
    color: #e5c38a;
    font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.bella-footer-social a:hover {
    color: #ffffff;
}


.copyright {
    padding: 10px 0;
    background-color: #050403;
   border-top: 1px solid rgba(184, 137, 63, 0.55);
    margin: 0px 0 0 0;
}

.copyright p {
    color: #ded6cc;
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    padding: 0 0;
    letter-spacing: 0.5px;
}

.Proudly_text {
    text-align: right;
}


.common-style h2{
    margin: 0 0 24px;
 color: #e0b978;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.35px;
    line-height: 42px;}

.common-style h3{color: #ded6cc;font-size: 30px;}
.common-style h4{color: #ded6cc;font-size: 26px;}
/*.bella-benefit-item h4{text-transform: uppercase;}*/
.bella-benefit-item p{color:#ded6cc;}
.bella-appointment-content p{color:#ded6cc;}












/*======================================================
  Responsive
======================================================*/


@media (min-width: 1200px) and (max-width: 1399.98px) {
    
    .bella-appointment-section{height: 430px;}
    .bella-appointment-content h2 {font-size: 28px;}
    .common-style h2{font-size: 30px;}
    .service-list {gap: 32px 10px;}
    .menu .nav-item{margin: 0 25px 0 0!important;}
    .navbar-nav .last-nav-item{margin:0!important;}


    
}




@media (max-width: 1199px) {

    .bella-service-image {
        height: 185px;
    }

    .bella-service-content h3 {
        font-size: 18px;
    }

    .bella-service-content p {
        font-size: 16px;
    }
}

@media (max-width: 991px) {

    .bella-services-section {
        padding: 55px 0 65px;
    }

    .bella-services-header {
        margin-bottom: 28px;
    }

    .bella-service-image {
        height: 165px;
    }

    .bella-service-btn {
        min-width: 165px;
        padding: 8px 12px;
        font-size: 11px;
    }
}

@media (max-width: 767px) {

    .bella-services-section {
        padding: 50px 0 60px;
    }

    .bella-services-header h2 {
        font-size: 20px;
    }

    .bella-services-row {
        row-gap: 40px;
    }

    .bella-service-image {
        height: 240px;
    }

    .bella-service-content h3 {
        font-size: 20px;
    }

    .bella-service-content p {
        min-height: auto;
        font-size: 17px;
    }
}

@media (max-width: 575px) {

    .bella-services-section {
        padding: 45px 15px 55px;
    }

    .bella-services-header {
        margin-bottom: 25px;
    }

    .bella-services-header .section-eyebrow {
        font-size: 20px;
        letter-spacing: 0.18em;
    }

    .bella-services-header h2 {
        font-size: 18px;
    }

    .bella-service-image {
        height: 210px;
    }

    .bella-service-content h3 {
        font-size: 18px;
    }

    .bella-service-content p {
        font-size: 16px;
    }
}


/*======================================================
  Responsive
======================================================*/

@media (max-width: 1199px) {

    .bella-benefit-icon {
        width: 115px;
        height: 115px;
    }

    .bella-benefit-item h3 {
        font-size: 17px;
    }

    .bella-benefit-item p {
        font-size: 19px;
    }
}

@media (max-width: 991px) {

    .bella-benefits-section {
        padding: 35px 0 40px;
    }

    .bella-benefit-item {
        margin-bottom: 28px;
    }

    .bella-benefit-icon {
        width: 115px;
        height: 115px;
    }
}

@media (max-width: 767px) {

    .bella-benefits-section {
        padding: 35px 0 25px;
    }

    .bella-benefit-item {
        margin-bottom: 25px;
    }

    .bella-benefit-icon {
        width: 105px;
        height: 105px;
        margin-bottom: 3px;
    }

    .bella-benefit-item h3 {
        font-size: 16px;
    }

    .bella-benefit-item p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {

    .bella-benefits-section {
        padding: 30px 0 20px;
    }

    .bella-benefit-item {
        padding: 0 5px;
        margin-bottom: 25px;
    }

    .bella-benefit-icon {
        width: 100px;
        height: 100px;
    }

    .bella-benefit-item h3 {
        font-size: 14px;
        letter-spacing: 0.06em;
    }

    .bella-benefit-item p {
        font-size: 17px;
    }
}

/*======================================================
  Responsive
======================================================*/

@media (max-width: 1199px) {

    .bella-appointment-section {
        min-height: 420px;
    }

    .bella-appointment-content h2 {
        font-size: 36px;
    }

    .bella-appointment-content p {
        font-size: 21px;
    }
}

@media (max-width: 991px) {

    .bella-appointment-section {
        min-height: 390px;
        background-position: 58% center;
    }

    .bella-appointment-content {
        padding: 50px 0;
    }

    .bella-appointment-content h2 {
        font-size: 32px;
    }

    .bella-appointment-content p {
        max-width: 600px;
        font-size: 20px;
    }

    .bella-appointment-btn {
        min-width: 350px;
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .bella-appointment-section {
        min-height: 500px;
        align-items: flex-start;
        background-position: 65% center;
    }

    .bella-appointment-section::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(5, 4, 3, 0.30);
        pointer-events: none;
    }

    .bella-appointment-content {
        position: relative;
        z-index: 2;
        padding: 55px 0;
    }

    .bella-appointment-content h2 {
        margin-bottom: 20px;
        font-size: 29px;
    }

    .bella-appointment-content p {
        font-size: 19px;
        line-height: 1.4;
        margin-bottom: 28px;
    }

    .bella-appointment-btn {
        min-width: 300px;
        padding: 13px 20px;
        font-size: 13px;
    }
}

@media (max-width: 575px) {

    .bella-appointment-section {
        min-height: 480px;
        background-position: 67% center;
    }

    .bella-appointment-content {
        padding: 45px 5px;
    }

    .bella-appointment-content h2 {
        font-size: 25px;
        letter-spacing: 0.04em;
    }

    .bella-appointment-content p {
        font-size: 18px;
    }

    .bella-appointment-btn {
        width: 100%;
        min-width: 0;
        font-size: 12px;
        letter-spacing: 0.06em;
    }
}