:root {
    --orange-primary-clr: #FB923C;
    --orange-primary-text-clr: #FB923C;

    --peach-primary-clr: #F87171;
    --peach-primary-text-clr: #F87171;
    --peach-primary-bg-clr: #334155;

    --yellow-primary-clr: #FBBF24;
    --yellow-primary-text-clr: #FBBF24;
    --yellow-primary-bg-clr: #404040;
    --yellow-primary-btn-clr: #262626;


    --red-primary-clr: #EF4444;
    --red-primary-text-clr: #EF4444;
    --red-primary-bg-clr: #064E3B;



}

/* Base */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #f9f9f9;
    color: #171717;
}

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


/** Orange Theme colors **/
#orange-box .page-btn-primary,
#orange-box .booking-form,
#orange-box .experience-box,
#orange-box .contact-form-wrapper
{
    background: var(--orange-primary-clr);
}


#orange-box .services {
    background: #fff;
}

#orange-box .why-right ul  li::before {
    background: var(--orange-primary-clr);
}

#orange-box .hero-title span,
#orange-box .how-title span,
#orange-box .why-title span,
#orange-box .services-title span,
#orange-box .services-title span,
#orange-box .booking-content h2 span,
#orange-box .testimonial-title span,
#orange-box .blog-title span,
#orange-box .service-title span,
#orange-box .faq-title span {
    color: var(--orange-primary-text-clr);
}

/** End-Orange Theme colors **/


/** Peach Theme colors **/
#peach-box .site-header-topbar {
    background: var(--peach-primary-bg-clr);
}

#peach-box .site-header-topbar .site-header-contact svg path,
#peach-box .site-header-topbar .site-header-social svg path {
    fill: #fff;
}

#peach-box .page-btn-primary,
#peach-box .booking-form,
#peach-box .experience-box,
#peach-box .contact-form-wrapper
{
    background: var(--peach-primary-clr);
}

#peach-box .services,
#peach-box .footer {
    background: var(--peach-primary-bg-clr);
}

#peach-box .arrow-btn {
    border: 2px solid var(--peach-primary-clr);
    color: var(--peach-primary-clr);
}

#peach-box .arrow-btn.filled {
    background: var(--peach-primary-clr);
    color: #fff;
}

#peach-box .services-subtitle,
#peach-box .services-desc,
#peach-box .services-title {
    color: #fff;
}

#peach-box .why-right ul  li::before {
    background: var(--peach-primary-clr);
}

#peach-box .hero-title span,
#peach-box .how-title span,
#peach-box .why-title span,
#peach-box .services-title span,
#peach-box .services-title span,
#peach-box .booking-content h2 span,
#peach-box .testimonial-title span,
#peach-box .blog-title span,
#peach-box .service-title span,
#peach-box .faq-title span {
    color: var(--peach-primary-text-clr);
}

#peach-box .footer,
#peach-box .footer ul li a {
    color: #fff;
}

#peach-box .footer .footer-icons path {
    fill: #fff;
}

/** End-Peach Theme colors**/


/** yellow Theme colors **/
#yellow-box .site-header-topbar {
    background: var(--yellow-primary-bg-clr);
}

#yellow-box .site-header-topbar .site-header-contact svg path,
#yellow-box .site-header-topbar .site-header-social svg path {
    fill: #fff;
}

#yellow-box .page-btn-primary {
    color: var(--yellow-primary-btn-clr);
}

#yellow-box .page-btn-primary,
#yellow-box .booking-form,
#yellow-box .experience-box
#yellow-box .contact-form-wrapper
{
    background: var(--yellow-primary-clr);
}

#yellow-box .services,
#yellow-box .footer {
    background: var(--yellow-primary-bg-clr);
}

#yellow-box .arrow-btn {
    border: 2px solid var(--yellow-primary-clr);
    color: var(--yellow-primary-clr);
}

#yellow-box .arrow-btn.filled {
    background: var(--yellow-primary-clr);
    color: #fff;
}

#yellow-box .services-subtitle,
#yellow-box .services-desc,
#yellow-box .services-title {
    color: #fff;
}

#yellow-box .why-right ul  li::before {
    background: var(--yellow-primary-clr);
}

