diff --git a/dist.zip b/dist.zip
new file mode 100644
index 0000000..59da14a
Binary files /dev/null and b/dist.zip differ
diff --git a/public/image1.jpg b/public/image1.jpg
new file mode 100644
index 0000000..f53e296
Binary files /dev/null and b/public/image1.jpg differ
diff --git a/public/image2.jpg b/public/image2.jpg
new file mode 100644
index 0000000..c8c647d
Binary files /dev/null and b/public/image2.jpg differ
diff --git a/public/image3.jpg b/public/image3.jpg
new file mode 100644
index 0000000..ffbc84c
Binary files /dev/null and b/public/image3.jpg differ
diff --git a/public/image4.jpg b/public/image4.jpg
new file mode 100644
index 0000000..bb2bf3c
Binary files /dev/null and b/public/image4.jpg differ
diff --git a/public/img/logonobg.png b/public/img/logonobg.png
new file mode 100644
index 0000000..4a7bcd8
Binary files /dev/null and b/public/img/logonobg.png differ
diff --git a/public/img/new-bg.jpg b/public/img/new-bg.jpg
new file mode 100644
index 0000000..039dc4f
Binary files /dev/null and b/public/img/new-bg.jpg differ
diff --git a/public/img/new-bg2.jpg b/public/img/new-bg2.jpg
new file mode 100644
index 0000000..6bee840
Binary files /dev/null and b/public/img/new-bg2.jpg differ
diff --git a/public/img/new-bg3.png b/public/img/new-bg3.png
new file mode 100644
index 0000000..bcbd7a8
Binary files /dev/null and b/public/img/new-bg3.png differ
diff --git a/public/img/new-bg4.png b/public/img/new-bg4.png
new file mode 100644
index 0000000..d378f2c
Binary files /dev/null and b/public/img/new-bg4.png differ
diff --git a/public/img/new-bg5.png b/public/img/new-bg5.png
new file mode 100644
index 0000000..c6954b5
Binary files /dev/null and b/public/img/new-bg5.png differ
diff --git a/src/components/CollegeMenu1.astro b/src/components/CollegeMenu1.astro
new file mode 100644
index 0000000..c284509
--- /dev/null
+++ b/src/components/CollegeMenu1.astro
@@ -0,0 +1,873 @@
+<div class="body-class">
+    <div class="header-class">
+        <div class="menu-container">
+            <input type="checkbox" name="check" id="check">  
+            <div class="nav-btn">
+                <div class="nav-links">
+                    <ul class="ul-class">
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">Home</a>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">Institute<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">History</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Mission</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Vision</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Objective</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Infrastructure &amp; Facilities</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Distinctiveness</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Best Practices</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Awards &amp; Recognition</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Funds Received</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Strategic/Perspective Plan</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Future Plan</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Holiday List</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Campus</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">SWOC of College</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Site Map</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Contact</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>                    
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">Administration<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Administrative Committee</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Teachers' Council</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Organogram</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Code of Conduct</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Disciplinary Rules</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Feedback Form</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">RTI</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">RUSA</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Support Staff</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>                    
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class"> Academics<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Programs Offered<i class="fas fa-caret-down"></i></a>
+                                        <div class="dropdown second">
+                                            <ul class="ul-class">
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">Humanities</a>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">Science</a>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">Commerce</a>
+                                                </li>
+                                                <div class="arrow"></div>
+                                            </ul>
+                                        </div>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Departments<i class="fas fa-caret-down"></i></a>
+                                        <div class="dropdown second">
+                                            <ul class="ul-class">
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">Humanities<i class="fas fa-caret-down"></i></a>
+                                                    <div class="dropdown second">
+                                                    <ul class="ul-class">
+                                                        <li class="dropdown-link">
+                                                        <a href="#" class="link-class">Bengali</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                        <a href="#" class="link-class">Economics</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                        <a href="#" class="link-class">Education</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">English</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">French</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Geography</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">History</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Philosophy</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Political Science</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Sanskrit</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Sociology</a>
+                                                        </li>
+                                                        <div class="arrow"></div>
+                                                    </ul>
+                                                    </div>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">Science<i class="fas fa-caret-down"></i></a>
+                                                    <div class="dropdown second">
+                                                    <ul class="ul-class">
+                                                        <li class="dropdown-link">
+                                                        <a href="#" class="link-class">Botany</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                        <a href="#" class="link-class">Chemistry</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                        <a href="#" class="link-class">Computer Science</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Environmental Science</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Mathematics</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Physics</a>
+                                                        </li>
+                                                        <li class="dropdown-link">
+                                                            <a href="#" class="link-class">Zoology</a>
+                                                        </li>
+                                                        <div class="arrow"></div>
+                                                    </ul>
+                                                    </div>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                <a href="#" class="link-class">Commerce</a>
+                                                </li>
+                                                <div class="arrow"></div>
+                                            </ul>
+                                        </div>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">ISR</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">NSS</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Syllabus</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Faculty List (5 Years)</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Add-on Courses</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">PO, PSO & CO</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Academic Audit Report</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">University Examination</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">University Result</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Internal Examination</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">LMS</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Language Lab</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Language Lab</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Feedback on Curriculam</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Study Tours & Field Trips</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Exam Related Grievances</a>
+                                    </li>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">Student's_Corner<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Rules &amp; Regulations</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Routine</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Scholarship</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Placement Cell</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Online Competitive Exam</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Skill Development Program</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Achievements</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Student Support Services</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Students' Union</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Alumni</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">E-Magazine</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Feedback Form</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Online Grievance Redressal</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Anti Ragging Cell</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Minority Cell</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">ST/SC Cell</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">OBC Cell</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Anti Sexual Harassment Cell</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Add on Information</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>                                       
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">Research<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">PhD/MPhil/PG Teachers</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Research Guides</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Research Projects</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Know Your Ganges</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Central Instrumental Facility</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>                                     
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">Publications<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Journal Trivium</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Journal Ruellia</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Papers &amp; Journals</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Books &amp; Chapters</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>
+                                                                    
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">Notifications<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">General Notice</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Tender Notice</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">News&Events<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Events</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Press Coverage</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Gallery</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Videos</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">Facilities<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">ICT & Other Facilities</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class"> Girl's Hostel </a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="hamburger-menu-container">
+            <div class="hamburger-menu">
+                <div></div>
+            </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script is:inline src="https://kit.fontawesome.com/3b161c540c.js" crossorigin="anonymous"></script>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+    .body-class{
+        overflow-x: hidden;
+    }
+    :root {
+    --clr-btn: #3e5b66;
+    --clr-dropdown: #3e5b66;
+    --clr-nav-hover: #0011ff;
+    --clr-dropdown-hov: #009463;
+    --clr-dropdown-link-hov: #ff04c9;
+    --clr-light: #FFF;
+    }
+
+    * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    }
+
+
+    .ul-class {
+    list-style: none;
+    }
+
+    .link-class {
+    text-decoration: none;
+    }
+
+    .header-class {
+        position: sticky;
+        top: 0px;
+        background-color: #868756;
+        width: 100%;
+        z-index: 1000;
+    }
+
+    .overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: rgba(30, 130, 95, 0.5);
+    }
+
+    .menu-container {
+        max-width: 100%;
+        padding: 0px 2rem 0px 2rem;
+        margin: 0 auto;
+        display: flex;
+        position: relative;
+    }
+
+    .logo-container {
+        flex: 1;
+        display: flex;
+        align-items: center;
+    }
+
+    .nav-btn {
+        flex: 3;
+        display: flex;
+    }
+
+    .nav-links {
+        flex: 2;
+    }
+
+    .log-sign {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex: 1;
+    }
+
+    .logo {
+        color: var(--clr-light);
+        font-size: 1.1rem;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        line-height: 3rem;
+    }
+
+    .btn {
+        display: inline-block;
+        padding: .5rem 1.3rem;
+        font-size: .8rem;
+        border: 2px solid var(--clr-light);
+        border-radius: 2rem;
+        line-height: 1;
+        margin: 0 .2rem;
+        transition: .3s;
+        text-transform: uppercase;
+    }
+
+    .btn.solid,
+    .btn.transparent:hover {
+        background-color: var(--clr-light);
+        color: var(--clr-btn);
+    }
+
+    .btn.transparent,
+    .btn.solid:hover {
+        background-color: transparent;
+        color: var(--clr-light);
+    }
+
+    .nav-links > .ul-class {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .nav-link {
+        position: relative;
+    }
+
+    .nav-link > .link-class {
+        line-height: 3rem;
+        color: var(--clr-light);
+        padding: 0 .8rem;
+        letter-spacing: 1px;
+        font-size: .95rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        transition: .5s;
+    }
+
+    .nav-link > .link-class > i {
+        margin-left: .2rem;
+    }
+
+    .nav-link:hover > .link-class {
+        transform: scale(1.1);
+    }
+
+    .dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 15rem;
+        transform: translateY(10px);
+        opacity: 0;
+        pointer-events: none;
+        transition: .5s;
+    }
+
+    .dropdown .ul-class {
+        position: relative;
+    }
+
+    .dropdown-link > .link-class {
+        display: flex;
+        background-color: #3e5b66;
+        color: #FFF;
+        padding: .5rem 1rem;
+        font-size: .9rem;
+        align-items: center;
+        justify-content: space-between;
+        transition: .3s;
+    }
+
+    .dropdown-link:hover > .link-class {
+        background-color: #273c45;
+        color: #fbaf00;
+    }
+
+    .dropdown-link:not(:nth-last-child(2)) {
+        border-bottom: 1px solid var(--clr-light);
+    }
+
+    .dropdown-link i {
+        transform: rotate(-90deg);
+    }
+
+    .arrow {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: -5.5px;
+        left: 32px;
+        background-color: #3e5b66;
+        transform: rotate(45deg);
+        cursor: pointer;
+        transition: .3s;
+    }
+
+    .dropdown-link:first-child:hover ~ .arrow {
+        background-color: var(--clr-dropdown);
+    }
+
+    .dropdown-link {
+        position: relative;
+    }
+
+    .dropdown.second {
+        top: 0;
+        left: 100%;
+        padding-left: .8rem;
+        cursor: pointer;
+        transform: translateX(10px);
+    }
+
+    .dropdown.second .arrow {
+        top: 10px;
+        left: -5.5px;
+    }
+
+    .nav-link:hover > .dropdown,
+    .dropdown-link:hover>.dropdown {
+    transform: translate(0, 0);
+    opacity: 1;
+    pointer-events: auto;
+    }
+
+    .hamburger-menu-container {
+        flex: 1;
+        display: none;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .hamburger-menu {
+        width: 2.5rem;
+        height: 2.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .hamburger-menu div {
+        width: 1.6rem;
+        height: 3px;
+        border-radius: 3px;
+        background-color: var(--clr-light);
+        position: relative;
+        z-index: 1001;
+        transition: .5s;
+    }
+
+    .hamburger-menu div:before,
+    .hamburger-menu div:after {
+        content: '';
+        position: absolute;
+        width: inherit;
+        height: inherit;
+        background-color: var(--clr-light);
+        border-radius: 3px;
+        transition: .5s;
+    }
+
+    .hamburger-menu div:before {
+        transform: translateY(-7px);
+    }
+
+    .hamburger-menu div:after {
+        transform: translateY(7px);
+    }
+
+    #check {
+        position: absolute;
+        top: 50%;
+        left: 1.5rem;
+        transform: translateY(-50%);
+        width: 2.5rem;
+        height: 2.5rem;
+        z-index: 90000;
+        cursor: pointer;
+        opacity: 0;
+        display: none;
+    }
+
+    #check:checked ~ .hamburger-menu-container .hamburger-menu div {
+        background-color: transparent;
+    }
+
+    #check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
+        transform: translateY(0) rotate(-45deg);
+    }
+
+    #check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
+        transform: translateY(0) rotate(45deg);
+    }
+
+    @keyframes animation {
+        from {
+            opacity: 0;
+            transform: translateY(15px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0px);
+        }
+    }
+
+    @media (max-width: 1220px) {
+        .hamburger-menu-container {
+            display: flex;
+        }
+
+        #check {
+            display: block;
+        }
+
+        .nav-btn {
+            position: fixed;
+            height: calc(100vh - 3rem);
+            top: 2.5rem;
+            left: 0;
+            width: 100%;
+            background-color: var(--clr-btn);
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            overflow-x: hidden;
+            overflow-y: auto;
+            transform: translateX(-100%);
+            transition: .65s;
+            margin-top: 40px;
+        }
+
+        #check:checked ~ .nav-btn {
+            transform: translateX(0);
+        }
+
+        #check:checked ~ .nav-btn .nav-link,
+        #check:checked ~ .nav-btn .log-sign {
+            animation: animation .5s ease forwards var(--i);
+        }
+
+        .nav-links {
+            flex: initial;
+            width: 100%;
+        }
+
+        .nav-links > .ul-class {
+            flex-direction: column;
+        }
+
+        .nav-link {
+            width: 100%;
+            opacity: 0;
+            transform: translateY(15px);
+        }
+
+        .nav-link > .link-class {
+            line-height: 1;
+            padding: 1.6rem 2rem;
+        }
+
+        .nav-link:hover > .link-class {
+            transform: scale(1);
+            background-color: #273c45;
+        }
+
+        .dropdown,
+        .dropdown.second {
+            position: initial;
+            top: initial;
+            left: initial;
+            transform: initial;
+            opacity: 1;
+            pointer-events: auto;
+            width: 100%;
+            padding: 0;
+            background-color: #3e5b66;
+            display: none;
+        }
+
+        .nav-link:hover > .dropdown,
+        .dropdown-link:hover>.dropdown {
+            display: block;
+        }
+
+        .nav-link:hover > .link-class > i,
+        .dropdown-link:hover>.link-class>i {
+            transform: rotate(360deg);
+        }
+
+        .dropdown-link > .link-class {
+            background-color: transparent;
+            color: var(--clr-light);
+            padding: 1.2rem 2rem;
+            line-height: 1;
+        }
+
+        .dropdown.second .dropdown-link > .link-class {
+            padding: 1.2rem 2rem 1.2rem 3rem;
+        }
+
+        .dropdown.second .dropdown.second .dropdown-link > .link-class {
+            padding: 1.2rem 2rem 1.2rem 4rem;
+        }
+
+        .dropdown-link:not(:nth-last-child(2)) {
+            border-bottom: none;
+        }
+
+        .arrow {
+            z-index: 1;
+            background-color: var(--clr-btn);
+            left: 10%;
+            transform: scale(1.1) rotate(45deg);
+            transition: .5s;
+        }
+
+        .nav-link:hover .arrow {
+            background-color: #273c45;
+        }
+
+        .dropdown .dropdown .arrow {
+            display: none;
+        }
+
+        .dropdown-link:hover > .link-class {
+            background-color: #273c45;
+        }
+
+        .dropdown-link:first-child:hover ~ .arrow {
+            background-color: #273c45;
+        }
+
+        .nav-link > .link-class > i {
+            font-size: 1.1rem;
+            transform: rotate(-90deg);
+            transition: .7s;
+        }
+
+        .dropdown i {
+            font-size: 1rem;
+            transition: .7s;
+        }
+
+        .log-sign {
+            flex: initial;
+            width: 100%;
+            padding: 1.5rem 1.9rem;
+            justify-content: flex-start;
+            opacity: 0;
+            transform: translateY(15px);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/CollegeMenu2.astro b/src/components/CollegeMenu2.astro
new file mode 100644
index 0000000..f7f3b17
--- /dev/null
+++ b/src/components/CollegeMenu2.astro
@@ -0,0 +1,657 @@
+<body class="body-class lg:hidden">
+    <div class="header-class2">
+        <div class="menu-container">
+            <input type="checkbox" name="check" id="check">  
+            <div class="nav-btn">
+                <div class="nav-links">
+                    <ul class="ul-class">
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class"> NCC<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Accreditation Document<i class="fas fa-caret-down"></i></a>
+                                        <div class="dropdown second">
+                                            <ul class="ul-class">
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">NAAC Certificates & Score Sheet</a>
+                                                </li>
+                                                <div class="arrow"></div>
+                                            </ul>
+                                        </div>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">NAAC 3rd Cycle Press Note</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Capacity Building Program</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">NAAC SSR</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">IIQA Documents<i class="fas fa-caret-down"></i></a>
+                                        <div class="dropdown second">
+                                            <ul class="ul-class">
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">IIQA Filled in Form</a>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">AISHE Certificate 2021-22</a>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">2F &amp; 12B</a>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">University Affiliated Courses</a>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">Undertaking of H.O.I.</a>
+                                                </li>
+                                                <li class="dropdown-link">
+                                                    <a href="#" class="link-class">Self Declaration of H.O.I.</a>
+                                                </li>
+                                                <div class="arrow"></div>
+                                            </ul>
+                                        </div>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Program Outcome</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Syllabus</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">List of Programme</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">IQAC Minutes &amp; Report</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Annual Examination Report</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Feedback</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Project Certificate</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Collaborative Activities</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Career Counselling Certificate</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">JAM/NET/Exam Cleared List</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">ICT Rooms</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Full Time Teachers &amp; Students</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Seminar Reports - IPR, RM &amp; EP</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Program Studies &amp; Placement</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Mentor/Mentee Meeting Report</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Developing Grants Received</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Solar Panel Installation</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Water Harvesting Project</a>
+                                    </li>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">IQAC<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Policy Document</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Committee</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">IQAC Minutes</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">A.Q.A.R.</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">S.S.S.</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Academic Audit</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Green Audit</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">College Annual Report</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Gender Audit</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>                                       
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">NIRF<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">NIRF 2024</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">NIRF 2023</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">NIRF 2022</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">NIRF 2021</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">NIRF 2020</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>
+                            </div>
+                        </li>
+                        <li class="nav-link" style="--i: 0s">
+                            <a href="#" class="link-class">ICC<i class="fas fa-caret-down"></i></a>
+                            <div class="dropdown">
+                                <ul class="ul-class">
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Members</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Policy Document</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Grievance Redressal</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Grievance Cell</a>
+                                    </li>
+                                    <li class="dropdown-link">
+                                        <a href="#" class="link-class">Anti Sexual Harassment Cell</a>
+                                    </li>
+                                    <div class="arrow"></div>
+                                </ul>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="hamburger-menu-container">
+            <div class="hamburger-menu">
+                <div></div>
+            </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script is:inline src="https://kit.fontawesome.com/3b161c540c.js" crossorigin="anonymous"></script>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+    .body-class{
+        overflow-x: hidden;
+    }
+    :root {
+    --clr-btn: #3e5b66;
+    --clr-dropdown: #3e5b66;
+    --clr-nav-hover: #0011ff;
+    --clr-dropdown-hov: #009463;
+    --clr-dropdown-link-hov: #ff04c9;
+    --clr-light: #FFF;
+    }
+
+    * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    }
+
+
+    .ul-class {
+    list-style: none;
+    }
+
+    .link-class {
+    text-decoration: none;
+    }
+
+    .header-class2 {
+        position: sticky;
+        top: 0px;
+        background-color: #c6a7a4;
+        width: 100%;
+        z-index: 1001;
+    }
+
+    .overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: rgba(30, 130, 95, 0.5);
+    }
+
+    .menu-container {
+        max-width: 100%;
+        padding: 0px 2rem 0px 2rem;
+        margin: 0 auto;
+        display: flex;
+        position: relative;
+    }
+
+    .logo-container {
+        flex: 1;
+        display: flex;
+        align-items: center;
+    }
+
+    .nav-btn {
+        flex: 3;
+        display: flex;
+    }
+
+    .nav-links {
+        flex: 2;
+    }
+
+    .log-sign {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex: 1;
+    }
+
+    .logo {
+        color: var(--clr-light);
+        font-size: 1.1rem;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        line-height: 3rem;
+    }
+
+    .btn {
+        display: inline-block;
+        padding: .5rem 1.3rem;
+        font-size: .8rem;
+        border: 2px solid var(--clr-light);
+        border-radius: 2rem;
+        line-height: 1;
+        margin: 0 .2rem;
+        transition: .3s;
+        text-transform: uppercase;
+    }
+
+    .btn.solid,
+    .btn.transparent:hover {
+        background-color: var(--clr-light);
+        color: var(--clr-btn);
+    }
+
+    .btn.transparent,
+    .btn.solid:hover {
+        background-color: transparent;
+        color: var(--clr-light);
+    }
+
+    .nav-links > .ul-class {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .nav-link {
+        position: relative;
+    }
+
+    .nav-link > .link-class {
+        line-height: 3rem;
+        color: var(--clr-light);
+        padding: 0 .8rem;
+        letter-spacing: 1px;
+        font-size: .95rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        transition: .5s;
+    }
+
+    .nav-link > .link-class > i {
+        margin-left: .2rem;
+    }
+
+    .nav-link:hover > .link-class {
+        transform: scale(1.1);
+    }
+
+    .dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 15rem;
+        transform: translateY(10px);
+        opacity: 0;
+        pointer-events: none;
+        transition: .5s;
+    }
+
+    .dropdown .ul-class {
+        position: relative;
+    }
+
+    .dropdown-link > .link-class {
+        display: flex;
+        background-color: #3e5b66;
+        color: #FFF;
+        padding: .5rem 1rem;
+        font-size: .9rem;
+        align-items: center;
+        justify-content: space-between;
+        transition: .3s;
+    }
+
+    .dropdown-link:hover > .link-class {
+        background-color: #273c45;
+        color: #fbaf00;
+    }
+
+    .dropdown-link:not(:nth-last-child(2)) {
+        border-bottom: 1px solid var(--clr-light);
+    }
+
+    .dropdown-link i {
+        transform: rotate(-90deg);
+    }
+
+    .arrow {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: -5.5px;
+        left: 32px;
+        background-color: #3e5b66;
+        transform: rotate(45deg);
+        cursor: pointer;
+        transition: .3s;
+        z-index: 1;
+    }
+
+    .dropdown-link:first-child:hover ~ .arrow {
+        background-color: var(--clr-dropdown);
+    }
+
+    .dropdown-link {
+        position: relative;
+    }
+
+    .dropdown.second {
+        top: 0;
+        left: 100%;
+        padding-left: .8rem;
+        cursor: pointer;
+        transform: translateX(10px);
+    }
+
+    .dropdown.second .arrow {
+        top: 10px;
+        left: -5.5px;
+    }
+
+    .nav-link:hover > .dropdown,
+    .dropdown-link:hover>.dropdown {
+    transform: translate(0, 0);
+    opacity: 1;
+    pointer-events: auto;
+    }
+
+    .hamburger-menu-container {
+        flex: 1;
+        display: none;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .hamburger-menu {
+        width: 2.5rem;
+        height: 2.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .hamburger-menu div {
+        width: 1.6rem;
+        height: 3px;
+        border-radius: 3px;
+        background-color: var(--clr-light);
+        position: relative;
+        z-index: 1002;
+        transition: .5s;
+    }
+
+    .hamburger-menu div:before,
+    .hamburger-menu div:after {
+        content: '';
+        position: absolute;
+        width: inherit;
+        height: inherit;
+        background-color: var(--clr-light);
+        border-radius: 3px;
+        transition: .5s;
+    }
+
+    .hamburger-menu div:before {
+        transform: translateY(-7px);
+    }
+
+    .hamburger-menu div:after {
+        transform: translateY(7px);
+    }
+
+    #check {
+        position: absolute;
+        top: 50%;
+        left: 1.5rem;
+        transform: translateY(-50%);
+        width: 2.5rem;
+        height: 2.5rem;
+        z-index: 90001;
+        cursor: pointer;
+        opacity: 0;
+        display: none;
+    }
+
+    #check:checked ~ .hamburger-menu-container .hamburger-menu div {
+        background-color: transparent;
+    }
+
+    #check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
+        transform: translateY(0) rotate(-45deg);
+    }
+
+    #check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
+        transform: translateY(0) rotate(45deg);
+    }
+
+    @keyframes animation {
+        from {
+            opacity: 0;
+            transform: translateY(15px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0px);
+        }
+    }
+
+    @media (max-width: 1220px) {
+        .hamburger-menu-container {
+            display: flex;
+        }
+
+        #check {
+            display: block;
+        }
+
+        .nav-btn {
+            position: fixed;
+            height: calc(100vh - 3rem);
+            top: 2.5rem;
+            left: 0;
+            width: 100%;
+            background-color: var(--clr-btn);
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            overflow-x: hidden;
+            overflow-y: auto;
+            transform: translateX(-100%);
+            transition: .65s;
+        }
+
+        #check:checked ~ .nav-btn {
+            transform: translateX(0);
+        }
+
+        #check:checked ~ .nav-btn .nav-link,
+        #check:checked ~ .nav-btn .log-sign {
+            animation: animation .5s ease forwards var(--i);
+        }
+
+        .nav-links {
+            flex: initial;
+            width: 100%;
+        }
+
+        .nav-links > .ul-class {
+            flex-direction: column;
+        }
+
+        .nav-link {
+            width: 100%;
+            opacity: 0;
+            transform: translateY(15px);
+        }
+
+        .nav-link > .link-class {
+            line-height: 1;
+            padding: 1.6rem 2rem;
+        }
+
+        .nav-link:hover > .link-class {
+            transform: scale(1);
+            background-color: #273c45;
+        }
+
+        .dropdown,
+        .dropdown.second {
+            position: initial;
+            top: initial;
+            left: initial;
+            transform: initial;
+            opacity: 1;
+            pointer-events: auto;
+            width: 100%;
+            padding: 0;
+            background-color: #3e5b66;
+            display: none;
+        }
+
+        .nav-link:hover > .dropdown,
+        .dropdown-link:hover>.dropdown {
+            display: block;
+        }
+
+        .nav-link:hover > .link-class > i,
+        .dropdown-link:hover>.link-class>i {
+            transform: rotate(360deg);
+        }
+
+        .dropdown-link > .link-class {
+            background-color: transparent;
+            color: var(--clr-light);
+            padding: 1.2rem 2rem;
+            line-height: 1;
+        }
+
+        .dropdown.second .dropdown-link > .link-class {
+            padding: 1.2rem 2rem 1.2rem 3rem;
+        }
+
+        .dropdown.second .dropdown.second .dropdown-link > .link-class {
+            padding: 1.2rem 2rem 1.2rem 4rem;
+        }
+
+        .dropdown-link:not(:nth-last-child(2)) {
+            border-bottom: none;
+        }
+
+        .arrow {
+            z-index: 2;
+            background-color: var(--clr-btn);
+            left: 10%;
+            transform: scale(1.1) rotate(45deg);
+            transition: .5s;
+        }
+
+        .nav-link:hover .arrow {
+            background-color: #273c45;
+        }
+
+        .dropdown .dropdown .arrow {
+            display: none;
+        }
+
+        .dropdown-link:hover > .link-class {
+            background-color: #273c45;
+        }
+
+        .dropdown-link:first-child:hover ~ .arrow {
+            background-color: #273c45;
+        }
+
+        .nav-link > .link-class > i {
+            font-size: 1.1rem;
+            transform: rotate(-90deg);
+            transition: .7s;
+        }
+
+        .dropdown i {
+            font-size: 1rem;
+            transition: .7s;
+        }
+
+        .log-sign {
+            flex: initial;
+            width: 100%;
+            padding: 1.5rem 1.9rem;
+            justify-content: flex-start;
+            opacity: 0;
+            transform: translateY(15px);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/a.astro b/src/pages/a.astro
new file mode 100644
index 0000000..edbe6ca
--- /dev/null
+++ b/src/pages/a.astro
@@ -0,0 +1,68 @@
+<li class="nav-link" style="--i: 0s">
+    <a href="#" class="link-class"> Academics<i class="fas fa-caret-down"></i></a>
+    <div class="dropdown">
+      <ul class="ul-class">
+        <li class="dropdown-link">
+            <a href="#" class="link-class">Programs Offered<i class="fas fa-caret-down"></i></a>
+            <div class="dropdown second">
+            <ul class="ul-class">
+                <li class="dropdown-link">
+                <a href="#" class="link-class">Humanities</a>
+                </li>
+                <li class="dropdown-link">
+                <a href="#" class="link-class">Science</a>
+                </li>
+                <li class="dropdown-link">
+                <a href="#" class="link-class">Commerce</a>
+                </li>
+                <div class="arrow"></div>
+            </ul>
+            </div>
+        </li>
+        <li class="dropdown-link">
+            <a href="#" class="link-class">More<i class="fas fa-caret-down"></i></a>
+            <div class="dropdown second">
+            <ul class="ul-class">
+                <li class="dropdown-link">
+                <a href="#" class="link-class">Link 1</a>
+                </li>
+                <li class="dropdown-link">
+                <a href="#" class="link-class">Link 2</a>
+                </li>
+                <li class="dropdown-link">
+                <a href="#" class="link-class">Link 3</a>
+                </li>
+                <div class="arrow"></div>
+            </ul>
+            </div>
+        </li>
+        <li class="dropdown-link">
+          <a href="#" class="link-class">Link 1</a>
+        </li>
+        <li class="dropdown-link">
+          <a href="#" class="link-class">Link 2</a>
+        </li>
+        <li class="dropdown-link">
+            <a href="#" class="link-class">Link 3<i class="fas fa-caret-down"></i></a>
+            <div class="dropdown second">
+                <ul class="ul-class">
+                    <li class="dropdown-link">
+                        <a href="#" class="link-class">Link 1</a>
+                    </li>
+                    <li class="dropdown-link">
+                        <a href="#" class="link-class">Link 2</a>
+                    </li>
+                    <li class="dropdown-link">
+                        <a href="#" class="link-class">Link 3</a>
+                    </li>
+                    <div class="arrow"></div>
+                </ul>
+            </div>
+        </li>
+        <li class="dropdown-link">
+          <a href="#" class="link-class">Link 4</a>
+        </li>
+        <div class="arrow"></div>
+      </ul>
+    </div>
+  </li>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index eefe26f..5833c7f 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -87,7 +87,7 @@ import ContactForm from "../components/ContactForm.vue";
                             >
                                 <img
                                     class="w-24 h-24 rounded-full mb-4"
-                                    src="public/img/goal.png"
+                                    src="/img/goal.png"
                                     alt=""
                                 />
                                 <h3 class="text-lg font-bold">Mission</h3>
@@ -105,7 +105,7 @@ import ContactForm from "../components/ContactForm.vue";
                             >
                                 <img
                                     class="w-24 h-24 rounded-full mb-4"
-                                    src="public/img/rocket.png"
+                                    src="/img/rocket.png"
                                     alt=""
                                 />
                                 <h3 class="text-lg font-bold">Vision</h3>
@@ -124,7 +124,7 @@ import ContactForm from "../components/ContactForm.vue";
                             >
                                 <img
                                     class="w-24 h-24 rounded-full mb-4"
-                                    src="public/img/commitee.png"
+                                    src="/img/commitee.png"
                                     alt=""
                                 />
                                 <h3 class="text-lg font-bold">Ethics</h3>
@@ -141,7 +141,7 @@ import ContactForm from "../components/ContactForm.vue";
                             >
                                 <img
                                     class="w-24 h-24 rounded-full mb-4"
-                                    src="public/img/philosophy.png"
+                                    src="/img/philosophy.png"
                                     alt=""
                                 />
                                 <h3 class="text-lg font-bold">Philosophy</h3>
@@ -223,7 +223,7 @@ import ContactForm from "../components/ContactForm.vue";
                                             class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
                                         >
                                             <img
-                                                src="public/img/codevalue3.png"
+                                                src="/img/codevalue3.png"
                                                 alt=""
                                             />
                                         </div>
@@ -243,7 +243,7 @@ import ContactForm from "../components/ContactForm.vue";
                                             class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
                                         >
                                             <img
-                                                src="public/img/codevalue4.png"
+                                                src="/img/codevalue4.png"
                                                 alt=""
                                             />
                                         </div>
@@ -263,7 +263,7 @@ import ContactForm from "../components/ContactForm.vue";
                                             class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
                                         >
                                             <img
-                                                src="public/img/codevalue5.png"
+                                                src="/img/codevalue5.png"
                                                 alt=""
                                             />
                                         </div>
@@ -283,7 +283,7 @@ import ContactForm from "../components/ContactForm.vue";
                                             class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
                                         >
                                             <img
-                                                src="public/img/codevalue1.png"
+                                                src="/img/codevalue1.png"
                                                 alt=""
                                             />
                                         </div>
@@ -303,7 +303,7 @@ import ContactForm from "../components/ContactForm.vue";
                                             class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
                                         >
                                             <img
-                                                src="public/img/codevalue2.png"
+                                                src="/img/codevalue2.png"
                                                 alt=""
                                             />
                                         </div>
@@ -323,7 +323,7 @@ import ContactForm from "../components/ContactForm.vue";
                                             class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
                                         >
                                             <img
-                                                src="public/img/codevalue6.png"
+                                                src="/img/codevalue6.png"
                                                 alt=""
                                             />
                                         </div>
@@ -398,7 +398,7 @@ import ContactForm from "../components/ContactForm.vue";
                                 <div class="p-2">
                                     <img
                                         class="rounded-lg shadow-lg"
-                                        src="public/img/Objective.jpg"
+                                        src="/img/Objective.jpg"
                                         alt="objective"
                                     />
                                 </div>
@@ -443,7 +443,7 @@ import ContactForm from "../components/ContactForm.vue";
                         <div class="w-full md:w-1/2">
                             <img
                             class="rounded-lg shadow-lg"
-                            src="public/img/objective.jpg"
+                            src="/img/objective.jpg"
                             alt="objective"
                         />
                         </div>
diff --git a/src/pages/admission.astro b/src/pages/admission.astro
index 8960243..319ef57 100644
--- a/src/pages/admission.astro
+++ b/src/pages/admission.astro
@@ -13,7 +13,7 @@ import ContactForm from "../components/ContactForm.vue";
                     <div class="w-full">
                         <img
                             class="lg:max-w-3xl"
-                            src="public/img/school-image-3.png"
+                            src="/img/school-image-3.png"
                             alt=""
                         />
                     </div>
@@ -37,17 +37,9 @@ import ContactForm from "../components/ContactForm.vue";
                         </h3>
                         <div class="flex flex-row place-content-between">
                         
-                              <button
-                                onclick="formModal.showModal();"
-                                class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
-                                >Get in Touch</button
-                            >
-                            <p class="text-base xl:text-lg font-bold">Or</p>
-                            <a
-                                href="/assets/admission-form.pdf" download
-                                class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
-                                >Download Form</a
-                            >
+                              <button onclick="formModal.showModal();" class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300" >Download Form</button>
+                            <!-- <p class="text-base xl:text-lg font-bold">Or</p> -->
+                            <!-- <a href="/assets/admission-form.pdf" download class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300" >Download Form</a> -->
                         </div>
                     </div>
                 </div>
@@ -400,11 +392,11 @@ import ContactForm from "../components/ContactForm.vue";
                         </tr>
                     </tbody>
                 </table> -->
-                <div class="my-6 flex flex-row">
+                <!-- <div class="my-6 flex flex-row">
                     <p class="animate-bounce text-4xl font-bold">&#10551;</p>
 
                     <p class="text-2xl font-bold"><a target="_blank" class="text-blue-700" href="/assets/admission-form.pdf" download>Click Here</a> to download admission form</p>
-                </div>
+                </div> -->
             </section>
             <section class="container mx-auto">
                 <div>
diff --git a/src/pages/game.astro b/src/pages/game.astro
new file mode 100644
index 0000000..bb67f7b
--- /dev/null
+++ b/src/pages/game.astro
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snake Game</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #333;
+        }
+        canvas {
+            border: 2px solid #fff;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas" width="400" height="400"></canvas>
+    
+    <script is:inline>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const gridSize = 20;
+        const tileCount = canvas.width / gridSize;
+
+        let snake = [{ x: 10, y: 10 }];
+        let velocity = { x: 0, y: 0 };
+
+        let food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
+        let score = 0;
+        const gameSpeed = 200;
+        document.addEventListener('keydown', (event) => {
+            switch (event.key) {
+                case 'ArrowUp':
+                    if (velocity.y === 0) {
+                        velocity = { x: 0, y: -1 };
+                    }
+                    break;
+                case 'ArrowDown':
+                    if (velocity.y === 0) {
+                        velocity = { x: 0, y: 1 };
+                    }
+                    break;
+                case 'ArrowLeft':
+                    if (velocity.x === 0) {
+                        velocity = { x: -1, y: 0 };
+                    }
+                    break;
+                case 'ArrowRight':
+                    if (velocity.x === 0) {
+                        velocity = { x: 1, y: 0 };
+                    }
+                    break;
+            }
+        });
+        function gameLoop() {
+            const head = { x: snake[0].x + velocity.x, y: snake[0].y + velocity.y };
+            snake.unshift(head);
+            if (head.x === food.x && head.y === food.y) {
+                score++;
+                food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
+            } else {
+                snake.pop();
+            }
+            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
+                resetGame();
+            }
+
+            for (let i = 1; i < snake.length; i++) {
+                if (head.x === snake[i].x && head.y === snake[i].y) {
+                    resetGame();
+                }
+            }
+            draw();
+        }
+
+        function resetGame() {
+            alert(`Game Over! Your score: ${score}`);
+            score = 0;
+            snake = [{ x: 10, y: 10 }];
+            velocity = { x: 0, y: 0 };
+            food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
+        }
+        function draw() {
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = '#0F0';
+            snake.forEach(segment => {
+                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
+            });
+            ctx.fillStyle = '#F00';
+            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
+
+            ctx.fillStyle = '#FFF';
+            ctx.font = '20px Arial';
+            ctx.fillText(`Score: ${score}`, 10, 30);
+        }
+        setInterval(gameLoop, gameSpeed);
+    </script>
+</body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 270f7da..75baa4a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,10 +9,25 @@ import FAQ from "../components/FAQ.vue";
 <Layout title="Holy Wisdom Public School">
 	<main>
 		<div class="pb-16">
