From b094967c4d513b354f67c440067743d6acf6d95d Mon Sep 17 00:00:00 2001
From: trinetra110 <ayanmondal1805@gmail.com>
Date: Mon, 21 Oct 2024 20:40:29 +0530
Subject: [PATCH] feat: add scroll-to-top button in Student's main page and
 Stakeholder's main page

---
 public/css/main_page_style.css    | 796 +++++++++++++++---------------
 public/css/stk_mainstyling.css    | 682 ++++++++++++-------------
 public/main_page.html             | 472 +++++++++---------
 public/script/main-page-script.js |  34 +-
 public/script/stk_mainpage.js     |  22 +
 public/stk_mainpage.html          |   5 +
 6 files changed, 1046 insertions(+), 965 deletions(-)

diff --git a/public/css/main_page_style.css b/public/css/main_page_style.css
index 8573a47..0ad4e56 100644
--- a/public/css/main_page_style.css
+++ b/public/css/main_page_style.css
@@ -1,518 +1,524 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
 
-  * {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
-  }
-  
-  /* header styling */
-  .banner {
-    width: 100%;
-    height: 100vh;
-    background-image: linear-gradient(rgba(8, 23, 82, 0.75), rgba(30, 2, 30, 0.75)), url('../images/calm.jpg');
-    background-size: cover;
-    background-position: center;
-  }
-  
-  .logo {
-    width: 270px;
-    cursor: pointer;
-    margin-left: 5px; /* Reduced margin */
-    margin-right: 5px; /* Reduced margin */
-  }
+/* header styling */
+.banner {
+  width: 100%;
+  height: 100vh;
+  background-image: linear-gradient(
+      rgba(8, 23, 82, 0.75),
+      rgba(30, 2, 30, 0.75)
+    ),
+    url("../images/calm.jpg");
+  background-size: cover;
+  background-position: center;
+}
 
-  .search-bar {
-    display: flex;
-    align-items: center;
+.logo {
+  width: 270px;
+  cursor: pointer;
+  margin-left: 5px; /* Reduced margin */
+  margin-right: 5px; /* Reduced margin */
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
 
-    flex-wrap: wrap;
-    padding: 12px;
-    background-color: rgb(43 43 43);
+  flex-wrap: wrap;
+  padding: 12px;
+  background-color: rgb(43 43 43);
 }
 
+#icon {
+  width: 30px;
+  cursor: pointer;
+  position: absolute;
+  top: 30px;
+  right: 90px;
 
-#icon{
-    width: 30px;
-    cursor: pointer;
-    position: absolute;
-    top: 30px; 
-    right: 90px;
+  margin-top: 5px;
+}
 
-    margin-top: 5px;
+.search-bar input {
+  width: 22vw;
+  padding: 5px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  outline: none;
+  margin-right: 5px;
+  background-color: rgba(255, 255, 255, 0.2); /* Transparent background */
+  color: white; /* Text color */
+}
 
-  }
-  
-  .search-bar input {
-    width: 22vw;
-    padding: 5px;
-    font-size: 16px;
-    border: none;
-    border-radius: 5px;
-    outline: none;
-    margin-right: 5px;
-    background-color: rgba(255, 255, 255, 0.2); /* Transparent background */
-    color: white; /* Text color */
-  }
-  
-  .search-bar input::placeholder {
-    color: rgba(255, 255, 255, 0.6); /* Placeholder text color */
-  }
-  .search-bar input:hover{
-    border: 1.5px solid #009688;
-  }
-  
-  .search-bar button {
-    padding: 5px 10px;
-    font-size: 16px;
-    border-radius: 25px;
-    background: transparent;
-    border: 1.5px solid #009688;
-    
-    color: white;
-    cursor: pointer;
-  }
+.search-bar input::placeholder {
+  color: rgba(255, 255, 255, 0.6); /* Placeholder text color */
+}
+.search-bar input:hover {
+  border: 1.5px solid #009688;
+}
 
-  .search-bar button:hover {
-    background-color: #009688; /* Slightly darker on hover */
-  }
-  
-  
-  /* navbar styling */
-  .nav {
-    width: 95%; /* Increased width to minimize side margins */
-    margin: auto;
-    padding: 5px 0; /* Reduced padding */
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  
-  .h2 {
-    cursor: pointer;
-    color: white;
-  }
+.search-bar button {
+  padding: 5px 10px;
+  font-size: 16px;
+  border-radius: 25px;
+  background: transparent;
+  border: 1.5px solid #009688;
 
+  color: white;
+  cursor: pointer;
+}
 
-  
-  .nav ul li {
-    list-style: none;
-    display: inline-block;
-    margin: 5px 8px; /* Reduced margin */
-    position: relative;
-  }
-  
-  .nav ul li a {
-    text-decoration: none;
-    color: #fff;
-    font-size: 25px;
-    cursor: pointer;
-  }
-  
-  .nav ul li::after {
-    content: '';
-    height: 3px;
-    width: 0;
-    background: #009688;
-    position: absolute;
-    left: 0;
-    bottom: -10px;
-    transition: 0.5s;
-  }
-  
-  .nav ul li:hover::after {
-    width: 100%;
-  }
-  
-  
-  .content{
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-100%);
-    text-align: center;
-    color: #ffff;
-  }
-  
-  .content h1{
-    margin-top: 20px;
-  }
-  
-  .content p{
-    margin: 10px auto;
-    font-weight: 100;
-    line-height: 25px;
-  }
-  
-  .content2{
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(70%);
-    text-align: center;
-    color: #ffff;
-  }
-  a{
-    text-decoration: none;
-    color: #ffff;
-  }
-  
-  .content2 p{
-    margin: 10px auto;
-    font-weight: 100;
-    line-height: 25px;
-  }
-  .button{
-    margin-top: 20px;
-  }
-  .btn{
-    width: 200px;
-    padding: 10px 10px;
-    text-align: center;
-    margin: 20px 10px;
-    border-radius: 25px;
-    font-weight: bold;
-    border: 1.5px solid #009688;
-    background: transparent;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  
-  .btn:hover{
-    border: none;
-    background: #009688;
-    transition: 0.5s;
-  }
-  
-  
+.search-bar button:hover {
+  background-color: #009688; /* Slightly darker on hover */
+}
 
+/* navbar styling */
+.nav {
+  width: 95%; /* Increased width to minimize side margins */
+  margin: auto;
+  padding: 5px 0; /* Reduced padding */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
+.h2 {
+  cursor: pointer;
+  color: white;
+}
 
+.nav ul li {
+  list-style: none;
+  display: inline-block;
+  margin: 5px 8px; /* Reduced margin */
+  position: relative;
+}
 
+.nav ul li a {
+  text-decoration: none;
+  color: #fff;
+  font-size: 25px;
+  cursor: pointer;
+}
 
-  .text{
-    color: var(--secondary-color);
-  }
-  :root{
-    --primary-color: #eeeded;
-    --secondary-color: #0e0e0e;
-  }
-  
-  .dark-theme{
-    --primary-color: #0e0e0e;
-    --secondary-color: #fff;
-  }
+.nav ul li::after {
+  content: "";
+  height: 3px;
+  width: 0;
+  background: #009688;
+  position: absolute;
+  left: 0;
+  bottom: -10px;
+  transition: 0.5s;
+}
+
+.nav ul li:hover::after {
+  width: 100%;
+}
+
+.content {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-100%);
+  text-align: center;
+  color: #ffff;
+}
+
+.content h1 {
+  margin-top: 20px;
+}
+
+.content p {
+  margin: 10px auto;
+  font-weight: 100;
+  line-height: 25px;
+}
 
+.content2 {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(70%);
+  text-align: center;
+  color: #ffff;
+}
+a {
+  text-decoration: none;
+  color: #ffff;
+}
 
+.content2 p {
+  margin: 10px auto;
+  font-weight: 100;
+  line-height: 25px;
+}
+.button {
+  margin-top: 20px;
+}
+.btn {
+  width: 200px;
+  padding: 10px 10px;
+  text-align: center;
+  margin: 20px 10px;
+  border-radius: 25px;
+  font-weight: bold;
+  border: 1.5px solid #009688;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
 
+.btn:hover {
+  border: none;
+  background: #009688;
+  transition: 0.5s;
+}
+
+.text {
+  color: var(--secondary-color);
+}
+:root {
+  --primary-color: #eeeded;
+  --secondary-color: #0e0e0e;
+}
+
+.dark-theme {
+  --primary-color: #0e0e0e;
+  --secondary-color: #fff;
+}
 
 /* generate template section styling  */
 
 .generate_sec_para {
-    font-size: 20px;
-    text-align: center;
-    padding: 22px;
-    color: black;
-    border-radius: 60% 0% 60% 0%;
-    box-shadow: 6px 6px 6px rgb(72, 70, 70);
-    animation-name: harsh;
-    width: 120vw;
-    animation-duration: 2s;
-    animation-timing-function: ease-in-out;
+  font-size: 20px;
+  text-align: center;
+  padding: 22px;
+  color: black;
+  border-radius: 60% 0% 60% 0%;
+  box-shadow: 6px 6px 6px rgb(72, 70, 70);
+  animation-name: harsh;
+  width: 120vw;
+  animation-duration: 2s;
+  animation-timing-function: ease-in-out;
 }
 @keyframes harsh {
-    from{
-        width: 40vw;
-    }
-    to{
-        width: 120vw;
-    }
+  from {
+    width: 40vw;
+  }
+  to {
+    width: 120vw;
+  }
 }
 
 .generate_sec {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 }
 h2 {
-    font-size: 40px;
-    text-align: center;
-    margin: 0px;
-    color: black;
-    padding: 40px;
+  font-size: 40px;
+  text-align: center;
+  margin: 0px;
+  color: black;
+  padding: 40px;
 }
 .generate_sec_para a {
-    padding: 12px 12px 12px 24px;
-    margin: 6px 20px;
-    display: inline-block;
-    text-decoration: none;
-    color: black;
-    background-color: rgb(26, 162, 26);
-    border-radius: 26px;
-    font-size: 21px;
+  padding: 12px 12px 12px 24px;
+  margin: 6px 20px;
+  display: inline-block;
+  text-decoration: none;
+  color: black;
+  background-color: rgb(26, 162, 26);
+  border-radius: 26px;
+  font-size: 21px;
 }
 
 .generate_sec_img {
-    width:50vw;
-    margin: 30px;
-    border-radius: 20px;
+  width: 50vw;
+  margin: 30px;
+  border-radius: 20px;
 }
 
 .generate_sec_img video {
-    width: 100%;
-    position: relative;
-    display: block;
-    border-radius: 20px;
+  width: 100%;
+  position: relative;
+  display: block;
+  border-radius: 20px;
 }
-.collge_eval{
-    width: 80vw;
-    background-color: rgb(212 149 149);
-    text-align: center;
-    margin: 10px auto;
-    padding: 14px;
-    border-radius: 20px;
-    font-size: 20px;
+.collge_eval {
+  width: 80vw;
+  background-color: rgb(212 149 149);
+  text-align: center;
+  margin: 10px auto;
+  padding: 14px;
+  border-radius: 20px;
+  font-size: 20px;
 }
 
 /* pyq section styling  */
 
-.pyq{
-    display: flex;
-    flex-direction: row;
-    padding: 30px;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: 20px;
-    box-shadow: 6px 6px 6px rgb(68, 68, 68);
-    margin: 10px;
-}
-.pyq_para{
-    width: 60vw;
-    text-align: center;
-    font-size: 20px;
-    padding: 20px;
-    border-radius: 20px 20px 60% 20px;
-    box-shadow: 4px 4px 4px rgb(222, 221, 221);
-}
-.pyq_para a{
-    text-decoration: none;
-    color: black;
-    background-color: red;
-    display: inline-block;
-    padding: 14px 10px 14px 18px;
-    margin: 20px;
-    border-radius: 30px;
-}
-.pyq_images{
-    width: 30vw;
-}
-.pyq_images img{
-    width: 100%;
-    border-radius: 20px;
+.pyq {
+  display: flex;
+  flex-direction: row;
+  padding: 30px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 20px;
+  box-shadow: 6px 6px 6px rgb(68, 68, 68);
+  margin: 10px;
+}
+.pyq_para {
+  width: 60vw;
+  text-align: center;
+  font-size: 20px;
+  padding: 20px;
+  border-radius: 20px 20px 60% 20px;
+  box-shadow: 4px 4px 4px rgb(222, 221, 221);
+}
+.pyq_para a {
+  text-decoration: none;
+  color: black;
+  background-color: red;
+  display: inline-block;
+  padding: 14px 10px 14px 18px;
+  margin: 20px;
+  border-radius: 30px;
+}
+.pyq_images {
+  width: 30vw;
+}
+.pyq_images img {
+  width: 100%;
+  border-radius: 20px;
 }
 
 /* approval section styling   */
 
-.approval{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+.approval {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
-.approval_para{
-    text-align: center;
-    font-size: 20px;
-    padding: 20px;
+.approval_para {
+  text-align: center;
+  font-size: 20px;
+  padding: 20px;
 }
-.approval_images{
-    width: 40vw;
-    display: block;
-    margin: 8px auto;
+.approval_images {
+  width: 40vw;
+  display: block;
+  margin: 8px auto;
 }
-.approval_images img{
-    width: 100%;
-    border-radius: 20px;
+.approval_images img {
+  width: 100%;
+  border-radius: 20px;
 }
 
 .all-boxes {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 6fr));
-    grid-column-gap: 2rem;
-    grid-row-gap: 2rem;
-    justify-content: center;
-    align-items: center;
-}
-@media (max-width:380px) {
-    .all-boxes{
-        grid-template-columns: repeat(auto-fit, minmax(200px, 6fr));
-    }
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 6fr));
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+  justify-content: center;
+  align-items: center;
+}
+@media (max-width: 380px) {
+  .all-boxes {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 6fr));
+  }
 }
 
 /* boxes styling  */
 
 .box {
-    color: black;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    border: 2px solid red;
-    padding: 16px;
-    margin: 30px;
-    border-radius: 12px;
-    background-color: rgb(230, 212, 212);
-    box-shadow: 8px 8px 10px rgb(2, 24, 25);
-    font-size: 20px;
+  color: black;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: 2px solid red;
+  padding: 16px;
+  margin: 30px;
+  border-radius: 12px;
+  background-color: rgb(230, 212, 212);
+  box-shadow: 8px 8px 10px rgb(2, 24, 25);
+  font-size: 20px;
 }
 
 .box:hover {
-    position: relative;
-    top: -14px;
-    box-shadow: 8px 8px 10px rgb(193, 203, 203);
+  position: relative;
+  top: -14px;
+  box-shadow: 8px 8px 10px rgb(193, 203, 203);
 }
 
 h3 {
-    text-align: center;
-    padding: 40px 0px;
-    color: white;
-    font-size: 40px;
+  text-align: center;
+  padding: 40px 0px;
+  color: white;
+  font-size: 40px;
 }
 
 .box h3 {
-    color: rgb(188, 56, 56);
-    font-size: 24px;
-    padding: 10px 0px;
+  color: rgb(188, 56, 56);
+  font-size: 24px;
+  padding: 10px 0px;
 }
 
 /* main section styling */
 
 main h2 {
-    padding: 20px 0px;
-    text-align: center;
-    font-size: 40px;
+  padding: 20px 0px;
+  text-align: center;
+  font-size: 40px;
 }
 
 .top_papers_ul {
-    list-style: none;
-    margin: auto;
-    width: 80vw;
+  list-style: none;
+  margin: auto;
+  width: 80vw;
 }
 .top_papers_ul li {
-    margin: 10px;
-    border: 2px solid black;
-    padding: 10px;
-    background-color: rgb(242, 233, 233);
-    border-radius: 8px;
+  margin: 10px;
+  border: 2px solid black;
+  padding: 10px;
+  background-color: rgb(242, 233, 233);
+  border-radius: 8px;
 }
 
 .insti_papers_ul {
-    list-style: none;
-    margin: auto;
-    width: 80vw;
+  list-style: none;
+  margin: auto;
+  width: 80vw;
 }
 
 .insti_papers_ul li {
-    margin: 10px;
-    border: 2px solid black;
-    padding: 12px;
-    background-color: rgb(242, 233, 233);
-    border-radius: 8px;
+  margin: 10px;
+  border: 2px solid black;
+  padding: 12px;
+  background-color: rgb(242, 233, 233);
+  border-radius: 8px;
 }
 /* footer styling */
 
 .container {
-    max-width: 1170px;
-    margin: auto;
+  max-width: 1170px;
+  margin: auto;
 }
 
 .row {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 .footer {
-    background-color: #24262b;
-    padding: 70px 0;
+  background-color: #24262b;
+  padding: 70px 0;
 }
 
 .footer-col {
-    width: 25%;
-    padding: 0 15px;
+  width: 25%;
+  padding: 0 15px;
 }
 
 .footer-col h4 {
-    font-size: 18px;
-    color: #ffffff;
-    text-transform: capitalize;
-    margin-bottom: 35px;
-    font-weight: 500;
-    position: relative;
+  font-size: 18px;
+  color: #ffffff;
+  text-transform: capitalize;
+  margin-bottom: 35px;
+  font-weight: 500;
+  position: relative;
 }
 
 .footer-col h4::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: -10px;
-    background-color: #e91e63;
-    height: 2px;
-    box-sizing: border-box;
-    width: 50px;
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -10px;
+  background-color: #e91e63;
+  height: 2px;
+  box-sizing: border-box;
+  width: 50px;
 }
 
 .footer-col ul li:not(:last-child) {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .footer-col ul li a {
-    font-size: 16px;
-    text-transform: capitalize;
-    color: #ffffff;
-    text-decoration: none;
-    font-weight: 300;
-    color: #bbbbbb;
-    display: block;
-    transition: all 0.3s ease;
+  font-size: 16px;
+  text-transform: capitalize;
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 300;
+  color: #bbbbbb;
+  display: block;
+  transition: all 0.3s ease;
 }
 
 .footer-col ul li a:hover {
-    color: #ffffff;
-    padding-left: 8px;
+  color: #ffffff;
+  padding-left: 8px;
 }
 
 .footer-col .social-links a {
-    display: inline-block;
-    height: 40px;
-    width: 40px;
-    background-color: rgba(255, 255, 255, 0.2);
-    margin: 0 10px 10px 0;
-    text-align: center;
-    line-height: 40px;
-    border-radius: 50%;
-    color: #ffffff;
-    transition: all 0.5s ease;
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  background-color: rgba(255, 255, 255, 0.2);
+  margin: 0 10px 10px 0;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 50%;
+  color: #ffffff;
+  transition: all 0.5s ease;
 }
 
 .footer-col .social-links a:hover {
-    color: #24262b;
-    background-color: #ffffff;
+  color: #24262b;
+  background-color: #ffffff;
+}
+
+#scrollToTop {
+  position: fixed;
+  bottom: 12%;
+  right: 18px;
+  z-index: 99;
+  background-color: orange;
+  color: white;
+  border: none;
+  padding: 14px 20px;
+  border-radius: 50%;
+  font-size: 19px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+#scrollToTop:hover {
+  background-color: darkorange;
 }
 
 /*responsive*/
-@media(max-width: 767px) {
-    .footer-col {
-        width: 50%;
-        margin-bottom: 30px;
-    }
-}
-
-@media(max-width: 574px) {
-    .footer-col {
-        width: 100%;
-    }
-}
\ No newline at end of file
+@media (max-width: 767px) {
+  .footer-col {
+    width: 50%;
+    margin-bottom: 30px;
+  }
+}
+
+@media (max-width: 574px) {
+  .footer-col {
+    width: 100%;
+  }
+}
diff --git a/public/css/stk_mainstyling.css b/public/css/stk_mainstyling.css
index 8879e63..7b22a97 100644
--- a/public/css/stk_mainstyling.css
+++ b/public/css/stk_mainstyling.css
@@ -1,417 +1,425 @@
-*{
-    box-sizing: border-box;
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+}
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: black;
+  padding: 10px;
+}
+.logo {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  height: 2rem;
+}
+.logo i {
+  color: white;
+  font-size: 2rem;
+  border: 2px solid white;
+  border-radius: 50%;
+  padding: 10px 12px;
+}
+.main {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 6fr));
+  grid-column-gap: 3rem;
+  grid-row-gap: 2rem;
+  width: 50%;
+  margin: 30px;
 }
