/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hero Section */
.hbs-hero-wrapper {
    position: relative;
    padding-bottom: 350px; /* Equal or slightly more than the bottom offset of your .hbs-hero-boxes */
    z-index: 1;
}

.hbs-hero {
    position: relative;
    background: url('/images/hero-bg.jpg') no-repeat center center/cover;
    height: 750px;
    color: #fff;
}

.hbs-hero-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Cold Laser Therapy Section */

/* Slide-up animation */
.slide-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease-out;
}

    .slide-up.visible {
        opacity: 1;
        transform: translateY(0);
    }

.cold-laser-section {
    background: url('/images/bg-cold-laser-therapy2.jpg') top center / cover no-repeat;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cold-laser-overlay {
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    padding: 100px 20px;
}

/* ✅ Centered title block only */
.cold-laser-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}

    /* Typography */
    .cold-laser-content h2 {
        font-size: 2.8rem;
        font-family: 'Abel', sans-serif;
        margin-bottom: 20px;
    }

    .cold-laser-content p {
        font-size: 1.2rem;
        font-family: 'Arimo', sans-serif;
        margin-bottom: 40px;
    }

/* ✅ Grid remains untouched and independent */
.cold-laser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.therapy-item {
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 1rem;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease-out;
    text-decoration: none !important; 
}

    .therapy-item:hover {
        background-color: rgba(255, 255, 255, 0.9);
        color: #2e7d57;
    }

    .therapy-item.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Responsive fix for mobile stacking */
@media (max-width: 768px) {
    .cold-laser-grid {
        grid-template-columns: 1fr;
    }
}



/* end Cold Laser Section - Home */

/* Interior Hero Section */

/* Force full white background for interior pages */
body.interior .hbs-main-nav {
    background-color: rgba(255, 255, 255, 1) !important;
    padding: 20px 0; /* Or adjust if needed */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Optional subtle shadow */
}

/*body.interior .hbs-logo {
    transform: scale(0.7);*/ /* Match the scrolled state */
/*}*/

.interior-content h1 {
    text-align: center;
}




/*.interior-hero {
    background: linear-gradient(to bottom, #70b3aa 0%, #a8ccc8 50%, #ffffff 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    margin-top: 110px;
}

.interior-hero-img {
    width: 100%;
    max-width: 1999px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}*/

.interior-hero {
    position: relative;
    background: linear-gradient(to bottom, #70b3aa 0%, #a8ccc8 50%, #ffffff 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    margin-top: 110px;
    animation: heroFadeIn 1.2s ease-out forwards;
}

    .interior-hero::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0) 60% );
        z-index: 2;
        mix-blend-mode: screen;
    }

.interior-hero-img {
    width: 100%;
    max-width: 1999px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: translateY(20px);
    animation: heroImageFade 1.4s ease-out 0.3s forwards;
    position: relative;
    z-index: 1;
}

/* Animations */
@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroImageFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Content area styling (optional enhancements) */
.interior-content {
    padding: 3rem 1rem;
}

    .interior-content h1 {
        font-family: 'Abel', sans-serif;
        font-size: 3rem;
        margin-bottom: 40px !important;
    }

    .interior-content h2 {
        font-family: 'Abel', sans-serif;
        font-size: 2rem;
        margin: 2rem 0 1rem;
    }

    .interior-content p {
        font-family: 'Arimo', sans-serif;
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: .6rem;
    }
.terms-policies-content {
    margin-top:150px;
}

.interior-content .int-content-para {
    line-height: 2.2rem;
}

.interior-content .int-content-lead {
    line-height: 2.3rem;
    font-style:italic;
}

.interior-content h4 {
    font-size: 1.2rem;
    margin-bottom:1.6rem;
}

.interior-content ul {
    font-family: 'Arimo', sans-serif;
    margin-bottom: 2.0rem;
}

.interior-content li {
    font-size: 1.0rem;
    margin-bottom: 1.3rem;
    margin-left:15px;
}
.int-divider {
    border: none;
    border-top: 1px solid #b8bcc0; /* very light gray */
    margin: 1.5rem 0 1.5rem 0; /* optional spacing */
}


@media (max-width: 768px) {
    .interior-content h1 {
        font-size: 2.2rem;
        margin-bottom:30px !important;
    }

    .interior-content h2 {
        font-size: 1.8rem;
        margin: 2rem 0 1rem;
    }
   }