#yellow-box .hero-title span,
#yellow-box .how-title span,
#yellow-box .why-title span,
#yellow-box .services-title span,
#yellow-box .services-title span,
#yellow-box .booking-content h2 span,
#yellow-box .testimonial-title span,
#yellow-box .blog-title span,
#yellow-box .service-title span,
#yellow-box .faq-title span {
    color: var(--yellow-primary-text-clr);
}

#yellow-box .footer,
#yellow-box .footer ul li a {
    color: #fff;
}

#yellow-box .footer .footer-icons path {
    fill: #fff;
}

/** End-yellow Theme colors**/

/** red Theme colors **/
#red-box .site-header-topbar {
    background: var(--red-primary-bg-clr);
}

#red-box .site-header-topbar .site-header-contact svg path,
#red-box .site-header-topbar .site-header-social svg path {
    fill: var(--red-primary-text-clr);
}


#red-box .page-btn-primary,
#red-box .booking-form,
#red-box .experience-box,
#red-box .contact-form-wrapper {
    background: var(--red-primary-clr);
}

#red-box .services,
#red-box .footer {
    background: var(--red-primary-bg-clr);
}

#red-box .services-subtitle,
#red-box .services-desc,
#red-box .services-title {
    color: #fff;
}

#red-box .why-right ul  li::before {
    background: var(--red-primary-clr);
}

#red-box .hero-title span,
#red-box .contact-title span,
#red-box .how-title span,
#red-box .why-title span,
#red-box .services-title span,
#red-box .services-title span,
#red-box .booking-content h2 span,
#red-box .testimonial-title span,
#red-box .blog-title span,
#red-box .service-title span,
#red-box .faq-title span {
    color: var(--red-primary-text-clr);
}

#red-box .arrow-btn {
    border: 2px solid var(--red-primary-clr);
    color: var(--red-primary-clr);
}

#red-box .arrow-btn.filled {
    background: var(--red-primary-clr);
    color: #fff;
}

#red-box .footer,
#red-box .footer ul li a {
    color: #fff;
}

#red-box .footer .footer-icons path {
    fill: #fff;
}

/** End-red Theme colors**/




.site-header-topbar {
    background-color: #06B6D4;
    color: white;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    padding: 12px 0;
}

.site-header-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.site-header-contact span {
    margin-right: 20px;
    display: inline-block;
    align-items: center;
}

.site-header-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-header-contact span svg {
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
}

.site-header-social img {
    width: 18px;
    height: 18px;
    display: inline-block;
}

.site-header {
    background: #F9FAFB;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.header-container {
    display: flex;

    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    padding: 20px 20px;
}

.logo {
    height: 50px;
}

.menu-toggle {
    font-size: 28px;
    background: none;
    border: none;
    color: #171717;
    cursor: pointer;
    display: none;
}

.menu-toggle .close {
    display: none;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-grow: 1;
    justify-content: flex-end;
}


.main-nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.main-nav a {
    text-decoration: none;
    color: var(--Text-Color, #171717);
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: clamp(20px, 2vw, 28px);
}

.main-nav a:hover {
    color: #06B6D4;
}

.btn-primary {
    background: #06B6D4;
    color: white;
    padding: 10px 24px;
    border-radius: 139px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: clamp(20px, 2vw, 28px);
}

.page-btn-primary {
    background: #06B6D4;
    color: white;
    padding: 10px 24px;
    border-radius: 139px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: clamp(20px, 2vw, 28px);
}

.page-btn-primary:hover {
    color: white;
}


/* Mobile menu hidden by default */
.mobile-nav-wrapper {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #F9FAFB;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    align-items: center;
}

/* When toggled open */
.mobile-nav-wrapper.show {
    display: flex;
}

.mobile-nav-wrapper .main-nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    width: 90%;
    max-width: 360px;
}

.mobile-nav-wrapper .btn-primary {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    line-height: 24px;
}


.footer {
    background: #CFFAFE;
    font-family: 'Inter', sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    color: #171717;
}

.footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
    padding: 60px 20px;
}

.footer-column {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-column h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

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

.footer-column ul li {
    margin-bottom: 8px;
    display: flex;

    align-items: center;
    gap: 8px;
    line-height: 1.5;
}

.footer-column a {
    text-decoration: none;
    color: #171717;
}

.footer-logo {
    width: 140px;
    margin-bottom: 20px;
}

.footer-icon {
    width: 18px;
    height: 18px;
}

.newsletter-text {
    margin: 16px 0 8px;
    font-size: 14px;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    flex-direction: row;

    justify-items: start;
    width: 100%;

    border: 1px solid #06B6D4;
    border-radius: 999px;
    overflow: hidden;
    background-color: transparent;
}

.newsletter-form input {
    width: 100%;
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 0;
    background: transparent;
    color: #171717;
}

.newsletter-form button {
    background-color: #06B6D4;
    margin-bottom: 4px;
    color: white;
    font-weight: 600;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0;
    height: 100%;
    display: flex;
    height: fit-content;
    align-items: center;
    justify-content: center;
}


.footer-bottom {
    text-align: center;
    padding: 12px 10px;
    font-size: 13px;
    background: #f8f8f8;
    color: #333;
    border-top: 1px solid #ddd;
}

.footer-bottom p {
    margin-bottom: 0;
}


.how-it-works {
    background-color: #EEF2FF;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
}

.how-wrapper {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.how-subtitle {
    font-size: 16px;
    color: #111;
    margin-bottom: 10px;
}

.how-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    margin-bottom: 10px;
    color: #111;
}

.how-title span {
    color: #06B6D4;
}

.how-desc {
    color: #333;
    font-size: 16px;
    margin-bottom: 40px;
}

.how-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.how-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 24px;
    flex: 1 1 280px;
    text-align: left;
    transition: transform 0.2s ease;
}

.how-card:hover {
    transform: translateY(-4px);
}

.icon-box {
    background: #CFFAFE;
    border-radius: 8px;
    padding: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.icon-box img {
    width: 24px;
    height: 24px;
}

.how-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.how-card p {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

.how-card a {
    font-size: 14px;
    font-weight: 600;
    color: #06B6D4;
    text-decoration: none;
}

.how-card a:hover {
    text-decoration: underline;
}

/* HERO SECTION */
.hero {
    padding: 60px 20px;
    background: #f9fafb;
    font-family: 'Inter', sans-serif;
}

.hero-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
    flex-wrap: wrap;
}

.home-hero-container {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    gap: 40px;
    max-width: 1200px;
    margin: auto;
    flex-wrap: nowrap;
}

.hero-content {
    flex: 1 1 500px;
}

.hero-subtitle {
    font-size: 16px;
    color: #111;
    margin-bottom: 10px;
}

.hero-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-title span {
    color: #06B6D4;
}

.hero-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #333;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: 0.3s ease;
}

.primary-btn {
    background: #06B6D4;
    color: #fff !important;
    border: none;
}

.primary-btn:hover {
    background: #0891b2;
}

.outline-btn {
    border: 2px solid #06B6D4;
    color: #06B6D4;
    background: transparent;
}

.outline-btn:hover {
    background: #ecfeff;
}

/* RIGHT IMAGE */
.hero-image {
    flex: 1 1 400px;
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.why-choose {
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
    background: #ffffff;
}

.why-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
}

.why-left {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

/* Experience Box */
.experience-box {
    background: #06B6D4;
    color: white;
    padding: 10px;
    margin-bottom: 3px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 16px;

}

.experience-box .icon {
    font-size: 32px;
}

.experience-box h2 {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    color: #fff;
}

.experience-box p {
    margin: 0;
    font-size: 14px;
}

/* Images */
.why-images {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.doc-image {
    border-radius: 10px;
    width: 100%;
    max-width: 300px;
    object-fit: cover;
}

.main-image {
    height: auto;
}

.sub-image {

    padding: 4px;
}

/* RIGHT TEXT SIDE */
.why-right {
    flex: 1 1 500px;
}

.why-subtitle {
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
}

.why-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

.why-title span {
    color: #06B6D4;
}

.why-text {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 24px;
}

.why-right ul  {
    list-style: none;
    padding: 0;
}

.why-right ul  li {
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
    font-size: 15px;
    color: #111;
}

.why-right ul  li::before {
    content: "✔";
    position: absolute;
    left: 0;
    background-color: #06B6D4;
    color: white;
    width: 25px;
    padding: 1px;
    border-radius: 5px;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
}

.services {
    background: #CFFAFE;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
}

.services-wrapper {
    max-width: 1200px;
    margin: auto;
}

/* Header Section */
.services-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.services-subtitle {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

.services-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    margin-bottom: 10px;
    color: #111;
}

.services-title span {
    color: #06B6D4;
}

.services-desc {
    max-width: 700px;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

.services-arrows {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

/* #services-carousel .owl-nav {
    display: block !important;
} */

.arrow-btn {
    font-size: 22px;
    background: transparent;
    border: 2px solid #06B6D4;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: #06B6D4;
    cursor: pointer;
}

.arrow-btn.filled {
    background: #06B6D4;
    color: white;
}

/* Cards Grid */
.services-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.service-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-icon {
    width: 40px;
    height: 40px;
}

.service-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    height: 40px;
}

.service-card h3 a {
    color: #000;
}

.service-card p {
    font-size: 14px;
    color: #333;
    height: 92px;
}

.service-card a {
    color: #06B6D4;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    margin-top: auto;
}

.service-card a:hover {
    text-decoration: underline;
}

/* Footer Button */
.services-footer {
    text-align: center;
    margin-top: 40px;
}

.browse-btn {
    background: #06B6D4;
    color: white !important;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

.browse-btn:hover {
    background: #0891b2;
}

.booking-section {
    background: white;
    /* fallback color */
    overflow: hidden;
    /* prevent any scrollbars from image stretch */
}

.booking-container {
    max-width: 1200px;
    margin: 0 auto;

    width: 100%;
    box-sizing: border-box;
}

.booking-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    /* ✅ Key line */
    width: 100%;
}

.booking-form,
.booking-info {
    flex: 1 1 50%;
    min-width: 300px;
    box-sizing: border-box;
}

/* LEFT: Form Styles */
.booking-form {
    background: #06B6D4;
    color: white;
    padding: 40px;
    flex: 1 1 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.booking-subtitle {
    font-size: 14px;
    margin-bottom: 10px;
}

.booking-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    margin-bottom: 30px;
    color: #fff;
}

form {
    display: flex;
    flex-direction: column;
    max-width: 600px;

    gap: 15px;
}

.form-row {
    display: flex;
    gap: 10px;
}

.form-row input {
    flex: 1;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"] {
    padding: 10px 14px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

button[type="submit"] {
    background: white;
    color: #06B6D4;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
}

button[type="submit"]:hover {
    background: #ecfeff;
}

/* RIGHT: Image + Content */
.booking-info {
    background-image: url('../images/main-page/homePage4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-end;
    /* align-items: center; */
    padding: 40px;
    box-sizing: border-box;
    /* ✅ REMOVE any fixed height like min-height or height */
}


.booking-content {

    padding: 30px o;
    border-radius: 10px;
    max-width: 460px;
    text-align: right;
}

.booking-content .booking-label {
    font-size: 14px;
    margin-bottom: 10px;
}

.booking-content h2 {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    margin-bottom: 16px;
    color: #111;
}

.booking-content h2 span {
    color: #06B6D4;
}

.booking-content p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.booking-buttons {
    display: flex;
    float: right;
    gap: 16px;
    flex-wrap: wrap;

}

.booking-btn {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.primary-btn {
    background: #06B6D4;
    color: white;
}

.outline-btn {
    border: 2px solid #06B6D4;
    color: #06B6D4;
    background: transparent;
}

.primary-btn:hover {
    background: #0891b2;
}

.outline-btn:hover {
    background: #ecfeff;
}


.testimonial-section {
    background-image: url('../images/main-page/homePage4.jpg');
    /* Optional custom image */
    background-size: cover;
    background-position: center;
    padding: 60px 0px 50px;
    font-family: 'Inter', sans-serif;
}

.testimonial-container {
    max-width: 1160px;
    margin: auto;
    text-align: center;
    border-radius: 10px;
    box-sizing: border-box;
}

.testimonial-subtitle {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.testimonial-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    margin-bottom: 16px;
    color: #111;
}

.testimonial-title span {
    color: #06B6D4;
}

.testimonial-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.testimonial-box {
    background: #fff;
    padding: 30px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.stars {
    color: #06B6D4;
    font-size: 20px;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.testimonial-text {
    font-size: 16px;
    color: #111;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 24px;
}

.testimonial-author {
    font-size: 14px;
    color: #444;
}


.blog-section {
    background: #ffffff;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
}

.blog-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
    padding: 0 20px;
    /* ✅ Add this */
    box-sizing: border-box;
}


.blog-subtitle {
    font-size: 14px;
    margin-bottom: 8px;
    color: #444;
}

.blog-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    margin-bottom: 16px;
    color: #111;
}

.blog-title span {
    color: #06B6D4;
}

.blog-desc {
    font-size: 15px;
    color: #333;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.blog-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.blog-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    text-align: left;
    padding: 0 0 20px 0;
    overflow: hidden;
}

.blog-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.blog-date {
    font-size: 13px;
    color: #333;
    padding: 16px 20px 0 20px;
}

.blog-heading {
    font-size: 18px;
    font-weight: 700;
    padding: 4px 20px;
    color: #111;
}

.blog-snippet {
    font-size: 14px;
    padding: 0 20px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 16px;
}

.read-more {
    font-size: 14px;
    font-weight: 600;
    color: #06B6D4;
    padding: 0 20px;
    text-decoration: none;
    display: flex;
    gap: 6px;
    align-items: center;
}

.read-more:hover {
    text-decoration: underline;
    color: #06B6D4;
}

.blog-footer {
    text-align: center;
}

.browse-btn {
    background: #06B6D4;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

.browse-btn:hover {
    background: #0891b2;
}

.service-area {
    background: #f9fafb;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
}

.service-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.service-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    margin-bottom: 40px;
    color: #111;
}

.service-title span {
    color: #06B6D4;
}

/* Grid layout */
.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    justify-items: center;
}

/* Individual cards */
.state-card {
    background: #fff;
    color: #262626;
    border-radius: 12px;
    padding: 20px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: 240px;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.state-card:hover {
    color: #262626;
}

.state-card:hover {
    transform: translateY(-4px);
}




/*about page*/
.about-section {
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
    background: #ffffff;
}

.about-container {
    max-width: 1200px;
    margin: auto;
    box-sizing: border-box;
}

.about-top {
    display: flex;
    gap: 40px;
    align-items: stretch;
    /* ✅ Key line */
    flex-wrap: wrap
}

.about-image-wrapper {
    flex: 1 1 400px;
    display: flex;
}

.about-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.about-content {
    flex: 1;
}

.about-content h2 {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
}

.about-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

.about-bottom p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 20px;
}

.mvv-section {
    background: #CFFAFE;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
}

.mvv-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    text-align: left;
}

.mvv-card {
    background: transparent;
    padding: 10px;
}

.mvv-image {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 16px;
}

.mvv-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

.mvv-card p {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

.what-we-do-section {
    background: #EEF2FF;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
}

.what-we-do-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
    gap: 40px;
}

.what-we-do-text {
    flex: 1 1 500px;
}

.what-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.what-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.3;
}

.what-title span {
    color: #06B6D4;
    display: inline;
}

.what-description {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

.what-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.what-list li {
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
    font-size: 15px;
}

.what-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #06B6D4;
    font-weight: bold;
}

.what-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.primary-btn {
    background: #06B6D4;
    color: white;
}

.outline-btn {
    border: 2px solid #06B6D4;
    color: #06B6D4;
    background: transparent;
}

.primary-btn:hover {
    background: #0891b2;
}

.outline-btn:hover {
    background: #ecfeff;
}

/* Image Styling */
.what-we-do-image-wrapper {
    flex: 1 1 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.what-we-do-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

.faq-section {
    padding: 60px 20px;
    background: #fff;
    font-family: 'Inter', sans-serif;
}

.faq-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    gap: 40px;
}

.faq-left {
    flex: 1 1 350px;
}

.faq-title {
    font-size: clamp(26px, 5vw, 36px);
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

.faq-title span {
    color: #06B6D4;
}

.faq-subtext {
    font-size: 15px;
    color: #444;
}

.faq-right {
    flex: 1 1 600px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion-item {
    border: 1px solid #ddd !important;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.accordion-toggle {
    width: 100%;
    background: #fff;
    border: none;
    text-align: left;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-toggle .symbol {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.accordion-item.open .accordion-toggle .symbol {
    transform: rotate(45deg);
}

.accordion-content {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

.accordion-item.open .accordion-content {
    max-height: 200px;
    padding: 10px 16px 16px;
}


/*service page*/
.service-hero {
    background-image: url('../images/main-page/homePage4.jpg');
    background-size: cover;
    background-position: center;
    padding: 80px 20px;
    text-align: center;
    color: #111;
}

.service-hero-overlay {

    max-width: 800px;
    margin: auto;
    padding: 40px 20px;
    border-radius: 12px;
}

.service-subtitle {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 500;
}

.service-title {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    margin-bottom: 12px;
}

.service-title span {
    color: #06B6D4;
}

.service-desc {
    font-size: 15px;
    margin-bottom: 24px;
    color: #444;
}

.service-hero-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    white-space: nowrap;
}

.service-primary-btn {
    background: #06B6D4;
    color: white !important;
}

.service-outline-btn {
    border: 2px solid #06B6D4;
    color: #06B6D4;
    background: transparent;
}

.service-primary-btn:hover {
    background: #0891b2;
}

.service-outline-btn:hover {
    background: #ecfeff;
}

/* === BOOKING SECTION === */
.service-booking {
    background: #06B6D4;
    padding: 20px;
}

.service-booking-wrapper {
    max-width: 1000px;
    margin: auto;
}

.service-booking-form {
    color: black;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.service-booking-subtitle {
    font-size: 14px;
}

.service-booking-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    color: #171717;
}

.service-booking-fields {
    width: 100%;
    max-width: 100%;
    /* prevents fixed limit */
    box-sizing: border-box;
    padding: 0 20px;
    /* optional, adds spacing on sides */
}

.service-booking-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.service-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.service-form-row input {
    flex: 1;
    min-width: 0;
    /* ensures inputs shrink properly */
}

.service-booking-fields input:not(.service-form-row input) {
    width: 100%;
}

.service-booking-fields input[type="text"],
.service-booking-fields input[type="email"],
.service-booking-fields input[type="tel"],
.service-booking-fields input[type="date"] {
    padding: 12px 16px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.service-submit-btn {
    background: white;
    color: #06B6D4;
    font-weight: 600;
    border: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 30px;
    cursor: pointer;
    width: max-content;
}

.service-submit-btn:hover {
    background: #ecfeff;
}

#responseMessage {
    padding: 0 20px;
}

#response-success {
    background: #fff;
    padding: 10px;
    border-radius: 30px;
    max-width: 1200px;
    width: 100%;    
    box-sizing: border-box;
    padding: 10px 20px;   
    display: block;
    text-align: center;
    color: #000;
    font-weight: 700;
}

/*contact page*/
.contact-main-section {
    background: #ffffff;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
}

.contact-container {
    max-width: 1200px;
    margin: auto;
}

.contact-header {
    text-align: left;
    margin-bottom: 30px;
}

.contact-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    margin-bottom: 10px;
    color: #111;
}

.contact-title span {
    color: #06B6D4;
}

.contact-description {
    font-size: 15px;
    color: #333;
    line-height: 1.6;

}

.contact-form-wrapper {
    background: #06B6D4;
    padding: 30px;
    border-radius: 4px;
}

.contact-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contact-form-row {
    display: flex;
    gap: 16px;
}

.contact-form-row input {
    flex: 1;
    min-width: 0;
}

.contact-form-fields input[type="text"],
.contact-form-fields input[type="email"],
.contact-form-fields input[type="tel"],
.contact-form-fields input[type="date"] {
    padding: 10px 14px;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

.contact-submit-button {
    background: white;
    color: #06B6D4;
    font-weight: bold;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
    align-self: center;
}

.contact-submit-button:hover {
    background: #ecfeff;
}

/*swervice-detail page*/
.service-detail-checkup-section {
    padding: 60px 20px;
    background: #EEF2FF;
    font-family: 'Inter', sans-serif;
}

.service-detail-checkup-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
    flex-wrap: wrap;
}

.service-detail-checkup-image {
    flex: 1 1 400px;
}

.service-detail-checkup-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.service-detail-checkup-content {
    flex: 1 1 500px;
}

.service-detail-checkup-title {
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

.service-detail-checkup-text {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

.service-detail-checkup-subtitle {
    font-size: 15px;
    color: #111;
    margin-bottom: 8px;
}

.service-detail-checkup-list {
    list-style: disc;
    padding-left: 20px;
    color: #111;
}

.service-detail-checkup-list li {
    margin-bottom: 6px;
    font-size: 14px;
}

/*city page*/
.city-special-section {
    background: #EEF2FF;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

.city-special-wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 0px 20px;
}

.city-special-subtitle {
    font-size: 14px;
    margin-bottom: 10px;
    color: #111;
}

.city-special-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    margin-bottom: 10px;
    color: #111;
}

.city-special-title span {
    color: #06B6D4;
}

.city-special-desc {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 40px;
}

.city-special-cards {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.city-special-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 24px;
    width: 100%;
    max-width: 350px;
    text-align: left;
}

.city-special-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0 10px;
}

.city-special-card p {
    font-size: 14px;
    margin-bottom: 12px;
    color: #333;
}

.city-special-card a {
    font-size: 14px;
    font-weight: 600;
    color: #06B6D4;
    text-decoration: none;
}

.city-special-card a span {
    font-size: 14px;
}

.city-special-icon {
    width: 40px;
    height: 40px;
}

.city-special-cta {
    text-align: center;
}

.city-special-btn {
    background: #06B6D4;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
}

.city-special-btn:hover {
    background: #0891b2;
}

/*blog page */

.blog-hero-section {
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
    background: #fff;
}

.blog-hero-header {
    text-align: center;
    margin-bottom: 40px;
}

.blog-hero-subtitle {
    font-size: 14px;
    color: #777;
}

.blog-hero-title {
    font-size: 36px;
    font-weight: bold;
    margin: 10px 0;
}

.blog-hero-description {
    font-size: 16px;
    color: #555;
}

.blog-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.blog-hero-card {
    background: #F9FAFB;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease;
}

.blog-hero-card:hover {
    transform: translateY(-3px);
}

.blog-hero-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Keeps aspect ratio consistent across devices */
    object-fit: contain;
    /* Ensures full image fits without cropping */
    object-position: top;
    /* Aligns face/head properly */
    background-color: #f0f0f0;
    /* Optional fallback background */
    border-bottom: 1px solid #eee;
}

.blog-hero-category {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    margin: 15px 20px 0;
}

.blog-hero-heading {
    font-size: 18px;
    font-weight: bold;
    margin: 5px 20px;
    color: #111;
}

.blog-hero-text {
    font-size: 14px;
    margin: 5px 20px;
    color: #444;
}

.blog-hero-meta {
    font-size: 13px;
    color: #555;
    margin: 15px 20px 20px;
    line-height: 1.4;
}

/*particular-blog*/
.blog-detail-wrapper {
    max-width: 800px;
    margin: auto;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
    color: #171717;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.blog-detail-header h1 {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    margin-bottom: 40px;
    color: #111;
}

.blog-detail-header img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 20px;
}

.blog-detail-content {
    max-width: 800px;
}

.blog-detail-content h2 {
    font-size: 18px;
    margin: 24px 0 10px;
}

.blog-detail-content p {
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: 15px;
}

.blog-detail-image {
    width: 100%;
    margin: 30px 0;
    border-radius: 4px;
    object-fit: cover;
    height: auto;
}

.blog-detail-content blockquote {
    border-left: 4px solid #171717;
    padding-left: 16px;
    margin: 20px 0;
    font-style: italic;
    color: #444;
}

.blog-detail-share {
    text-align: center;
    margin-top: 40px;
}

.blog-detail-share p {
    font-weight: 600;
    margin-bottom: 10px;
}

.blog-detail-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.blog-detail-icons img {
    width: 20px;
    height: 20px;
}

/* Responsive */

@media (max-width: 652px) {
    .why-images .sub-image {
        display: none;

    }

    .blog-detail-wrapper {
        padding: 20px 16px;
    }

    .blog-detail-header h1 {
        font-size: 24px;
        margin-bottom: 20px;

    }

    .blog-detail-content h2 {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .site-header-topbar {
        display: none;
    }

    .desktop-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .footer-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-column {
        width: 100%;
    }

    .footer-column ul li {
        justify-content: flex-start;
    }

    .newsletter-form {
        width: 100%;
        max-width: 100%;
    }

    .newsletter-form input {
        font-size: 16px;
    }

    .how-cards {
        flex-direction: column;
        align-items: center;
    }

    .how-card {
        width: 100%;
        max-width: 400px;
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
    }

    .hero-content,
    .hero-image {
        flex: 1 1 100%;
    }

    .hero-buttons {
        justify-content: center;
    }

    .why-container {
        flex-direction: column;
        align-items: center;
    }

    .why-left,
    .why-right {
        width: 100%;
        text-align: center;
    }

    .why-right {
        padding: 0 10px;
    }

    .why-right ul  li {
        text-align: left;
        padding-left: 32px;
    }

    .services-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .services-arrows {
        justify-content: center;
    }

    .booking-wrapper {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 60px 20px;

    }

    .home-hero-container {
        flex-wrap: wrap;
    }

    .booking-section {

        flex-direction: column;
    }

    .form-row {
        flex-direction: column;
    }

    .booking-form,
    .booking-info {
        flex: 1 1 100%;


    }

    .booking-info {
        justify-content: center;
    }

    .booking-content {
        text-align: center;


        .booking-buttons {
            justify-content: center;
        }

        .testimonial-text {
            font-size: 15px;
        }

        /*about page*/
        .about-top {
            flex-direction: column;
        }

        .about-image-wrapper {
            width: 100%;
            height: auto;
        }

        .about-image {
            height: auto;
        }

        .about-content {
            text-align: center;
        }

        .what-we-do-container {
            flex-direction: column;
            text-align: center;
        }

        .what-buttons {
            justify-content: center;
        }

        .what-list li {
            text-align: left;
            justify-content: flex-start;
        }

        /*service page*/
        .service-form-row {
            flex-direction: column;
        }

        .service-booking-form {
            text-align: center;
        }

        .service-submit-btn {
            width: 100%;
        }

        .service-hero-buttons {
            flex-direction: column;
        }

        .service-form-row input {
            width: 100%;
        }

        /*contact page*/
        .contact-form-row {
            flex-direction: column;
        }

        .contact-title,
        .contact-description {
            text-align: center;
        }

        .contact-submit-button {
            width: 100%;
        }

        /*service-detail page*/
        .service-detail-checkup-wrapper {
            flex-direction: column;
            text-align: center;
        }

        .service-detail-checkup-content {
            text-align: left;
        }

        .service-detail-checkup-image {
            text-align: center;
        }

        .service-detail-checkup-image img {
            max-width: 100%;
            height: auto;
        }

        .service-detail-checkup-list {
            text-align: left;
        }

        /*city page*/
        .city-special-card {
            max-width: 100%;
        }
    }
}

.bg-white
{
    background:#fff !important;
}


.service-detail-checkup-section h2
{
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  margin-bottom: 10px;
  
}


.service-detail-checkup-section h1
{
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  margin-bottom: 10px;
  
}

.service-detail-checkup-content-dyna
{
   font-family: 'Inter', sans-serif !important;   
}
.service-detail-checkup-content-dyna ul
{
    padding: 0;
  line-height: 24px;
}

.service-detail-checkup-content-dyna ul li
{
    list-style:none;
}


.service-detail-checkup-content-dyna .how-title 
{
     font-size: clamp(24px, 4vw, 36px) !important;
  font-weight: 700;
  margin-bottom: 10px; 
}

#orange-box .service-detail-checkup-content-dyna h1,
#orange-box .service-detail-checkup-content-dyna h2
{
 color: var(--orange-primary-text-clr);  
   font-size: 20px;
}
#peach-box .service-detail-checkup-content-dyna h1,
#peach-box .service-detail-checkup-content-dyna h2
{
 color: var(--peach-primary-clr);  
   font-size: 20px;
}
#yellow-box .service-detail-checkup-content-dyna h1,
#yellow-box .service-detail-checkup-content-dyna h2
{
    color: var(--yellow-primary-btn-clr);
      font-size: 20px;
}
#red-box .service-detail-checkup-content-dyna h1,
#red-box .service-detail-checkup-content-dyna h2
{
    color: var(--red-primary-text-clr);   
      font-size: 20px;
}