/*------------------------------------------------------------------
[Master Stylesheet]

Project: Yogastic
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Header
3. Banner Section
4. Our Services Section
5. About Us Section
6. Our Specialties Section
7. Get In Touch Section
8. What We Offer Section
9. Testimonial Section
10. Blog Posts Section
11. Subscribe Now Section
12. Footer Section
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:wght@400;500;600&family=Playfair+Display:wght@400;700&display=swap');
body {
    font-family: 'Karla', sans-serif;
}

:root {
    --e-global-color-primary: #242424;
    --e-global-color-secondary: #764979;
    --e-global-color-text: #6b6b6b;
    --e-global-color-accent: #413625;
    --e-global-color-white: #ffffff;
    --e-global-color-light-o:#fdf9e0;
    --e-global-color-soft-orange: #e1ccad;
    --e-global-color-desaturated-magenta: #543458;
    --e-global-color-olive: #d4bd39;
    --e-global-color-olive-bright:#dbba13;
    --e-global-color-olive-text: #806f0e;
    --e-global-color-darkgreen: #1c5123;
    --e-global-color-pale-blue: #f4f7ff;
}
:root {
    --f-global-color-: #351997;
    --f-global-gra:#003813;
background: linear-gradient(90deg, rgba(0, 56, 19, 1) 0%, rgba(221, 191, 19, 1) 100%);
  
}
html {
    scroll-behavior: smooth;
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    line-height: 82px;
    font-weight: 700;
    color: var(--e-global-color-pale-blue);
}

h2 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    line-height: 55px;
    font-weight: 700;
}

h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    line-height: 55px;
    font-weight: 700;
}

h4 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
}

h5 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
}

h6 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}

p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}

/* Home Page Style */

/* Home Page Header Section Style */

.banner-section-outer {
    background-image: url('../images/banner_section_background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.main_header {
    padding: 42px 128px 0;
}

.navbar-collapse ul {
    text-align: center;
    align-items: center;
    display: inherit;
}

.navbar-expand-lg {
    position: relative;
    z-index: 1;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}

.nav-link {
    padding: 0;
}

.navbar-brand {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* .navbar-nav {
    padding-left: 220px;
} */

.navbar-nav li {
    margin: 0 35px 0 18px;
}

.navbar-nav li:first-child {
    margin-left: 0;
}

.navbar-nav li:last-child {
    margin-right: 0;
    padding-right: 0;
}

.navbar-nav .nav-item a {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    color: var(--e-global-color-darkgreen) !important;
    transition: all 0.3s ease-in-out;
}

.navbar-nav .nav-item a:hover {
    color: var(--e-global-color-olive-text) !important;
    background-color: transparent;
}

.navbar-nav .active>a {
    color: var(--e-global-color-olive-text) !important;
}

.navbar-nav .dropdown {
    margin: 0 15px 0 20px;
}

.navbar-nav .nav-item .dropdown-item {
    color: var(--e-global-color-primary) !important;
    transition: all 0.3s ease-in-out;
}

.navbar-nav .nav-item .dropdown-item:hover {
    color: var(--e-global-color-primary) !important;
    background-color: var(--e-global-color-soft-orange) !important;
}

.navbar-nav .drop-down-pages .active>a {
    color: var(--e-global-color-primary) !important;
    background-color: var(--e-global-color-soft-orange) !important;
}

.navbar-collapse .drop-down-pages {
    text-align: left;
    margin-left: 0;
}

.navbar-nav .dropdown-menu {
    background-color: var(--e-global-color-white);
    position: absolute;
    left: -20px;
    top: 38px;
    padding: 0;
    border: none;
    box-shadow: 1px 1px 30px rgb(0 0 0 / 1%);
}

.navbar-nav .drop-down-pages li {
    margin: 0;
}

.navbar-nav .drop-down-pages .nav-item a {
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    padding: 12px 20px;
}

.navbar-expand-lg .drop-down-pages .nav-link {
    padding-left: 0;
}

.contact_us {
    background-color:var(--e-global-color-darkgreen);
    color: var(--e-global-color-white) !important;
    padding: 15px 23px;
    text-align: center;
    display: inline-block;
    border-radius: 30px 0px 30px 0px;
    transition: all 0.3s ease-in-out;
    font-size: 16px;
    
}
 .contact_us:hover {
    color: var(--e-global-color-pale-blue) !important;
    background-color: var(--e-global-color-darkgreen);
    border: 2px solid var(--e-global-color-darkgreen);
    text-decoration: none;
}

.navbar-nav .active>.contact_us {
    color: var(--e-global-color-primary) !important;
    background-color: var(--e-global-color-white);
}

.header-card {
    background-color: #ffffff;
    border-radius: 78px 0px;           
    padding: 24px 62px;              
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); 
}

.nav-main-flex {
    display: flex;
    align-items: center;
    width: 100%;
}
.nav-menu {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.nav-menu li {
    margin: 0 22px;
}
.nav-cta {
    margin-left: auto;
}
@media (max-width: 991px) {
    .nav-main-flex {
        flex-direction: column;
        gap: 20px;
    }

    .nav-menu {
        flex-direction: column;
        margin: 0;
    }

    .nav-cta {
        margin-left: 0;
    }
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* LOGO IMAGE */
.logo-wrap img {
    max-height: 70px;
}

/* SLOGAN TEXT */
.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    line-height: 18px;
    color: var(--e-global-color-darkgreen);
    white-space: nowrap;
}
/* MENU LINK BASE */
.nav-menu .nav-link {
    position: relative;
    padding-bottom: 6px;
}

/* UNDERLINE */
.nav-menu .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: var(--e-global-color-olive-text);
    transition: width 0.3s ease-in-out;
}

/* HOVER EFFECT */
.nav-menu .nav-link:hover::after {
    width: 100%;
}

/* Home Page Social Icons Style */

.left_icons {
    height: 860px;
    z-index: 1;
    position: relative;
}

.left_icons ul {
    background-color: var(--e-global-color-olive-bright);
    border-radius: 0 30px 30px 0;
}

.left_icons ul li {
    display: block;
    padding: 10px 15px 8px 10px;
}

.left_icons ul li i {
    border-radius: 100%;
    background: var(--e-global-color-darkgreen);
    color: var(--e-global-color-white);
    font-size: 18px;
    line-height: 48px;
    height: 48px;
    width: 48px;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.left_icons ul li i:hover {
    background-color: var(--e-global-color-white);
    color: var(--e-global-color-darkgreen);
}
/* ACTIVE LINK COLOR */
.nav-menu .active .nav-link {
    color: var(--e-global-color-olive-text);
    font-weight: 500;
}

/* ACTIVE UNDERLINE */
.nav-menu .active .nav-link::after {
    width: 100%;
}
header {
    position: sticky;
    top: 0;
    z-index: 999;
}
header.scrolled {
    background-color: #ffffff;
     box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.08); 
    transition: all 0.3s ease;
}



/* Home Page Banner Section Style */

.banner-section-outer .banner-section {
    padding: 50px 292px 138px;
    position: relative;
}

.banner-section-outer .banner-section .banner-section-content {
    padding-top: 168px;
}

.banner-section-outer .banner-section h5 {
    text-transform: uppercase;
    color: var(--e-global-color-pale-blue   );
    letter-spacing: 3.1px;
    margin-bottom: 0;
    background: var(--e-global-color-darkgreen);
    width: 100%;
    max-width: 325px;
    padding: 11px 35px;
    border-radius: 50px;
    font-weight: 600;
}

.banner-section-outer .banner-section h1 {
    margin-bottom: 18px;
    margin-left: -2px;
}

.banner-section-outer .ityped-cursor {
    font-size: 1em;
    opacity: 1;
    -webkit-animation: blink 0.3s infinite;
    -moz-animation: blink 0.3s infinite;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}

@keyframes blink {
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes blink {
    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    100% {
        opacity: 0;
    }
}

.banner-section-content h1 span {
    color: var(--e-global-color-white);
    border-right: var(--e-global-color-olive);
}

.banner-section-outer .banner-section p {
    color: var(--e-global-color-pale-blue);
    margin-bottom: 28px;
    padding-right: 60px;
    margin-left: -2px;
}

.banner-section-outer .banner-section-content .btn_wrapper {
    margin-bottom: 100px;
}

.btn_wrapper .getstarted_btn {
    position: relative;
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 50px;
    text-align: center;
    color: var(--e-global-color-accent);
    display: inline-block;
    background-color: var(--e-global-color-olive-bright);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

 .btn_wrapper .getstarted_btn:hover {
    color: var(--e-global-color-darkgreen);
    background-color: var(--e-global-color-darkgreen);
    transform: translateY(-10px);
}

.btn_wrapper .viewmore_btn {
    position: relative;
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 50px;
    text-align: center;
    color: var(--e-global-color-accent);
    display: inline-block;
    background-color: var(--e-global-color-olive);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

 .btn_wrapper .viewmore_btn:hover {
    color: var(--e-global-color-darkgreen);
    background-color: var(--e-global-color-white);
    transform: translateY(-10px);
    border: 1px solid var(--e-global-color-darkgreen);
}

.banner-section-outer .btn_wrapper .getstarted_btn:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.banner-section-outer .btn_wrapper .getstarted_btn:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-secondary) !important;
    background: var(--e-global-color-white);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

.banner-section-outer .banner-section .banner-section-content .top-btn i {
    font-size: 70px;
    line-height: 70px;
    color: var(--e-global-color-white);
    animation: float_img 6s ease-in-out infinite;
}

.banner-section-outer .banner-section .banner-section-content .top-btn i:hover {
    color: var(--e-global-color-soft-orange);
}

.banner-section-outer .banner-section .banner-section-image {
    position: relative;
    animation: float 6s ease-in-out infinite;
}

.banner-section-outer .banner-section .banner-section-image figure {
    position: absolute;
    top: -5px;
    left: -20px;
}

@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        transform: translatex(0px);
    }
    50% {
        box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
        transform: translatex(-20px);
    }
    100% {
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        transform: translatex(0px);
    }
}

.banner-section-outer .banner-section .banner_left_top_shape {
    position: absolute;
    top: -38px;
    left: 0;
}

.banner-section-outer .banner-section .banner_left_bottom_shape {
    position: absolute;
    top: 80px;
    left: 0;
}

.left_shape img {
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-30px);
    }
}

