/*
 * about.css
 * Styles specific to the about.html page.
 * This file should be linked after global.css in your about.html.
 */

/* ========================================= */
/* About Hero Section */
/* ========================================= */

.about-hero-section {
    /* Tailwind already handles bg-blue-700, text-white, py-16, text-center, rounded-b-xl, shadow-lg */
    /* You can add a subtle background pattern or a more complex gradient here if desired */
    /* background: linear-gradient(to right, #1d4ed8, #2563eb); */
}

/* ========================================= */
/* Our Story Section */
/* ========================================= */

.our-story-section {
    /* Tailwind handles bg-white, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
    /* Add any specific styles for the image or text layout within this section */
}

.our-story-section .section-title {
    /* Specific styling for the title within this section if different from global .section-title */
    /* color: #1f2937; */
}

/* ========================================= */
/* Mission & Values Section */
/* ========================================= */

.mission-values-section {
    /* Tailwind handles bg-gray-100, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.value-card {
    /* Tailwind handles bg-white, p-6, rounded-lg, shadow-md, flex, flex-col, items-center, text-center */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.value-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Stronger shadow */
}

.value-icon {
    /* Tailwind handles text-blue-600, text-5xl, mb-4 */
    /* No custom styles needed unless changing icon size or color specifically here */
}

/* ========================================= */
/* Our Facilities Section */
/* ========================================= */

.our-facilities-section {
    /* Tailwind handles bg-white, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.facility-card {
    /* Tailwind handles bg-gray-50, p-6, rounded-lg, shadow-md, hover:shadow-xl, transition, transform, hover:scale-105, flex, flex-col, items-center, text-center */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for definition */
}

.facility-image {
    /* Tailwind handles w-full, h-auto, rounded-lg, mb-4, object-cover */
    /* You can add custom border-radius or shadow if needed */
    border-radius: 0.5rem; /* Ensure consistency with other rounded elements */
}

.facility-title {
    /* Tailwind handles text-2xl, font-semibold, text-gray-900, mb-2 */
}

.facility-description {
    /* Tailwind handles text-gray-600, text-sm */
}

/* ========================================= */
/* Call to Action Section (about-cta-section) */
/* ========================================= */

.about-cta-section {
    /* Tailwind handles bg-blue-600, text-white, text-center, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
    /* You can add a subtle background pattern or a more complex gradient here if desired */
    /* background: linear-gradient(to right, #2563eb, #1d4ed8); */
}

.about-cta-section .btn-join-community {
    /* Tailwind handles px-8, py-4, bg-white, text-blue-700, text-xl, font-bold, rounded-full, shadow-lg, hover:bg-gray-200, transform, hover:scale-105, transition, duration-300, ease-in-out */
    /* No custom styles needed unless overriding Tailwind */
}