/* Base Styles */

@import url('./spacing-system.css');



:root {

    --navy: #141a26;       /* Headers, footers, navigation, primary accents */

    --white: #ffffff;      /* Main backgrounds, body text (inverse) */

    --gold-dark: #90691a;  /* Headings, primary buttons, key highlights */

    --gold-light: #d8ba60; /* Borders, hover states, dividers, subtle accents */

    --text-dark: #141a26;  /* Body text - using Navy for consistency and readability */

    --text-light: #5a6270; /* Lighter text for contrast */

    --light-bg: #f9f9f9;

    --transition: var(--transition-normal);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Lato', sans-serif;

    line-height: 1.8;

    color: var(--text-dark);

    background-color: var(--white);

    scroll-behavior: smooth;

}



p {

    margin-bottom: var(--paragraph-margin);

}



h1, h2, h3, h4, h5, h6 {

    font-family: 'Lora', serif;

    color: var(--gold-dark);

    margin-bottom: var(--heading-margin);

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.5px;

}



h1 {

    font-size: 3.5rem;

    font-weight: 800;

    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



h2 {

    font-size: 2.5rem;

    font-weight: 700;

}



h3 {

    font-size: 2rem;

    font-weight: 600;

}



h4 {

    font-size: 1.5rem;

    font-weight: 600;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--container-gap);

}



a {

    text-decoration: none;

    color: inherit;

    transition: var(--transition);

}



ul {

    list-style: none;

}



/* Screen Reader Only */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



/* Buttons */

/* Enhanced Buttons */

.btn {

    display: inline-block;

    padding: 16px 40px;

    border-radius: var(--border-radius-xl);

    font-weight: 600;

    text-align: center;

    cursor: pointer;

    transition: var(--transition-normal);

    border: 2px solid transparent;

    font-family: 'Lato', sans-serif;

    letter-spacing: 0.5px;

    font-size: 1rem;

    position: relative;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}



.btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

    transition: var(--transition-normal);

}



.btn:hover::before {

    left: 100%;

}



.btn-primary {

    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%);

    color: var(--white);

    border-color: var(--gold-dark);

    box-shadow: var(--shadow-gold);

}



.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(144, 105, 26, 0.3);

}



.btn-white {

    background-color: var(--white);

    color: var(--navy);

    border-color: var(--white);

}



.btn-white:hover {

    background-color: var(--gold-light);

    color: var(--white);

    transform: translateY(-3px);

    box-shadow: var(--shadow-md);

}



/* Enhanced Header */

header {

    background: linear-gradient(135deg, var(--navy) 0%, #1a2436 100%);

    box-shadow: var(--shadow-md);

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

    height: var(--header-height);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(216, 186, 96, 0.1);

}



.header-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--container-gap);

    height: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.nav-logo-image {

    height: 100%;

    max-height: 90px;

    width: auto;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    filter: brightness(1.1) contrast(1.05);

    position: relative;

    padding: 5px 0;

}



.nav-logo-image::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    background: linear-gradient(45deg, var(--gold-dark), var(--gold-light), var(--gold-dark));

    border-radius: 8px;

    opacity: 0;

    transition: opacity 0.4s ease;

    z-index: -1;

}



.nav-logo-image:hover {

    transform: scale(1.08) translateY(-2px);

    filter: brightness(1.2) contrast(1.1) drop-shadow(0 4px 12px rgba(144, 105, 26, 0.3));

}



.nav-logo-image:hover::before {

    opacity: 0.6;

}



.nav-links {

    display: flex;

    align-items: center;

    gap: var(--grid-gap-md);

}



.nav-links ul {

    display: flex;

    gap: var(--element-gap);

}



.nav-links a {

    color: var(--white);

    font-weight: 600;

    font-size: 1rem;

    position: relative;

    padding: 8px 16px;

    border-radius: var(--border-radius-sm);

    transition: var(--transition-normal);

}



.nav-links a:hover, .nav-links a.active {

    color: var(--gold-light);

    background-color: rgba(216, 186, 96, 0.1);

}



.nav-links a::after {

    content: '';

    position: absolute;

    width: 0;

    height: 2px;

    bottom: -8px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));

    transition: var(--transition-normal);

}



.nav-links a:hover::after, .nav-links a.active::after {

    width: 80%;

}



/* Enhanced Page Header */

.page-header {
    min-height: 50vh;
    padding-top: calc(var(--header-height) + 40px + env(safe-area-inset-top));
    padding-bottom: var(--space-2xl);
    padding-left: var(--container-gap);
    padding-right: var(--container-gap);
    background: linear-gradient(135deg, rgba(20, 26, 38, 0.8) 0%, rgba(20, 26, 38, 0.6) 100%), url('../images/about-bg.jpg');

    background-size: cover;

    background-position: center;

    background-color: var(--navy);

    display: flex;

    align-items: flex-start;

    justify-content: center;

    text-align: center;

    color: var(--white);

    position: relative;

    overflow: hidden;

}