/* Float > Center Content Image */

/* Default: float image left, add margin so text wraps nicely */
.content-image-left {
    float: left;
    margin: 0 20px 20px 0;
    max-width: 50%; /* Optional: limit size on desktop */
}

/* Default: float image right */
.content-image-right {
    float: right;
    margin: 10px 0 20px 20px;
}

.image-with-caption {
    float: right;
    margin: 10px 0 20px 20px;
    max-width: 400px; /* <- control figure size here */
    text-align: center;
}

    .image-with-caption img {
        width: 100%; /* make image fill the figure */
        height: auto;
        display: block;
    }

.image-tagline {
    font-size: 0.9rem;
    font-style: italic;
    color: #aaa;
    margin-top: 6px;
}




.img-sm {
    max-width: 350px;
}

/* Responsive override for mobile */
@media (max-width: 768px) {
    .content-image-left,
    .content-image-right,
    .image-with-caption {
        float: none;
        display: block;
        margin: 0 auto 20px auto; /* center horizontally + space below */
        max-width: 100%; /* ensures image scales */
        text-align: center;
    }

        .image-with-caption img {
            max-width: 100%; /* ensure image fills its container */
            height: auto;
        }
}


/* End Float > Center */

.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Optional: helps hide flicker while loading */
    border-radius: 8px; /* Optional: adds subtle style */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Optional glam */
}

    .iframe-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }


.content-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    padding-top: 30px; /* optional spacing above video */
    height: 0;
    overflow: hidden;
    margin: 30px auto; /* vertical margin + center horizontally */
    max-width: 700px; /* or any width you prefer */
    width: 100%; /* ensure it scales fluidly below the max-width */
}

    .content-video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.testimonials-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    max-width: 1200px;
    border-radius:15px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 30px;
    justify-content: center;
}

    .testimonials-section h2 {
        font-family: 'Abel', sans-serif;
        font-size: 2.5rem;
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
        color: #333;
    }

.testimonial-card {
    background: #fff;
    border-radius: 8px;
    padding: 25px 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width: calc(50% - 15px); /* Two columns with 30px gap */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .testimonial-card .quote {
        font-style: italic;
        font-size: 1.05rem;
        color: #444;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .testimonial-card .author {
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

    .testimonial-card .rating {
        color: #e5a823;
        font-size: 1.1rem;
    }

.more-reviews {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-family: 'Arimo', sans-serif;
    margin-top: 30px;
}

    .more-reviews a {
        color: #467ebe;
        font-weight: 600;
        text-decoration: none;
    }

        .more-reviews a:hover {
            text-decoration: underline;
        }




/* Main Navigation */

/* Schedule Consultation Button */
.hbs-hero-btn-container {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: flex-end;
    z-index: 1000; /* was 10 */
}

.hbs-hero-btn {
    display: inline-block;
    background-color: #467ebe;
    color: white;
    padding: 6px 15px;
    text-decoration: none;
    font-family: 'Arimo', sans-serif;
    font-size: .8rem;
    transition: background-color 0.3s ease;
}

    .hbs-hero-btn:hover {
        background-color: #5b8ed6;
    }

@media (max-width: 991.98px) {
    .hbs-hero-btn-container {
        display: none;
    }
}


.hbs-main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 0;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.5s ease;
}

    .hbs-main-nav.scrolled {
        background-color: rgba(255, 255, 255, 1);
        padding: 15px 0;
    }


.hbs-main-nav-int {
    background-color: rgba(255, 255, 255, 1.0);
}

.hbs-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    max-height: 100px;
    margin: 0 auto;
    padding: 5px 15px;
}

.hbs-logo-container {
    flex: 0 0 auto;
}

.hbs-logo {
    max-width: 100px;
    /*position: relative;
    top: 0;
    z-index: 6;*/
    transition: transform 0.4s ease, max-width 0.4s ease;
}

.hbs-main-nav.scrolled .hbs-logo {
    transform: scale(0.7);
    transition: transform 0.4s ease, max-width 0.4s ease;
}

/* Nav Toggle */
.hbs-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
}