.banner-section-outer .banner-section .banner_right_top_shape {
    position: absolute;
    bottom: 200px;
    right: 0;
}

.banner-section-outer .banner-section .banner_right_bottom_shape {
    position: absolute;
    bottom: 80px;
    right: 0;
}

.right_shape img {
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-30px);
    }
}

/* Home Page Our Services Section Style */

.services_section {
    padding: 120px 0 130px;
    position: relative;
}

.services_section .services_content {
    text-align: center;
}

.services_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-darkgreen);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
        font-weight: 600;
}

.services_content h2 {
    margin-bottom: 20px;
    padding: 0 120px;
    color: var(--e-global-color-primary);
}

.services_content p {
    margin-bottom: 35px;
    padding: 0 110px;
    color: var(--e-global-color-text);
}

.services_section .services_box_content {
    transition: all 0.3s ease-in-out;
}

.services_section .services_box_content .services_box_upper_portion {
    margin-bottom: 10px;
    animation: float_img 6s ease-in-out infinite;
}

.services_section .services_box_content .services_box_upper_portion img {
    transition: all 0.3s ease-in-out;
}

@keyframes float_img {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-20px);
    }
    100% {
        transform: translatey(0px);
    }
}

.services_box_content .services_box_lower_portion h3 {
    margin-bottom: 0;
    font-size: 20px;
    text-align: center;
}

.services_box_content .services_box_lower_portion p {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
}

.services_box_content .services_box_lower_portion .btn_wrapper i {
    color: var(--e-global-color-pale-blue);
    background-color: var(--e-global-color-darkgreen);
    font-size: 26px;
    line-height: 26px;
    padding: 14px 17px;
    border-radius: 18px 0 18px 0;
    transition: all ease-in-out 0.3s;
}






/* Wrapper */
.services_box_content .services_box_lower_portion .btn_wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* READ MORE BUTTON */
.services_box_content .services_box_lower_portion .btn_wrapper .readmore-btn {
    background-color: var(--e-global-color-darkgreen);
    color: var(--e-global-color-pale-blue);
    border-radius: 18px 0 18px 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 22px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

/* ARROW BUTTON */
.services_box_content .services_box_lower_portion .btn_wrapper .arrow-btn {
    background-color: var(--e-global-color-darkgreen);
    color: var(--e-global-color-pale-blue);
    border-radius: 18px 0 18px 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    transition: all 0.3s ease-in-out;
}

/* Arrow icon size */
.services_box_content .services_box_lower_portion .btn_wrapper .arrow-btn i {
    font-size: 20px;
}

/* Hover for both */
.services_box_content .services_box_lower_portion .btn_wrapper .readmore-btn:hover,
.services_box_content .services_box_lower_portion .btn_wrapper .arrow-btn:hover {
    transform: translateY(-4px);
    opacity: 0.9;
}

































.services_box_content:hover {
    transform: translateY(-10px);
}

/* .services_section .services_box_content:hover .services_box_upper_portion img {
    opacity: 0.6;
} */

.services_box_content:hover .services_box_lower_portion .btn_wrapper i {
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-olive);
}

.services_section .services_left_shape {
    position: absolute;
    top: 115px;
    left: 0;
}

/* Remove old floating animation from the upper portion */
.services_section .services_box_content .services_box_upper_portion {
    margin-bottom: 30px;
    /* animation: float_img 6s ease-in-out infinite;  <-- comment/remove this */
}

/* Make the upper portion a 3D container with fixed ratio */
.services_box_upper_portion {
    position: relative;
    perspective: 1000px;      /* needed for 3D flip */
}




/* Ensure the arrow and text do NOT flip (they are outside the flip container already) */
/* No extra CSS needed here; just keep the arrow in .services_box_lower_portion */

/* Home Page About Us Section Style */

.aboutus_section {
    background-image: url('../images/aboutus_background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 100px 0 130px;
}

.aboutus_image {
    position: relative;
    z-index: 1;
}

.aboutus_image figure {
    margin-top: -12px;
}

.aboutus_section .aboutus_top_shape {
    position: absolute;
    top: -10px;
    left: -38px;
}

.aboutus_section .aboutus_bottom_shape {
    position: absolute;
    top: 250px;
    left: -65px;
}

.aboutus_content {
    padding-top: 145px;
    padding-left: 16px;
}

.aboutus_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-darkgreen);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
    font-weight: 600;
}

.aboutus_content h2 {
    margin-bottom: 18px;
    color: var(--e-global-color-primary);
}

.aboutus_content p {
    margin-bottom: 15px;
    color: var(--e-global-color-text);
}

.aboutus_content h6 {
    color: var(--e-global-color-secondary);
    margin-left: 16px;
    margin-bottom: 35px;
}

.aboutus_line_wrapper {
    position: relative;
}

.aboutus_line_wrapper .purple_line {
    position: absolute;
    left: 0;
    top: 5px;
}

.aboutus_content .btn_wrapper .get_started_btn {
    position: relative;
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 40px;
    text-align: center;
    color: var(--e-global-color-darkgreen);
    display: inline-block;
    background-color: var(--e-global-color-olive);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.aboutus_content .btn_wrapper .get_started_btn:hover {
    color: var(--e-global-color-white);
    background-color: none;
    border: 1px solid   var(--e-global-color-darkgreen);
    transform: translateY(-10px);
}

.aboutus_content .btn_wrapper .get_started_btn:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.aboutus_content .btn_wrapper .get_started_btn:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-white);
    background: var(--e-global-color-darkgreen);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

/* Home Page Our Specialties Section Style */

.our_specialties_section {
    background-color: var(--e-global-color-light-o);
    padding: 120px 0 108px;
    position: relative;
}

.our_specialties_heading_content {
    text-align: center;
}

.our_specialties_heading_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-darkgreen);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
    font-weight: 600;
}

.our_specialties_heading_content h2 {
    margin-bottom: 18px;
    color: var(--e-global-color-primary);
}

.our_specialties_heading_content p {
    margin-bottom: 35px;
    padding: 0 95px;
    color: var(--e-global-color-text);
}

.s1 {
    padding-top: 110px;
    padding-right: 25px;
}

.s2 {
    padding-right: 70px;
}

.s3 {
    padding-right: 75px;
}

.s4 {
    padding-right: 25px;
}

.specialties_content_wrapper {
    position: relative;
}

.specialties_content {
    text-align: right;
    margin-bottom: 46px;
    position: relative;
}

.specialties_content .specialties_name {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--e-global-color-primary);
    margin-bottom: 6px;
}

.specialties_content .specialties_paragraph {
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: var(--e-global-color-text);
    margin-bottom: 0;
}

.specialties_left_line {
    position: absolute;
    top: 120px;
    right: -50px;
}

.specialties_left_line img {
    height: 390px;
}

.specialties_content::after {
    content: "\f058";
    height: 76px;
    width: 76px;
    background-color: var(--e-global-color-darkgreen);
    position: absolute;
    border-radius: 100%;
    z-index: 1;
    text-align: center;
    padding: 5px;
    font-weight: 400;
    font-size: 42px;
    line-height: 64px;
    color: var(--e-global-color-white);
    font-family: 'Font Awesome 6 Free';
}

.s1::after {
    top: 110px;
    right: -78px;
}

.s2::after {
    top: 0px;
    right: -30px;
}

.s3::after {
    top: 0;
    right: -30px;
}

.s4::after {
    top: 0;
    right: -78px;
}

.specialties_content2 {
    text-align: left;
}

.specialties_content2::after {
    content: "\f058";
    height: 76px;
    width: 76px;
    background-color: var(--e-global-color-darkgreen);
    position: absolute;
    border-radius: 100%;
    z-index: 1;
    text-align: center;
    padding: 5px;
    font-weight: 400;
    font-size: 42px;
    line-height: 64px;
    color: var(--e-global-color-white);
    font-family: 'Font Awesome 6 Free';
}

.s5 {
    padding-top: 110px;
    padding-left: 24px;
}

.s6 {
    padding-left: 74px;
}

.s7 {
    padding-left: 74px;
}

.s8 {
    padding-left: 24px;
}

.s5::after {
    top: 110px;
    left: -78px;
}

.s6::after {
    top: 0px;
    left: -30px;
}

.s7::after {
    top: 0;
    left: -30px;
}

.s8::after {
    top: 0;
    left: -78px;
}

.specialties_right_line {
    position: absolute;
    top: 120px;
    left: -50px;
}

.specialties_right_line img {
    height: 390px;
}

.our_specialties_section .specialties_image {
    text-align: center;
    animation: float_img 6s ease-in-out infinite;
}

.our_specialties_section .our_specialties_right_shape {
    position: absolute;
    top: 150px;
    right: 0;
}