.page-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: radial-gradient(circle at 20% 80%, rgba(216, 186, 96, 0.1) 0%, transparent 50%);

    pointer-events: none;

}

.page-header .container {
    padding-top: 40px;
    width: 100%;
}



.page-header h1 {

    font-size: 3.5rem;

    margin-bottom: var(--space-lg);

    color: var(--white);

    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    animation: fadeInUp 1s ease-out;

}



.page-header p {

    font-size: 1.2rem;

    max-width: 600px;

    margin: 0 auto;

    animation: fadeInUp 1s ease-out 0.2s both;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Our Mission & Values */

.mission-values {

    padding: var(--section-padding) 0;

    background-color: var(--light-bg);

}



.section-header {

    text-align: center;

    max-width: 800px;

    margin: 0 auto var(--space-2xl);

}



.section-header h2 {

    font-size: 2.5rem;

}



.section-header .divider {

    width: 80px;

    height: 3px;

    background-color: var(--gold-dark);

    margin: 0 auto var(--space-md);

}



.values-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: var(--grid-gap-lg);

    margin-top: var(--space-2xl);

}



.value-card {

    background: var(--white);

    padding: var(--card-padding);

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-sm);

    text-align: center;

    transition: var(--transition-normal);

    border: 1px solid rgba(216, 186, 96, 0.1);

    position: relative;

    overflow: hidden;

}



.value-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));

    transform: scaleX(0);

    transition: var(--transition-normal);

}



.value-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

    border-color: var(--gold-light);

}



.value-card:hover::before {

    transform: scaleX(1);

}



.value-card i {

    font-size: 2.5rem;

    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: var(--space-lg);

    transition: var(--transition-normal);

}



.value-card:hover i {

    transform: scale(1.1);

}



.value-card h3 {

    margin-bottom: var(--space-sm);

    color: var(--navy);

}



/* Accreditation */

.accreditation {

    padding: var(--section-padding) 0;

    background-color: var(--white);

}



.accreditation-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--grid-gap-lg);

    align-items: center;

}



@media (max-width: 900px) {

    .accreditation-content {

        grid-template-columns: 1fr;

    }



    .accreditation-image {

        height: 300px;

        order: -1;

    }

}



.accreditation-text h2 {

    font-size: 2.5rem;

    margin-bottom: var(--space-lg);

    color: var(--navy);

}



.accreditation-text p {

    margin-bottom: var(--space-lg);

    color: var(--text-light);

}



.accreditation-badges {

    display: flex;

    gap: var(--space-lg);

    margin-top: var(--space-xl);

}



.badge {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

    padding: var(--space-sm) var(--space-lg);

    background-color: var(--light-bg);

    border-radius: 50px;

    color: var(--gold-dark);

    font-weight: 600;

}



.badge i {

    font-size: 1.5rem;

}



.accreditation-image {

    width: 100%;

    height: 400px;

    border-radius: 8px;

    background: linear-gradient(135deg, var(--navy) 0%, #1a2436 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.accreditation-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.accreditation-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}



/* CTA Section */

.cta {

    padding: var(--section-padding) 0;
    margin-top: var(--space-2xl);
    background-color: var(--navy);

    color: var(--white);

    text-align: center;

}



.cta h2 {

    color: var(--white);

    margin-bottom: var(--space-md);

}



.cta p {

    margin-bottom: var(--space-xl);

    color: rgba(255,255,255,0.9);

}



/* Enhanced Footer */

footer {

    background: linear-gradient(135deg, var(--navy) 0%, #1a2436 100%);

    color: var(--white);

    padding: var(--section-padding) 0 var(--space-xl);

    position: relative;

    overflow: hidden;

}



footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);

    opacity: 0.5;

}



.footer-content {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: var(--grid-gap-lg);

    margin-bottom: var(--space-2xl);

}



.footer h3, .footer h4 {

    color: var(--gold-light);

    margin-bottom: var(--heading-margin);

    position: relative;

}



.footer h3::after, .footer h4::after {

    content: '';

    position: absolute;

    bottom: -8px;

    left: 0;

    width: 30px;

    height: 2px;

    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));

    border-radius: 1px;

}



.footer-links ul li {

    margin-bottom: var(--space-sm);

}



.footer-links a {

    color: rgba(255,255,255,0.8);

}



.footer-links a:hover {

    color: var(--gold-light);

    padding-left: 5px;

}



.social-links {

    display: flex;

    gap: var(--element-gap);

    justify-content: center;

    margin-top: var(--space-lg);

}



