/* Styles imported from React project */

.theme-blue {
    background-color: #03989e
}

.theme-green {
    background-color: #488a4c
}

.theme-pink {
    background-color: #ffaa6e
}

.theme-yellow {
    background-color: #ebdd2e
}

.theme-grey {
    background-color: #e2e2e4;
}

.theme-dark {
    background-color: #3f5d6e;
}

#hero-flex {
    background-image: url('../../assets/landscape2.jpg');
    background-size: cover;
    height: clamp(360px, 40vw, 560px);
    background-position: 70% 37%;
}

.hero-heading {
    font-size: clamp(2rem, 4vw, 4rem);
    padding: clamp(1rem, 1.5vw, 1.75rem);
    line-height: 1.1;
}

.hero-cta {
    font-size: clamp(1rem, 2vw, 1.5rem);
    padding: .7rem 1.25rem;
}

.mobile-hero-panel {
    display: none;
}

.link {
    text-decoration: none;
    color: rgb(28, 187, 255);
}

.featurette-heading {
    letter-spacing: -.05rem;
}

.mtn {
    background-image: url('../../assets/mts1.jpg');
    background-size: 250vh 75vh;
    background-position: 50% 65%;
    background-repeat: no-repeat;
    height: 48vh;
    display: flex;
    align-items: center;
}

.section-btn {
    background-color: white;
    box-shadow: 2px 4px 2px 5px rgba(0, 0, 0, 0.292);
    border: none;
    font-size: 250%;
}

.modality {
    background-color: white;
}

.modality-1 {
    background-image: url("../../assets/succulent3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

/* Homepage-only guardrails so images stay predictable */
#hero .card {
    border: 0;
    border-radius: .85rem;
    overflow: hidden;
}

#hero .card>img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

#hero .card-body {
    padding: 1.25rem;
}

.quality-care-section {
    margin-bottom: 2rem;
}

.quality-care-card {
    background: #ffffff;
    border: 1px solid rgba(3, 152, 158, 0.14);
    border-radius: 1.25rem;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
    padding: clamp(1.75rem, 4vw, 3.5rem);
}

.quality-eyebrow {
    color: #03989e;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: .65rem;
    text-transform: uppercase;
}

.quality-copy {
    max-width: 62rem;
}

.quality-copy p {
    color: #333;
    line-height: 1.65;
}

.quality-highlight {
    background: #f3fbfb;
    border: 1px solid rgba(3, 152, 158, 0.16);
    border-radius: .85rem;
    color: #2d4a4c;
    font-size: 1.05rem;
    line-height: 1.45;
    padding: 1rem;
}

.modalities-section {
    margin-top: 3rem !important;
}

.modality-card {
    border: 1px solid rgba(3, 152, 158, 0.14);
    border-radius: 1rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

.modality-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-3px);
}

.modality-card h2 {
    color: #2d4a4c;
    font-weight: 600;
    margin-bottom: .35rem;
}

.modality-card p {
    color: #333;
    line-height: 1.55;
}

.modality-card .btn {
    padding: .65rem 1.15rem;
}

@media only screen and (max-width: 1200px) {
    #hero-flex {
        height: clamp(340px, 50vw, 520px);
        background-position: 70% 36%;
    }
}

@media only screen and (max-width: 768px) {
    #hero-flex {
        height: 370px;
        min-height: 370px;
        background-position: 18% center;
        align-items: flex-end !important;
    }

    .hero-desktop-panel {
        display: none;
    }

    .mobile-hero-panel {
        display: block;
        margin-top: -1.75rem;
        position: relative;
        z-index: 2;
    }

    .mobile-hero-card {
        background: rgba(255, 255, 255, 0.96);
        border-radius: 1rem;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
        padding: 1.25rem 1rem 1.4rem;
    }

    .mobile-hero-card h1 {
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1.08;
        margin-bottom: .75rem;
    }

    .mobile-hero-card p {
        color: #333;
        font-size: 1.05rem;
        line-height: 1.45;
        margin: 0 auto 1rem;
        max-width: 31rem;
    }

    .mobile-hero-card .btn {
        font-size: 1rem;
        padding: .75rem 1.2rem;
    }

    .quality-care-section {
        margin-top: 1.25rem !important;
    }

    .quality-care-card {
        border-radius: 1rem;
        padding: 1.5rem 1rem;
    }

    .quality-care-card h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    .quality-copy p {
        font-size: 1.08rem !important;
    }

    #hero .card>img {
        height: 190px;
    }

    .modalities-section .col-sm-12:nth-child(2) .modality-card>img {
        object-position: center 12%;
    }

    .mtn {
        height: 34vh;
        min-height: 260px;
        background-size: cover;
    }

    .section-btn {
        font-size: 200%;
        text-align: center;
    }

    .modalities-section {
        margin-top: 2rem !important;
    }

    .modality-card p {
        font-size: 1.05rem !important;
    }
}

@media only screen and (max-width: 480px) {
    #hero-flex {
        height: 340px;
        min-height: 340px;
        background-position: 15% center;
    }

    .mobile-hero-panel {
        margin-top: -1.25rem;
    }

    .mobile-hero-card {
        padding: 1.15rem .9rem 1.25rem;
    }

    .mobile-hero-card h1 {
        font-size: clamp(1.9rem, 11vw, 2.45rem);
    }

    .modalities-section .col-sm-12:nth-child(2) .modality-card>img {
        object-position: center 8%;
    }
}