/* Home Page Get In Touch Section Style */
/* Home Page Get In Touch Section Style */

.get_in_touch_section {
    padding: 120px 0 130px;
    position: relative;
    overflow: hidden;
}

/* Left yellow & right image halves as full-height backgrounds */
.get_in_touch_section::before,
.get_in_touch_section::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;          /* full section height – removes white gaps */
    z-index: 0;
}

/* Left yellow background */
.get_in_touch_section::before {
    left: 0;
    width: 50%;
    background: var(--e-global-color-olive-bright);
}

/* Right image background – FULL COVER, visible on ALL devices */
.get_in_touch_section::after {
    right: 0;
    width: 50%;
    background-image: url("../images/get-in-toch.webp");
    background-size: cover;         /* makes it cover fully */
    background-position: center;
    background-repeat: no-repeat;
}

/* Ensure content is above the background halves */
.get_in_touch_section > .container {
    position: relative;
    z-index: 1;
}

/* -------- Existing content styles (unchanged) -------- */

.get_in_touch_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-pale-blue);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
    font-weight: 600;
}

.get_in_touch_content h2 {
    color: var(--e-global-color-primary);
    margin-bottom: 32px;
    padding-right: 25px;
}

.get_in_touch_content input {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    background-color: var(--e-global-color-white);
    color: var(--e-global-color-text);
    padding-top: 28px;
    padding-bottom: 28px;
    padding-left: 20px;
    border-radius: 0;
    width: 98%;
    margin-bottom: 16px;
    outline: none;
    border: none;
}

.get_in_touch_content .form_style {
    margin-left: -18px;
}

.get_in_touch_content textarea {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    background-color: var(--e-global-color-white);
    color: var(--e-global-color-text);
    border-radius: 0;
    padding: 18px 20px;
    width: 96%;
    outline: none;
    resize: none;
    height: 115px;
    margin-bottom: 42px;
    border: none;
}

.get_in_touch_content .form-control:focus {
    box-shadow: none;
    outline: none;
    border: none;
}

textarea {
    overflow: auto;
}

.get_in_touch_content button {
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 40px;
    text-align: center;
    color: var(--e-global-color-white);
    display: inline-block;
    background-color: var(--e-global-color-darkgreen);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    outline: none;
    border: none;
    overflow: hidden;
    position: relative;
}

.get_in_touch_content button:hover {
    color: var(--e-global-color-darkgreen);
    background-color: var(--e-global-color-white);
    border: 2px solid var(--e-global-color-darkgreen);
}

.get_in_touch_content button:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.get_in_touch_content button:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-secondary);
    background-color: var(--e-global-color-white);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

.get_in_touch_section .get_in_touch_shape {
    position: absolute;
    bottom: 210px;
    left: -400px;
}

/* Home Page Testimonial Section Style */

.testimonial_section {
    background-image: url('../images/testimonial_background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 145px 0 135px;
    position: relative;
}

.testimonial_content {
    text-align: center;
}

.testimonial_content i {
    font-size: 140px;
    line-height: 88px;
    color: var(--e-global-color-darkgreen);
    margin-bottom: 35px;
}

.testimonial_content .testimonial_paragraph {
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    color: var(--e-global-color-primary);
    padding: 0 52px 0 55px;
    margin-bottom: 26px;
}

.testimonial_content figure {
    margin-bottom: 18px;
}

.testimonial_content .testimonial_person_name {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    line-height: 24px;
    font-weight: 400;
    color: var(--e-global-color-primary);
    margin-bottom: 5px;
}

.testimonial_content span {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: var(--e-global-color-text);
}

.testimonial_section .testimonial_left_shape {
    position: absolute;
    left: 0;
    top: 78px;
}

.testimonial_section .testimonial_right_shape {
    position: absolute;
    right: 0;
    bottom: 78px;
}

#carouselExampleControls .carousel-control-prev {
    left: -112px;
    top: -70px;
    font-size: 50px;
    line-height: 50px;
    color: var(--e-global-color-darkgreen);
    opacity: 1;
}

#carouselExampleControls .carousel-control-prev i {
    transition: all 0.3s ease-in-out;
}

#carouselExampleControls .carousel-control-prev i:hover {
    color: var(--e-global-color-soft-orange);
}

#carouselExampleControls .carousel-control-next {
    right: -112px;
    top: -70px;
    font-size: 50px;
    line-height: 50px;
    color: var(--e-global-color-darkgreen);
    opacity: 1;
}

#carouselExampleControls .carousel-control-next i {
    transition: all 0.3s ease-in-out;
}

#carouselExampleControls .carousel-control-next i:hover {
    color: var(--e-global-color-soft-orange);
}

/* Home Page Blog Posts Section Style */

/* .blog_posts_section {
    padding: 0px 0 130px;
    position: relative;
}

.blog_posts_content {
    text-align: center;
}

.blog_posts_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-secondary);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
}

.blog_posts_content h2 {
    margin-bottom: 18px;
    color: var(--e-global-color-primary);
}

.blog_posts_content p {
    margin-bottom: 35px;
    padding: 0 95px;
    color: var(--e-global-color-text);
}

.blog_posts_image {
    margin-bottom: 45px;
    animation: float_img 6s ease-in-out infinite;
    transition: all 0.3s ease-in-out;
}

.blog_posts_image_content {
    position: absolute;
    bottom: 22px;
    left: 40px;
}

.blog_posts_image_content span {
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-secondary);
    padding: 5px 18px;
    border-radius: 15px 0 15px 0;
    margin-bottom: 15px;
    display: inline-block;
}

.blog_posts_image_content h4 {
    color: var(--e-global-color-white);
    margin-bottom: 22px;
    padding-right: 30px;
}

.blog_posts_image_content i {
    font-size: 20px;
    line-height: 20px;
    color: var(--e-global-color-white);
    transition: all 0.3s ease-in-out;
}

.blog_posts_image:hover .blog_posts_image_content i {
    color: var(--e-global-color-soft-orange);
}

.blog_posts_section .btn_wrapper {
    text-align: center;
}

.blog_posts_section .btn_wrapper .view_blog {
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 36px;
    text-align: center;
    color: var(--e-global-color-accent);
    display: inline-block;
    background-color: var(--e-global-color-soft-orange);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.blog_posts_section .btn_wrapper .view_blog:hover {
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-secondary);
    transform: translateY(-10px);
}

.blog_posts_section .btn_wrapper .view_blog:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.blog_posts_section .btn_wrapper .view_blog:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-secondary);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

.blog_posts_section .blog_posts_left_shape {
    position: absolute;
    left: 0;
    bottom: -110px;
}

.blog_posts_section .blog_posts_right_shape {
    position: absolute;
    right: 0;
    bottom: 302px;
} */

/* Home Page Subscribe Section Style */

.subscribe_section {
    z-index: 1;
    position: relative;
    padding-top:100px;
}

.subscribe_background_image {
    background-image: url('../images/subscribe_background-1.png');
    background-repeat: no-repeat;
    position: relative;
    padding: 118px 80px 130px;
}

.subscribe_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-darkgreen);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
    font-weight: 600;
}

.subscribe_content h2 {
    color: var(--e-global-color-primary);
    margin-bottom: 32px;
}

.subscribe_content input {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    background-color: var(--e-global-color-white);
    color: var(--e-global-color-text);
    padding-top: 25px;
    padding-bottom: 28px;
    padding-left: 20px;
    border-radius: 0;
    width: 90%;
    margin-bottom: 26px;
    outline: none;
    border: none;
}

.subscribe_content button {
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
    padding: 20px 39px;
    text-align: center;
    color: var(--e-global-color-white);
    display: inline-block;
    background-color: var(--e-global-color-darkgreen);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    outline: none;
    border: none;
    overflow: hidden;
    position: relative;
}

.subscribe_content button:hover {
    color: var(--e-global-color-darkgreen);
    background-color: var(--e-global-color-white);
    transform: translateY(-10px);
}

.subscribe_content button:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.subscribe_content button:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-secondary);
    background-color: var(--e-global-color-white);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

.subscribe_content .form-control:focus {
    box-shadow: none;
    outline: none;
    border: none;
}

.subscribe_background_image .subscribe_image {
    position: absolute;
    bottom: -71px;
    right: -163px;
}

/* Form validation states */
.form-control.is-invalid {
    border-color: #dc3545;
}

.error-message {
    font-size: 13px;
    margin-top: 4px;
}

/* Home Page Footer Section Style */

.footer-section {
    position: relative;
    background-color: var(--e-global-color-light-o);
    padding: 308px 0 0px;
    margin-top: -428px;
}

.middle-portion {
    margin-top: 36px;
    margin-bottom: 42px;
}

.middle-portion .footer_logo {
    padding-top: 5px;
}

.middle-portion .footer_logo img {
    width: 200px;     /* increase this */
    max-width: none;  /* overrides Bootstrap */
    height: auto;
}



.middle-portion .about_col {
    margin-left: -8px;
}

.middle-portion .about_col h4 {
    margin-bottom: 18px;
    padding-left: 2px;
}

.middle-portion h4 {
    color: var(--e-global-color-darkgreen);
    margin-bottom: 16px;
}

.middle-portion ul {
    margin-bottom: 0;
}

.middle-portion .about_col ul li p {
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: var(--e-global-color-darkgreen);
    margin-bottom: 24px;
}

.middle-portion ul .icons {
    display: inline-block;
    margin-right: 8px;
}