.social-links a {

    color: var(--white);

    font-size: 1.2rem;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(216, 186, 96, 0.3);

    border-radius: 50%;

    transition: var(--transition-normal);

    background: rgba(255,255,255,0.05);

}



.social-links a:hover {

    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));

    border-color: var(--gold-light);

    transform: translateY(-3px);

    box-shadow: var(--shadow-gold);

}



.footer-bottom {

    padding-top: var(--space-lg);

    border-top: 1px solid rgba(255,255,255,0.1);

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

}



/* Who We Are Section - Redesigned */

.who-we-are {

    padding: var(--section-padding) 0;

    background: linear-gradient(135deg, var(--light-bg) 0%, #f8f9fa 100%);

    position: relative;

}



.who-we-are .section-header h2 {

    font-size: 2.2rem;

    font-weight: 600;

    line-height: 1.3;

    color: var(--navy);

    margin-bottom: var(--space-lg);

}



.who-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--grid-gap-xl);

    align-items: center;

}



.who-left {

    padding-right: var(--space-xl);

}



.who-subtext {

    font-size: 1.2rem;

    line-height: 1.7;

    color: var(--text-light);

    margin-bottom: var(--space-2xl);

    font-weight: 400;

    text-align: center;

}



/* Care Principles */

.care-principles {

    margin-bottom: var(--space-2xl);

}



.principle-item {

    display: flex;

    align-items: flex-start;

    gap: var(--space-lg);

    margin-bottom: var(--space-xl);

    padding: var(--space-lg);

    background: var(--white);

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-normal);

    border: 1px solid rgba(216, 186, 96, 0.1);

}



.principle-item:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-md);

    border-color: var(--gold-light);

}



.principle-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: var(--transition-normal);

}



.principle-item:hover .principle-icon {

    transform: scale(1.1);

    box-shadow: 0 5px 15px rgba(216, 186, 96, 0.3);

}



.principle-icon i {

    font-size: 1.3rem;

    color: var(--white);

}



.principle-content h3 {

    color: var(--navy);

    font-size: 1.1rem;

    margin-bottom: var(--space-xs);

    font-weight: 600;

    line-height: 1.4;

}



.principle-content p {

    color: var(--text-light);

    line-height: 1.6;

    font-size: 0.95rem;

    margin: 0;

}



/* CTA Button */

.who-cta {

    font-size: 1.1rem;

    padding: var(--space-md) var(--space-xl);

    border-radius: 50px;

    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));

    color: var(--white);

    text-decoration: none;

    font-weight: 600;

    transition: var(--transition-normal);

    display: inline-block;

    box-shadow: var(--shadow-sm);

    border: none;

}



.who-cta:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-gold);

    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));

}



.who-cta:active {

    transform: translateY(0);

}



/* Right Column - Image */

.who-right {

    position: relative;

}



.who-image .image-placeholder {

    width: 100%;

    height: 500px;

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-lg);

    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);

    position: relative;

    overflow: hidden;

}

.who-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.who-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}



.who-image .image-placeholder::before {

    content: '🏠 Warm In-Home Care Environment';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: var(--text-light);

    font-size: 1.2rem;

    font-weight: 500;

    text-align: center;

    opacity: 0.7;

}



/* Mobile Responsiveness */

@media (max-width: 768px) {

    .who-content {

        grid-template-columns: 1fr;

        gap: var(--grid-gap-lg);

    }

    

    .who-left {

        padding-right: 0;

        margin-bottom: var(--space-lg);

    }

    

    .who-we-are .section-header h2 {

        font-size: 1.8rem;

        line-height: 1.4;

    }

    

    .who-subtext {

        font-size: 1.1rem;

        margin-bottom: var(--space-xl);

    }

    

    .principle-item {

        flex-direction: column;

        text-align: center;

        gap: var(--space-md);

        padding: var(--space-md);

    }

    

    .principle-icon {

        width: 60px;

        height: 60px;

    }

    

    .principle-icon i {

        font-size: 1.5rem;

    }

    

    .who-image .image-placeholder {

        height: 350px;

    }

    

    .who-cta {

        text-align: center;

        display: block;

        margin: 0 auto;

    }

}



/* Our Approach Section */

.our-approach {

    padding: var(--section-padding) 0;

    background-color: var(--white);

    position: relative;

}



.our-approach::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);

    opacity: 0.3;

}



.approach-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: var(--grid-gap-lg);

    margin-top: var(--space-2xl);

}



.approach-item {

    text-align: center;

    padding: var(--card-padding);

    border-radius: var(--border-radius-lg);

    background: var(--white);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-normal);

    border: 1px solid rgba(216, 186, 96, 0.1);

    position: relative;

    overflow: hidden;

}



