/* CSS Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            
        }

        /* Section Container */
        .principal-desk-section {
            padding: 20px 20px;
            background-color: #207aab;
            /*background-color: #106b9c;*/
            /*background-color: #f4f7f6;*/
            color: #333;
            line-height: 1.6;
        }

        .container-p {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Header Styling */
        .section-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .section-header h2 {
            font-size: 2rem;
            color:white;
            /*color: #1a365d;*/
            margin-bottom: 12px;
            letter-spacing: 1px;
        }

        .underline {
            width: 80px;
            height: 4px;
            background-color: #e5a910;
            margin: 0 auto;
            border-radius: 2px;
        }

        /* Grid Layout for Content */
        .content-wrapper {
            display: flex;
            gap: 40px;
            align-items: flex-start;
        }

        /* -----------------------------------
           1. Principal Profile Card
        ------------------------------------ */
        .principal-profile {
            flex: 1;
            background:#e1f7fa;
            padding: 20px 10px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-top: 5px solid #1a365d;
        }

        .image-border {
            width: 230px;
            height: 230px;
            border-radius: 20%;
            padding: 4px;
            background: linear-gradient(135deg, #ff6e0d, #fce0cc);
            margin-bottom: 25px;
        }

        .principal-img {
            width: 100%;
            height: 100%;
            border-radius: 20%;
            object-fit: cover;
            border: 4px solid #ffffff;
        }

        .principal-profile h3 {
            font-size: 1.8rem;
            color: #1a365d;
            margin-bottom: 15px;
        }

        .designation {
            display: block;
            font-size: 1.1rem;
            color:#02479c;
            /*color: #e5a910;*/
            font-weight: 600;
            margin-bottom: 40px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .principal-message {
            font-style: italic;
            color:#1a365d;
            /*color: #555;*/
            position: relative;
            padding: 20px 15px;
            font-size: 1rem;
        }
        
        .principal-message::before {
            content: '\"';
            font-size: 4rem;
            color: #edf2f7;
            position: absolute;
            top: -30px;
            left: -10px;
            font-family: Georgia, serif;
            z-index: 0;
        }

        .principal-message p {
            position: relative;
            z-index: 1;
        }

        /* -----------------------------------
           2. School Information Card
        ------------------------------------ */
        .school-details {
            flex: 1.5;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
            overflow: hidden;
        }

        .school-img {
            width: 100%;
            height: 320px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .school-img-wrapper {
            overflow: hidden;
            width: 100%;
            height: 320px;
        }

        .school-details:hover .school-img {
            transform: scale(1.05);
        }

        .school-text {
            padding: 20px;
        }

        .school-text h3 {
            font-size: 1.8rem;
            color: #1a365d;
            margin-bottom: 15px;
        }

        .school-text p {
            color: #1a365d;
            margin-bottom: 15px;
            text-align: justify;
            font-size: 1.05rem;
        }

        .read-more-btn {
            display: inline-block;
            margin-top: 15px;
            padding: 10px 25px;
            background-color: #1a365d;
            color: #ffffff;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 600;
            transition: background 0.3s ease;
        }

        .read-more-btn:hover {
            background-color: #e5a910;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .content-wrapper {
                flex-direction: column;
            }
            .principal-profile, .school-details {
                width: 100%;
            }
            .school-img-wrapper, .school-img {
                height: 250px;
            }
        }

        @media (max-width: 768px) {
            .section-header h2 {
                font-size: 1.02rem;
            }
            .school-text {
                padding: 25px;
            }
        }