.middle-portion ul .icons i {
    border-radius: 100%;
    background: var(--e-global-color-darkgreen);
    color: var(--e-global-color-pale-blue);
    font-size: 18px;
    line-height: 48px;
    height: 48px;
    width: 48px;
    text-align: center;
    margin-right: 0;
    transition: all 0.3s ease-in-out;
}

.middle-portion ul .icons i:hover {
    color: var(--e-global-color-darkgreen);
    background-color: var(--e-global-color-white);
    border: 2px solid var(--e-global-color-darkgreen);
    transform: translateY(-5px);
}

.middle-portion li a {
    text-decoration: none;
    color: var(--e-global-color-darkgreen);
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    transition: all 0.3s ease-in-out;
}

.middle-portion .links_col {
    padding-left: 42px;
}

.middle-portion .contact_col {
    padding-right: 15px;
    margin-left: -42px;
}

.middle-portion .contact_col ul li {
    margin-bottom: 8px;
}

.middle-portion li i {
    color: var(--e-global-color-darkgreen);
    margin-right: 12px;
    transition: all 0.3s ease-in-out;
}

.middle-portion li .location {
    margin-right: 15px;
}

.middle-portion .contact_col li span {
    color: var(--e-global-color-darkgreen);
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
}

.middle-portion li a:hover {
    color: var(--e-global-color-soft-orange);
}

.middle-portion .contact_col ul .contact_icons:hover i {
    color: var(--e-global-color-soft-orange);
}

.bottom-portion {
    border-top: 1px solid var(--e-global-color-darkgreen);
    text-align: center;
}

.copyright {
    padding: 24px 0;
}

.copyright p {
    color: var(--e-global-color-darkgreen);
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    margin: 0;
}

.footer_shape figure {
    position: absolute;
    bottom: 120px;
    right: 0;
}



/* About Page Style */

/* About Page Sub Banner Section Style */

.sub-banner-section {
    background-image: url('../images/banner_section_background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sub-banner-section .banner-section {
    padding: 58px 0 58px;
    position: relative;
}

.sub-banner-section .banner-section .banner-section-content {
    text-align: center;
}

.sub-banner-section .banner-section h1 {
    margin-bottom: 16px;
}

.sub-banner-section .banner-section p {
    color: var(--e-global-color-white);
    padding: 0 60px;
    margin-bottom: 26px;
}

.sub-banner-section .banner-section .btn_wrapper {
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    padding: 14px 24px;
    text-align: center;
    background-color: var(--e-global-color-darkgreen);
    color: var(--e-global-color-white);
    display: inline-block;
    border-radius: 25px 0 25px 0;
    transition: all 0.3s ease-in-out;
}

.sub-banner-section .banner-section .btn_wrapper .sub_home_span {
    margin-right: 8px;
}

.sub-banner-section .banner-section .btn_wrapper i {
    font-size: 14px;
}

.sub-banner-section .banner-section .btn_wrapper .sub_span {
    color: var(--e-global-color-soft-orange);
    margin-left: 8px;
}

.sub-banner-section .banner-section .banner_left_top_shape {
    position: absolute;
    top: -8px;
    left: 0;
}

.sub-banner-section .banner-section .banner_left_bottom_shape {
    position: absolute;
    top: 112px;
    left: 0;
}

.sub-banner-section .banner-section .banner_right_top_shape {
    position: absolute;
    bottom: 222px;
    right: 0;
}

.sub-banner-section .banner-section .banner_right_bottom_shape {
    position: absolute;
    bottom: 98px;
    right: 0;
}

/* About Page About Us Section Style */

.aboutpage_aboutus_section {
    padding: 132px 0;
}

.aboutpage_aboutus_image {
    position: relative;
    z-index: 999;
        width: 100%;
    max-width: 90%;
}

.aboutpage_aboutus_image figure {
    margin-top: -12px;
}

.aboutpage_aboutus_section .aboutus_top_shape {
    position: absolute;
    top: 6px;
    left: -36px;
    z-index: 0;
}

.aboutpage_aboutus_section .aboutus_bottom_shape {
    position: absolute;
    top: 265px;
    left: -62px;
    z-index: -1;
}

/* .aboutpage_aboutus_content {
    padding-top: 110px;
} */

.aboutpage_aboutus_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-darkgreen);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
    font-weight: 600;
}

.aboutpage_aboutus_content h2 {
    margin-bottom: 18px;
    color: var(--e-global-color-primary);
}

.aboutpage_aboutus_content p {
    margin-bottom: 12px;
    color: var(--e-global-color-text);
}

.aboutpage_aboutus_content .margin_bottom {
    margin-bottom: 30px;
}

.aboutpage_aboutus_content .box {
    width: 48%;
    background-color: var(--e-global-color-white);
    display: inline-block;
    align-items: center;
    padding: 20px 24px 15px;
    border-radius: 30px 0 30px 0;
    margin-bottom: 22px;
    margin-right: 12px;
    box-shadow: 1px 1px 50px rgb(0 0 0 / 7%);
    transition: all 0.3s ease-in-out;
    position: relative;
}

.aboutpage_aboutus_content .box i {
    position: absolute;
    left: 22px;
    top: 24px;
    border-radius: 100%;
    border: 2px solid var(--e-global-color-darkgreen);
    height: 38px;
    width: 38px;
    text-align: center;
    font-size: 18px;
    line-height: 36px;
    color: var(--e-global-color-darkgreen);
}

.aboutpage_aboutus_content .box span {
    font-size: 18px;
    line-height: 21px;
    font-weight: 600;
    padding-left: 50px;
    display: inline-block;
    color: var(--e-global-color-primary);
}

.aboutpage_aboutus_content .box:hover {
    transform: translateY(-10px);
}

/* About Page Discount Section Style */

.discount_section {
    background-image: url('../images/about-us/discount_background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 120px 0 130px;
}

.discount_content {
    text-align: center;
}

.discount_content h2 {
    margin-bottom: 18px;
    color: var(--e-global-color-primary);
    padding: 0 230px;
}

.discount_content span {
    color: var(--e-global-color-darkgreen);
}

.discount_content p {
    margin-bottom: 35px;
    /* padding: 0 160px; */
    color: var(--e-global-color-text);
}

.discount_content .btn_wrapper .get_started {
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 50px;
    text-align: center;
    color: var(--e-global-color-accent);
    display: inline-block;
    background-color: var(--e-global-color-olive-bright);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.discount_content .btn_wrapper .get_started:hover {
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-secondary);
    transform: translateY(-10px);
}

.discount_content .btn_wrapper .get_started:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.discount_content .btn_wrapper .get_started:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-darkgreen);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

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

/* Center heading + subtitle */
.discount_content {
    text-align: center;
}

/* White pill-shaped block – similar to About page cards */
.treatment_shell {
    max-width: 1120px;
    margin: 40px auto 0;
    background-color: #ffffff;
    border-radius: 36px;
    padding: 40px 40px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}

/* Layout of cards inside the shell */
.treatment_cards {
    margin: 0;
}

/* Individual card */
.treatment_card {
    background: #ffffff;
    border-radius: 24px;
    padding: 22px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    height: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Number badge for each step */
.step_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--e-global-color-olive);
    color: var(--e-global-color-darkgreen);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 14px;
}

/* Card title */
.treatment_card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--e-global-color-darkgreen);
    margin-bottom: 8px;
}

/* Card text */
.treatment_card p {
    font-size: 20px;
    padding-top: 10px;
    line-height: 1.3;
    color: var(--e-global-color-text);
    margin-bottom: 0;
}

/* Hover interaction – subtle but engaging */
.treatment_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
    background-color: #faf7ea; /* soft warm tint – adjust to your palette */
}

/* Slight color shift on badge when hovering the card */
.treatment_card:hover .step_badge {
    background-color: var(--e-global-color-darkgreen);
    color: #ffffff;
}

/* Button spacing */
.discount_content .btn_wrapper {
    margin-top: 45px;
}

/* ---------- Responsive tweaks ---------- */

@media (max-width: 1199.98px) {
    .treatment_shell {
        max-width: 100%;
        padding: 32px 28px 24px;
        border-radius: 30px;
    }

    .treatment_card {
        border-radius: 20px;
    }
}

@media (max-width: 991.98px) {
    .discount_section {
        padding: 90px 0 100px;
    }

    .treatment_shell {
        padding: 28px 22px 20px;
        margin-top: 32px;
    }

    .treatment_card {
        margin-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .treatment_shell {
        padding: 22px 16px 18px;
        border-radius: 24px;
    }

    .treatment_card {
        padding: 18px 16px;
    }

    .treatment_card h3 {
        font-size: 16px;
    }

    .treatment_card p {
        font-size: 13px;
    }

    .step_badge {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}




/* About Page Our Mission Section Style */

.mission_section {
    padding: 130px 0 130px;
    position: relative;
}

.mission_section .mission_box {
    width: 100%;
    background-color: var(--e-global-color-white);
    border-radius: 200px 0 200px 0;
    box-shadow: 1px 1px 50px rgb(0 0 0 / 7%);
}

.mission_content {
       padding: 140px 0px 0px 85px;
}

.mission_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-darkgreen);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
    font-weight: 600;
}

.mission_content h2 {
    margin-bottom: 16px;
    color: var(--e-global-color-primary);
}

.mission_content p {
    margin-bottom: 32px;
    color: var(--e-global-color-text);
    padding-right: 25px;
}

.mission_content .btn_wrapper .read_more_btn {
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 44px;
    text-align: center;
    color: var(--e-global-color-white);
    display: inline-block;
    background-color: var(--e-global-color-secondary);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.mission_content .btn_wrapper .read_more_btn:hover {
    color: var(--e-global-color-accent);
    background-color: var(--e-global-color-soft-orange);
    transform: translateY(-10px);
}

.mission_content .btn_wrapper .read_more_btn:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.mission_content .btn_wrapper .read_more_btn:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-accent);
    background-color: var(--e-global-color-soft-orange);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

.mission_section .mission_right_shape {
    position: absolute;
    top: 210px;
    right: 0;
}

/* About Page Our Vision Section Style */

.vision_section {
    padding: 45px 0 130px;
    position: relative;
}

.vision_section .vision_box {
    width: 100%;
    background-color: var(--e-global-color-white);
    border-radius: 200px 0 200px 0;
    box-shadow: 1px 1px 50px rgb(0 0 0 / 7%);
}

.vision_content {
    padding: 120px 0px 10px 40px;
}
.vision_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-darkgreen);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
    font-weight: 600;
}

.vision_content h2 {
    margin-bottom: 16px;
    color: var(--e-global-color-primary);
}

.vision_content p {
    margin-bottom: 32px;
    color: var(--e-global-color-text);
    padding-right: 60px;
}

.vision_content .btn_wrapper .read_more_btn {
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 44px;
    text-align: center;
    color: var(--e-global-color-white);
    display: inline-block;
    background-color: var(--e-global-color-secondary);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.vision_content .btn_wrapper .read_more_btn:hover {
    color: var(--e-global-color-accent);
    background-color: var(--e-global-color-soft-orange);
    transform: translateY(-10px);
}

.vision_content .btn_wrapper .read_more_btn:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.vision_content .btn_wrapper .read_more_btn:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-accent);
    background-color: var(--e-global-color-soft-orange);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

.vision_section .vision_left_shape {
    position: absolute;
    top: 140px;
    left: 0;
}


/* Services Page Style */

/* Services Page Services Section Style */

.services_section .services_page_services_right_shape {
    position: absolute;
    top: 115px;
    right: 0;
}

/* Pricing Page Style */

/* Pricing Page Pricing Plans Section Style */

.pricing_plans_section_padding {
    padding: 120px 0 130px;
}


/* Contact Page Message Section Style */

.message_section {
    padding: 120px 0 130px;
    background-color: var(--e-global-color-white);
}

.message_content h5 {
    text-transform: uppercase;
    color: var(--e-global-color-darkgreen);
    letter-spacing: 3.1px;
    margin-bottom: 12px;
}

.message_content h2 {
    color: var(--e-global-color-primary);
    margin-bottom: 18px;
}

.message_content p {
    padding-right: 100px;
    margin-bottom: 36px;
    color: var(--e-global-color-text);
}

.message_content input {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    background-color: var(--e-global-color-white);
    color: var(--e-global-color-text);
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 25px;
    border-radius: 0;
    width: 90%;
    margin-bottom: 28px;
    outline: none;
    border: none;
    box-shadow: 1px 1px 50px rgb(0 0 0 / 5%);
}

.message_content .form_style {
    margin-left: -40px;
}

.message_content textarea {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    background-color: var(--e-global-color-white);
    color: var(--e-global-color-text);
    border-radius: 0;
    padding: 18px 25px;
    width: 90%;
    outline: none;
    resize: none;
    height: 128px;
    margin-bottom: 42px;
    border: none;
    box-shadow: 1px 1px 50px rgb(0 0 0 / 5%);
}

.message_content .form-control:focus {
    box-shadow: none;
    outline: none;
    border: none;
}

textarea {
    overflow: auto;
}

.message_content button {
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 40px;
    text-align: center;
    color: var(--e-global-color-white);
    display: inline-block;
    background-color: var(--e-global-color-darkgreen);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    outline: none;
    border: none;
    overflow: hidden;
    position: relative;
}

.message_content button:hover {
    color: var(--e-global-color-darkgreen);
    background-color: var(--e-global-color-olive);
    transform: translateY(-10px);
}

.message_content button:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.message_content button:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-olive);
    transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
}

.message_section .box_padding {
    margin-top: 10px;
}

.message_section .box {
    box-shadow: 1px 1px 50px rgb(0 0 0 / 5%);
    width: 380px;
    transition: all 0.3s ease-in-out;
    border-radius: 45px 0 45px 0;
    background-color: var(--e-global-color-white);
    padding: 30px 18px 40px;
    margin-left: -30px;
    margin-bottom: 30px;
}

.message_section .box .box_wrapper {
    position: relative;
    padding-left: 20px;
    margin-top: -12px;
    display: inline-block;
    width: 74%;
}

.message_section .box .box_wrapper h3 {
    margin-bottom: 5px;
    color: var(--e-global-color-primary);
}

.message_section .box .box_wrapper p {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    margin-top: -10px;
    margin-bottom: 11px;
    color: var(--e-global-color-text);
}

.message_section .box .box_wrapper a {
    color: var(--e-global-color-text);
    transition: all 0.3s ease-in-out;
}

.message_section .box .box_wrapper a:hover {
    color: var(--e-global-color-soft-orange);
}

.message_section .box .box_image_content {
    float: left;
    width: 26%;
}

.message_section .box .box_image_content figure {
    background-color: var(--e-global-color-darkgreen);
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 100px;
    transition: all 0.3s ease-in-out;
}

.message_section .box:hover .box_image_content figure {
    background-color: var(--e-global-color-olive);
}

/* Contact Page Contact Map Section Style */

.contact_map_section {
    overflow: hidden;
    margin-bottom: -10px;
}

/* Contact Page Contact Subscribe Section Style */

.contact_subscribe_section {
    margin-top: -200px;
}

/* Blog Posts Page Style */

.blog-posts {
    padding: 120px 0 130px;
}

.single-post .single-post-heading {
    font-size: 30px !important;
}




/* Gallery Page */

/* ---------- GALLERY HERO ---------- */

.gallery-hero {
    padding: 110px 0 70px;
    background: linear-gradient(
        180deg,
        #f8faf9 0%,
        #ffffff 45%,
        #fdf8ea 100%
    );
}

.gallery-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    color: var(--e-global-color-olive-text);
    margin-bottom: 10px;
}

.gallery-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 600;
    color: var(--e-global-color-darkgreen);
    margin-bottom: 12px;
}

.gallery-hero h1 span {
    color: var(--e-global-color-olive-text);
}

.gallery-subtitle {
    font-size: 16px;
    color: #555;
    max-width: 520px;
    margin: 0 auto;
}

/* ---------- GALLERY SECTION ---------- */

.gallery-section {
    padding: 0 0 110px;
    background-color: transparent;
}

/* Filter buttons */
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px 18px;
    margin: 80px 0px 40px;
}

.gallery-filter .filter-btn {
    border: none;
    outline: none;
    background-color: var(--e-global-color-darkgreen);
    color: var(--e-global-color-pale-blue);
    font-size: 20px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s ease;
}

.gallery-filter .filter-btn.active {
    background-color: var(--e-global-color-olive);
    color: var(--e-global-color-darkgreen);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

/* White rounded container for grid */
.gallery-shell {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 32px 26px 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

/* Card & image */
.gallery-card {
    border-radius: 20px;
    overflow: hidden;
    background-color: #000;
    position: relative;
}

.gallery-img-wrap {
    position: relative;
    overflow: hidden;
}

.gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Overlay on hover */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 18px 16px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.gallery-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 4px;
}

.gallery-cat {
    font-size: 13px;
    color: #f7e7a8;
    margin-bottom: 6px;
}

.gallery-zoom {
    align-self: flex-start;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background-color: var(--e-global-color-olive);
    color: var(--e-global-color-darkgreen);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Hover states */
.gallery-card:hover .gallery-img-wrap img {
    transform: scale(1.07);
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Filter hide class */
.gallery-item.is-hidden {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* ---------- LIGHTBOX ---------- */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;            
    transition: opacity 0.35s ease;    
    z-index: 1050;
}

.gallery-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.gallery-lightbox-inner {
    max-width: 760px;          
    width: 70%;                
    max-height: 80vh;         
    background-color: #ffffff;
    border-radius: 16px;
    padding: 14px 14px 20px;
    position: relative;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);

    /* open/close animation (scale + fade) */
    transform: scale(0.85) translateY(20px);
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1),
        opacity 0.35s ease;
}
.gallery-lightbox.open .gallery-lightbox-inner {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.gallery-lightbox-inner img {
    width: 100%;
    height: auto;
    max-height: 70vh;  
    border-radius: 10px;
    display: block;
    object-fit: contain;
}


.gallery-lightbox-inner p {
    margin: 18px 4px 0;
    font-size: 20px;
    color: var(--e-global-color-darkgreen);
    text-align: center;
}

.gallery-lightbox-close {
    position: absolute;
    top: 6px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--e-global-color-white);
    transition: color 0.2s ease, transform 0.2s ease;
}
.gallery-lightbox-close:hover {
    color: #000;
    transform: scale(1.1);
}
/* ---------- RESPONSIVE ---------- */

@media (max-width: 991.98px) {
    .gallery-hero {
        padding: 90px 0 50px;
    }
    .gallery-hero h1 {
        font-size: 32px;
    }
    .gallery-shell {
        padding: 24px 18px 18px;
        border-radius: 24px;
    }
}

@media (max-width: 575.98px) {
    .gallery-hero {
        padding: 80px 0 40px;
    }
    .gallery-hero h1 {
        font-size: 26px;
    }
    .gallery-shell {
        padding: 18px 12px 14px;
    }
    .gallery-filter .filter-btn {
        font-size: 13px;
        padding: 6px 14px;
    }
}

.footer_logo {
    background: #ffffff;
    padding: 14px 16px;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    max-width: 220px;
}

.footer_logo img {
    max-width: 190px;
    height: auto;
    display: block;
    margin: auto;
}

.middle-portion .row {
    justify-content: center;
}


.footer-logo-wrapper {
    padding-top: 100px;
}










/* =========================================
   subscribe.css — Form + Modal Styles
   ========================================= */

/* --- Error state: red border, no message --- */
#emailadd.input-error {
    border-color: #e53e3e !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Remove error highlight on focus after correction */
#emailadd:focus {
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
}