/* Nav Links Desktop */
.hbs-nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.hbs-nav-items {
    display: flex;
    gap: 16px;
    z-index: 10;
    font-family: 'Arimo', sans-serif;
    font-size: 1.1rem;
    color: #333;
}

    .hbs-nav-items a {
        text-decoration: none;
        transition: color 0.3s ease;
        color: #333;
    }

        .hbs-nav-items a:hover {
            color: #467ebe;
        }

.hbs-social-icons {
    display: flex;
    gap: 10px;
}

.hbs-social-link {
    color: #333;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .hbs-social-link:hover {
        color: #467ebe;
    }

.hbs-mobile-consult {
    display: none;
}

/* Dropdown */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-toggle {
    background: none;
    border: none;
/*    margin-left: 5px;
*/    cursor: pointer;
    color: #333;
    font-family: 'Arimo', sans-serif;
    font-size: 1.1rem;
    /*display: none;*/ /* mobile only by default */
}

    .dropdown-toggle i {
        transition: transform 0.3s ease;
    }

    .dropdown-toggle.rotate i {
        transform: rotate(180deg);
    }

   

/* Desktop hover dropdown */

/* Base dropdown styling */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 5px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 0px 0;
    min-width: 220px;
    z-index: 1000;
    font-size: 0.9rem;
}

/* Third-level (sub-dropdown) container */
.nav-sub-dropdown {
    position: relative;
}

/* Third-level dropdown */
.dropdown-submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-width: 220px;
    padding: 0px 0;
    z-index: 1000;
}

    /* Smaller text and padding for third-level */
    .dropdown-submenu li a {
        display: block;
        font-size: 0.875rem;
        color: #333;
        text-decoration: none;
    }

    .dropdown-submenu li {
        list-style: none;
    }
/* Hover behavior for nested submenu */
.nav-sub-dropdown:hover > .dropdown-submenu {
    display: block;
}

/* Desktop hover dropdown */
@media (min-width: 1000px) {
    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }

    .dropdown-menu li a {
        display: block;
        padding: 10px 15px;
        transition: background-color 0.3s ease, color 0.3s ease;
        color: #333;
        text-decoration: none;
    }

        .dropdown-menu li a:hover {
            background-color: #5b8ed6;
            color: #fff;
        }

    .hbs-mobile-consult {
        display: none;
    }
}

/* Optional mobile fallback if needed */
@media (max-width: 999px) {
    .dropdown-submenu {
        display: none !important;
        position: static !important;
        background: none;
        border: none;
        box-shadow: none;
        padding-left: 10px;
        margin-top: 10px;
    }

        .dropdown-submenu.show {
            display: block !important;
        }

    .nav-sub-dropdown > .sub-toggle {
        display: block;
        width: 100%;
   }

       /* .nav-sub-dropdown > .sub-toggle::after {
            content: "▸";
            float: right;
            font-size: 1.4rem;
        }

    .nav-sub-dropdown.open > .sub-toggle::after {
        content: "▾";
    }*/

    .dropdown-submenu li a {
        font-size: .9rem;
        padding-left: 5px;
        display: block;
    }

    .sub-toggle {
        cursor: pointer;
    }

}


/* --- Mobile styles --- */
@media (max-width: 999.98px) {
    .hbs-nav-toggle {
        display: inline-block;
    }
    .hbs-main-nav {
        top: 0;
        background-color: white;
        padding: 0 0;
        z-index: 10;
    }
    .hbs-logo {
        max-width: 60px !important;
    }

    .hbs-main-nav {
        padding: 10px 0 !important; /* override 30px default */
    }

    body.interior .hbs-main-nav {
        padding: 10px 0; /* Or adjust if needed */
        /*box-shadow: 0 2px 8px rgba(0,0,0,0.05);*/ /* Optional subtle shadow */
    }

    .interior-hero {        
        margin-top: 80px; /* adjust as needed to clear your nav height */
    }

 


    .hbs-mobile-consult {
        display: block;
        font-weight: bold;
        color: #467ebe;
        text-decoration: none;
    }

        .hbs-mobile-consult:hover {
            text-decoration: none;
        }

    .hbs-nav-links {
        display: none;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        background-color: #fff;
        padding: 20px 15px;
    }

        .hbs-nav-links.hbs-nav-links-active {
            display: flex !important;
            ;
        }

    .hbs-nav-items {
        flex-direction: column;
        gap: 10px;
    }

    .hbs-social-icons {
        margin-top: 10px;
        justify-content: flex-start;
    }

    .dropdown-toggle {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
    }

    .dropdown-menu {
        position: relative;
        background: transparent;
        border: none;
        box-shadow: none;
        padding-left: 10px;
        min-width: 0;
        transition: all 0.3s ease;
        padding: 2px 2px;
        margin-top:10px;
    }

        .dropdown-menu.show {
            display: block;
            animation: rollDown 0.3s ease-out;
        }

    .nav-dropdown {
        flex-direction: column;
        align-items: flex-start;
    }
    .dropdown-menu li {
        margin-bottom: 14px;
        margin-left:10px;
    }
        .dropdown-menu li:last-child {
            margin-bottom: 0;
        }

}

