.split-background {
    position: relative;
    display: flex;
    min-height: 80vh;
    background: linear-gradient(to right, #e9e7df 70%, #23221f 30%);
    overflow: hidden;
    height: 400px;
    align-items: center; /* Vertically center children */
}

.home-left {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    padding-left: 3vw;  
    padding-right: 2vw;
    background: transparent;
    position: relative;
    z-index: 1;
    padding: 2rem;
    height: 100%; /* Ensure it fills the parent height */
}

.home-title {
    font-size: 3rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #23221f;
    margin-bottom: 2rem;
    letter-spacing: 1px;
}

.home-subtitle {
    font-size: 1.25rem;
    color: #23221f;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    margin-bottom: 2rem;
}

.home-divider {
    border: none;
    border-top: 2px solid #23221f;
    width: 80%;
    margin-top: 2rem;
}

.logo-overlap-container {
    position: absolute;
    left: 70%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 400px; /* Adjust as needed */
    height: 400px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.logo-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    background: white;
    border: 4px solid #fff;
    object-fit: cover;
}

@media (max-width: 900px) {
    .split-background {
        flex-direction: column;
        background: #e9e7df;
        min-height: 60vh;
    }

    .logo-overlap-container {
        position: static;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }

    .logo-img {
        position: static;
        left: unset;
        top: unset;
        transform: none;
        width: 80vw;
        max-width: 400px;
        margin: 2rem 0;
        height: auto;
    }
}

.vertical-split-background {
    position: relative;
    min-height: 80vh;
    background: linear-gradient(
        to bottom,
        #23221f 0%,
        #23221f 30%,
        #e9e7df 30%,
        #e9e7df 100%
    );
   /* overflow: hidden;
    height: 400px;*/
}

.constellations-header {
    padding: 2.5rem 2rem 1rem 2rem; /* Top, right, bottom, left */
    text-align: center;
    width: 100%;
    /* Remove flex and max-height so it stays at the top */
}

.constellations-title {
    font-size: 3rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: whitesmoke;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.constellations-text {
    font-size: 1.5rem;
    color: #23221f; /* Dark text for light background */
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    margin-bottom: 2rem;
}

.constellations-content-bottom {
    /*position: absolute;*/
    left: 0;
    right: 0;
    bottom: 0;
    top: 30%; /* Start at the beginning of the lighter area */
    padding: 2rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.constellations-columns {
    display: flex;
    flex-direction: row;
    height: 100%;
    min-height: 400px;
    width: 100%;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
}

.constellations-image-col {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.constellations-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    background: #fff;
}

.constellations-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1rem;
}

@media (max-width: 900px) {
    .constellations-columns {
        flex-direction: column;
        gap: 1rem;
    }
    .constellations-image-col,
    .constellations-text-col {
        padding: 1rem;
        max-width: 100%;
    }
    .constellations-image {
        max-width: 90vw;
        max-height: 220px;
    }
}

.home-divider-centered {
    border: none;
    border-top: 2px solid #23221f;
    width: 60%;
    margin: 2rem auto 0 auto; /* Top margin, auto left/right for centering */
    display: block;
}

.benefits-list {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0 2rem 0;
}

    .benefits-list li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 1rem;
        font-size: 1.25rem;
        color: #23221f;
        font-family: 'Montserrat', Arial, sans-serif;
    }

        .benefits-list li::before {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0.7rem;
            width: 0.75rem;
            height: 0.75rem;
            background: linear-gradient(135deg, #23221f 60%, #e9e7df 100%);
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0,0,0,0.10);
        }


.horizontal-split-background {
    position: relative;
    display: flex;
    min-height: 80vh;
    background: linear-gradient(to right, #23221f 0%, #23221f 30%, #e9e7df 30%, #e9e7df 100%);
    overflow: hidden;
    align-items: center;
}

.horizontal-left {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 2rem 2rem 3vw;
    background: transparent;
    z-index: 1;
    height: 100%;
    text-align: left;
}

.horizontal-title {
    font-size: 2.5rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #fff; /* White for dark background */
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.home-right {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    padding-right: 3vw;
    padding-left: 2vw;
    background: transparent;
    position: relative;
    z-index: 1;
    padding: 2rem;
    height: 100%; /* Ensure it fills the parent height */
}

.horizontal-subtitle {
    font-size: 1.25rem;
    color: #23221f;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    margin-bottom: 2rem;
    text-align: right; /* Subtitle aligned right */
}


.horizontal-divider-right {
    border: none;
    border-top: 2px solid #23221f;
    width: 60%;
    margin: 2rem 0 0 auto; /* Top margin, zero left, auto right for right alignment */
    display: block;
}

.horizontal-logo-overlap-container {
    position: absolute;
    left: 20%;
    top: 75%;
    transform: translateY(-50%);
    z-index: 10;
    width: 285px; /* Adjust as needed */
    height: 285px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.horizontal-logo-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    background: white;
    border: 4px solid #fff;
    object-fit: cover;
}

@media (max-width: 900px) {
    .horizontal-split-background {
        flex-direction: column;
        background: #e9e7df;
        min-height: 60vh;
    }

   

    .horizontal-logo-overlap-container {
        position: static;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        transform: none;
        margin: 2rem 0;
    }

    .horizontal-logo-img {
        width: 80vw;
        max-width: 400px;
        height: auto;
    }
}

.about-text-container {
    width: 80%;
    word-break: break-word;
    white-space: normal;
    margin-left: auto; /* Aligns the container to the right */
    margin-right: 30%;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
    font-size: 1.5rem;
    text-align: left; /* Text remains left-aligned inside the container */
    color: #23221f;
    font-family: 'Montserrat', Arial, sans-serif;
}


.services-carousel-container {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', Arial, sans-serif;
    /* Optional: add padding for visual comfort */
    padding: 2rem 0;
}

.services-carousel-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #23221f;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    font-family: 'Montserrat', Arial, sans-serif;
}

.services-carousel-subtitle {
    font-size: 1rem; /* Smaller text */
    color: #23221f;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    margin: 1rem 0;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}


.individual-calendar-center-box {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    font-family: 'Montserrat', Arial, sans-serif;
    align-items: center;
}


.calendar-flex-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    max-width: 950px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1.2rem 1rem;
    background: #fafafa;
    box-sizing: border-box;
}

.calendar-left {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #eee;
    padding-right: 1.5rem;
    min-width: 220px;
}

.calendar-picker {
    margin: 0;
}

.calendar-right {
    flex: 1 1 0;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.calendar-accordion {
    width: 100%;
    margin: 0;
}

.calendar-btn {
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 1rem;
}

.calendar-no-appts {
    color: #888;
    font-style: italic;
    padding: 1em;
    text-align: center;
}

.calendar-image {
    margin-top: 18px;
    max-width: 185px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    align-content: center;
}

/* Appointment page custom style */
.individual-appointment-container {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.15rem;
    color: #23221f;
    background: #fafafa;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    padding: 2rem 2.5rem 2rem 2.5rem;
    width: 80%;
    max-width: 700px;
    margin: 2rem auto;
}

@media (max-width: 900px) {
    .individual-appointment-container {
        width: 98vw;
        max-width: 98vw;
        padding: 1rem 0.5rem;
    }
}


@media (max-width: 900px) {
    .calendar-flex-container {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }
    .calendar-left, .calendar-right {
        flex: none;
        width: 100%;
        padding: 0;
        border: none;
    }
    .calendar-left {
        margin-bottom: 1.5rem;
    }
   
}

.individual-appointment-font {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.70rem;
}

    .individual-appointment-font,
    .individual-appointment-font .rz-label,
    .individual-appointment-font .rz-textbox,
    .individual-appointment-font input,
    .individual-appointment-font span,
    .individual-appointment-font label {
        font-size: 0.70rem;
        font-family: 'Montserrat', Arial, sans-serif;
    }


.success-message {
    color: grey;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.0rem;
    font-weight: 700;
    margin: 1rem auto 0 auto; /* Less top margin */
    padding: 0.5rem 1.2rem; /* Less vertical and horizontal padding */
    max-width: 520px;
    max-height:1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

    .success-message .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.0rem;
        height: 1.0rem;
        font-size: 1.0rem;
        color: grey;
    }

.carousel-split {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f4ee;
    border-radius: 16px;
    overflow: hidden;
}

.carousel-title-section {
    background: #23221f;
    color: #fff;
    padding: 32px 24px 24px 48px;
    text-align: left;
}

.carousel-title {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.carousel-content-section {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    padding: 48px 48px;
    gap: 48px;
    background: #f5f4ee;
    height: 100%; /* Ensure it fills the parent */
    min-height: 0; /* Allow children to shrink if needed */
}

.carousel-image-col {
    flex: 1 1 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 0;
}

.carousel-image {
    max-width: 350px;
    max-height: 320px;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    background: #fff;
    padding: 8px;
}

.carousel-text-col {
    flex: 2 1 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.carousel-text {
    font-size: 1.35rem;
    color: #23221f;
    line-height: 1.6;
}

.carousel-benefits-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.carousel-benefits-list li {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 1.1em;
    font-size: 1.2rem;
    color: #23221f;
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.6;
    transition: color 0.2s;
}

.carousel-benefits-list li::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.7rem;
    width: 1.1rem;
    height: 1.1rem;
    background: linear-gradient(135deg, #23221f 60%, #e9e7df 100%);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(35,34,31,0.10);
    border: 2px solid #fff;
    transition: background 0.2s;
}

.carousel-benefits-list li:hover {
    color: #1b6ec2;
}

.carousel-benefits-list li:hover::before {
    background: linear-gradient(135deg, #1b6ec2 60%, #e9e7df 100%);
}

@media (max-width: 900px) {
    .carousel-content-section {
        flex-direction: column;
        padding: 24px 12px;
        gap: 24px;
    }
    .carousel-title-section {
        padding: 24px 12px 16px 12px;
        text-align: center;
    }
    .carousel-title {
        font-size: 2rem;
    }
    .carousel-text-col-scroll {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* FORCE SCROLL FOR THE TEXT AREA IN CAROUSEL ITEM 3 */
.carousel-text-col-scroll {
    max-height: 340px !important; /* Adjust as needed for your layout */
    min-height: 120px;
    overflow-y: auto !important;
    padding-right: 12px !important; /* Space for scrollbar */
    box-sizing: border-box;
}

/* ON MOBILE, ALLOW A BIT MORE HEIGHT BUT STILL SCROLL IF NEEDED */
@media (max-width: 1024px) {
    .carousel-text-col-scroll {
        max-height: 220px !important;
        min-height: 100px;
        overflow-y: auto !important;
        padding-right: 8px !important;
        box-sizing: border-box;
        /* Optional: always show scrollbar for testing */
        scrollbar-color: #bbb #f5f4ee;
        scrollbar-width: thin;
    }
        /* For Webkit browsers (Chrome, Safari) */
        .carousel-text-col-scroll::-webkit-scrollbar {
            width: 6px;
            background: #f5f4ee;
        }

        .carousel-text-col-scroll::-webkit-scrollbar-thumb {
            background: #bbb;
            border-radius: 3px;
        }
}
/* IMPROVED MOBILE/TABLET EXPERIENCE FOR 900px - 1024px */
@media (max-width: 1024px) {
    /* --- MENU: Center options and remove separators --- */
    .top-row {
        justify-content: center !important;
        height: auto;
        flex-wrap: wrap;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .top-row ::deep a,
    .top-row ::deep .btn-link {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1.1rem;
        padding: 0.6rem 0;
    }
    .top-row ::deep .nav-separator {
        display: none !important;
    }

    /* --- TITLES & TEXT: Reduce font sizes for better fit --- */
    .home-title,
    .constellations-title,
    .carousel-title,
    .services-carousel-title {
        font-size: 2rem !important;
    }
    .home-subtitle,
    .constellations-text,
    .carousel-text,
    .about-text-container,
    .services-carousel-subtitle {
        font-size: 1rem !important;
    }
    .about-text-container {
        width: 95% !important;
        margin-right: 0 !important;
        padding: 1rem 0.5rem !important;
    }

    /* --- IMAGES: Reduce and constrain sizes --- */
    .logo-img,
    .horizontal-logo-img {
        width: 60vw !important;
        max-width: 220px !important;
        height: auto !important;
    }
    .logo-overlap-container,
    .horizontal-logo-overlap-container {
        width: 60vw !important;
        max-width: 220px !important;
        height: auto !important;
        min-width: 120px;
    }
    .carousel-image,
    .constellations-image {
        max-width: 70vw !important;
        max-height: 160px !important;
    }

    /* --- COLUMNS: Stack vertically and center content --- */
    .constellations-columns,
    .carousel-content-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    .constellations-image-col,
    .constellations-text-col,
    .carousel-image-col,
    .carousel-text-col {
        padding: 0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .carousel-text-col-scroll {
        max-height: 200px !important;
        font-size: 1rem !important;
    }

    /* --- DIVIDERS: Center them --- */
    .home-divider,
    .home-divider-centered,
    .horizontal-divider-right {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* --- MENU: Center options and remove separators --- */
    .navbar-nav {
        justify-content: center !important;
        width: 100%;
        text-align: center;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem;
    }
    .navbar-nav .nav-item,
    .navbar-nav .dropdown {
        display: block;
        width: 100%;
        text-align: center;
    }
    .navbar-nav .nav-link,
    .navbar-nav .dropdown-toggle {
        font-size: 1.1rem;
        padding: 0.7rem 0;
        width: 100%;
        display: inline-block;
    }
    /* Hide menu separators for Blazor/Bulma/Bootstrap navs */
    .navbar-nav .nav-separator,
    .navbar-nav li.nav-separator,
    .nav-separator {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Also hide any dot icons inside separators */
    .navbar-nav .nav-separator span,
    .nav-separator span {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    /* --- Fix image cropping and centering --- */
    .logo-overlap-container,
    .horizontal-logo-overlap-container {
        position: static !important;
        width: 90vw !important;
        max-width: 350px !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 2rem auto 1rem auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
        z-index: 1 !important;
    }
    .logo-img,
    .horizontal-logo-img {
        width: 90vw !important;
        max-width: 350px !important;
        height: auto !important;
        min-width: 0 !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* --- Titles: Make them more readable and bold --- */
    .home-title,
    .constellations-title,
    .carousel-title,
    .services-carousel-title {
        font-size: 2.2rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        letter-spacing: 1px !important;
        line-height: 1.2 !important;
        margin-bottom: 1.2rem !important;
    }
    .home-subtitle,
    .constellations-text,
    .carousel-text,
    .about-text-container,
    .services-carousel-subtitle {
        font-size: 1.15rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
    .about-text-container {
        width: 98vw !important;
        margin: 0 auto !important;
        padding: 1rem 0.5rem !important;
        text-align: center !important;
    }

    /* --- Columns: Stack and center content --- */
    .constellations-columns,
    .carousel-content-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    .constellations-image-col,
    .constellations-text-col,
    .carousel-image-col,
    .carousel-text-col {
        padding: 0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .carousel-text-col-scroll {
        max-height: 200px !important;
        font-size: 1.1rem !important;
    }

    /* --- Dividers: Center them --- */
    .home-divider,
    .home-divider-centered,
    .horizontal-divider-right {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 1024px) {
    /* Remove forced scrolls and 100vh limits */
    main, .page, .vertical-split-background, .split-background, .horizontal-split-background {
        overflow: visible !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Use full width for content, reduce side margins/paddings */
    .vertical-split-background,
    .split-background,
    .horizontal-split-background {
        padding: 0.5rem !important;
        margin: 0 !important;
        width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Make sure the image is always fully visible and not cut off */
    .logo-overlap-container,
    .horizontal-logo-overlap-container {
        position: static !important;
        width: 90vw !important;
        max-width: 320px !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 1.2rem auto 1rem auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
        z-index: 1 !important;
    }
    .logo-img,
    .horizontal-logo-img {
        width: 90vw !important;
        max-width: 320px !important;
        height: auto !important;
        min-width: 0 !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Titles: balanced size for mobile/tablet */
    .home-title,
    .constellations-title,
    .carousel-title,
    .services-carousel-title {
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        word-break: break-word !important;
    }
    .home-subtitle,
    .constellations-text,
    .carousel-text,
    .carousel-benefits-list,
    .about-text-container,
    .services-carousel-subtitle {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        word-break: break-word !important;
    }
    .about-text-container {
        width: 98vw !important;
        margin: 0 auto !important;
        padding: 1rem 0.5rem !important;
        text-align: center !important;
    }

    /* --- Columns: Stack and center content --- */
    .constellations-columns,
    .carousel-content-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    .constellations-image-col,
    .constellations-text-col,
    .carousel-image-col,
    .carousel-text-col {
        padding: 0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .carousel-text-col-scroll {
        max-height: 200px !important;
        font-size: 1.1rem !important;
    }

    /* --- Dividers: Center them --- */
    .home-divider,
    .home-divider-centered,
    .horizontal-divider-right {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 1024px) {
    /* Reduce empty space above and below the main content blocks */
    .vertical-split-background,
    .split-background,
    .horizontal-split-background {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Reduce space above and below the header/titles */
    .constellations-header,
    .home-left {
        padding-top: 1rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Reduce space above and below the about text */
    .about-text-container {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Reduce space above and below the divider */
    .home-divider,
    .home-divider-centered,
    .horizontal-divider-right {
        margin-top: 0.7rem !important;
        margin-bottom: 0.3rem !important;
    }

    /* Reduce space above and below the image */
    .logo-overlap-container,
    .horizontal-logo-overlap-container {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
}
@media (max-width: 1024px) {
    .carousel-image {
        max-width: 80vw !important;
        max-height: 200px !important;
        width: 80vw !important;
        height: auto !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}


@media (max-width: 1024px) and (orientation: portrait) {
    .carousel-image {
        max-width: 80vw !important;
        max-height: 200px !important;
        width: 80vw !important;
        height: auto !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .carousel-image {
        max-width: 50vw !important;
        max-height: 180px !important;
        width: 50vw !important;
        height: auto !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}



@media (max-width: 1024px) {
    /* Remove white background and padding for carousel images on mobile */
    .carousel-image,
    .carousel-image-item3 {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* Allow text to expand fully for item 3 */
    .carousel-text-col-scroll {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
}



@media (max-width: 1024px) {
    .carousel-content-section {
        display: block !important;
        flex-direction: unset !important;
        align-items: unset !important;
        justify-content: unset !important;
        height: auto !important;
        min-height: unset !important;
        padding: 12px 0 !important;
        gap: 0 !important;
    }
    .carousel-image-col,
    .carousel-text-col,
    .carousel-text-col-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: static !important;
        z-index: auto !important;
        float: none !important;
        padding: 0 0 1rem 0 !important;
    }
    .carousel-image{
        display: block !important;
        margin: 0 auto 1rem auto !important;
        position: static !important;
        float: none !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        z-index: auto !important;
        max-width: 90vw !important;
        height: auto !important;
    }
    .carousel-text-col-scroll {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }
}

.carousel-image-item3 {
    max-width: 320px !important;
    max-height: 320px !important;
    width: 100%;
    height: auto;
}




@media (max-width: 1024px) {
    .carousel-text-col-scroll {
        max-height: 220px !important;
        min-height: 100px;
        overflow-y: auto !important;
        padding-right: 8px !important;
        box-sizing: border-box;
        scrollbar-color: #bbb #f5f4ee;
        scrollbar-width: thin;
    }

        .carousel-text-col-scroll::-webkit-scrollbar {
            width: 6px;
            background: #f5f4ee;
        }

        .carousel-text-col-scroll::-webkit-scrollbar-thumb {
            background: #bbb;
            border-radius: 3px;
        }
}

.carousel-image-item1 {
    max-width: 420px !important;
    max-height: 380px !important;
    width: 100%;
    height: auto;
}

.carousel-text-item1 {
    font-size: 1.6rem !important;
    line-height: 1.7 !important;
}

.carousel-title-item1 {
    font-size: 2.8rem !important;
}


@media (max-width: 1024px) {
    .carousel-image-item1 {
        max-width: 80vw !important;
        max-height: 180px !important;
    }
}

.carousel-image-item2 {
    max-width: 420px !important;
    max-height: 380px !important;
    width: 100%;
    height: auto;
}

.image-copyright-caption {
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.5rem;
    text-align: center;
}
.image-copyright-caption a {
    color: #888;
    text-decoration: underline;
}


.login-split-background {
    min-height: 100vh;
    width: 100vw;
    background: #e9e7df; /* Remove gradient, use only the light color */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.login-content {
    background: rgba(255,255,255,0.25);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 340px;
    z-index: 2;
}

.login-logo-container {
    position: relative;
    margin-bottom: 1.5rem;
    z-index: 3;
}

.login-logo-img {
    width: 180px;   /* Increased size */
    height: 180px;  /* Increased size */
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    background: #fff;
    border: 4px solid #fff;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    position: relative;
    top: -40px;
}

.login-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #23221f;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    text-align: center;
    margin-top: -1.5rem;
}

@media (max-width: 900px) {
    .login-split-background {
        background: #e9e7df;
        min-height: 100vh;
        padding: 0;
    }
    .login-content {
        min-width: 90vw;
        padding: 2rem 0.5rem 1.5rem 0.5rem;
    }
    .login-logo-img {
        width: 120px;
        height: 120px;
        top: -20px;
    }
    .login-title {
        font-size: 1.5rem;
        margin-top: -1rem;
    }
}

.btn-gray {
    background-color: #6c757d !important;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 1.3rem;
    padding: 0.5rem 2rem;
    font-family: 'Montserrat', Arial, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    transition: background 0.2s;
}
.btn-gray:hover, .btn-gray:focus {
    background-color: #5a6268 !important;
    color: #fff !important;
}

.dialog-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.7rem;
    font-weight: bold;
    color: #23221f;
    margin-bottom: 1.2rem;
}


.btn-pill-gray {
    background-color: #6c757d !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 0.6rem 2.2rem !important;
    font-size: 1.0rem;
    font-weight: 500;
    box-shadow: none;
    transition: background 0.18s, transform 0.12s;
    min-width: 130px;
    text-align: center;
    letter-spacing: 0.5px;
}

    .btn-pill-gray:hover,
    .btn-pill-gray:focus {
        background-color: #5a6268 !important;
        color: #fff !important;
        transform: translateY(-2px) scale(1.03);
    }




/* General carousel adjustments */
.carousel-title {
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    word-break: break-word;
}

.carousel-text,
.carousel-benefits-list {
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: left;
    padding: 0.5rem 1rem;
    overflow-y: auto;
    max-height: 350px;
}

.carousel-content-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.carousel-image-col {
    flex: 1 1 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-text-col {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Responsive styles for mobile */
@media (max-width: 900px) {
    .carousel-title {
        font-size: 1.2rem;
        padding: 0.5rem 0.2rem;
    }

    .carousel-content-section {
        flex-direction: column;
        gap: 0.5rem;
    }

    .carousel-image-col,
    .carousel-text-col {
        flex: unset;
        width: 100%;
        max-width: 100%;
    }

    .carousel-text{
        font-size: 1rem;
        max-height: 200px;
        padding: 0.5rem 0.2rem;
    }

    .carousel-image {
        max-width: 90vw;
        height: auto;
    }


}

@media (max-width: 600px) {
    .carousel-title-section {
        padding: 0.7rem 0.3rem 0.7rem 0.3rem !important;
        border-radius: 1rem 1rem 0 0 !important;
    }

    .carousel-title-item1 {
        font-size: 1.1rem !important;
        line-height: 1.15 !important;
        padding: 0.2rem 0.1rem !important;
        word-break: break-word !important;
        text-align: center !important;
    }

    .carousel-content-section {
        padding: 0.7rem 0.2rem 0.7rem 0.2rem !important;
        gap: 0.5rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .carousel-image-col {
        padding: 0 !important;
        margin-bottom: 0.5rem !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .carousel-image-item1 {
        max-width: 90vw !important;
        max-height: 120px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .carousel-text-col {
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .carousel-text-item1 {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
        padding: 0.2rem 0.1rem !important;
        text-align: center !important;
        word-break: break-word !important;
        max-height: 110px !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    .carousel-title-section {
        padding: 0.5rem 0.2rem 0.5rem 0.2rem !important;
        border-radius: 1rem 1rem 0 0 !important;
    }

    .carousel-title-item1 {
        font-size: 1.25rem !important;
        line-height: 1.1 !important;
        padding: 0.4rem 0.1rem !important;
        text-align: center !important;
        word-break: break-word !important;
    }

    .carousel-content-section {
        padding: 0.5rem 0.1rem 0.7rem 0.1rem !important;
        gap: 0.3rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .carousel-image-col {
        padding: 0.2rem 0 0.5rem 0 !important;
        margin-bottom: 0.3rem !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .carousel-image-item1 {
        max-width: 98vw !important;
        max-height: 180px !important;
        width: 95% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .carousel-text-col {
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .carousel-text-item1 {
        font-size: 1.15rem !important;
        line-height: 1.5 !important;
        padding: 0.5rem 0.1rem 0.3rem 0.1rem !important;
        text-align: center !important;
        word-break: break-word !important;
        max-height: 120px !important;
        overflow-y: auto !important;
    }
}


@media (max-width: 900px) {
    .carousel-benefits-list {
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
        max-height: 460px !important;
        padding: 0.5rem 0.2rem !important;
        overflow-y: auto !important;
        margin-bottom: 0.7rem !important;
    }

        .carousel-benefits-list li {
            font-size: 0.92rem !important;
            line-height: 1.35 !important;
            margin-bottom: 0.7em !important;
            padding-left: 1.5rem !important;
            text-align: left !important;
        }

    

    .carousel-benefits-list li::before {
        width: 0.5rem !important;
        height: 0.5rem !important;
        left: 0.1rem !important;
        top: 0.55rem !important;
        box-shadow: 0 1px 2px rgba(35,34,31,0.10) !important;
        border-width: 1px !important;
    }
}

@media (max-width: 900px) {
    .carousel-benefits-scroll-area {
        max-height: 460px; /* Increased from 320px to 460 */
        max-width: 80%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 0.2rem 0.5rem 0.2rem;
        background: #f5f4ee;
        border-radius: 0 0 1rem 1rem;
    }

        .carousel-benefits-scroll-area .carousel-text-col,
        .carousel-benefits-scroll-area .carousel-image-col {
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            text-align: left !important;
            justify-content: flex-start !important;
            align-items: flex-start !important;
        }

        .carousel-benefits-scroll-area .carousel-image-item2 {
            margin: 0.5rem auto 0.2rem auto !important;
            display: block !important;
            max-width: 95vw !important;
            max-height: 120px !important;
            width: 100% !important;
            height: auto !important;
        }
}

@media (max-width: 600px) {
    .carousel-image-item3 {
        max-width: 70vw !important;
        width: 70vw !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}

@media (max-width: 640px) and (orientation: landscape) {
    .carousel-image-item2,
    .carousel-image-item3 {
        max-width: 90vw;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        border-radius: 16px;
    }
}

@media (max-width: 900px) {
    .horizontal-left {
        padding-bottom: 0.2rem !important;
        padding-top: 0.5rem !important;
    }

    .horizontal-title {
        margin-bottom: 0.3rem !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    .horizontal-logo-overlap-container {
        margin-top: 0.2rem !important;
        margin-bottom: 0.2rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .horizontal-logo-img {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
    }
}


.testimonials-split-background {
    position: relative;
    display: flex;
    min-height: 80vh;
    background: linear-gradient(to left, #e9e7df 70%, #23221f 30%);
    overflow: hidden;
    align-items: center;
    height: 400px;
}

.testimonials-image-col {
    flex: 0 0 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    height: 100%;
}

.testimonials-img {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    background: white;
    border: 4px solid #fff;
    object-fit: cover;
}

.testimonials-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 3vw 2rem 2vw;
    height: 100%;
}

.testimonials-title-new {
    font-size: 2.7rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #23221f;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.testimonials-divider {
    border: none;
    border-top: 2px solid #23221f;
    width: 60%;
    margin: 2rem 0;
}

.testimonials-blockquote {
    font-size: 1.3rem;
    font-style: italic;
    color: #3a0647;
    background: #f7f7fa;
    border-left: 5px solid #23221f;
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
}

.testimonials-author {
    display: block;
    font-weight: 600;
    color: #23221f;
    margin-top: 0.5rem;
    font-size: 1.1rem;
}

@media (max-width: 900px) {
    .testimonials-split-background {
        flex-direction: column;
        background: #e9e7df;
        min-height: 60vh;
        height: auto;
    }

    .testimonials-image-col {
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 1rem 0;
    }

    .testimonials-img {
        width: 70vw;
        max-width: 320px;
        height: auto;
        margin: 0 auto;
    }

    .testimonials-text-col {
        width: 100%;
        padding: 1rem 0.5rem;
    }

    .testimonials-title-new {
        font-size: 2rem;
        text-align: center;
    }

    .testimonials-blockquote {
        font-size: 1.1rem;
        padding: 0.7rem 1rem;
    }
}

/* Hide or resize logo on mobile */
@media (max-width: 600px) {
    .horizontal-logo-overlap-container {
        display: none; /* Hide logo container on mobile */
    }

    .horizontal-title {
        font-size: 2rem !important; /* Make title smaller */
        text-align: center;
        margin-top: 1rem;
    }

    .horizontal-subtitle h4 {
        font-size: 1.2rem !important; /* Make carousel titles smaller */
        text-align: center;
    }

    .services-carousel-container img {
        max-width: 220px !important; /* Reduce image size in carousel */
    }

    .success-message {
        font-size: 1rem !important;
    }
}


@media (max-width: 900px) {
    .horizontal-title {
        margin-top: 0.2rem !important;
        margin-bottom: 0.2rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .horizontal-left {
        padding-top: 0.2rem !important;
        padding-bottom: 0.1rem !important;
    }
    .home-right {
        padding-top: 0.2rem !important;
        padding-bottom: 0.1rem !important;
    }
    .services-carousel-container {
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }
}

@media (max-width: 900px) {
    .horizontal-split-background {
        flex-direction: column !important;
        min-height: unset !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #e9e7df !important;
    }

    .horizontal-left {
        width: 100vw !important;
        background: #111 !important;
        padding: 2.2rem 0 0.5rem 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .horizontal-title {
        color: #fff !important;
        margin: 0 !important;
        text-align: center !important;
        width: 100vw !important;
        font-size: 2rem !important;
        background: none !important;
        padding: 0.2rem 0 !important;
    }

    .horizontal-logo-overlap-container {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 600px) {
    .calendar-image {
        max-width: 60vw !important;
        max-height: 110px !important;
        width: 60vw !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .calendar-image {
        max-width: 48vw !important;
        max-height: 120px !important;
        width: 48vw !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        display: block !important;
        padding: 8px 0 !important;
    }
}