/* =========================================
   Modal Overlay
   ========================================= */
.modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* =========================================
   Modal Box
   ========================================= */
.modal-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
    opacity: 0;
}

.modal-overlay.is-visible .modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* =========================================
   Modal Icon
   ========================================= */
.modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ebf8f0;
    color: #38a169;
    margin: 0 auto 1.25rem;
}

.modal-icon svg {
    width: 40px;
    height: 40px;
}

/* =========================================
   Modal Content
   ========================================= */
.modal-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 0.5rem;
    letter-spacing: -0.3px;
}

.modal-message {
    font-size: 0.95rem;
    color: #718096;
    margin: 0 0 1.75rem;
    line-height: 1.55;
}

/* =========================================
   Modal Button
   ========================================= */
.modal-btn {
    display: inline-block;
    padding: 0.65rem 2.25rem;
    background: #3182ce;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.modal-btn:hover {
    background: #2b6cb0;
    transform: translateY(-1px);
}

.modal-btn:active {
    transform: translateY(0);
}



/* whatsapp */
.wa-sticky {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #25D366;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
  overflow: hidden;
  transition: gap 0.35s ease;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
}

.wa-sticky .wa-icon-part {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.wa-sticky .wa-text-part {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  transition: max-width 0.4s ease, padding 0.4s ease;
  padding: 0;
}

.wa-sticky:hover .wa-text-part {
  max-width: 170px;
  padding: 0 18px 0 0;
}

/* Pulse ring animation */
.wa-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  animation: wa-sticky-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes wa-sticky-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50%       { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}




  /* ── Remove flip styles ── */
        .service-flip, .service-flip-inner, .service-front, .service-back { all: unset; display: block; }
        .service-back { display: none; }
        .service-front img { width: 100%; display: block; }

        /* ── Hidden extra services ── */
        .extra-service { display: none; }

        /* ── More / Less Services button ── */
        .more-services-wrapper {
            text-align: center;
            margin: 10px 0 40px;
        }
        .more-services-btn {
             position: relative;
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px 50px;
    text-align: center;
    color: var(--e-global-color-accent);
    display: inline-block;
    background-color: var(--e-global-color-olive);
    border-radius: 35px 0px 35px 0px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
        }
        .more-services-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(201,168,76,0.5);
        }

        /* ── Modal overlay ── */
        .sdc-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(10, 10, 10, 0.72);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            padding: 20px;
            backdrop-filter: blur(4px);
        }
        .sdc-modal-overlay.active { display: flex; }

        /* ── Modal box ── */
        .sdc-modal {
            background: #fff;
            border-radius: 16px;
            max-width: 680px;
            width: 100%;
            max-height: 88vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 24px 64px rgba(0,0,0,0.28);
            animation: modalIn 0.32s cubic-bezier(0.34,1.3,0.64,1) forwards;
        }
        @keyframes modalIn {
            from { opacity: 0; transform: scale(0.88) translateY(30px); }
            to   { opacity: 1; transform: scale(1)    translateY(0);    }
        }

        /* ── Modal header strip ── */
        .sdc-modal-header {
            background: linear-gradient(135deg, #2e6b4f, #4a9e72);
            padding: 28px 32px 22px;
            border-radius: 16px 16px 0 0;
            position: relative;
        }
        .sdc-modal-header h2 {
            color: #fff;
            font-size: 22px;
            font-weight: 700;
            margin: 0;
            letter-spacing: 0.3px;
            line-height: 1.3;
        }
        .sdc-modal-close {
            position: absolute;
            top: 16px; right: 18px;
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            width: 36px; height: 36px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s;
            line-height: 1;
        }
        .sdc-modal-close:hover { background: rgba(255,255,255,0.38); }

        /* ── Modal body ── */
        .sdc-modal-body { padding: 28px 32px 32px; }

        .sdc-section-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: #4a9e72;
            margin-bottom: 8px;
            margin-top: 22px;
        }
        .sdc-section-label:first-child { margin-top: 0; }

        .sdc-desc {
            font-size: 14.5px;
            line-height: 1.78;
            color: #444;
            margin: 0;
        }

        .sdc-effects-list {
            list-style: none;
            padding: 0; margin: 0;
        }
        .sdc-effects-list li {
            font-size: 14px;
            color: #333;
            padding: 7px 0 7px 26px;
            position: relative;
            border-bottom: 1px solid #f0f0f0;
            line-height: 1.55;
        }
        .sdc-effects-list li:last-child { border-bottom: none; }
        .sdc-effects-list li::before {
            content: '';
            position: absolute;
            left: 0; top: 14px;
            width: 8px; height: 8px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4a9e72, #c9a84c);
        }

        .sdc-evidence {
            font-size: 14px;
            line-height: 1.72;
            color: #555;
            background: #f6fdf9;
            border-left: 3px solid #4a9e72;
            padding: 12px 16px;
            border-radius: 0 8px 8px 0;
            margin: 0;
        }

        /* ── Arrow button click style ── */
        .services_box_lower_portion .btn_wrapper a {
            cursor: pointer;
        }

        /* ── Scrollbar for modal ── */
        .sdc-modal::-webkit-scrollbar { width: 6px; }
        .sdc-modal::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0 16px 16px 0; }
        .sdc-modal::-webkit-scrollbar-thumb { background: #4a9e72; border-radius: 3px; }

        @media (max-width: 576px) {
            .sdc-modal-header { padding: 22px 20px 18px; }
            .sdc-modal-header h2 { font-size: 18px; }
            .sdc-modal-body { padding: 20px 20px 24px; }
        }

 
        /* ════════════════════════════════════════════════
           SCROLL-TO-TOP BUTTON
           ════════════════════════════════════════════════ */
 
        /* 1. Container */
        #scrollTopBtn {
            position: fixed;
            bottom: 32px;
            right: 28px;
            width: 54px;
            height: 54px;
            cursor: pointer;
            z-index: 9999;
 
            /* hidden by default */
            opacity: 0;
            transform: translateY(20px) scale(0.85);
            pointer-events: none;
            transition: opacity .4s cubic-bezier(.4,0,.2,1),
                        transform .4s cubic-bezier(.4,0,.2,1);
        }
 
        /* 2. Visible state */
        #scrollTopBtn.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
 
        /* 3. SVG fills the container */
        #scrollTopBtn svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
 
        /* 4. Background circle (filled) */
        #scrollTopBtn .bg-circle {
            fill: #c8873a;           /* warm amber — matches clinic brand */
            filter: drop-shadow(0 4px 14px rgba(200,135,58,.45));
            transition: fill .25s;
        }
 
        /* 5. Progress ring (stroke) */
        #scrollTopBtn .progress-ring {
            fill: none;
            stroke: #fff;
            stroke-width: 2.8;
            stroke-linecap: round;
            stroke-dasharray: 150.8;   /* 2π × 24 */
            stroke-dashoffset: 150.8;  /* starts empty */
            transform-origin: center;
            transform: rotate(-90deg);
            transition: stroke-dashoffset .12s linear;
        }
 
        /* 6. Arrow icon */
        #scrollTopBtn .arrow {
            stroke: #fff;
            stroke-width: 2.6;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            transition: transform .3s cubic-bezier(.34,1.56,.64,1);
            transform-origin: center;
        }
 
        /* 7. Hover effects */
        #scrollTopBtn:hover .bg-circle {
            fill: #b5732a;
        }
 
        #scrollTopBtn:hover .arrow {
            transform: translateY(-2px);
        }
 
        /* 8. Click pulse */
        #scrollTopBtn:active {
            transform: scale(0.92);
        }
 
        /* 9. Ripple burst on click */
        #scrollTopBtn .ripple {
            fill: none;
            stroke: #c8873a;
            stroke-width: 1.5;
            r: 27;
            opacity: 0;
            transform-origin: center;
        }
 
        #scrollTopBtn.pulse .ripple {
            animation: rippleBurst .55s ease-out forwards;
        }
 
        @keyframes rippleBurst {
            from { opacity: .7; r: 27; stroke-width: 2; }
            to   { opacity: 0;  r: 42; stroke-width: 0; }
        }
















































