.approach-item::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));

    transform: scaleX(0);

    transition: var(--transition-normal);

}



.approach-item:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

    border-color: var(--gold-light);

}



.approach-item:hover::before {

    transform: scaleX(1);

}



.approach-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto var(--space-lg);

    transition: var(--transition-normal);

}



.approach-item:hover .approach-icon {

    transform: scale(1.1);

    box-shadow: 0 8px 20px rgba(216, 186, 96, 0.3);

}



.approach-icon i {

    font-size: 1.8rem;

    color: var(--white);

}



.approach-item h3 {

    color: var(--navy);

    font-size: 1.3rem;

    margin-bottom: var(--space-md);

    font-weight: 600;

}



.approach-item p {

    color: var(--text-light);

    line-height: 1.6;

    font-size: 1rem;

}



/* Quality & Safety Section */

.quality-safety {

    padding: var(--section-padding) 0;

    background: linear-gradient(135deg, var(--light-bg) 0%, #f5f5f5 100%);

    position: relative;

}



.quality-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--grid-gap-lg);

    align-items: center;

}



.quality-text {

    padding-right: var(--space-xl);

}



.quality-text p {

    font-size: 1.1rem;

    line-height: 1.7;

    color: var(--text-light);

    margin-bottom: var(--space-md);

}



.quality-text p:last-child {

    margin-bottom: 0;

}



.quality-image .image-placeholder {

    width: 100%;

    height: 400px;

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-md);

}

.quality-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.quality-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}



/* Why Families Choose Us Section */

.why-families-choose {

    padding: var(--section-padding) 0;

    background-color: var(--white);

    position: relative;

}



.why-families-choose::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);

    opacity: 0.3;

}



.why-choose-us {
    padding: var(--section-padding) 0;
}

.choose-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: var(--grid-gap-lg);

    margin-top: var(--space-3xl);

    margin-bottom: var(--space-2xl);

}



.choose-item {

    text-align: center;

    padding: var(--space-2xl) var(--card-padding);

    border-radius: var(--border-radius-lg);

    background: var(--white);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-normal);

    border: 1px solid rgba(216, 186, 96, 0.1);

    position: relative;

    overflow: hidden;

    min-height: 280px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

}



.choose-item::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));

    transform: scaleX(0);

    transition: var(--transition-normal);

}



.choose-item:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

    border-color: var(--gold-light);

}



.choose-item:hover::before {

    transform: scaleX(1);

}



.choose-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto var(--space-xl);

    transition: var(--transition-normal);

}



.choose-item:hover .choose-icon {

    transform: scale(1.1);

    box-shadow: 0 8px 20px rgba(216, 186, 96, 0.3);

}



.choose-icon i {

    font-size: 1.8rem;

    color: var(--white);

}



.choose-item h3 {

    color: var(--navy);

    font-size: 1.3rem;

    margin-bottom: var(--space-lg);

    font-weight: 600;

    line-height: 1.4;

}



.choose-item p {

    color: var(--text-light);

    line-height: 1.7;

    font-size: 1rem;

    margin-top: auto;

    flex-grow: 1;

}









/* Mobile Responsiveness */

@media (max-width: 768px) {



    .nav-links {

        position: absolute;

        top: var(--header-height);

        left: 0;

        width: 100%;

        background-color: var(--navy);

        flex-direction: column;

        padding: var(--space-xl);

        box-shadow: 0 10px 20px rgba(0,0,0,0.1);

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition: all 0.3s ease;

        border-top: 1px solid rgba(255,255,255,0.1);

    }



    .nav-links.active {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }



    .nav-links ul {

        flex-direction: column;

        width: 100%;

        text-align: center;

    }

    


    

    .accreditation-content {

        grid-template-columns: 1fr;

    }

    

    .page-header {
        min-height: calc(100vh - var(--header-height) - 80px);
        padding-top: calc(var(--header-height) + 30px + env(safe-area-inset-top));
        padding-bottom: var(--space-xl);
    }
    
    .page-header .container {
        padding-top: 20px;
    }

    .page-header h1 {
        font-size: 2.5rem;
    }

    .page-header p {
        font-size: 1rem;
    }

    

    .values-grid {

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    }

    /* Quality & Safety Mobile Responsiveness */
    .quality-content {
        grid-template-columns: 1fr;
        gap: var(--grid-gap-md);
    }

    .quality-text {
        padding-right: 0;
        order: 2;
    }

    .quality-image {
        order: 1;
        height: 250px;
    }

    .quality-img {
        height: 250px;
    }

    .quality-text p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .quality-safety .section-header h2 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .quality-safety .section-header p {
        font-size: 1rem;
    }

}