@media (min-width: 768px) and (max-width: 999.98px) {
    .hbs-nav-links {
        display: none !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 20px 30px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 9;
    }

        .hbs-nav-links.hbs-nav-links-active {
            display: flex !important;
        }

    .hbs-nav-items {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

        .hbs-nav-items a {
            width: 100%;
            text-align: left;
        }
}


@media (max-width: 768px) {
    body.interior .hbs-main-nav {
        padding: 0px 0; /* Or adjust if needed */
        box-shadow: none;
    }

}


    /* Hero Content */
    .hbs-hero-content {
        padding-top: 200px;
        position: relative;
        z-index: 6;
    }

    .hbs-hero-text {
        padding-top: 100px;
        padding-left: 30px;
    }

        .hbs-hero-text h1 {
            font-family: 'Abel', sans-serif;
            font-size: 4.0rem;
            font-weight: 400;
            color: #333;
            margin-bottom: 24px;
        }

    .hbs-book-btn {
        display: inline-block;
        background-color: #467ebe;
        color: white;
        padding: 15px 25px;
        text-decoration: none;
        font-family: 'Arimo', sans-serif;
        font-size: 1.2rem;
        border-radius: 0px;
        transition: background-color 0.3s ease;
    }

        .hbs-book-btn:hover {
            background-color: #5b8ed6;
        }

    .hbs-hero-image {
        position: relative;
        text-align: center;
    }

    .hbs-doctor-img {
        max-width: 100%;
        position: relative;
        z-index: 10;
        top: -91px;
        pointer-events: none;
    }

    /* Overlay Boxes */
    .hbs-hero-boxes {
        position: absolute;
        bottom: -300px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 0px;
        z-index: 7;
        /*margin-bottom:100px;*/
    }

    .hbs-box {
        background-color: #47b9a9;
        padding: 25px 40px;
        border-radius: 0px;
        width: 400px;
        min-height: 350px;
        text-align: center;
        transition: transform 0.3s ease;
    }

    .hbs-box-meet {
        background-color: #467ebe;
    }

    .hbs-box:hover {
        transform: translateY(-40px);
    }


    .hbs-box-icon {
        max-width: 90px;
        opacity: 0.6;
        margin-bottom: 10px;
    }

    .hbs-box h3 {
        font-family: 'Abel', sans-serif;
        font-size: 2.2rem;
        color: #fff;
        margin-bottom: 15px;
    }

    .hbs-box p {
        font-family: 'Arimo', sans-serif;
        font-size: 1rem;
        color: #fff;
        margin-bottom: 10px;
    }

    .hbs-box-link {
        color: #fff;
        font-family: 'Arimo', sans-serif;
        font-size: 0.9rem;
        text-decoration: none;
    }

        .hbs-box-link:hover {
            text-decoration: underline;
        }

    .hbs-hero-boxes-mobile {
        display: none;
    }

    @media (min-width: 768px) and (max-width: 999.98px) {
        .hbs-hero {
            position: relative;
            background: url('/images/hero-bg.jpg') no-repeat center center/cover;
            height: 580px; /* adjust for gap problem */
            color: #fff;
        }

        .hbs-hero-text {
            padding-top: 0px;
            /*padding-left: 20px;*/
            text-align: left;
        }

            .hbs-hero-text h1 {
                font-size: 5.0rem;
            }

        .hbs-doctor-img {
            max-width: 100%;
            margin-top: 20px
            /*top: -60px;*/
        }

        .hbs-hero-boxes {
            /*flex-direction: column;
        align-items: center;*/
            bottom: -100px;
        }

        .hbs-box {
            padding: 25px 20px;
            margin-bottom: 20px;
            min-height: 300px;
        }

            .hbs-box h3 {
                font-family: 'Abel', sans-serif;
                font-size: 1.8rem;
                color: #fff;
                margin-bottom: 15px;
            }
    }




    /* Hero Adjustments for Larger Screens */
    @media (max-width: 1200px) {
        .hbs-hero-boxes {
            max-width: 100%; /* Use full container width, respecting Bootstrap's .container */
            padding: 0 1rem; /* Add padding to prevent edge clipping */
            gap: 0rem; /* Small gap for spacing */
        }

        .hbs-doctor-img {
            max-width: 100%;
            position: relative;
            z-index: 10;
            top: -58px;
            pointer-events: none;
        }

        .hbs-box {
            flex: 1 1 calc(50% - 1rem); /* Two boxes per row, accounting for gap */
            max-width: 450px; /* Maintain cap */
            min-width: 300px; /* Prevent boxes from shrinking too much */
        }

        .hbs-hero-text {
            padding-top: 1.75rem; /* Slightly reduced for medium screens */
            padding-left: 1.5rem; /* Maintain left padding */
        }

            .hbs-hero-text h1 {
                font-size: 3.8rem; /* Slightly smaller for 1200px and below */
                margin-bottom: 1rem; /* Reduced for tighter spacing */
            }
    }

    @media (max-width: 1000px) {

        .hbs-hero-boxes {
            bottom: -320px;
            max-width: 100%; /* Use full container width, respecting Bootstrap's .container */
            padding: 0 1rem; /* Add padding to prevent edge clipping */
            gap: 0rem; /* Small gap for spacing */
        }

        .hbs-box {
            flex: 1 1 calc(50% - 1rem); /* Two boxes per row, accounting for gap */
            max-width: 450px; /* Maintain cap */
            min-width: 300px; /* Prevent boxes from shrinking too much */
        }

        .hbs-hero-text {
            padding-top: 1.0rem; /* Slightly reduced for medium screens */
            padding-left: 0rem; /* Maintain left padding */
        }

            .hbs-hero-text h1 {
                font-size: 3.4rem; /* Slightly smaller for 1200px and below */
                margin-bottom: 1rem; /* Reduced for tighter spacing */
            }

        .hbs-doctor-img {
            max-width: 100%;
            position: relative;
            z-index: 10;
            top: -58px;
            pointer-events: none;
        }
        .terms-policies-content {
            margin-top: 50px;
        }
    }

    @media (min-width:769px) {
        .hbs-mobile-hero {
            display: none;
        }

        .hbs-3boxes-mobile {
            display: none;
        }
    }

    /* Hero Mobile Adjustments */
    @media (max-width: 768px) {
        .hbs-hero {
            display: none !important;
        }

        .hbs-mobile-hero {
            background: url('/images/cam-hero.jpg') no-repeat center top;
            background-size: cover; /* This will cover without stretching oddly */
            background-position: center top; /* remove the 60px offset */
            height: 500px; /* adjust if necessary */
            margin-top: 60px; /* ensure no margin on top */
            padding-top: 0; /* ensure no padding on top */
        }

        .hbs-hero-wrapper {
            padding-bottom: 0;
            margin-top: 0; /* just in case */
        }
        .interior-hero {
            /*background-color: #f5f5f5;*/ /* light gray as fallback */
            /*width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;*/
            margin-top: 50px; /* adjust as needed to clear your nav height */
        }

        /* Style the overlay */
        .hbs-hero-overlay {
            position: absolute;
            top:350px;
/*            bottom: 15px;
*/            left: 50%; /* Move the left edge to the center */
            transform: translateX(-50%); /* Shift left by half its width to center */
            width: 90%;
            background: rgba(255, 255, 255, 0.8); /* Semi-transparent black overlay */
            padding: 25px 0;
            text-align: center;
            color: #fff;
            max-height: 170px;
        }

            /* Style the text in the overlay */
            .hbs-hero-overlay h2 {
                font-family: 'Abel', sans-serif;
                color: #333;
                font-size: 1.5rem;
                margin: 0 20px 15px;
                line-height: 1.4;
            }


        .hbs-book-btn {
            display: inline-block;
            background-color: #467ebe;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            font-family: 'Arimo', sans-serif;
            font-size: 1.1rem;
            border-radius: 0px;
            transition: background-color 0.3s ease;
        }

            .hbs-book-btn:hover {
                background-color: #5b8ed6;
            }

        .hbs-main-nav {
            top: 0;
            background-color: white;
            padding: 15px 0;
            z-index: 10;
        }

        .hbs-nav-container {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            padding: 0 15px;
            position: relative;
        }

        .hbs-logo-container {
            margin-right: auto;
            flex: 0 0 auto;
        }

        /*.hbs-logo {
            max-width: 200px !important;
            display: block;
        }*/

        .hbs-nav-toggle {
            display: block;
            z-index: 11;
        }

        .hbs-nav-links {
            display: none !important;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #fff;
            padding: 20px 30px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 9;
        }

            .hbs-nav-links.hbs-nav-links-active {
                display: flex !important;
            }

        .hbs-nav-items {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            width: 100%;
        }

            .hbs-nav-items a {
                width: 100%;
                text-align: left;
            }

        .hbs-mobile-consult {
            display: block;
            color: #467ebe;
            font-weight: 700;
        }

        .hbs-social-icons {
            display: flex;
            gap: 20px;
            margin-top: 20px;
            justify-content: flex-start;
        }

        /* Show mobile-friendly version */
        .hbs-hero-boxes-mobile {
            color: white;
            padding: 2rem 0;
            text-align: center;
            min-height: 200px; /* Optional: Ensure the section has enough height for vertical centering */
            display: flex; /* Use Flexbox to center content vertically */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
        }

            .hbs-hero-boxes-mobile .hbs-hero-box {
                width: 95%;
                margin: 0 auto;
                padding: 1rem;
                /*border-radius: 28px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
            }

        .hbs-box-mobile {
            padding: 25px 40px 45px 40px;
            text-align: center;
        }

        .hbs-box-mobile-green {
            background-color: #47b9a9;
        }

        .hbs-box-mobile-meet {
            background-color: #467ebe;
        }

        .hbs-box-mobile p {
            font-family: 'Arimo', sans-serif;
            font-size: 1.1rem;
            color: #fff;
            margin-bottom: 10px;
        }

        .hbs-box-mobile h3 {
            font-family: 'Abel', sans-serif;
            font-size: 1.8rem;
            color: #fff;
            margin-bottom: 15px;
        }

        .hbs-hero-mobile-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 95%;
            margin: 0 auto;
            margin-bottom: 0rem;
            padding: 0.6rem;
            border-radius: 28px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            background-color: #467ebe;
            color: #fff;
            text-decoration: none;
            font-family: 'Arimo', sans-serif;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
        }

            .hbs-hero-mobile-btn:hover {
                background-color: #3a6fb0;
                text-decoration: none;
            }

            .hbs-hero-mobile-btn:focus,
            .hbs-hero-mobile-btn:hover {
                background-color: #3a6fb0;
            }
        .testimonial-card {
            width: 100%;
        }
    }

    /* INTRO */

    .hbs-fw-text {
        background-color: #fff;
        color: #37383a;
        padding: 1rem 0;
        /*min-height: 200px;*/ /* Optional: Ensure the section has enough height for vertical centering */
        /*display: flex;*/ /* Use Flexbox to center content vertically */
        justify-content: center; /* Center horizontally */
        /*align-items: center;*/ /* Center vertically */
    }

        .hbs-fw-text .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

    .hbs-fw-text-title {
        color: #333d33;
        font-family: 'Abel', sans-serif;
        font-size: 3rem;
        margin-bottom: 2.4rem;
    }

    .hbs-fw-text-lead {
        font-size: 1.1rem;
        margin-bottom: 1rem;
        line-height: 1.6rem;
        font-family: 'Arimo', sans-serif;
        font-weight: 700;
        font-style: italic;
    }

    .hbs-fw-text-p {
        color: #333d33;
        font-size: 1.2rem;
        line-height: 2.4rem;
        margin-bottom: 2.6rem;
        font-family: 'Arimo', sans-serif;
    }

    .hbs-fw-btn {
        display: inline-block;
        background-color: #467ebe;
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        font-family: 'Arimo', sans-serif;
        font-size: 1.1rem;
        border-radius: 0px;
        transition: background-color 0.3s ease;
        margin-bottom: 3rem;
    }

        .hbs-fw-btn:hover {
            background-color: #5b8ed6;
        }

    @media (max-width: 768px) {
        .hbs-fw-text-title {
            text-align: center;
        }

        .hbs-fw-text-title {
            font-family: 'Abel', sans-serif;
            font-size: 2.4rem;
            margin-top: 2rem;
            margin-bottom: 2.4rem;
        }
    }

    /* End Intro */

    /* Footer */

    .hbs-footer {
        background-color: #467ebe;
        color: white;
        padding: 3rem 0;
    }

    .hbs-footer-contact {
        margin-bottom: 2rem;
    }

    .hbs-footer-logo {
        max-width: 120px;
        height: auto;
        margin-bottom: 1.4rem;
    }

    .hbs-footer-address {
        font-size: .9rem;
        line-height: 1.6rem;
        margin-bottom: 1.2rem;
        font-family: 'Arimo', sans-serif;
    }

    .hbs-footer-phone {
        font-size: 1.4rem;
        line-height: 1.6rem;
        margin-bottom: 0.5rem;
        font-family: 'Arimo', sans-serif;
        font-weight: bold;
    }

.hbs-footer-btn {
    display: inline-block;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Arimo', sans-serif;
    margin: 1rem 0;
    transition: all 0.3s ease-in-out;
}


        .hbs-footer-btn:hover {
            background-color: #fff;
            border-color: #fff;
            color: #365791;
        }

    .hbs-footer-social {
        display: flex;
        gap: 1rem;
    }

    .hbs-footer-social-link {
        color: white;
        font-size: 1.2rem;
        text-decoration: none;
    }

        .hbs-footer-social-link:hover {
            color: #b71f25;
        }

    .hbs-footer-links {
        margin-bottom: 2rem;
    }

    .hbs-footer-links-title {
        margin-top:2rem;
        font-size: 1.8rem;
        font-weight: 500;
        margin-bottom: 2rem;
        font-family: 'Abel', serif;
    }

    .hbs-footer-links-list {
        list-style: none;
        padding: 0;
        margin: 0 0 0 20px;
    }

        .hbs-footer-links-list li {
            margin-bottom: 1.5rem;
        }

        .hbs-footer-links-list a {
            color: #fff;
            font-size: 1rem;
            font-family: 'Arimo', sans-serif;
            font-weight: 500;            
            text-decoration: none;
        }

            .hbs-footer-links-list a:hover {
                color: #fff;
                text-decoration:underline;
            }

    .hbs-footer-gaf {
        max-width: 300px;
        height: auto;
        margin-top: 1rem;
    }

    .hbs-footer-bottom {
        text-align: center;
        color: #d3d4d6;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

        .hbs-footer-bottom a {
            color: #d3d4d6;
            text-decoration:none;
        }
        .hbs-footer-bottom a:hover {
            color: white;
            text-decoration: none;
        }

    .hbs-footer-copyright {
        font-size: 0.8rem;
        font-family: 'Arimo', sans-serif;
        margin-bottom: 0;
    }

  

    /* Media Query for Mobile Devices */
    @media (max-width: 768px) {
        .hbs-footer-contact,
        .hbs-footer-links {
            text-align: center;
        }

        .hbs-footer-social {
            justify-content: center;
        }

        .hbs-footer-gaf {
            margin: 1rem auto;
            display: block;
        }

        /* Hide QUICK LINKS and SERVICES titles and link lists on mobile */
        .hbs-footer-links-title,
        .hbs-footer-links-list {
            display: none;
        }
    }

    /* Media Query for Very Large Screens (xxl and above) */
    @media (min-width: 1200px) {
        .hbs-footer .row {
            display: flex;
            justify-content: space-between; /* Push columns apart */
        }

        .hbs-footer-contact {
            flex: 0 0 30%; /* Keep contact section on the left, narrower */
        }

        .hbs-footer-links {
            flex: 0 0 20%; /* Reduce width of QUICK LINKS and SERVICES */
        }

            /* Offset the QUICK LINKS and SERVICES columns to the right */
            .hbs-footer-links:nth-child(2) {
                margin-left: auto; /* Push QUICK LINKS to the right */
            }

            .hbs-footer-links:nth-child(3) {
                margin-right: 0; /* Ensure SERVICES stays close to QUICK LINKS */
            }
    }

    /* End Footer */


    @keyframes rollDown {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }