body {



    margin: 0;

    padding: 0;

    box-sizing: border-box;

    background-image: linear-gradient(to right, #7cf897, #a8f8a0, #c8f8ae, #e0f8c1, #f1f9d8, #eff9dd, #edf9e2, #edf8e7, #d7f6e0, #baf5e1, #97f3ea, #6feffb);

}

.tit{
    color: rgb(241, 7, 7);
    letter-spacing: 2px;
    font-weight: 500;
    font-family: "Bungee-spice";
    font-size: 30px;
}

.bungee-spice-regular {
    font-family: "Bungee Spice", sans-serif;
    font-weight: 400;
    font-size: 40px;
    font-style: normal;
  }

/* HEADER COMMON TO ALL  */
.header-t {
    border: 2px solid black;
    background-color: rgb(128, 176, 124);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    border-radius: 5px;
  }
  
  /* FOR RESPONSIVE IMAGE  */
  img {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 100%;
    height: auto;
  }
  
  /* /NAVBAR CONTENT */
  
  .topnav {
    box-sizing: border-box;
    overflow: hidden;
    background-color: rgb(34, 160, 9);
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
  }
  
  @media screen and (min-width: 1071px) {
    .topnav {
      display: flex;
      justify-content: space-evenly;
    }
  
  }
  
  .topnav a {
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 6px 16px;
    text-decoration: none;
    font-size: 20px;
    /* font-weight: 900; */
    /* margin-left: 2vw; */
  }
  
  .active {
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  .dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: none;
    color: white;
    /* font-weight: 900; */
    padding: 6px 16px;
    background-color: inherit;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  
    margin: 0;
    cursor: pointer;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9fcf2;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    box-sizing: border-box;
  }
  
  .dropdown-content a {
    float: none;
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
    /* color: #f2f2f2; */
    padding: 12px 16px;
    font-size: medium;
    text-decoration: none;
    display: block;
    text-align: left;
    /* margin-left: 1vw; */
  
  }
  
  .topnav a:hover,
  .dropdown:hover .dropbtn {
    /* background: #1B5E20; */
    background-color: #4CAF50;
    text-decoration: underline;
  }
  
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  @media screen and (max-width: 600px) {
  
    .topnav a:not(:first-child),
    .dropdown .dropbtn {
      display: none;
    }
  
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  .icon:hover {
    cursor: pointer;
    text-decoration: none;
  }
  
  .topnav a {
    position: sticky;
    top: 0;
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {
      position: relative;
    }
  
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
    }
  
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  
    .topnav.responsive .dropdown {
      float: none;
    }
  
    .topnav.responsive .dropdown-content {
      position: relative;
    }
  
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  

#header {
    display: flex;
    justify-content: center;
}

.heading {
    display: flex;
    justify-content: center;
    height: 90px;
    align-items: center;
    /* background-color: rgb(37, 37, 37); */
    background: linear-gradient(to right,
            rgba(46, 139, 87, 0.3) 0%,
            #7FFFD4 25%,
            #FFFF99 50%,
            #FFFF99 50%);
    /* background-image: url(images/achiveback.jpg); */
    /* opacity: 0.34; */
    width: 40vw;
    border-radius: 5px;
    border: 2px solid rgb(67, 104, 160);
    margin-top: 3vh;
    margin-bottom: 3vh;
}

.head h1 {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    width: 30vw;
    size: 100px;
    font-weight: bolder;
    padding: 10px 10px;
    border-radius: 4px;
    position: relative;
    z-index: 69;
    color: rgb(0, 0, 7);
}

@media only screen and (max-width: 775px) {
    .heading {
        width: 90vw; /* Adjust width for mobile */
    }
  
    .head h1 {
        width: 80vw; /* Adjust width for mobile */
    }
  }

/* nav {

    display: flex;
    justify-content: space-evenly;
    text-align: center;
    height: 6vh;
    background-color: rgb(65, 162, 247);
    margin: 5px auto;
    position: sticky;
    
   

}

nav a {

    text-decoration: none;

    color: white;

    margin: 0 10px;

} */

nav {
    position: sticky;
    top: 0;
    background-color: #17889c; /* You can change the background color as needed */
    z-index: 1000; /* Ensure it's above other content */
  }
  
  nav a {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    color: white; 
    size: 4.5em;
  }

nav a:hover {

    color: #555;

}

.container {

    max-width: 960px;

    margin: 20px auto;

    padding: 0 20px;

}




.hod-message {

    display: flex;

    font-family: Georgia, 'Times New Roman', Times, serif;

    font-style: italic;

    justify-content: center;

    flex-direction: column;

    margin-top: 10px;

}

.hod-img {

    /* max-width: 100%; */

    /* height: auto; */
    /* width: 20vw; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;

    margin-bottom: 10px;

}

/* table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;

} */


th,

td {

    border: 2px solid #0c0c0c;

    padding: 8px;

    text-align: left;

}

th {

    background-color: #70fc1f;

}


@media screen and (max-width: 600px) {

    nav {

        display: none;

        flex-direction: column;

        align-items: center;

    }

    nav a {

        margin: 5px 0;

    }

    .container {

        padding: 0 10px;

    }

}

/* Responsive CSS for Lab Details section */


/* Default styles */

#labs {

    max-width: 100%;

    overflow-x: auto;

}


table {

    /* width: 100%; */

    border-collapse: collapse;

}


th,
td {

    padding: 8px;

    text-align: left;

}


th {

    font-weight: bold;

}


/* Responsive styles */

@media only screen and (max-width: 768px) {

    th,
    td {

        padding: 6px;

        text-align: center;

    }

}

/* Added styles for larger screens */

@media screen and (min-width: 601px) {

    nav {

        display: flex;

        justify-content: center;

    }

}



/* FOOTER */

.footer {
  background-color: #333;
  color: #fff;
  padding: 20px 0;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.footer-section {
  flex-basis: calc(50% - 20px); /* Adjusted width for a 2x2 layout */
  margin: 0 10px;
  text-align: center;
}

.footer-section h3 {
  margin-bottom: 10px;
}

.footer-section ul {
  list-style-type: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 5px;
}

.footer-section ul li i {
  margin-right: 5px;
}

.footer-section ul li a {
  color: #fff;
  text-decoration: none;
}

.team{
  display: flex;
  gap: 5vw;
  justify-content: center;
}

.footer-bottom {
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid #fff;
}

@media only screen and (max-width: 768px) {
  .footer-section {
      flex-basis: 100%;
  }
}


ul li a:hover{
   
    background:#1B5E20;

}