-			<section class="container-fluid gradintBack">
-				<div
-					class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4"
-				>
+			<div class="mx-auto">
+				<img class="w-full" src="/img/new-bg5.png" alt="">
+			</div>
+			<div class="container mx-auto px-4">
+				<h2 class="text-2xl md:text-2xl text-[#3084b5] py-4">
+					An ideal institution for Children’s Education in
+					this area.
+				</h2>
+				<h3 class="text-xl text-justify pb-4">
+					Carefully organized and tiered educational
+					materials, inspired by the principles of Maria
+					Montessori, designed to showcase your excellence as
+					an instructor. Strategically crafted for effective
+					implementation in both traditional classrooms and
+					homeschool environments.
+				</h3>
+			</div>
+			<!-- <section class="container-fluid gradintBack">
+				<div class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4">
 					<div class="w-full">
 						<img
 							class="w-full xl:max-w-2xl"
@@ -21,13 +36,11 @@ import FAQ from "../components/FAQ.vue";
 						/>
 					</div>
 					<div class="flex flex-col w-full">
-						<!-- <h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">A Montessori-inspired School Curriculum</h1> -->
 						<h1
 							class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]"
 						>
 							HOLY WISDOM PUBLIC SCHOOL
 						</h1>
-						<!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Conduct classroom sessions effortlessly and with assurance.</h2> -->
 						<h2 class="text-2xl md:text-2xl text-[#3084b5] py-4">
 							An ideal institution for Children’s Education in
 							this area.
