.slider{
    overflow: hidden;
}
.slider figure{
    position: relative;
    width: 1300%;
    margin: 0;
    left: 0;
    animation: 20s slider infinite ease-in-out;
}
.slider img{
    width: 7.7%;
    float: left;
}
@keyframes slider{
0%{
    left: 0;
}
7.7%{
    left:0;
}
12.7%{
    left: -100%;
}
17.7%{
    left: -100%;
}
22.7%{
    left: -200%;
}
27.7%{
    left: -200%;
}
32.7%{
    left: -300%;
}
37.7%{
    left: -300%;
}
42.7%{
    left: -400%;
}
47.7%{
    left:-400%;
}
52.7%{
    left: -500%;
}
57.7%{
    left:-500%;
}
62.7%{
    left:-600%;
}
67.7%{
    left:-600%;
}
72.7%{
    left: -700%;
}
77.7%{
    left: -700%;
}
82.7%{
    left: -800%;
}
87.7%{
    left: -800%;
}
92.7%{
    left: -900%;
}
100%{
    left: -900%;
}

}

/* Principles desk */
#princ{
    text-align: center;
    font-family: sans-serif;
    font-size: 40px;
    color: #333;
    -webkit-text-stroke: 2px black;
}

.principals-desk {
    width: 80%;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #333;
    background-color: rgba(128, 210, 255, 0.3);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Updated shadow */
    overflow: hidden;
    animation: fadeIn 2s ease-in-out;
}

.desk-image {
    width: 180px;
    border-bottom: 2px solid #333;
    border-radius: 10px 10px 0 0;
}

.description {
    font-size: 16px;
    color: #555;
    margin-top: 15px;
    opacity: 0;
    animation: fadeInText 2s ease-in-out forwards;
    animation-delay: 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInText {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* HOD's Desk */

/* HOD's Desk (Same styles with a different class) */
#hod{
    text-align: center;
    font-family: sans-serif;
    font-size: 40px;
    color: #333;
    -webkit-text-stroke: 2px black;
}
.hod-desk {
    width: 80%;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #333;
    background-color: rgba(128, 210, 255, 0.3);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Updated shadow */
    overflow: hidden;
    animation: fadeInHod 2s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInHod {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Responsive desk-image */

@media (max-width: 550px) {
    .desk-image {
        width: 160px; /* Change the image width to 25px on small screens */

    }
    #princ,#hod{
        font-size: 27px;

    }
    .principals-desk,.hod-desk{
        width: 80vw;
    }

}
@media (max-width: 450px) {
    .desk-image {
        width: 140px; /* Change the image width to 25px on small screens */
    }
    #princ,#hod{
        font-size: 25px;

    }
    .principals-desk,.hod-desk{
        width: 75vw;
    }
    .sdm-img img{
        width: 300px;
    }
}
@media (max-width: 425px) {
    .desk-image {
        width: 120px; /* Change the image width to 25px on small screens */
    }
    #princ,#hod{
        font-size: 23px;

    }
    .principals-desk,.hod-desk{
        width: 70vw;
    }
    .sdm-img img{
        width: 300px;
    }

}
.desk-image{
    
}
.name-pic{
    float: left;
    padding-right: 2%;
}
.name{
    font-size: smaller;
}
.description{
text-align: left;
}