*{
                padding: 0;
                border: 0;
                margin: 0;
                
            }
            body{
                font-family: "Roboto Slab", serif;
                font-weight: 400;
                font-style: normal;
            }
            .directors_message,
            .principal_message{
                margin-top: 100px;
                margin-bottom: 100px;
            }
            .display-flex{
                display: flex;
            }
            .align-center{
                align-items: center;
                justify-content: center;
            }
            .dwps-staff-directory-director-container,
            .dwps-staff-directory-principal-container{
                width: 100%;
                height: fit-content;
                padding: 15px 0px;
            }
            .dwps-staff-directory-director-main-container{
                width: 60%;
                background-color: #f0f0f0;
            }
            .dwps-staff-directory-director-picture-container,
            .dwps-staff-directory-director2-picture-container,
            .dwps-staff-directory-principal-picture-container{
                height: 100%;
                width: 40%;
                position: relative;
            }
            .dwps-staff-directory-director-picture-container::after,
            .dwps-staff-directory-principal-picture-container::after{
                position: absolute;
                content: '';
                width: 150px;
                height: 150px;
                border: 3px solid rgb(19, 107, 19);
                left: -50px;
                top: -40px;
                z-index: -10;
            }
            .dwps-staff-directory-director2-picture-container::after{
                position: absolute;
                content: '';
                width: 150px;
                height: 150px;
                border: 3px solid rgb(19, 107, 19);
                right: -50px;
                top: -40px;
                z-index: -10;
            }
            .dwps-staff-directory-director-picture-container img,
            .dwps-staff-directory-director2-picture-container img,
            .dwps-staff-directory-principal-picture-container img{
                height: 350px;
                width: 300px;
            }
            .dwps-staff-directory-director-message-container{
                padding: 10px 15px;
                line-height: 1.5;
                font-size: 21px;
                text-align: justify;
                font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                padding: 0 15px;
            }
            .dwps-staff-directory-director-picture-name-container,
            .dwps-staff-directory-principal-picture-name-container{
                width: 300px;
                height: 50px;
                background-color: rgba(0, 0, 0, .5);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: absolute;
                bottom: 5px;
                left: 0;
                color: aliceblue;
            }
            .borderpx{
                border: 1px solid black;
            }
            .dwps-staff-directory-principal-main-container{
                width: 90%;
                background-color: #f0f0f0;
            }
            
            .dwps_coordinators{
                margin:100px;
            }
            .dwps-coordinators-heading {
                text-align: center;
                margin-top: 20px;
                font-size:55px;
            }

            .dwps-coordinators-container {
                display: flex;
                justify-content: center;
                gap: 30px;
                margin-top: 30px;
                flex-wrap: wrap;
            }

            .dwps-coordinator-card {
                width: 220px;
                height: 250px;
                perspective: 1000px;
            }

            .dwps-coordinator-card-inner {
                width: 100%;
                height: 100%;
                position: relative;
                transition: transform 0.6s;
                transform-style: preserve-3d;
            }

            .dwps-coordinator-card:hover .dwps-coordinator-card-inner {
                transform: rotateY(180deg);
            }

            .dwps-coordinator-front,
            .dwps-coordinator-back {
                position: absolute;
                width: 100%;
                height: 100%;
                backface-visibility: hidden;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            }

            .dwps-coordinator-front img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .dwps-coordinator-back {
                background: rgb(19, 107, 19);
                color: white;
                transform: rotateY(180deg);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
            }




            .staff-section{
                margin:100px;
            }
            .dwps-prt-heading,
            .dwps-tgt-heading,
            .dwps-pgt-heading,
            .dwps-admin-heading{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 55px;
            }
            .dwps-staff-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 20px;
                padding: 20px;
            }

            .dwps-staff-card {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 200px;
                height: 300px;
                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
                border-radius: 10px;
            }
            .dwps-staff-card-image{
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 200px;
                height: 220px;
            }

            /* Image */
            .dwps-staff-card img {
                width: 200px;
                height: 220px;
                object-fit:fill;
                display: block;
            }

            /* Overlay (transparent details) */
            .dwps-staff-overlay {
                width: 200px;
                height: 80px;
                text-align: center;
            }

            .dwps-staff-overlay h3 {
                font-size: 15px;
                margin: 2px 0;
            }

            .dwps-staff-overlay p {
                font-size: 13px;
                margin: 2px 0;
            }


/* ================= MOBILE VIEW ================= */
@media (max-width: 768px){

    /* Director & Principal Section */
    .display-flex{
        flex-direction: column;
    }

    .dwps-staff-directory-director-main-container,
    .dwps-staff-directory-principal-main-container{
        width: 100%;
    }

    .dwps-staff-directory-director-picture-container,
    .dwps-staff-directory-director2-picture-container,
    .dwps-staff-directory-principal-picture-container{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .dwps-staff-directory-director-picture-container img,
    .dwps-staff-directory-director2-picture-container img,
    .dwps-staff-directory-principal-picture-container img{
        width: 90%;
        height: auto;
    }

    .dwps-staff-directory-director-message-container{
        font-size: 16px;
        padding: 10px;
    }

    .dwps-staff-directory-director-picture-name-container,
    .dwps-staff-directory-principal-picture-name-container{
        width: 90%;
    }

    /* Coordinators Section */
    .dwps_coordinators{
        margin: 50px 10px;
    }

    .dwps-coordinators-heading{
        font-size: 30px;
    }

    .dwps-coordinators-container{
        gap: 15px;
    }

    .dwps-coordinator-card{
        width: 160px;
        height: 200px;
    }

    /* Staff Section */
    .staff-section{
        margin: 50px 10px;
    }

    .dwps-prt-heading,
    .dwps-tgt-heading,
    .dwps-pgt-heading,
    .dwps-admin-heading{
        font-size: 28px;
    }

    .dwps-staff-container{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .dwps-staff-card,
    .dwps-staff-card-image,
    .dwps-staff-card img,
    .dwps-staff-overlay{
        width: 100%;
    }

    .dwps-staff-card img{
        height: 180px;
    }

    .dwps-staff-overlay h3{
        font-size: 13px;
    }

    .dwps-staff-overlay p{
        font-size: 11px;
    }

    .dwps-staff-directory-director-picture-name-container,
            .dwps-staff-directory-principal-picture-name-container{
                width: 388px;
                height: 50px;
                background-color: rgba(0, 0, 0, .5);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: absolute;
                bottom: 0px;
                left: 22px;
                color: aliceblue;
            }
}