-body{
-    margin: 0;
-    padding: 0;
-}
-.head{
+
+@media (max-width: 1296px) {
+  .main {
+    width: 56vw;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 6fr));
+  }
+}
+@media (max-width: 990px) {
+  .main {
+    width: 70vw;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 8fr));
+  }
+}
+@media (max-width: 695px) {
+  .main {
+    width: 80vw;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 8fr));
+  }
+}
+@media (max-width: 571px) {
+  .main {
+    width: 80vw;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 8fr));
+  }
+}
+@media (max-width: 435px) {
+  .main {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: black;
-    padding: 10px;
-}
-.logo{
+    flex-direction: column;
+  }
+  main {
     display: flex;
-    align-items: center;
-    padding: 10px;
-    height: 2rem;
-}
-.logo i{
-    color: white;
-    font-size: 2rem;
-    border: 2px solid white;
-    border-radius: 50%;
-    padding: 10px 12px;
-}
-.main{
-    display: grid;
+    flex-direction: column;
     justify-content: center;
-    grid-template-columns: repeat(auto-fit,minmax(300px,6fr));
-    grid-column-gap: 3rem;
-    grid-row-gap: 2rem;
-    width: 50%;
-    margin: 30px;
+  }
 }
-
-@media (max-width:1296px){
-    .main{
-        width: 56vw;
-        grid-template-columns: repeat(auto-fit,minmax(240px,6fr));
-    }
-}
-@media (max-width:990px){
-    .main{
-        width: 70vw;
-        grid-template-columns: repeat(auto-fit,minmax(220px,8fr));
-    }
-}
-@media (max-width:695px){
-    .main{
-        width: 80vw;
-        grid-template-columns: repeat(auto-fit,minmax(180px,8fr));
-    }
-}
-@media (max-width:571px){
-    .main{
-        width: 80vw;
-        grid-template-columns: repeat(auto-fit,minmax(120px,8fr));
-    }
-}
-@media (max-width:435px){
-    .main{
-        display: flex;
-        flex-direction: column;
-    }
-    main{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-}
-.main div{
-    padding: 12px;
-    border-radius: 20px;
-    text-align: center;
-}
-.main div p{
-    color: white;
-}
-.main div a{
-    text-decoration: none;
-    display: inline-block;
-    background-color: white;
-    opacity: 0.6;
-    margin: 6px;
-    border-radius: 20px;
-    padding: 8px 14px;
-    color: black;
-    transition: all 0.7s ease-in-out;
+.main div {
+  padding: 12px;
+  border-radius: 20px;
+  text-align: center;
+}
+.main div p {
+  color: white;
 }
-.main div:nth-child(1){
-    background-color: #dbb46c;
+.main div a {
+  text-decoration: none;
+  display: inline-block;
+  background-color: white;
+  opacity: 0.6;
+  margin: 6px;
+  border-radius: 20px;
+  padding: 8px 14px;
+  color: black;
+  transition: all 0.7s ease-in-out;
 }
-.main div:nth-child(1) a:hover{
-    background-color: #e1d1b4;
+.main div:nth-child(1) {
+  background-color: #dbb46c;
 }
-.main div:nth-child(2){
-    background-color: #be9fa5;
+.main div:nth-child(1) a:hover {
+  background-color: #e1d1b4;
 }
-.main div:nth-child(2) a:hover{
-    background-color: #d4bfc3;
+.main div:nth-child(2) {
+  background-color: #be9fa5;
 }
-.main div:nth-child(3){
-    background-color: #d56a6a;;
+.main div:nth-child(2) a:hover {
+  background-color: #d4bfc3;
 }
-.main div:nth-child(3) a:hover{
-    background-color: #d99999;
+.main div:nth-child(3) {
+  background-color: #d56a6a;
 }
-.main div:nth-child(4){
-    background-color: #8b8bc8;
+.main div:nth-child(3) a:hover {
+  background-color: #d99999;
 }
-.main div:nth-child(4) a:hover{
-    background-color: #b8b8e0;
+.main div:nth-child(4) {
+  background-color: #8b8bc8;
 }
-.main h2{
-    font-size: 20px;
+.main div:nth-child(4) a:hover {
+  background-color: #b8b8e0;
 }
-.main p{
-    font-size: 18px;
+.main h2 {
+  font-size: 20px;
+}
+.main p {
+  font-size: 18px;
 }
 
 /* approval styling  */
-.approve{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
+.approve {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
 }
-.app_box h3{
-    color: black;
-    margin: 0;
-    padding: 8px;
+.app_box h3 {
+  color: black;
+  margin: 0;
+  padding: 8px;
 }
-.app_box{
-    padding: 16px;
-    border-radius: 20px;
-    background-color: #f4f2ed;
-    margin: 10px;
-    border: 2px solid red;
-    width: 30vw;
-    transition: all 0.8s ease-in-out;
+.app_box {
+  padding: 16px;
+  border-radius: 20px;
+  background-color: #f4f2ed;
+  margin: 10px;
+  border: 2px solid red;
+  width: 30vw;
+  transition: all 0.8s ease-in-out;
 }
-#app_box1:hover{
-    transform: perspective(680px) rotateY(0deg);
+#app_box1:hover {
+  transform: perspective(680px) rotateY(0deg);
 }
-#app_box1{
-    transform: perspective(680px) rotateY(20deg);
+#app_box1 {
+  transform: perspective(680px) rotateY(20deg);
 }
-#app_box2{
-    transform: perspective(680px) rotateY(-20deg);
+#app_box2 {
+  transform: perspective(680px) rotateY(-20deg);
 }
-#app_box2:hover{
-    transform: perspective(680px) rotateY(0deg);
+#app_box2:hover {
+  transform: perspective(680px) rotateY(0deg);
 }
 
 /* allotment styling  */
-.allot{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 10px;
-    justify-content: space-around;
-    text-align: center;
-    align-items: center;
-}
-.allot-box{
-    padding: 12px;
+.allot {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 10px;
+  justify-content: space-around;
+  text-align: center;
+  align-items: center;
+}
+.allot-box {
+  padding: 12px;
+  width: 50vw;
+  font-size: 18px;
+}
+.image {
+  width: 30vw;
+}
+.image img {
+  width: 30vw;
+  border-radius: 20px;
+}
+@media (max-width: 880px) {
+  .image {
+    width: 50vw;
+  }
+  .image img {
     width: 50vw;
-    font-size: 18px;
-}
-.image{
-    width: 30vw;
-}
-.image img{
-    width: 30vw;
-    border-radius: 20px;
-}
-@media (max-width:880px){
-    .image{
-        width: 50vw;
-    }
-    .image img{
-        width: 50vw;
-    }
-}
-@media (max-width:450px){
-    .image{
-        width: 80vw;
-    }
-    .image img{
-        width: 80vw;
-    }
+  }
+}
+@media (max-width: 450px) {
+  .image {
+    width: 80vw;
+  }
+  .image img {
+    width: 80vw;
+  }
 }
 
 /* evaluation form  */
-#criteria{
-    background-color: var(--primary-color);
-    padding: 12px;
-}
-.form-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 50%;
-    margin: auto;
-    background-color: var(--primary-color);
-    color: var(--secondary-color);
-    text-align: center;
-    padding: 10px;
-    border-radius: 20px;
-    box-shadow: 0 10px 10px rgba(0.1, 0.1, 0.7, 0.1);
-        
-}
-.form-container h4{
-    font-size: 30px;
+#criteria {
+  background-color: var(--primary-color);
+  padding: 12px;
+}
+.form-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+  margin: auto;
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+  text-align: center;
+  padding: 10px;
+  border-radius: 20px;
+  box-shadow: 0 10px 10px rgba(0.1, 0.1, 0.7, 0.1);
+}
+.form-container h4 {
+  font-size: 30px;
 }
 .form-container form {
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-  
-}
-.form-container .group{
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-}
-.radio-group{
-   align-items: start;
-   display: flex;
-   flex-direction: column;
-
-}
-.form-container form label{
-    padding: 8px;
-    font-size: 18px;
-    font-weight: bold;
-}
-.form-container input[type=text]{
-    padding: 6px;
-    margin: 8px;
-    font-size: 17px;
-    border-radius: 10px;
-}
-.btn{
-    display: flex;
-    align-items: center;
-    margin-top: 20px;
-    justify-content: space-between;
-
-}
-.btn button{
-    padding: 9px 34px;
-    border-radius: 10px;
-    font-size: 16px;
-    cursor: pointer;
-}
-.form-step p{
-    font-size: 18px;
-}
-.prev-btn{
-    background-color: rgb(212, 212, 212);
-    color: black;
-    border: none;
-}
-.next-btn{
-    align-self:flex-end;
-    background-color: black;
-    color: white;
-    margin-left: auto;
-}
-.submit-btn{
-    background-color:green;
-    color: white;
-    border: none;
-}
-.submit-btn:hover{
-    /* font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+.form-container .group {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.radio-group {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+}
+.form-container form label {
+  padding: 8px;
+  font-size: 18px;
+  font-weight: bold;
+}
+.form-container input[type="text"] {
+  padding: 6px;
+  margin: 8px;
+  font-size: 17px;
+  border-radius: 10px;
+}
+.btn {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  justify-content: space-between;
+}
+.btn button {
+  padding: 9px 34px;
+  border-radius: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.form-step p {
+  font-size: 18px;
+}
+.prev-btn {
+  background-color: rgb(212, 212, 212);
+  color: black;
+  border: none;
+}
+.next-btn {
+  align-self: flex-end;
+  background-color: black;
+  color: white;
+  margin-left: auto;
+}
+.submit-btn {
+  background-color: green;
+  color: white;
+  border: none;
+}
+.submit-btn:hover {
+  /* font-weight: 600;
     transition: 0.3s ease;
     color: black;
     background-color: white; */
-    opacity: 80%;
-    background-color: rgb(109, 169, 109);
-    color: white;
-    transition: 1s ;
-  
+  opacity: 80%;
+  background-color: rgb(109, 169, 109);
+  color: white;
+  transition: 1s;
 }
 
 /* footer styling */
 
 .container {
-    max-width: 1170px;
-    margin: auto;
+  max-width: 1170px;
+  margin: auto;
 }
 
 .row {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 .footer {
-    background-color: #24262b;
-    padding: 70px 0;
+  background-color: #24262b;
+  padding: 70px 0;
 }
 
 .footer-col {
-    width: 25%;
-    padding: 0 15px;
+  width: 25%;
+  padding: 0 15px;
 }
 
 .footer-col h4 {
-    font-size: 18px;
-    color: #ffffff;
-    text-transform: capitalize;
-    margin-bottom: 35px;
-    font-weight: 500;
-    position: relative;
+  font-size: 18px;
+  color: #ffffff;
+  text-transform: capitalize;
+  margin-bottom: 35px;
+  font-weight: 500;
+  position: relative;
 }
 
 .footer-col h4::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: -10px;
-    background-color: #e91e63;
-    height: 2px;
-    box-sizing: border-box;
-    width: 50px;
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -10px;
+  background-color: #e91e63;
+  height: 2px;
+  box-sizing: border-box;
+  width: 50px;
 }
 
 .footer-col ul li:not(:last-child) {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .footer-col ul li a {
-    font-size: 16px;
-    text-transform: capitalize;
-    color: #ffffff;
-    text-decoration: none;
-    font-weight: 300;
-    color: #bbbbbb;
-    display: block;
-    transition: all 0.3s ease;
+  font-size: 16px;
+  text-transform: capitalize;
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 300;
+  color: #bbbbbb;
+  display: block;
+  transition: all 0.3s ease;
 }
 
 .footer-col ul li a:hover {
-    color: #ffffff;
-    padding-left: 8px;
+  color: #ffffff;
+  padding-left: 8px;
 }
 
 .footer-col .social-links a {
-    display: inline-block;
-    height: 40px;
-    width: 40px;
-    background-color: rgba(255, 255, 255, 0.2);
-    margin: 0 10px 10px 0;
-    text-align: center;
-    line-height: 40px;
-    border-radius: 50%;
-    color: #ffffff;
-    transition: all 0.5s ease;
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  background-color: rgba(255, 255, 255, 0.2);
+  margin: 0 10px 10px 0;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 50%;
+  color: #ffffff;
+  transition: all 0.5s ease;
 }
 
 .footer-col .social-links a:hover {
-    color: #24262b;
-    background-color: #ffffff;
+  color: #24262b;
+  background-color: #ffffff;
+}
+
+#scrollToTop {
+  position: fixed;
+  bottom: 12%;
+  right: 18px;
+  z-index: 99;
+  background-color: orange;
+  color: white;
+  border: none;
+  padding: 14px 20px;
+  border-radius: 50%;
+  font-size: 19px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+#scrollToTop:hover {
+  background-color: darkorange;
 }
 
 /*responsive*/
-@media(max-width: 767px) {
-    .footer-col {
-        width: 50%;
-        margin-bottom: 30px;
-        
-    }
-    .form-container{
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        width:auto;
-    }
-    .btn button{
-        font-size: 0px;
-        
-    }
-    .btn button i{
-        font-size: 16px;
-    }
-    .btn .submit-btn{
-        font-size: 16px;
-       
-    }
-    
+@media (max-width: 767px) {
+  .footer-col {
+    width: 50%;
+    margin-bottom: 30px;
+  }
+  .form-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: auto;
+  }
+  .btn button {
+    font-size: 0px;
+  }
+  .btn button i {
+    font-size: 16px;
+  }
+  .btn .submit-btn {
+    font-size: 16px;
+  }
 }
 
-@media(max-width: 574px) {
-    .footer-col {
-        width: 100%;
-    }
-    .btn button{
-        font-size: 0px;
-        
-    }
-    .btn button i{
-        font-size: 16px;
-    }
-    
-}
-#step5 p{
-    font-size: 20px;
-    color: red;
+@media (max-width: 574px) {
+  .footer-col {
+    width: 100%;
+  }
+  .btn button {
+    font-size: 0px;
+  }
+  .btn button i {
+    font-size: 16px;
+  }
+}
+#step5 p {
+  font-size: 20px;
+  color: red;
 }
diff --git a/public/main_page.html b/public/main_page.html
index 1c7580c..4017ae6 100644
--- a/public/main_page.html
+++ b/public/main_page.html
@@ -13,20 +13,17 @@
 
     <div style="position: absolute; bottom:30px; left: 30px;" class="gtranslate_wrapper"></div>
     <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script
-     src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-     defer
-   ></script>
+        window.gtranslateSettings = {
+            default_language: "en",
+            detect_browser_language: true,
+            wrapper_selector: ".gtranslate_wrapper",
+            font_size: 100,
+        };
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
     <header>
 
-    <!-- <header>
+        <!-- <header>
 
         <div class="head">
             <div class="logo"><img src="images/logo.webp" alt="" width="160px"></div>
@@ -53,7 +50,7 @@
         </nav>
     </header> -->
 
-    <!-- <main class="first_main">
+        <!-- <main class="first_main">
         <section class="upload_sec" style="margin: 0px 0px 2px 0px;">
             <i class="fa-solid fa-cloud-arrow-up"
                 style="text-align:center;font-size:26vw;opacity: 0.3;display: inline;color: rgb(161, 161, 196);"></i>
@@ -83,239 +80,260 @@ <h2 style="padding: 10px;font-size: 44px;color: rgb(202, 60, 60);">Explore Resea
         </section>
     </main> -->
 
-    <div class="banner">
-       
-        <div class="nav">
-          <img class="logo" src="images/logo.png" alt="">
-          <form class="search-bar">
-            <input type="text" placeholder="Search...">
-            <button type="submit">Search</button>
-          </form>
-          <ul>
-             <li><a href="">Home</a></li>
-             <li><a href="">About</a></li>
-             <li><a href="">Add Topic</a></li>
-             <li onmouseover="show()" onmouseout="hide()"><a href=""
-                 title="View Notifications"><i id="firsticon" class="fa-sharp fa-regular fa-bell"
-                     style="padding: 0px 8px;display: inline-block;"></i><i id="secondicon"
-                     class="fa-solid fa-bell" style="padding: 0px 8px;display:none;"></i></a></li>
-             <li><a href="dashboard.html" title="View Profile"><i class="fa-solid fa-user" style="border: 1px solid #ffff; border-radius: 50%; padding: 6px 6px;"></i></a></li>
-          </ul>
-        </div>
- 
-        <div class="content">
-         <h1>Upload Papers</h1>
-         <p> Recusandae reiciendis qui dicta nostrum iure
-             deleniti labore, repudiandae a? <br>Ut non earum magni neque deleniti! Veniam non ipsam culpa mollitia
-             quidem.</p>
-         <div class="button">
-             <a class="btn" id="view_papers" href=""> View Papers</a>
-             <a class="btn" id="upload" href="upload_file.html">Upload Papers</a>
-         </div>
-        </div>
-        <div class="content2">
-         <h1>Explore Research Papers</h1>
-         <p> Recusandae reiciendis qui dicta nostrum iure
-             deleniti labore, repudiandae a? <br>Ut non earum magni neque deleniti! Veniam non ipsam culpa mollitia
-             quidem.</p>
- 
-             <div class="button">
-                 <a class="btn" id="templates" href="">Explore <i class="fa-solid fa-arrow-right" style="padding: 0px 14px;"></i></a>
-                 
-             </div>
-        </div>
- 
-     </div>
-     
-    <h2>Generate Research templates</h2>
-    <section class="generate_sec">
-        <div class="generate_sec_para">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste minima libero ipsa quaerat possimus
-                nihil
-                molestiae. Tenetur eaque quidem minus vero sint dicta voluptatem, eum sit, exercitationem dolores
-                modi
-                laborum!</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro autem minima rerum? Atque reiciendis
-                voluptate, aliquid earum optio quos blanditiis. Nisi nesciunt asperiores adipisci magnam distinctio
-                iure, maxime incidunt magni!</p>
-            <a href="">Generate<i class="fa-regular fa-file" style="padding: 0px 12px"></i></a>
-        </div>
-        <div class="generate_sec_img">
-            <video src="images/1699769990 facebook.mp4" controls muted autoplay loop></video>
-        </div>
-    </section>
-    <section>
-        <h2>Preview Past Papers</h2>
-        <div class="pyq">
-            <div class="pyq_para">
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In pariatur temporibus corporis totam eaque
-                    magni blanditiis nemo animi nam repellat modi, natus enim iste impedit ipsam incidunt libero,
-                    architecto, aut voluptas ipsum deleniti dolores perferendis? Quae, enim? Consequatur mollitia in
-                    dicta harum rerum ipsum. Accusamus sapiente possimus perferendis dolores ipsam eveniet deserunt,
-                    quae reiciendis.</p>
-                <a href="">View Papers<i class="fa-sharp fa-solid fa-eye" style="padding: 0px 12px;"></i></a>
-            </div>
-            <div class="pyq_images">
-                <img src="images/connect.webp" alt="">
+        <div class="banner">
+
+            <div class="nav">
+                <img class="logo" src="images/logo.png" alt="">
+                <form class="search-bar">
+                    <input type="text" placeholder="Search...">
+                    <button type="submit">Search</button>
+                </form>
+                <ul>
+                    <li><a href="">Home</a></li>
+                    <li><a href="">About</a></li>
+                    <li><a href="">Add Topic</a></li>
+                    <li onmouseover="show()" onmouseout="hide()"><a href="" title="View Notifications"><i id="firsticon"
+                                class="fa-sharp fa-regular fa-bell"
+                                style="padding: 0px 8px;display: inline-block;"></i><i id="secondicon"
+                                class="fa-solid fa-bell" style="padding: 0px 8px;display:none;"></i></a></li>
+                    <li><a href="dashboard.html" title="View Profile"><i class="fa-solid fa-user"
+                                style="border: 1px solid #ffff; border-radius: 50%; padding: 6px 6px;"></i></a></li>
+                </ul>
             </div>
-        </div>
-    </section>
-    <main style="margin: 38px 20px;background-color: rgb(231, 229, 229);border-radius: 24px;box-shadow: 4px 4px 4px rgb(212, 211, 211);">
-        <h2>Approval</h2>
-        <div class="approval">
-            <div class="approval_para">
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis sequi sint, quos assumenda vel
-                    consectetur voluptas deserunt nihil ad, non eum deleniti. Alias soluta fuga, numquam eaque vel eius
-                    pariatur odit velit corporis, minima labore. Voluptas illum error nemo soluta, rem nisi eligendi, ab
-                    explicabo pariatur in aspernatur dicta quasi cum aliquam veniam porro.</p>
-                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos corrupti, accusamus alias earum
-                    nobis voluptatibus omnis, at itaque fuga atque, vero obcaecati facilis minus recusandae molestias
-                    quasi quis vitae neque eveniet a? Aspernatur praesentium culpa ducimus asperiores incidunt.
-                    Explicabo quia excepturi consequuntur! Doloribus obcaecati repellat provident inventore odio,
-                    blanditiis velit officia explicabo quaerat eaque.</p>
 
+            <div class="content">
+                <h1>Upload Papers</h1>
+                <p> Recusandae reiciendis qui dicta nostrum iure
+                    deleniti labore, repudiandae a? <br>Ut non earum magni neque deleniti! Veniam non ipsam culpa
+                    mollitia
+                    quidem.</p>
+                <div class="button">
+                    <a class="btn" id="view_papers" href=""> View Papers</a>
+                    <a class="btn" id="upload" href="upload_file.html">Upload Papers</a>
+                </div>
             </div>
-            <div class="approval_images">
-                <img src="images/badges.webp" alt="">
+            <div class="content2">
+                <h1>Explore Research Papers</h1>
+                <p> Recusandae reiciendis qui dicta nostrum iure
+                    deleniti labore, repudiandae a? <br>Ut non earum magni neque deleniti! Veniam non ipsam culpa
+                    mollitia
+                    quidem.</p>
+
+                <div class="button">
+                    <a class="btn" id="templates" href="">Explore <i class="fa-solid fa-arrow-right"
+                            style="padding: 0px 14px;"></i></a>
+
+                </div>
             </div>
+
         </div>
-    </main>
-    <section>
-        <div class="all-boxes">
-            <div class="box show hidden">
-                <h3>Plagiarism checker</h3>
-                <p>Ensure originality by verifying your content with our reliable plagiarism detection tool. Avoid unintentional copying and maintain academic integrity with ease.</p>
+
+        <h2>Generate Research templates</h2>
+        <section class="generate_sec">
+            <div class="generate_sec_para">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste minima libero ipsa quaerat possimus
+                    nihil
+                    molestiae. Tenetur eaque quidem minus vero sint dicta voluptatem, eum sit, exercitationem dolores
+                    modi
+                    laborum!</p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro autem minima rerum? Atque reiciendis
+                    voluptate, aliquid earum optio quos blanditiis. Nisi nesciunt asperiores adipisci magnam distinctio
+                    iure, maxime incidunt magni!</p>
+                <a href="">Generate<i class="fa-regular fa-file" style="padding: 0px 12px"></i></a>
             </div>
-            <div class="box show hidden">
-                <h3>Explore Project</h3>
-                <p>Discover exciting projects across various domains. Learn, contribute, and gain practical experience by participating in innovative initiatives.</p>
+            <div class="generate_sec_img">
+                <video src="images/1699769990 facebook.mp4" controls muted autoplay loop></video>
             </div>
-            <div class="box show hidden">
-                <h3>Connect with peers</h3>
-                <p>Expand your network by collaborating with like-minded individuals. Exchange ideas, learn together, and grow your professional connections.</p>
+        </section>
+        <section>
+            <h2>Preview Past Papers</h2>
+            <div class="pyq">
+                <div class="pyq_para">
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In pariatur temporibus corporis totam
+                        eaque
+                        magni blanditiis nemo animi nam repellat modi, natus enim iste impedit ipsam incidunt libero,
+                        architecto, aut voluptas ipsum deleniti dolores perferendis? Quae, enim? Consequatur mollitia in
+                        dicta harum rerum ipsum. Accusamus sapiente possimus perferendis dolores ipsam eveniet deserunt,
+                        quae reiciendis.</p>
+                    <a href="">View Papers<i class="fa-sharp fa-solid fa-eye" style="padding: 0px 12px;"></i></a>
+                </div>
+                <div class="pyq_images">
+                    <img src="images/connect.webp" alt="">
+                </div>
             </div>
-            <div class="box show hidden">
-                <h3>Follow Groups</h3>
-                <p>Stay updated with the latest trends by following groups aligned with your interests. Participate in discussions and explore new opportunities.</p>
+        </section>
+        <main
+            style="margin: 38px 20px;background-color: rgb(231, 229, 229);border-radius: 24px;box-shadow: 4px 4px 4px rgb(212, 211, 211);">
+            <h2>Approval</h2>
+            <div class="approval">
+                <div class="approval_para">
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis sequi sint, quos assumenda
+                        vel
+                        consectetur voluptas deserunt nihil ad, non eum deleniti. Alias soluta fuga, numquam eaque vel
+                        eius
+                        pariatur odit velit corporis, minima labore. Voluptas illum error nemo soluta, rem nisi
+                        eligendi, ab
+                        explicabo pariatur in aspernatur dicta quasi cum aliquam veniam porro.</p>
+                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos corrupti, accusamus alias
+                        earum
+                        nobis voluptatibus omnis, at itaque fuga atque, vero obcaecati facilis minus recusandae
+                        molestias
+                        quasi quis vitae neque eveniet a? Aspernatur praesentium culpa ducimus asperiores incidunt.
+                        Explicabo quia excepturi consequuntur! Doloribus obcaecati repellat provident inventore odio,
+                        blanditiis velit officia explicabo quaerat eaque.</p>
+
+                </div>
+                <div class="approval_images">
+                    <img src="images/badges.webp" alt="">
+                </div>
             </div>
-            <div class="box show hidden">
-                <h3>Boost Level</h3>
-                <p>Enhance your profile by completing challenges and tasks. Track your progress and unlock new levels to showcase your skills and growth.</p>
+        </main>
+        <section>
+            <div class="all-boxes">
+                <div class="box show hidden">
+                    <h3>Plagiarism checker</h3>
+                    <p>Ensure originality by verifying your content with our reliable plagiarism detection tool. Avoid
+                        unintentional copying and maintain academic integrity with ease.</p>
+                </div>
+                <div class="box show hidden">
+                    <h3>Explore Project</h3>
+                    <p>Discover exciting projects across various domains. Learn, contribute, and gain practical
+                        experience by participating in innovative initiatives.</p>
+                </div>
+                <div class="box show hidden">
+                    <h3>Connect with peers</h3>
+                    <p>Expand your network by collaborating with like-minded individuals. Exchange ideas, learn
+                        together, and grow your professional connections.</p>
+                </div>
+                <div class="box show hidden">
+                    <h3>Follow Groups</h3>
+                    <p>Stay updated with the latest trends by following groups aligned with your interests. Participate
+                        in discussions and explore new opportunities.</p>
+                </div>
+                <div class="box show hidden">
+                    <h3>Boost Level</h3>
+                    <p>Enhance your profile by completing challenges and tasks. Track your progress and unlock new
+                        levels to showcase your skills and growth.</p>
+                </div>
+                <div class="box show hidden">
+                    <h3>Redeem Badges</h3>
+                    <p>Earn badges by achieving milestones and participating in events. Redeem them to highlight your
+                        accomplishments and inspire others.</p>
+                </div>
+                <div class="box show hidden">
+                    <h3>Career Opportunities</h3>
+                    <p>Explore career openings that align with your aspirations. Stay ahead by applying to internships,
+                        jobs, and exclusive opportunities in top industries.</p>
+                </div>
             </div>
-            <div class="box show hidden">
-                <h3>Redeem Badges</h3>
-                <p>Earn badges by achieving milestones and participating in events. Redeem them to highlight your accomplishments and inspire others.</p>
+        </section>
+        <main class="second-main">
+            <h2 style="color: black;">Top Research Papers</h2>
+            <div class="top_papers">
+                <ul class="top_papers_ul">
+                    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
+                        voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
+                        distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
+                    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
+                        voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
+                        distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
+                    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
+                        voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
+                        distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
+                    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
+                        voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
+                        distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
+                    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
+                        voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
+                        distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
+                </ul>
             </div>
-            <div class="box show hidden">
-                <h3>Career Opportunities</h3>
-                <p>Explore career openings that align with your aspirations. Stay ahead by applying to internships, jobs, and exclusive opportunities in top industries.</p>
+            <h2 style="color: black;">Top Research Papers in Insti</h2>
+            <div class="insti_papers">
+                <ul class="insti_papers_ul">
+                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam accusamus beatae blanditiis
+                        provident corrupti aliquam at tempora cumque magni! Laudantium non vel earum similique delectus
+                        blanditiis minus illo ratione?</li>
+                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam accusamus beatae blanditiis
+                        provident corrupti aliquam at tempora cumque magni! Laudantium non vel earum similique delectus
+                        blanditiis minus illo ratione?</li>
+                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam accusamus beatae blanditiis
+                        provident corrupti aliquam at tempora cumque magni! Laudantium non vel earum similique delectus
+                        blanditiis minus illo ratione?</li>
+                </ul>
             </div>
-        </div>
-    </section>
-    <main class="second-main">
-        <h2 style="color: black;">Top Research Papers</h2>
-        <div class="top_papers">
-            <ul class="top_papers_ul">
-                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
-                    voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
-                    distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
-                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
-                    voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
-                    distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
-                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
-                    voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
-                    distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
-                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
-                    voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
-                    distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
-                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum eveniet quas reprehenderit
-                    voluptates reiciendis debitis dolore temporibus asperiores, suscipit ducimus voluptas inventore
-                    distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
-            </ul>
-        </div>
-        <h2 style="color: black;">Top Research Papers in Insti</h2>
-        <div class="insti_papers">
-            <ul class="insti_papers_ul">
-                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam accusamus beatae blanditiis
-                    provident corrupti aliquam at tempora cumque magni! Laudantium non vel earum similique delectus
-                    blanditiis minus illo ratione?</li>
-                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam accusamus beatae blanditiis
-                    provident corrupti aliquam at tempora cumque magni! Laudantium non vel earum similique delectus
-                    blanditiis minus illo ratione?</li>
-                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam accusamus beatae blanditiis
-                    provident corrupti aliquam at tempora cumque magni! Laudantium non vel earum similique delectus
-                    blanditiis minus illo ratione?</li>
-            </ul>
-        </div>
-    </main>
-    <section class="collge_eval">
-        <h2 style="color: black;">College Evaluation Criteria</h2>
-        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam aspernatur ipsum porro cupiditate? Laborum
-            officiis dignissimos illo modi voluptates explicabo nesciunt, magni, aut corporis odio autem, repudiandae
-            harum quasi aspernatur.</p>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis saepe repudiandae error sunt nobis, illo
-            laboriosam quam quidem aut dolor quis vel ad eius tempora et placeat animi cumque assumenda.</p>
-    </section>
+        </main>
+        <section class="collge_eval">
+            <h2 style="color: black;">College Evaluation Criteria</h2>
+            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam aspernatur ipsum porro cupiditate? Laborum
+                officiis dignissimos illo modi voluptates explicabo nesciunt, magni, aut corporis odio autem,
+                repudiandae
+                harum quasi aspernatur.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis saepe repudiandae error sunt nobis, illo
+                laboriosam quam quidem aut dolor quis vel ad eius tempora et placeat animi cumque assumenda.</p>
+        </section>
 
-    <!-- footer section  -->
+        <!-- footer section  -->
 
-    <footer class="footer">
-        <div class="container">
-            <div class="row">
-                <div class="footer-col">
-                    <h4>company</h4>
-                    <ul>
-                        <li><a href="#">about us</a></li>
-                        <li><a href="#">our services</a></li>
-                        <li><a href="#">privacy policy</a></li>
-                        <li><a href="#">affiliate program</a></li>
-                    </ul>
-                </div>
-                <div class="footer-col">
-                    <h4>get help</h4>
-                    <ul>
-                        <li><a href="#">FAQ</a></li>
-                        <li><a href="#">shipping</a></li>
-                        <li><a href="#">returns</a></li>
-                        <li><a href="#">order status</a></li>
-                        <li><a href="#">payment options</a></li>
-                    </ul>
-                </div>
-                <div class="footer-col">
-                    <h4>online shop</h4>
-                    <ul>
-                        <li><a href="#">watch</a></li>
-                        <li><a href="#">bag</a></li>
-                        <li><a href="#">shoes</a></li>
-                        <li><a href="#">dress</a></li>
-                    </ul>
-                </div>
-                <div class="footer-col">
-                    <h4>follow us</h4>
-                    <div class="social-links">
-                        <a href="#"><i class="fab fa-facebook-f"></i></a>
-                        <a href="#"><i class="fab fa-twitter"></i></a>
-                        <a href="#"><i class="fab fa-instagram"></i></a>
-                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
+        <footer class="footer">
+            <div class="container">
+                <div class="row">
+                    <div class="footer-col">
+                        <h4>company</h4>
+                        <ul>
+                            <li><a href="#">about us</a></li>
+                            <li><a href="#">our services</a></li>
+                            <li><a href="#">privacy policy</a></li>
+                            <li><a href="#">affiliate program</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-col">
+                        <h4>get help</h4>
+                        <ul>
+                            <li><a href="#">FAQ</a></li>
+                            <li><a href="#">shipping</a></li>
+                            <li><a href="#">returns</a></li>
+                            <li><a href="#">order status</a></li>
+                            <li><a href="#">payment options</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-col">
+                        <h4>online shop</h4>
+                        <ul>
+                            <li><a href="#">watch</a></li>
+                            <li><a href="#">bag</a></li>
+                            <li><a href="#">shoes</a></li>
+                            <li><a href="#">dress</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-col">
+                        <h4>follow us</h4>
+                        <div class="social-links">
+                            <a href="#"><i class="fab fa-facebook-f"></i></a>
+                            <a href="#"><i class="fab fa-twitter"></i></a>
+                            <a href="#"><i class="fab fa-instagram"></i></a>
+                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </footer>
-    <script>
-        window.embeddedChatbotConfig = {
-        chatbotId: "iSwsMwg5TfWCzADbpz05-",
-        domain: "www.chatbase.co"
-        }
-        </script>
-        <script
-        src="https://www.chatbase.co/embed.min.js"
-        chatbotId="iSwsMwg5TfWCzADbpz05-"
-        domain="www.chatbase.co"
-        defer>
+        </footer>
+
+        <button id="scrollToTop" title="Back to top">
+            <i class="fa-solid fa-arrow-up"></i>
+        </button>
+
+        <script>
+            window.embeddedChatbotConfig = {
+                chatbotId: "iSwsMwg5TfWCzADbpz05-",
+                domain: "www.chatbase.co"
+            }
         </script>
+        <script src="https://www.chatbase.co/embed.min.js" chatbotId="iSwsMwg5TfWCzADbpz05-" domain="www.chatbase.co"
+            defer>
+            </script>
 
-    <script src="script/main-page-script.js"></script>
+        <script src="script/main-page-script.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/script/main-page-script.js b/public/script/main-page-script.js
index dd3756b..07561bc 100644
--- a/public/script/main-page-script.js
+++ b/public/script/main-page-script.js
@@ -1,8 +1,30 @@
-function show(){
-    document.getElementById('firsticon').style.display='none';
-    document.getElementById('secondicon').style.display='inline-block';
+function show() {
+  document.getElementById("firsticon").style.display = "none";
+  document.getElementById("secondicon").style.display = "inline-block";
 }
-function hide(){
-    document.getElementById('firsticon').style.display='inline-block';
-    document.getElementById('secondicon').style.display='none';
+function hide() {
+  document.getElementById("firsticon").style.display = "inline-block";
+  document.getElementById("secondicon").style.display = "none";
 }
+
+let scrollToTopButton = document.getElementById("scrollToTop");
+
+// Show the button when the user scrolls down 100px from the top
+window.onscroll = function () {
+  if (
+    document.body.scrollTop > 100 ||
+    document.documentElement.scrollTop > 100
+  ) {
+    scrollToTopButton.style.display = "block";
+  } else {
+    scrollToTopButton.style.display = "none";
+  }
+};
+
+// Scroll to the top when the button is clicked
+scrollToTopButton.addEventListener("click", function () {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+});
diff --git a/public/script/stk_mainpage.js b/public/script/stk_mainpage.js
index 517c17a..1fc4dbc 100644
--- a/public/script/stk_mainpage.js
+++ b/public/script/stk_mainpage.js
@@ -149,3 +149,25 @@ const set = async () => {
     }, 3000);
   }
 };
+
+let scrollToTopButton = document.getElementById("scrollToTop");
+
+// Show the button when the user scrolls down 100px from the top
+window.onscroll = function () {
+  if (
+    document.body.scrollTop > 100 ||
+    document.documentElement.scrollTop > 100
+  ) {
+    scrollToTopButton.style.display = "block";
+  } else {
+    scrollToTopButton.style.display = "none";
+  }
+};
+
+// Scroll to the top when the button is clicked
+scrollToTopButton.addEventListener("click", function () {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+});
diff --git a/public/stk_mainpage.html b/public/stk_mainpage.html
index bc3f951..599d4ed 100644
--- a/public/stk_mainpage.html
+++ b/public/stk_mainpage.html
@@ -269,6 +269,11 @@ <h4>follow us</h4>
             </div>
         </div>
     </footer>
+
+    <button id="scrollToTop" title="Back to top">
+        <i class="fa-solid fa-arrow-up"></i>
+    </button>
+
     <script src="script/stk_mainpage.js"></script>
 </body>