```php
<title>SAMAGRA SHIKSHA MAHASAMUND</title>

<style>
html, body{
    margin:0;
    padding:0;
    font-family:'Segoe UI', Arial, sans-serif;
}

/* ==============================
   MAIN HEADER
============================== */
#mainHeader{
    width:100%;
    min-height:120px;
    padding:12px 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(135deg,#0d47a1,#1565c0);
    box-sizing:border-box;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
}

/* ==============================
   LOGO
============================== */
#mainHeader img{
    width:auto;
    max-height:78px;
    transition:.3s;
    background:transparent;
    border-radius:15px;
}

#mainHeader img:hover{
    transform:scale(1.06);
}

/* ==============================
   TITLE AREA
============================== */
.title-container{
    flex:1;
    text-align:center;
    color:#fff;
    padding:0 20px;
}

/* Hindi Title */
#mainHeader h1{
    margin:0;
    font-size:30px;
    font-weight:700;
    letter-spacing:.5px;
    line-height:1.35;
}

/* English Title */
#mainHeader .english-title{
    margin-top:6px;
    font-size:19px;
    font-weight:500;
    letter-spacing:.4px;
}

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

    #mainHeader{
        flex-direction:column;
        justify-content:center;
        text-align:center;
        padding:12px 10px 14px;
        min-height:0;
    }

    #mainHeader img{
        max-height:55px;
        margin-bottom:8px;
    }

    .title-container{
        padding:0 5px;
    }

    #mainHeader h1{
        font-size:18px;
        line-height:1.4;
    }

    #mainHeader .english-title{
        font-size:13px;
        margin-top:4px;
        line-height:1.4;
    }
}
</style>


<header id="mainHeader">

    <!-- Samagra Shiksha Logo -->
    <img src="image/ss.jpg" alt="Samagra Shiksha Logo">

    <div class="title-container">

        <!-- Hindi Name -->
        <h1>
            जिला परियोजना कार्यालय (DPO), समग्र शिक्षा, महासमुंद
        </h1>

        <!-- English Name -->
        <div class="english-title">
            DPO Office, Samagra Shiksha, Mahasamund
        </div>

    </div>

</header><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>

/* =========================================================
   RGSM FINAL RESPONSIVE MENU
========================================================= */

:root{
    --rgsm-green-dark:#075b35;
    --rgsm-green:#087a45;
    --rgsm-green-mid:#159447;
    --rgsm-green-light:#5fcf36;
    --rgsm-green-soft:#eaf8ef;
}


/* =========================================================
   MAIN MENU
========================================================= */

.rgsm-menu{

    width:100%;

    background:linear-gradient(
        90deg,
        var(--rgsm-green-dark),
        var(--rgsm-green),
        #056b3b
    );

    display:flex;

    align-items:center;

    position:relative;

    z-index:9999;

    box-shadow:0 4px 14px rgba(0,0,0,.22);

    box-sizing:border-box;
}


/* =========================================================
   LEFT + RIGHT MENU AREA
========================================================= */

.rgsm-menu-items{

    display:flex;

    align-items:center;

    width:100%;

    min-width:0;

    box-sizing:border-box;
}


/* =========================================================
   COMMON MENU LINKS
========================================================= */

.rgsm-menu a,
.rgsm-drop-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    color:#fff;

    text-decoration:none;

    font-size:12px;

    font-weight:600;

    padding:12px 7px;

    cursor:pointer;

    white-space:nowrap;

    box-sizing:border-box;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


/* =========================================================
   ICON
========================================================= */

.rgsm-menu a i,
.rgsm-drop-btn i{

    font-size:13px;

}


/* =========================================================
   DIVIDER
========================================================= */

.rgsm-menu > .rgsm-menu-items > a,
.rgsm-menu > .rgsm-menu-items > .rgsm-dropdown{

    border-right:1px solid rgba(255,255,255,.16);

}


/* =========================================================
   HOVER
========================================================= */

.rgsm-menu a:hover,
.rgsm-drop-btn:hover{

    background:rgba(255,255,255,.10);

}


/* =========================================================
   HOME
========================================================= */

.rgsm-menu a.rgsm-home{

    margin:6px 5px;

    padding:8px 12px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #72d83d,
        #3caf25
    );

    box-shadow:
        0 3px 8px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.25);

    border:none;

    font-weight:700;

    flex-shrink:0;

}


.rgsm-menu a.rgsm-home:hover{

    background:linear-gradient(
        135deg,
        #83e94d,
        #42bd29
    );

    transform:translateY(-1px);

}


.rgsm-menu a.rgsm-home.active{

    background:linear-gradient(
        135deg,
        #78dc3e,
        #38ad22
    );

}


/* =========================================================
   ACTIVE NORMAL LINK
========================================================= */

.rgsm-menu a.active:not(.rgsm-home){

    background:rgba(255,255,255,.13);

}


.rgsm-menu a.active:not(.rgsm-home)::after{

    content:"";

    position:absolute;

    left:7px;

    right:7px;

    bottom:3px;

    height:2px;

    border-radius:10px;

    background:#8be84e;

}


/* =========================================================
   DROPDOWN
========================================================= */

.rgsm-dropdown{

    position:relative;

    flex-shrink:0;

}


.rgsm-drop-btn{

    border:none;

    background:transparent;

}


/* =========================================================
   DROPDOWN ARROW
========================================================= */

.rgsm-drop-arrow{

    font-size:8px !important;

    margin-left:1px;

    transition:transform .25s ease;

}


/* =========================================================
   DROPDOWN BOX
========================================================= */

.rgsm-dropdown-content{

    position:absolute;

    top:calc(100% + 5px);

    left:0;

    width:235px;

    background:#fff;

    border-radius:0 0 10px 10px;

    overflow:hidden;

    box-shadow:
        0 10px 28px rgba(0,0,0,.24);

    border-top:4px solid var(--rgsm-green-mid);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;

}


/* =========================================================
   DESKTOP DROPDOWN OPEN
========================================================= */

@media(min-width:769px){

    .rgsm-dropdown:hover .rgsm-dropdown-content{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

    .rgsm-dropdown:hover .rgsm-drop-arrow{

        transform:rotate(180deg);

    }

}


/* =========================================================
   DROPDOWN LINKS
========================================================= */

.rgsm-dropdown-content a{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

    color:#185c3b;

    background:#fff;

    padding:11px 15px;

    border-bottom:1px solid #e5eee9;

    font-size:13px;

}


.rgsm-dropdown-content a i{

    width:20px;

    text-align:center;

    color:var(--rgsm-green);

}


.rgsm-dropdown-content a:hover{

    background:var(--rgsm-green-soft);

    color:var(--rgsm-green-dark);

    padding-left:20px;

}


.rgsm-dropdown-content a:hover i{

    color:#42a927;

}


.rgsm-dropdown-content a.active{

    background:#e6f6eb;

    color:var(--rgsm-green-dark);

    font-weight:700;

}


/* =========================================================
   LOGIN / ADMIN
========================================================= */

.rgsm-login-link,
.rgsm-admin-link{

    background:rgba(255,255,255,.07);

}


.rgsm-login-link:hover,
.rgsm-admin-link:hover{

    background:rgba(255,255,255,.16) !important;

}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.rgsm-menu-toggle{

    display:none;

    margin-left:auto;

    padding:12px 17px;

    color:#fff;

    font-size:21px;

    cursor:pointer;

}


/* =========================================================
   DESKTOP COMPACT MODE
   1200px - 1400px
========================================================= */

@media(min-width:769px) and (max-width:1400px){

    .rgsm-menu a,
    .rgsm-drop-btn{

        font-size:11px;

        padding-left:5px;

        padding-right:5px;

        gap:4px;

    }


    .rgsm-menu a i,
    .rgsm-drop-btn i{

        font-size:12px;

    }


    .rgsm-menu a.rgsm-home{

        padding-left:10px;

        padding-right:10px;

        margin-left:4px;

        margin-right:4px;

    }

}


/* =========================================================
   VERY COMPACT DESKTOP
   769px - 1100px
========================================================= */

@media(min-width:769px) and (max-width:1100px){

    .rgsm-menu a,
    .rgsm-drop-btn{

        font-size:10px;

        padding-left:4px;

        padding-right:4px;

        gap:3px;

    }


    .rgsm-menu a i,
    .rgsm-drop-btn i{

        font-size:11px;

    }


    .rgsm-menu a.rgsm-home{

        padding-left:8px;

        padding-right:8px;

        margin-left:3px;

        margin-right:3px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    /* -----------------------------------------------------
       MAIN
    ----------------------------------------------------- */

    .rgsm-menu{

        display:flex;

        flex-wrap:wrap;

        align-items:center;

        min-height:54px;

    }


    /* -----------------------------------------------------
       HOME
    ----------------------------------------------------- */

    .rgsm-menu a.rgsm-home{

        margin:6px 8px;

        padding:9px 14px;

        font-size:14px;

    }


    .rgsm-menu a.rgsm-home i{

        font-size:15px;

    }


    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .rgsm-menu-toggle{

        display:block;

        margin-left:auto;

    }


    /* =====================================================
       IMPORTANT:
       NO POSITION ABSOLUTE
       PAGE CONTENT WILL MOVE DOWN
    ===================================================== */

   .rgsm-menu-items{

    display:none;

    position:relative;

    top:auto;
    left:auto;

    width:100%;

    flex-basis:100%;

    flex-direction:column;

    align-items:stretch;

    /* थोड़ा सा gap */
    margin-top:6px;

    background:
        linear-gradient(
            180deg,
            #075b35,
            #064d2d
        );

    border-top:1px solid rgba(255,255,255,.18);

    box-shadow:
        0 8px 18px rgba(0,0,0,.24);

    max-height:calc(100vh - 60px);

    overflow-y:auto;

    overflow-x:hidden;

    box-sizing:border-box;

}

    /* OPEN */

    .rgsm-menu.responsive .rgsm-menu-items{

    display:flex;

    margin-top:6px;

    animation:rgsmMenuDown .25s ease;

}

    /* -----------------------------------------------------
       ANIMATION
    ----------------------------------------------------- */

    @keyframes rgsmMenuDown{

        from{

            opacity:0;

            transform:translateY(-8px);

        }

        to{

            opacity:1;

            transform:translateY(0);

        }

    }


    /* -----------------------------------------------------
       MOBILE LINKS
    ----------------------------------------------------- */

    .rgsm-menu-items > a,
    .rgsm-menu-items > .rgsm-dropdown{

        width:100%;

        border-right:none !important;

        border-bottom:1px solid rgba(255,255,255,.13);

        box-sizing:border-box;

        flex-shrink:0;

    }


    .rgsm-menu-items > a{

        padding:13px 18px;

        font-size:14px;

        justify-content:flex-start;

    }


    /* -----------------------------------------------------
       MOBILE DROPDOWN BUTTON
    ----------------------------------------------------- */

    .rgsm-drop-btn{

        width:100%;

        justify-content:flex-start;

        box-sizing:border-box;

        padding:13px 18px;

        font-size:14px;

    }


    /* -----------------------------------------------------
       MOBILE DROPDOWN
    ----------------------------------------------------- */

    .rgsm-dropdown-content{

        position:static;

        width:100%;

        display:none;

        opacity:1;

        visibility:visible;

        transform:none;

        border:none;

        border-radius:0;

        box-shadow:none;

        background:#064c2c;

    }


    .rgsm-dropdown.open .rgsm-dropdown-content{

        display:block;

    }


    /* -----------------------------------------------------
       MOBILE DROPDOWN LINKS
    ----------------------------------------------------- */

    .rgsm-dropdown-content a{

        background:rgba(0,0,0,.13);

        color:#fff;

        padding:12px 18px 12px 45px;

        font-size:13px;

        border-bottom:1px solid rgba(255,255,255,.10);

    }


    .rgsm-dropdown-content a i{

        color:#8be84e;

    }


    .rgsm-dropdown-content a:hover{

        background:rgba(255,255,255,.10);

        color:#fff;

        padding-left:50px;

    }


    .rgsm-dropdown-content a.active{

        background:rgba(120,220,62,.18);

        color:#fff;

    }


    /* -----------------------------------------------------
       MOBILE ARROW
    ----------------------------------------------------- */

    .rgsm-dropdown.open .rgsm-drop-arrow{

        transform:rotate(180deg);

    }


    /* -----------------------------------------------------
       ACTIVE LINE REMOVE
    ----------------------------------------------------- */

    .rgsm-menu a.active:not(.rgsm-home)::after{

        display:none;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .rgsm-menu a.rgsm-home{

        padding:9px 12px;

        font-size:13px;

    }


    .rgsm-menu-toggle{

        padding:12px 15px;

    }

}

</style>




<div class="rgsm-menu" id="rgsmTopnav">


    <!-- =====================================================
         HOME
    ====================================================== -->

    <a href="index.php"
       class="rgsm-home ">

        <i class="fa-solid fa-house"></i>

        <span>मुख्य पृष्ठ</span>

    </a>


    <!-- =====================================================
         MOBILE HAMBURGER
    ====================================================== -->

    <div class="rgsm-menu-toggle"
         onclick="rgsmToggleMenu()">

        <i class="fa-solid fa-bars"></i>

    </div>


    <!-- =====================================================
         ALL MENU ITEMS
    ====================================================== -->

    <div class="rgsm-menu-items"
         id="rgsmMenuItems">


        <!-- =================================================
             विभाग के बारे में
        ================================================== -->

        <div class="rgsm-dropdown">

            <div class="rgsm-drop-btn"
                 onclick="rgsmToggleSubMenu(event)">

                <i class="fa-solid fa-building-columns"></i>

                <span>विभाग के बारे में</span>

                <i class="fa-solid fa-chevron-down rgsm-drop-arrow"></i>

            </div>


            <div class="rgsm-dropdown-content">


                <a href="about.php"
                   class="">

                    <i class="fa-solid fa-eye"></i>

                    <span>एक नजर</span>

                </a>


                <a href="staffview.php"
                   class="">

                    <i class="fa-solid fa-users"></i>

                    <span>स्टाफ की जानकारी</span>

                </a>


                <a href="datayrwise_view.php"
                   class="">

                    <i class="fa-solid fa-chart-column"></i>

                    <span>विभागीय आंकड़े</span>

                </a>


                <a href="balwadilist.php"
                   class="">

                    <i class="fa-solid fa-child-reaching"></i>

                    <span>बालवाड़ी</span>

                </a>


            </div>

        </div>


        <!-- =================================================
             योजनाएँ एवं कार्यक्रम
        ================================================== -->

        <div class="rgsm-dropdown">

            <div class="rgsm-drop-btn"
                 onclick="rgsmToggleSubMenu(event)">

                <i class="fa-solid fa-layer-group"></i>

                <span>योजनाएँ एवं कार्यक्रम</span>

                <i class="fa-solid fa-chevron-down rgsm-drop-arrow"></i>

            </div>


            <div class="rgsm-dropdown-content">


                <a href="scheme.php"
                   class="">

                    <i class="fa-solid fa-diagram-project"></i>

                    <span>योजनाएँ एवं कार्यक्रम</span>

                </a>


                <a href="https://vmportal.in/kgbv/"
                   target="_blank">

                    <i class="fa-solid fa-school"></i>

                    <span>KGBV</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-computer"></i>

                    <span>ICT / Smart Class</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-universal-access"></i>

                    <span>समावेशी शिक्षा</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-utensils"></i>

                    <span>PM POSHAN</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-person-walking-arrow-right"></i>

                    <span>Out of School Children</span>

                </a>


            </div>

        </div>


        <!-- =================================================
             डिजिटल सेवाएँ
        ================================================== -->

        <div class="rgsm-dropdown">

            <div class="rgsm-drop-btn"
                 onclick="rgsmToggleSubMenu(event)">

                <i class="fa-solid fa-laptop-code"></i>

                <span>डिजिटल सेवाएँ</span>

                <i class="fa-solid fa-chevron-down rgsm-drop-arrow"></i>

            </div>


            <div class="rgsm-dropdown-content">


                <a href="login.php">

                    <i class="fa-solid fa-database"></i>

                    <span>UDISE+</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-id-card"></i>

                    <span>APAAR</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-chart-line"></i>

                    <span>VSK</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-computer"></i>

                    <span>ICT / Smart Class</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-money-check-dollar"></i>

                    <span>SNA SPARSH</span>

                </a>


            </div>

        </div>


        <!-- =================================================
             रिपोर्ट एवं आंकड़े
        ================================================== -->

        <div class="rgsm-dropdown">

            <div class="rgsm-drop-btn"
                 onclick="rgsmToggleSubMenu(event)">

                <i class="fa-solid fa-chart-pie"></i>

                <span>रिपोर्ट एवं आंकड़े</span>

                <i class="fa-solid fa-chevron-down rgsm-drop-arrow"></i>

            </div>


            <div class="rgsm-dropdown-content">


                <a href="datayrwise_view.php"
                   class="">

                    <i class="fa-solid fa-chart-column"></i>

                    <span>वर्षवार आंकड़े</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-file-lines"></i>

                    <span>जिला रिपोर्ट</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-table-list"></i>

                    <span>ब्लॉक रिपोर्ट</span>

                </a>


                <a href="login.php">

                    <i class="fa-solid fa-school"></i>

                    <span>स्कूल रिपोर्ट</span>

                </a>


            </div>

        </div>


        <!-- =================================================
             NOTICE
        ================================================== -->

        <a href="notice.php"
           class="">

            <i class="fa-solid fa-file-lines"></i>

            <span>नोटिस</span>

        </a>


        <!-- =================================================
             NEWS
        ================================================== -->

        <a href="news_events_all.php"
           class="">

            <i class="fa-solid fa-bullhorn"></i>

            <span>समाचार एवं आयोजन</span>

        </a>


        <!-- =================================================
             GALLERY
        ================================================== -->

        <a href="imggallery.php"
           class="active">

            <i class="fa-solid fa-images"></i>

            <span>ईमेज गैलरी</span>

        </a>


        <!-- =================================================
             LOGIN
        ================================================== -->

        <a href="login.php"
           class="rgsm-login-link ">

            <i class="fa-solid fa-right-to-bracket"></i>

            <span>लॉगइन</span>

        </a>


        <!-- =================================================
             ADMIN
        ================================================== -->

        <a href="admin/login/login.php"
           class="rgsm-admin-link">

            <i class="fa-solid fa-user-shield"></i>

            <span>एडमिन</span>

        </a>


        <!-- =================================================
             CONTACT
        ================================================== -->

        <a href="contactus.php"
           class="">

            <i class="fa-solid fa-phone"></i>

            <span>संपर्क करें</span>

        </a>


    </div>

</div>


<script>

/* =========================================================
   MOBILE MAIN MENU
========================================================= */

function rgsmToggleMenu(){

    const nav =
        document.getElementById("rgsmTopnav");

    nav.classList.toggle("responsive");

}


/* =========================================================
   MOBILE SUB MENU
========================================================= */

function rgsmToggleSubMenu(e){

    e.stopPropagation();

    if(window.innerWidth <= 768){

        const dropdown =
            e.currentTarget.parentElement;

        dropdown.classList.toggle("open");

    }

}


/* =========================================================
   CLOSE MOBILE MENU AFTER LINK CLICK
========================================================= */

document.querySelectorAll(
    '.rgsm-menu-items a'
).forEach(function(link){

    link.addEventListener(
        'click',
        function(){

            if(window.innerWidth <= 768){

                document
                    .getElementById("rgsmTopnav")
                    .classList.remove("responsive");

            }

        }
    );

});


/* =========================================================
   RESET MOBILE MENU ON DESKTOP
========================================================= */

window.addEventListener(
    'resize',
    function(){

        if(window.innerWidth > 768){

            document
                .getElementById("rgsmTopnav")
                .classList.remove("responsive");


            document
                .querySelectorAll(".rgsm-dropdown")
                .forEach(function(drop){

                    drop.classList.remove("open");

                });

        }

    }
);

</script>

<style>

/* =========================================================
   RGSM PUBLIC GALLERY
========================================================= */

.rgsm-gallery-page{

    --g1:#1b5e20;
    --g2:#2e7d32;
    --g3:#43a047;
    --gold:#b28a28;

    width:100%;

    background:
        linear-gradient(
            180deg,
            #f7faf7 0%,
            #ffffff 100%
        );

    padding:35px 15px 55px;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.rgsm-gallery-container{

    width:100%;
    max-width:1250px;

    margin:auto;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.rgsm-gallery-heading{

    text-align:center;

    margin-bottom:30px;
}

.rgsm-gallery-heading .rgsm-gallery-small{

    display:inline-block;

    color:var(--g2);

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:7px;
}

.rgsm-gallery-heading h1{

    margin:0;

    color:#173d1b;

    font-size:34px;

    font-weight:800;
}

.rgsm-gallery-heading p{

    margin:9px auto 0;

    color:#718078;

    max-width:650px;

    font-size:14px;

    line-height:1.6;
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.rgsm-gallery-line{

    width:75px;
    height:4px;

    margin:13px auto 0;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--g1),
            var(--g3),
            var(--gold)
        );
}


/* =========================================================
   FOLDER GRID
========================================================= */

.rgsm-folder-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}


/* =========================================================
   FOLDER CARD
========================================================= */

.rgsm-folder-card{

    position:relative;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #e2ebe3;

    box-shadow:
        0 8px 25px
        rgba(27,94,32,.08);

    cursor:pointer;

    transition:
        transform .28s ease,
        box-shadow .28s ease;

    text-decoration:none;

    color:inherit;

    display:block;
}

.rgsm-folder-card:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(27,94,32,.16);
}


/* =========================================================
   COVER IMAGE
========================================================= */

.rgsm-folder-cover{

    height:220px;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #dfeee1,
            #f5f9f5
        );
}

.rgsm-folder-cover img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .45s ease;
}

.rgsm-folder-card:hover
.rgsm-folder-cover img{

    transform:scale(1.07);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.rgsm-folder-cover:after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02),
            rgba(0,0,0,.48)
        );
}


/* =========================================================
   PHOTO COUNT
========================================================= */

.rgsm-photo-count{

    position:absolute;

    right:13px;
    top:13px;

    z-index:3;

    padding:7px 12px;

    border-radius:30px;

    background:
        rgba(27,94,32,.92);

    color:#fff;

    font-size:11px;

    font-weight:800;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.15);
}


/* =========================================================
   FOLDER ICON
========================================================= */

.rgsm-folder-icon{

    position:absolute;

    left:16px;
    bottom:14px;

    z-index:3;

    width:42px;
    height:42px;

    border-radius:12px;

    background:
        rgba(255,255,255,.95);

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:20px;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.12);
}


/* =========================================================
   FOLDER INFO
========================================================= */

.rgsm-folder-info{

    padding:17px 18px 18px;
}

.rgsm-folder-info h2{

    margin:0 0 5px;

    color:#263b2a;

    font-size:18px;

    font-weight:800;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.rgsm-folder-info p{

    margin:0;

    color:#7a8980;

    font-size:12px;
}

.rgsm-folder-arrow{

    float:right;

    color:var(--g2);

    font-size:18px;

    margin-top:-19px;
}


/* =========================================================
   EMPTY FOLDER
========================================================= */

.rgsm-empty-folder{

    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:55px;

    opacity:.45;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.rgsm-gallery-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:var(--g1);

    background:#eaf5eb;

    border:1px solid #cce2cf;

    padding:9px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:800;

    margin-bottom:18px;

    transition:.2s;
}

.rgsm-gallery-back:hover{

    background:var(--g1);

    color:#fff;
}


/* =========================================================
   SELECTED FOLDER HEADER
========================================================= */

.rgsm-selected-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:22px;

    flex-wrap:wrap;
}

.rgsm-selected-title h2{

    margin:0;

    color:#173d1b;

    font-size:25px;
}

.rgsm-selected-title span{

    color:#7b8980;

    font-size:12px;

    display:block;

    margin-top:4px;
}


/* =========================================================
   THUMBNAIL GRID
========================================================= */

.rgsm-photo-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}

.rgsm-photo-thumb{

    position:relative;

    height:205px;

    border-radius:15px;

    overflow:hidden;

    cursor:pointer;

    background:#eef3ef;

    box-shadow:
        0 6px 20px
        rgba(0,0,0,.08);

    border:2px solid #fff;

    transition:.25s;
}

.rgsm-photo-thumb:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 28px
        rgba(27,94,32,.16);
}

.rgsm-photo-thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .35s ease;
}

.rgsm-photo-thumb:hover img{

    transform:scale(1.06);
}


/* =========================================================
   THUMBNAIL NUMBER
========================================================= */

.rgsm-thumb-number{

    position:absolute;

    left:9px;
    top:9px;

    background:
        rgba(27,94,32,.88);

    color:#fff;

    padding:5px 9px;

    border-radius:20px;

    font-size:10px;

    font-weight:800;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.rgsm-lightbox{

    display:none;

    position:fixed;

    z-index:99999;

    inset:0;

    background:
        rgba(4,15,7,.96);

    align-items:center;

    justify-content:center;

    padding:65px 70px 45px;
}

.rgsm-lightbox.active{

    display:flex;
}


/* =========================================================
   LIGHTBOX IMAGE
========================================================= */

.rgsm-lightbox-stage{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.rgsm-lightbox-image{

    max-width:90%;

    max-height:85vh;

    object-fit:contain;

    user-select:none;

    transform-origin:center center;

    transition:
        transform .18s ease;

    cursor:grab;

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.5);
}

.rgsm-lightbox-image:active{

    cursor:grabbing;
}


/* =========================================================
   CLOSE
========================================================= */

.rgsm-lightbox-close{

    position:absolute;

    right:22px;
    top:16px;

    width:43px;
    height:43px;

    border-radius:50%;

    border:1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.12);

    color:#fff;

    font-size:25px;

    cursor:pointer;

    z-index:5;
}


/* =========================================================
   NAV BUTTONS
========================================================= */

.rgsm-lightbox-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;
    height:48px;

    border-radius:50%;

    border:1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.12);

    color:#fff;

    font-size:25px;

    cursor:pointer;

    z-index:5;

    display:flex;

    align-items:center;
    justify-content:center;

    transition:.2s;
}

.rgsm-lightbox-nav:hover,
.rgsm-lightbox-close:hover{

    background:
        rgba(67,160,71,.75);
}

.rgsm-lightbox-prev{

    left:17px;
}

.rgsm-lightbox-next{

    right:17px;
}


/* =========================================================
   TOOLBAR
========================================================= */

.rgsm-lightbox-toolbar{

    position:absolute;

    bottom:16px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:7px;

    z-index:6;

    padding:7px;

    border-radius:30px;

    background:
        rgba(255,255,255,.11);

    border:
        1px solid
        rgba(255,255,255,.18);

    backdrop-filter:
        blur(10px);
}

.rgsm-tool{

    min-width:38px;
    height:36px;

    padding:0 10px;

    border-radius:20px;

    border:0;

    background:
        rgba(255,255,255,.12);

    color:#fff;

    cursor:pointer;

    font-weight:800;

    font-size:13px;
}

.rgsm-tool:hover{

    background:
        rgba(67,160,71,.8);
}

.rgsm-lightbox-counter{

    color:#fff;

    font-size:12px;

    min-width:65px;

    text-align:center;

    font-weight:700;
}


/* =========================================================
   NO IMAGES
========================================================= */

.rgsm-no-images{

    text-align:center;

    padding:65px 20px;

    background:#fff;

    border-radius:18px;

    border:1px dashed #c9d9cc;

    color:#7b8980;
}

.rgsm-no-images .icon{

    font-size:48px;

    margin-bottom:8px;
}

.rgsm-no-images h3{

    margin:0 0 5px;

    color:#455a49;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

    .rgsm-folder-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .rgsm-photo-grid{

        grid-template-columns:
            repeat(3,1fr);
    }
}


@media(max-width:700px){

    .rgsm-gallery-page{

        padding:
            25px
            10px
            40px;
    }

    .rgsm-gallery-heading h1{

        font-size:27px;
    }

    .rgsm-folder-grid{

        grid-template-columns:1fr;

        gap:16px;
    }

    .rgsm-folder-cover{

        height:215px;
    }

    .rgsm-photo-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:10px;
    }

    .rgsm-photo-thumb{

        height:165px;

        border-radius:12px;
    }

    .rgsm-lightbox{

        padding:
            55px
            10px
            65px;
    }

    .rgsm-lightbox-image{

        max-width:96%;

        max-height:76vh;
    }

    .rgsm-lightbox-nav{

        width:40px;
        height:40px;

        font-size:20px;
    }

    .rgsm-lightbox-prev{

        left:7px;
    }

    .rgsm-lightbox-next{

        right:7px;
    }

    .rgsm-lightbox-toolbar{

        bottom:12px;
    }
}


@media(max-width:420px){

    .rgsm-photo-grid{

        grid-template-columns:1fr;
    }

    .rgsm-photo-thumb{

        height:230px;
    }

    .rgsm-selected-title h2{

        font-size:21px;
    }
}

</style>


<div class="rgsm-gallery-page">

<div class="rgsm-gallery-container">




    <!-- =====================================================
         FOLDER / ALBUM VIEW
    ====================================================== -->

    <div class="rgsm-gallery-heading">

        <span class="rgsm-gallery-small">
            Samagra Shiksha • Mahasamund
        </span>

        <h1>
            Photo Gallery
        </h1>

        <p>
            विद्यालयों एवं विभागीय गतिविधियों की
            महत्वपूर्ण झलकियाँ
        </p>

        <div class="rgsm-gallery-line"></div>

    </div>


    

        <div class="rgsm-folder-grid">


        

            

            <a
                href="?folder=4"
                class="rgsm-folder-card"
            >


                <!-- COVER -->

                <div class="rgsm-folder-cover">


                    

                        

                        <img
                            src="galleryimg/Pariksha_Pe_Charcha/1001454734.jpg"
                            alt="Pariksha_Pe_Charcha"
                            loading="lazy"
                        >


                    

                    <!-- COUNT -->

                    <div
                        class="rgsm-photo-count"
                    >

                        📷
                        2                        Photos

                    </div>


                    <!-- FOLDER ICON -->

                    <div
                        class="rgsm-folder-icon"
                    >

                        📁

                    </div>


                </div>


                <!-- INFO -->

                <div class="rgsm-folder-info">

                    <h2>

                        Pariksha_Pe_Charcha
                    </h2>

                    <p>

                        2
                        Photos

                    </p>

                    <span
                        class="rgsm-folder-arrow"
                    >
                        →
                    </span>

                </div>


            </a>


        

            

            <a
                href="?folder=3"
                class="rgsm-folder-card"
            >


                <!-- COVER -->

                <div class="rgsm-folder-cover">


                    

                        

                        <img
                            src="galleryimg/INDEPENDENCE%20DAY/1--1-.jpeg"
                            alt="INDEPENDENCE DAY"
                            loading="lazy"
                        >


                    

                    <!-- COUNT -->

                    <div
                        class="rgsm-photo-count"
                    >

                        📷
                        5                        Photos

                    </div>


                    <!-- FOLDER ICON -->

                    <div
                        class="rgsm-folder-icon"
                    >

                        📁

                    </div>


                </div>


                <!-- INFO -->

                <div class="rgsm-folder-info">

                    <h2>

                        INDEPENDENCE DAY
                    </h2>

                    <p>

                        5
                        Photos

                    </p>

                    <span
                        class="rgsm-folder-arrow"
                    >
                        →
                    </span>

                </div>


            </a>


        

            

            <a
                href="?folder=2"
                class="rgsm-folder-card"
            >


                <!-- COVER -->

                <div class="rgsm-folder-cover">


                    

                        <div
                            class="rgsm-empty-folder"
                        >
                            📁
                        </div>


                    

                    <!-- COUNT -->

                    <div
                        class="rgsm-photo-count"
                    >

                        📷
                        0                        Photos

                    </div>


                    <!-- FOLDER ICON -->

                    <div
                        class="rgsm-folder-icon"
                    >

                        📁

                    </div>


                </div>


                <!-- INFO -->

                <div class="rgsm-folder-info">

                    <h2>

                        testing2
                    </h2>

                    <p>

                        0
                        Photos

                    </p>

                    <span
                        class="rgsm-folder-arrow"
                    >
                        →
                    </span>

                </div>


            </a>


        

            

            <a
                href="?folder=1"
                class="rgsm-folder-card"
            >


                <!-- COVER -->

                <div class="rgsm-folder-cover">


                    

                        <div
                            class="rgsm-empty-folder"
                        >
                            📁
                        </div>


                    

                    <!-- COUNT -->

                    <div
                        class="rgsm-photo-count"
                    >

                        📷
                        0                        Photos

                    </div>


                    <!-- FOLDER ICON -->

                    <div
                        class="rgsm-folder-icon"
                    >

                        📁

                    </div>


                </div>


                <!-- INFO -->

                <div class="rgsm-folder-info">

                    <h2>

                        testing
                    </h2>

                    <p>

                        0
                        Photos

                    </p>

                    <span
                        class="rgsm-folder-arrow"
                    >
                        →
                    </span>

                </div>


            </a>


        

        </div>


    



</div>

</div>




```