@@ -55,8 +68,7 @@ import FAQ from "../components/FAQ.vue";
 						</div>
 					</div>
 				</div>
-				<!-- grid grid-cols-1 md:grid-cols-2 -->
-			</section>
+			</section> -->
 			<section class="container mx-auto px-4 mt-16 mb-10 2xl:-mb-16">
 				<div class="flex flex-col md:flex-row justify-center gap-4">
 					<div class="w-full md:w-2/3">
@@ -355,7 +367,7 @@ import FAQ from "../components/FAQ.vue";
 								<div class="bg-card p-4 rounded-lg text-center">
 									<img
 										class="w-full h-48 object-cover rounded-lg mb-4"
-										src="public/img/Priority3.jpg"
+										src="/img/Priority3.jpg"
 										alt=""
 									/>
 									<h3 class="text-lg font-semibold">
@@ -365,7 +377,7 @@ import FAQ from "../components/FAQ.vue";
 								<div class="bg-card p-4 rounded-lg text-center">
 									<img
 										class="w-full h-48 object-cover rounded-lg mb-4"
-										src="public/img/Priority5.jpg"
+										src="/img/Priority5.jpg"
 										alt=""
 									/>
 									<h3 class="text-lg font-semibold">
@@ -375,7 +387,7 @@ import FAQ from "../components/FAQ.vue";
 								<div class="bg-card p-4 rounded-lg text-center">
 									<img
 										class="w-full h-48 object-cover rounded-lg mb-4"
