/* --- Color Variables --- */
        :root {
            --bg-dark-teal: #0e2a32;
            --text-cream: #f5e6c8;
            --accent-gold: #d4af37;
            --body-light: #fff5da;
        }

        /* --- Global Styles --- */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-dark-teal);
            margin: 0;
            padding: 0;
            color: var(--text-cream);
        }

        /* --- Section Styling --- */
        #about {
            padding: 80px 16px; /* py-20 px-4 equivalent */
            max-width: 100%;
        }

        /* Responsive Padding for larger screens (md:px-8) */
        @media (min-width: 768px) {
            #about {
                padding: 80px 32px;
            }
        }
        
        /* --- Header Container --- */
        .header-container {
            max-width: 100%; /* max-w-4xl */
            margin: 0 auto; /* mx-auto */
            text-align: center;
        }

        /* --- Main Title (h1) --- */
        .main-title {
            font-size: 2.5rem; /* sm:text-5xl */
            font-weight: 800; /* font-extrabold */
            margin-bottom: 0.5rem; /* mb-2 */
            color: var(--accent-gold);
            line-height: 1.2;
        }

        /* --- Motto/Subtitle (p) --- */
        .motto {
            font-style: italic;
            font-size: 1.125rem; /* text-lg */
            color: var(--text-cream);
        }

        /* --- Separator Line (hr) --- */
        .separator {
            width: 96px; /* w-24 */
            border: none;
            border-top: 2px solid var(--accent-gold); /* border-2 */
            margin: 24px auto; /* my-6 */
            border-radius: 9999px; /* rounded-full */
        }

        /* --- Content Container --- */
        .content-container {
            max-width: 90%; /* max-w-3xl */
            margin: 0 auto; /* mx-auto */
            color: var(--body-light);
            line-height: 1.7; /* leading-relaxed */
            text-align: justify;
        }

        /* --- Paragraph Spacing --- */
        .intro-paragraph-1 {
            margin-bottom: 1.25rem; /* mb-5 */
        }
        .intro-paragraph-2 {
            margin-bottom: 2.5rem; /* mb-10 */
        }

        /* --- Accent Strong Text --- */
        .content-container strong {
            font-weight: 600; /* font-semibold */
            color: var(--accent-gold);
        }

        /* --- Subheadings (h3) --- */
        .section-heading {
            font-size: 1.25rem; /* text-xl */
            font-weight: 700; /* font-bold */
            margin-top: 2rem; /* mt-8 */
            margin-bottom: 1rem; /* mb-4 */
            color: var(--accent-gold);
            display: flex;
            align-items: center;
        }

        /* --- List Styling (ul/li) --- */
        .content-container ul {
            list-style-type: disc;
            padding-left: 1.5rem;
            margin-bottom: 1rem;
        }
        .content-container li {
            color: var(--text-cream);
            margin-bottom: 0.5rem;
        }

        /* --- Closing Motto Paragraph --- */
        .closing-motto-paragraph {
            margin-top: 2.5rem; /* mt-10 */
            text-align: center;
            font-size: 1.125rem; /* text-lg */
        }
        .closing-motto-paragraph em {
            color: var(--text-cream);
            font-style: italic;
        }



        /* Team Section Start */
        /* --- Color Variables --- */
        :root {
            --bg-dark-teal: #0e2a32;
            --text-cream: #f5e6c8;
            --accent-gold: #d4af37;
            --card-darker: #1a3c46;
            --shadow-color: rgba(0, 0, 0, 0.4);
        }

        /* --- Global Styles --- */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-dark-teal);
            margin: 0;
            padding: 0;
            color: var(--text-cream);
            line-height: 1.6;
        }

        /* --- Team Section Container --- */
        .team-section {
            padding: 80px 20px;
            max-width: 85%;
            margin: 0 auto;
            text-align: center;
            border-top: 2px solid #d4af37;
        }

        .team-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent-gold);
            margin-bottom: 60px;
            text-align: center;
        }

        /* --- Team Grid Layout --- */
        .team-grid {
            display: grid;
            gap: 30px;
            /* Default: 1 column for mobile */
            grid-template-columns: repeat(1, 1fr); 
        }

        /* Tablet Layout (2 columns) */
        @media (min-width: 600px) {
            .team-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Desktop Layout (3 columns) */
        @media (min-width: 992px) {
            .team-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* --- Team Member Card --- */
        .team-member {
            background-color: var(--card-darker);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 10px var(--shadow-color);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
            border: 1px solid rgba(212, 175, 55, 0.2);
        }

        .team-member:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px var(--shadow-color);
        }

        .team-member img {
            width: 150px;
            height: 150px;
            border-radius: 50%; /* Circular photo */
            object-fit: cover;
            margin-bottom: 20px;
            border: 4px solid var(--accent-gold);
            filter: grayscale(20%); /* Optional: subtle effect */
            transition: filter 0.3s;
        }

        .team-member:hover img {
            filter: grayscale(0%);
        }

        .team-member h4 {
            color: var(--text-cream);
            font-size: 1.4rem;
            font-weight: 600;
            margin: 0 0 5px 0;
        }

        .team-member p {
            color: var(--accent-gold);
            font-size: 1rem;
            font-style: italic;
            margin: 0;
        }
        /* Team Section End */