/* About - Page-specific styles */

/* About page layout - sidebar image with intro paragraphs */
        .about-layout {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 30px;
            align-items: start;
            margin: 30px 0 40px 0;
        }

        .about-image {
            width: 200px;
            grid-column: 1;
        }

        .about-image img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .about-image img:hover {
            transform: scale(1.03);
        }

        .about-intro {
            grid-column: 2;
        }

        .about-intro p {
            text-align: justify;
            margin-bottom: 24px;
            font-size: 17px;
            line-height: 1.9;
        }

        .about-intro p:first-of-type {
            font-size: 18px;
            color: #34495e;
        }

        /* Main content section - full width below intro */
        .about-content {
            margin-top: 0;
        }

/* Page-specific styles */
        .about-content,
        .content {
            font-size: 17px;
            line-height: 1.9;
        }

        .about-content p,
        .content p {
            text-align: justify;
            margin-bottom: 24px;
        }

        .about-content p:first-of-type,
        .content p:first-of-type {
            font-size: 18px;
            color: #34495e;
        }

        .about-content h2,
        .content h2 {
            margin-top: 50px;
            margin-bottom: 20px;
        }

        .about-content h3,
        .content h3 {
            margin-top: 30px;
            margin-bottom: 15px;
        }

        .highlight-box {
            background: #e8f4f8;
            border-left: 4px solid #3498db;
            padding: 25px;
            margin: 30px 0;
            border-radius: 4px;
        }

        .highlight-box p {
            margin-bottom: 12px;
            color: #2c3e50;
            text-align: left;
        }

        .highlight-box p:last-child {
            margin-bottom: 0;
        }

        .important-note {
            background: #fff3cd;
            border-left: 4px solid #f39c12;
            padding: 25px;
            margin: 30px 0;
            border-radius: 4px;
        }

        .important-note p {
            margin-bottom: 12px;
            color: #2c3e50;
            text-align: left;
        }

        .important-note p:last-child {
            margin-bottom: 0;
        }

        .quote-style {
            font-style: italic;
            padding-left: 30px;
            border-left: 4px solid #95a5a6;
            margin: 25px 0;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 28px;
            }

            .about-content,
            .content {
                font-size: 16px;
            }

            /* Collapse sidebar to single column on mobile */
            .about-layout {
                grid-template-columns: 1fr;
                gap: 20px;
                margin: 20px 0 30px 0;
            }

            .about-image {
                width: 150px;
                margin: 0 auto;
                grid-column: 1;
                grid-row: 1;
            }

            .about-intro {
                grid-column: 1;
                grid-row: 2;
            }

            .about-intro p {
                font-size: 16px;
            }

            .about-intro p:first-of-type {
                font-size: 17px;
            }
        }