-										src="public/img/Priority6.jpg"
+										src="/img/Priority6.jpg"
 										alt=""
 									/>
 									<h3 class="text-lg font-semibold">
@@ -386,7 +398,7 @@ import FAQ from "../components/FAQ.vue";
 								<div class="bg-card p-4 rounded-lg text-center">
 									<img
 										class="w-full h-48 object-cover rounded-lg mb-4"
-										src="public/img/Priority1.jpg"
+										src="/img/Priority1.jpg"
 										alt=""
 									/>
 									<h3 class="text-lg font-semibold">
@@ -396,7 +408,7 @@ import FAQ from "../components/FAQ.vue";
 								<!-- <div class="bg-card p-4 rounded-lg text-center">
 									<img
 										class="w-full h-48 object-cover rounded-lg mb-4"
-										src="public/img/Priority4.jpg"
+										src="/img/Priority4.jpg"
 										alt=""
 									/>
 									<h3 class="text-lg font-semibold">
@@ -406,7 +418,7 @@ import FAQ from "../components/FAQ.vue";
 								<div class="bg-card p-4 rounded-lg text-center">
 									<img
 										class="w-full h-48 object-cover rounded-lg mb-4"
-										src="public/img/Priority2.jpg"
+										src="/img/Priority2.jpg"
 										alt=""
 									/>
 									<h3 class="text-lg font-semibold">
diff --git a/src/pages/overview.astro b/src/pages/overview.astro
index 7435b9c..c8f736b 100644
--- a/src/pages/overview.astro
+++ b/src/pages/overview.astro
@@ -14,7 +14,7 @@ import ContactForm from "../components/ContactForm.vue";
                         <!-- <img class="lg:max-w-2xl" src="/img/image.png" alt=""> -->
                         <img
                             class="lg:max-w-2xl"
-                            src="public/img/school-bus.png"
+                            src="/img/school-bus.png"
                             alt=""
                         />
                     </div>
@@ -187,7 +187,7 @@ import ContactForm from "../components/ContactForm.vue";
                     >
                         <div class="w-full md:w-3/5 lg:w-1/2 px-4">
                             <img
-                                src="public/img/dream.jpg"
+                                src="/img/dream.jpg"
                                 alt=""
                                 class="inline-block rounded shadow-lg border border-merino-400"
                             />
@@ -222,7 +222,7 @@ import ContactForm from "../components/ContactForm.vue";
                     >
                         <div class="w-full md:w-3/5 lg:w-1/2 px-4">
                             <img
-                                src="public/img/team.jpg"
+                                src="/img/team.jpg"
                                 alt=""
                                 class="inline-block rounded shadow-lg border border-merino-400"
                             />