/* ================================
Service Details Page
===================================*/

         :root {
        --green: #1c5123;
        --green-light: #2a6b32;
        --green-pale: #eaf2eb;
        --gold: #dbba13;
        --gold-light: #f5e44a;
        --beige: #faf7f2;
        --beige-mid: #f2ece0;
        --text-dark: #1a2a1c;
        --text-mid: #3d5140;
        --text-light: #6b7d6e;
        --white: #ffffff;
        --shadow-sm: 0 4px 20px rgba(28, 81, 35, 0.08);
        --shadow-md: 0 8px 40px rgba(28, 81, 35, 0.13);
        --shadow-lg: 0 16px 60px rgba(28, 81, 35, 0.18);
        --radius: 18px;
        --radius-lg: 28px;
      }

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

      body {
        font-family: "Karla", sans-serif;
        background: var(--beige);
        color: var(--text-dark);
        overflow-x: hidden;
      }

      h1,
      h2,
      h3,
      h4,
      h5 {
        font-family: "Playfair Display", serif;
      }

      /* ── ORGANIC LEAF SVG BG ── */
      .leaf-bg {
        position: absolute;
        opacity: 0.06;
        pointer-events: none;
        z-index: 0;
      }

      /* ── SECTION SPACINGS ── */
      section {
        position: relative;
      }
      .section-pad {
        padding: 90px 0;
      }
      .section-pad-sm {
        padding: 60px 0;
      }

      /* ── GOLD RULE – FIX: block-level, margin auto for centering, or left-aligned ── */
      .gold-rule {
        display: block;
        width: 60px;
        height: 3px;
        background: var(--gold);
        border-radius: 2px;
        margin-bottom: 16px;
      }

      /* When gold-rule follows a label-chip (left-aligned context) keep it left */
      .label-chip + .gold-rule {
        margin-left: 0;
      }

      /* When inside a text-center parent, center it */
      .text-center .gold-rule,
      [style*="text-align:center"] .gold-rule {
        margin-left: auto;
        margin-right: auto;
      }

      /* ── LABEL CHIP ── */
      .label-chip {
        display: inline-block;
        background: var(--gold);
        color: var(--green);
        font-family: "Karla", sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 5px 16px;
        border-radius: 50px;
        margin-bottom: 10px;
      }

      /* ══════════════════════════════════
       INTRO – WHAT IS CUPPING THERAPY
    ══════════════════════════════════ */
      #what-is {
        background: var(--beige);
        overflow: hidden;
      }

      #what-is .intro-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }

      #what-is .intro-text h2 {
        font-size: clamp(28px, 3vw, 44px);
        color: var(--green);
        line-height: 1.25;
        margin-bottom: 22px;
      }

      #what-is .intro-text p {
        font-size: 16px;
        line-height: 1.85;
        color: var(--text-mid);
      }

      .intro-img-wrap {
        position: relative;
      }

      .intro-img-wrap img {
        width: 100%;
        height: 460px;
        object-fit: cover;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
      }

      .intro-img-badge {
        position: absolute;
        bottom: -22px;
        left: -22px;
        background: var(--green);
        color: var(--white);
        padding: 20px 28px;
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        font-family: "Playfair Display", serif;
      }

      .intro-img-badge span {
        display: block;
        font-size: 32px;
        font-weight: 700;
        color: var(--gold);
      }

      .intro-img-badge small {
        font-family: "Karla", sans-serif;
        font-size: 13px;
        opacity: 0.8;
      }

      /* ══════════════════════════════════
       BENEFITS
    ══════════════════════════════════ */
      #benefits {
        background: var(--green);
        overflow: hidden;
      }

      #benefits h2 {
        color: var(--white);
        font-size: clamp(26px, 2.8vw, 40px);
        margin-bottom: 12px;
      }

      #benefits .sub {
        color: rgba(255, 255, 255, 0.72);
        font-size: 16px;
        line-height: 1.7;
        max-width: 620px;
      }

      .benefit-card {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(219, 186, 19, 0.22);
        border-radius: var(--radius);
        padding: 32px 26px;
        transition: all 0.35s ease;
        height: 100%;
        backdrop-filter: blur(6px);
      }

      .benefit-card:hover {
        background: rgba(255, 255, 255, 0.13);
        border-color: var(--gold);
        transform: translateY(-6px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
      }

      .benefit-icon {
        width: 54px;
        height: 54px;
        background: var(--gold);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        font-size: 22px;
        color: var(--green);
      }

      .benefit-card h5 {
        color: var(--white);
        font-size: 17px;
        margin-bottom: 10px;
      }

      .benefit-card p {
        color: rgba(255, 255, 255, 0.68);
        font-size: 14px;
        line-height: 1.7;
      }

      /* ══════════════════════════════════
       MASSAGE HIGHLIGHT
    ══════════════════════════════════ */
      #massage {
        background: var(--beige-mid);
        overflow: hidden;
      }

      .massage-inner {
        background: var(--white);
        border-radius: 32px;
        padding: 60px;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 50px;
        align-items: center;
        box-shadow: var(--shadow-md);
        position: relative;
        overflow: hidden;
      }

      .massage-inner::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(
          circle,
          rgba(219, 186, 19, 0.18) 0%,
          transparent 70%
        );
        border-radius: 50%;
      }

      .massage-inner h2 {
        font-size: clamp(24px, 2.5vw, 36px);
        color: var(--green);
        margin-bottom: 18px;
      }

      .massage-inner p {
        font-size: 15px;
        line-height: 1.82;
        color: var(--text-mid);
      }

      .massage-inner img {
        width: 100%;
        height: 380px;
        object-fit: cover;
        border-radius: 20px;
        box-shadow: var(--shadow-sm);
      }

      /* ══════════════════════════════════
       TYPES
    ══════════════════════════════════ */
      #types {
        background: var(--beige);
      }

      #types .section-head h2 {
        font-size: clamp(26px, 3vw, 42px);
        color: var(--green);
        margin-bottom: 10px;
      }

      .type-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: all 0.38s ease;
        height: 100%;
        border-bottom: 4px solid transparent;
      }

      .type-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
        border-bottom-color: var(--gold);
      }

      .type-card .card-top {
        position: relative;
        height: 200px;
        overflow: hidden;
      }

      .type-card .card-top img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .type-card:hover .card-top img {
        transform: scale(1.07);
      }

      .type-card .card-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        background: var(--green);
        color: var(--white);
        font-family: "Karla", sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 5px 14px;
        border-radius: 50px;
      }

      .type-card .card-body-inner {
        padding: 28px 26px;
      }

      .type-card h4 {
        font-size: 20px;
        color: var(--green);
        margin-bottom: 8px;
      }

      .type-card .best-for {
        font-size: 12px;
        font-weight: 600;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 14px;
      }

      .type-card ul {
        padding-left: 0;
        list-style: none;
        margin-bottom: 14px;
      }

      .type-card ul li {
        font-size: 14px;
        color: var(--text-mid);
        padding: 5px 0;
        padding-left: 20px;
        position: relative;
      }

      .type-card ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        width: 8px;
        height: 8px;
        background: var(--gold);
        border-radius: 50%;
      }

      .type-card .card-desc {
        font-size: 13.5px;
        color: var(--text-light);
        line-height: 1.7;
      }

      /* ══════════════════════════════════════════
       5. PRICING SECTION
    ══════════════════════════════════════════ */
      .pricing-section {
        background: linear-gradient(135deg, var(--green) 0%, #2d7a38 100%);
        position: relative;
        overflow: hidden;
        padding: 90px 0;
      }
      .pricing-section::before {
        content: "";
        position: absolute;
        top: -100px;
        right: -100px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: rgba(219, 186, 19, 0.07);
        pointer-events: none;
      }
      .pricing-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 52px 44px;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
      }
      .pricing-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 180px;
        height: 180px;
        background: radial-gradient(
          circle,
          rgba(219, 186, 19, 0.15),
          transparent 70%
        );
      }
      .pricing-card h2 {
        color: var(--green);
        font-size: clamp(1.5rem, 2.5vw, 2rem);
        margin-bottom: 10px;
      }
      .pricing-card .tagline {
        color: var(--text-muted);
        font-size: 0.95rem;
        margin-bottom: 28px;
      }
      .price-row {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 8px;
      }
      .price-old {
        font-size: 1.4rem;
        color: #aaa;
        text-decoration: line-through;
        font-weight: 500;
      }
      .price-new {
        font-family: "Playfair Display", serif;
        font-size: 3rem;
        font-weight: 700;
        color: var(--green);
        line-height: 1;
      }
      .price-label {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-bottom: 20px;
      }
      .price-discount-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--gold);
        color: var(--green);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 6px 14px;
        border-radius: 50px;
        margin-bottom: 20px;
      }
      .price-note {
        color: var(--text-muted);
        font-size: 0.88rem;
        line-height: 1.6;
        font-style: italic;
      }
      .pricing-right-img {
        width: 100%;
        border-radius: 20px;
        object-fit: cover;
        height: 380px;
        box-shadow: var(--shadow-md);
        position: relative;
        z-index: 1;
      }
      .pricing-right {
        position: relative;
      }
      .pricing-right::before {
        content: '"Where healing meets affordability"';
        font-family: "Playfair Display", serif;
        font-style: italic;
        color: rgba(255, 255, 255, 0.18);
        font-size: 1.4rem;
        position: absolute;
        top: -36px;
        left: 0;
        right: 0;
        line-height: 1.4;
      }

      /* ══════════════════════════════════
       PROCESS / STEPS
    ══════════════════════════════════ */
      #process {
        background: var(--beige-mid);
        overflow: hidden;
      }

      #process h2 {
        font-size: clamp(24px, 2.8vw, 38px);
        color: var(--green);
        margin-bottom: 10px;
      }

      .steps-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        position: relative;
      }

      .steps-grid::before {
        content: "";
        position: absolute;
        top: 38px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(
          90deg,
          var(--green-pale),
          var(--gold),
          var(--green-pale)
        );
        z-index: 0;
      }

      .step-item {
        text-align: center;
        padding: 0 20px;
        position: relative;
        z-index: 1;
      }

      .step-num {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: var(--white);
        border: 3px solid var(--green);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Playfair Display", serif;
        font-size: 24px;
        font-weight: 700;
        color: var(--green);
        margin: 0 auto 22px;
        box-shadow: var(--shadow-sm);
        transition: all 0.3s;
      }

      .step-item:hover .step-num {
        background: var(--green);
        color: var(--white);
        border-color: var(--gold);
        box-shadow: 0 0 0 6px rgba(28, 81, 35, 0.12);
      }

      .step-item h5 {
        font-size: 16px;
        color: var(--green);
        margin-bottom: 10px;
      }

      .step-item p {
        font-size: 13.5px;
        color: var(--text-light);
        line-height: 1.7;
      }

      /* ══════════════════════════════════
       WHY CHOOSE US
    ══════════════════════════════════ */
      #why {
        background: var(--beige);
        overflow: hidden;
      }

      #why h2 {
        font-size: clamp(24px, 2.6vw, 38px);
        color: var(--green);
        margin-bottom: 10px;
      }

      .why-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }

      .why-card {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        background: var(--white);
        padding: 28px 24px;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        border-left: 4px solid transparent;
        transition: all 0.32s;
      }

      .why-card:hover {
        border-left-color: var(--gold);
        transform: translateX(6px);
        box-shadow: var(--shadow-md);
      }

      .why-icon {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        background: var(--green-pale);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--green);
        font-size: 20px;
      }

      .why-card h5 {
        font-size: 16px;
        color: var(--green);
        margin-bottom: 7px;
      }

      .why-card p {
        font-size: 13.5px;
        color: var(--text-light);
        line-height: 1.7;
      }

      /* commitment box */
      .commitment-box {
        background: var(--green);
        color: var(--white);
        border-radius: 20px;
        padding: 36px 40px;
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 40px;
        box-shadow: var(--shadow-md);
      }

      .commitment-box .icon {
        width: 60px;
        height: 60px;
        background: var(--gold);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: var(--green);
        flex-shrink: 0;
      }

      .commitment-box p {
        font-size: 18px;
        font-family: "Playfair Display", serif;
        font-style: italic;
      }

      /* ══════════════════════════════════
       FIRE CUPPING CARD + FAQ
    ══════════════════════════════════ */

      /* ── ENQUIRY NEW ── */
      .enquiry-new-card {
        background: var(--white);
        border-radius: 24px;
        padding: 40px 36px;
        box-shadow: 0 8px 40px rgba(28, 81, 35, 0.1);
        height: 100%;
      }
      .enq-top-label {
        display: inline-block;
        background: #1c5123;
        color: var(--gold);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 5px 14px;
        border-radius: 50px;
        margin-bottom: 16px;
      }
      .enq-title {
        font-family: "Playfair Display", serif;
        color: #1c5123;
        font-size: 1.9rem;
        margin-bottom: 6px;
      }
      .enq-sub {
        color: var(--text-muted);
        font-size: 16px;
        margin-bottom: 24px;
      }

      /* =============================

Bottom left SIde image
==================================*/
      /* CSS */

      .img-frame {
        position: relative;
        width: 100%;
        height: 460px;
      }

      /* Top-right circle decoration */
      .circle-decoration {
        position: absolute;
        top: -18px;
        right: -18px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: 12px solid #1c5123;
        opacity: 0.35;
        pointer-events: none;
        z-index: 2;
      }

      /* Bottom-left blob decoration */
      .blob-decoration {
        position: absolute;
        bottom: -14px;
        left: -14px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #dbba13;
        opacity: 0.18;
        pointer-events: none;
        z-index: 2;
      }

      /* Floating stat chip */
      .stat-chip {
        position: absolute;
        top: 32px;
        left: -20px;
        background: #fff;
        border: 0.5px solid #e0e0e0;
        border-radius: 40px;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        z-index: 3;
      }

      .stat-number {
        font-size: 18px;
        font-weight: 600;
        color: #1c5123;
      }

      .stat-text {
        font-size: 12px;
        color: #888;
        line-height: 1.3;
      }

      /* Main image */
      .therapy-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 60px 12px 60px 12px;
        display: block;
        position: relative;
        z-index: 1;
      }

      /* Bottom badge */
      .bottom-badge {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(6px);
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        padding: 10px 24px;
        border-radius: 40px;
        white-space: nowrap;
        z-index: 4;
      }

      /* FAQ */
      .faq-section h3 {
        font-size: clamp(22px, 2.4vw, 32px);
        color: var(--green);
        margin-bottom: 30px;
      }

      .faq-item {
        background: var(--white);
        border-radius: var(--radius);
        margin-bottom: 14px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        border-left: 4px solid transparent;
        transition: border-color 0.3s;
      }

      .faq-item.open {
        border-left-color: var(--gold);
      }

      .faq-question {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        cursor: pointer;
        user-select: none;
      }

      .faq-question h6 {
        font-family: "Karla", sans-serif;
        font-weight: 600;
        font-size: 15px;
        color: var(--text-dark);
        margin: 0;
      }

      .faq-toggle {
        width: 30px;
        height: 30px;
        background: var(--green-pale);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--green);
        font-size: 14px;
        flex-shrink: 0;
        transition: all 0.3s;
      }

      .faq-item.open .faq-toggle {
        background: var(--gold);
        color: var(--green);
        transform: rotate(45deg);
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
      }

      .faq-answer-inner {
        padding: 0 24px 20px;
        font-size: 14px;
        color: var(--text-light);
        line-height: 1.75;
      }

      /* ══════════════════════════════════════════
       9. EXPLORE ADVANCED THERAPY
    ══════════════════════════════════════════ */
      .gold-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: "Karla", sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 14px;
      }
      .gold-label::before {
        content: "";
        display: inline-block;
        width: 28px;
        height: 2px;
        background: var(--gold);
        border-radius: 2px;
      }
      .explore-section {
        background: var(--green-pale);
        border-top: 1px solid rgba(28, 81, 35, 0.1);
        padding: 60px 0;
      }
      .explore-section h2 {
        color: var(--green);
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
        text-align: center;
        margin-bottom: 50px;
      }
      .explore-section .explore-sub {
        text-align: center;
        color: var(--text-muted);
        font-size: 0.95rem;
        margin-bottom: 40px;
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
      }
      .city-tabs-wrap {
        background: var(--white);
        border-radius: 50px;
        padding: 8px 16px;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        margin-bottom: 28px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
      }

      .city-tabs-wrap::-webkit-scrollbar {
        display: none;
      }

      .city-tab {
        font-family: "Karla", sans-serif;
        font-size: 0.88rem;
        font-weight: 600;
        padding: 9px 18px;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        transition: all 0.25s;
        background: transparent;
        color: var(--text-mid);
        white-space: nowrap;
        flex-shrink: 0;
      }
      .city-tab:hover {
        color: var(--green);
        background: var(--green-pale);
      }
      .city-tab.active {
        background: var(--green);
        color: var(--white);
      }
      .location-panel {
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 36px 40px;
        box-shadow: var(--shadow-sm);
        display: none;
      }
      .location-panel.active {
        display: block;
      }
      .location-panel h4 {
        color: var(--green);
        font-size: 18px;
        text-align: center;
        margin-bottom: 8px;
      }
      .location-panel .loc-sub {
        color: #7a7a7a;
        font-size: 18px;
        margin-bottom: 24px;
        text-align: center;
      }
      .location-tags-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .loc-tag {
        background: var(--green);
        color: var(--white);
        font-family: "Karla", sans-serif;
        font-weight: 600;
        font-size: 0.85rem;
        padding: 10px 20px;
        border-radius: 50px;
        cursor: pointer;
        transition:
          background 0.25s,
          transform 0.2s;
      }
      .loc-tag:hover {
        background: var(--green-light);
        transform: translateY(-2px);
      }
      .btn-callback {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--gold);
        color: var(--green);
        font-family: "Karla", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.5px;
        padding: 16px 42px;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition:
          background 0.25s,
          transform 0.2s,
          box-shadow 0.25s;
        margin: 36px auto 0;
      }
      .btn-callback:hover {
        background: var(--gold-light);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 991px) {
        #what-is .intro-grid,
        .massage-inner {
          grid-template-columns: 1fr;
          gap: 36px;
        }
        .massage-inner {
          padding: 36px 28px;
        }
        .steps-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
        }
        .steps-grid::before {
          display: none;
        }
        .why-grid {
          grid-template-columns: 1fr;
        }
        .pricing-right::before {
          display: none;
        }
        .enquiry-card,
        .faq-card {
          padding: 32px 24px;
        }
      }

      @media (max-width: 767px) {
        .section-pad {
          padding: 60px 0;
        }
        #what-is .intro-grid {
          grid-template-columns: 1fr;
        }
        .intro-img-badge {
          left: 12px;
          bottom: -14px;
        }
        .steps-grid {
          grid-template-columns: 1fr;
        }
        .commitment-box {
          flex-direction: column;
          text-align: center;
        }
        .massage-inner img {
          height: 240px;
        }
        .pricing-card {
          padding: 36px 24px;
        }
        .fire-cupping-card {
          padding: 22px 22px 0 22px;
        }
        .city-tab {
          font-size: 0.8rem;
          padding: 8px 14px;
        }
        .loc-tag {
          font-size: 0.8rem;
          padding: 8px 16px;
        }
        .location-panel {
          padding: 24px 20px;
        }
      }



.banner-section-content h1{
    font-size: 44px;
    line-height: 55px;
}
.banner-section-content p{
    font-size: 16px;
}