@@ -717,7 +717,7 @@ import ContactForm from "../components/ContactForm.vue";
                     >
                         <div class="md:w-1/2 flex justify-center mb-6 md:mb-0">
                             <img
-                                src="public/img/visit.png"
+                                src="/img/visit.png"
                                 alt="location marker with buildings"
                                 class="rounded-full bg-muted p-4"
                             />
diff --git a/src/pages/tst.astro b/src/pages/tst.astro
deleted file mode 100644
index 309a38b..0000000
--- a/src/pages/tst.astro
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Form Submission</title>
-</head>
-<body>
-    <form id="formSection">
-        <p class="text-2xl py-4">Write your Query</p>
-        <div class="pb-3">
-            <label for="name">Name:<span class="text-red-500">*</span></label>
-            <input id="name" name="name" type="text" placeholder="Enter your Name" required />
-        </div>
-        <div>
-            <label for="phone">Mobile:<span class="text-red-500">*</span></label>
-            <input id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" required />
-        </div>
-        <div class="py-3">
-            <label for="email">E-mail ID:<span class="text-red-500">*</span></label>
-            <input id="email" name="email" type="email" placeholder="Enter your E-mail ID" required />
-        </div>
-        <div>
-            <label for="message">Write your Query:<span class="text-red-500">*</span></label>
-            <textarea id="message" name="message" rows="7" placeholder="Write your Query" required></textarea>
-        </div>
-        <div>
-            <input type="submit" value="Submit" />
-        </div>
-    </form>
-
-    <script is:inline>
-        document.getElementById('formSection').addEventListener('submit', function(event) {
-            event.preventDefault();
-
-            const formData = {
-                data: {
-                    name: document.getElementById('name').value,
-                    phone: document.getElementById('phone').value,
-                    email: document.getElementById('email').value,
-                    message: document.getElementById('message').value
-                },
-                owner: 'owner_value',  // Replace with appropriate value
-                domain: 'domain_value',  // Replace with appropriate value
-                referrer: document.referrer
-            };
-
-            fetch('your_backend_endpoint', {  // Replace with your backend endpoint URL
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(formData)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Data submitted successfully');
-                } else {
-                    alert('Error: ' + data.message);
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
-                alert('An error occurred while submitting the form');
-            });
-        });
-    </script>
-</body>
-</html>