header{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 60px;
                background-color: #21468b;
                z-index: 100;
                display: flex;
            }
            header h1{
                margin:auto;
                color: #fff;
            }
            header .nav{
                display: flex;
                justify-content: space-evenly;
                width: 80%;
                margin: auto;
            }
              header .nav a{
                padding: 5px 10px;
                text-decoration: none;
                color: #fff;
                 border-bottom: 2px solid #ffffff00;
                 font-weight: bold;
                 font-size: large;
              }
              header .nav a:hover{
                border-bottom: 2px solid #fff;
              }
             header .nav .dropdown {
  position: relative;
  display: inline-block;
  top: 6px;
}
header .nav .dropbtn {
    margin: auto;
  cursor: pointer;
   border-bottom : none !important;
}
header .nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  height: max-content;
  left: -50px;
  min-width: 180px;
  background-color: #3f65ab;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  z-index: 101;
}
header .nav .dropdown-menu a {
  display: block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
header .nav .dropdown-menu a:hover {
  background: #f1f1f1;
  color: #333 !important;
}
/* SHOW ON HOVER */
header .nav .dropdown:hover .dropdown-menu {
  display: block;
}
            main{
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                height: max-content;
                background-color: rgb(255, 255, 255);
            }
             main h2{
                text-align: center;
             }
            main .section1{
                display: grid;
                grid: auto / 33% 34% 33%;
                padding: 20px 0;
            }
            main .section1 .box{
                margin: 5px;
                border: 1px solid rgba(0, 0, 0, 0.219);
                box-shadow: 0 6px 10px rgba(0,0,0,0.15);
                padding: 10px 25px;
            }
            main .section1 .box .link{
                display: flex;
                justify-content: center;
            }
               main .section1 .box .link a{
                color: #fff;
                padding: 8px;
                background-color: #21468b;
                margin-top: 10px;
                text-decoration: none;
                border-radius: 20px;
             }
            main .section1 .box h3{
                display: flex;
                justify-content: center;
                font-size: larger;
                border-bottom: 1px solid #21468b;
                padding-bottom: 10px;
            }
            main .section1 .box p{
                display: flex;
                justify-content: space-between;
                font-size: large;
            }
            @media screen and (max-width: 700px){
            main .section1{
             grid: auto / 100%;
            }
            main .section1 .box{
            margin: 10px 50px;
            }
            }
            @media screen and (max-width: 450px){
            main .section1 .box{
            margin: 10px;
            }
            }
              main .section1 .box table,th,td{
            border: 1px solid rgb(255, 255, 255);
            width: 100%;
            padding: 2px;
            text-align: center;
            background-color: #21468b;
            color: #fff;
            font-weight: bold;
            }
             main .section1 .box th,td{
                padding: 10px;
            }
            main .section1 .box ol{
              margin: auto;
            }
            main .section1 .box ol li{
              margin: 30px 10px;
            }
             main .section1 .box a{
                 display: block;
                 text-align: center;
                 background-color: #21468b;
                 color: #fff;
                 padding: 10px;
                 margin: 10px;
             }
            main .section2{
                display: grid;
                grid: auto / 50% 50%;
                margin: 10px 20px;
                height: max-content;
            }
              main .section2 .box{
                margin: 5px;
                border: 1px solid rgba(0, 0, 0, 0.219);
                box-shadow: 0 6px 10px rgba(0,0,0,0.15);
                padding: 10px 25px;
                height: auto;
            }
            main .section2 .box h3{
                text-align: center;
            }
               main .section2 .box .grp-box{
                   margin: 5px;
                   display: grid;
                   grid: auto / auto auto;
               }
                main .section2 .box .grp-box .grp{
                   margin: 5px;
               }
                main .section2 .box .grp-box .grp{
                    display: grid;
                    grid: auto /auto auto;
                }
                main .section2 .box .grp-box .grp input[type='text'],input[type='date'], textarea, select{
                    width: auto;
                    margin: 0 2px;
                }
                main .section2 .box .grp-box .grp #state{
                    width: 100%;
                }
                main .section2 .box input[type='submit']{
                    display: flex;          
                    justify-content: center;
                    width: 200px;
                    margin: 5px auto;
                }
                main .data{
                     overflow-x: auto;      /* Enables horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on mobile */
                }
                main .data table{
            min-width: 800px;      /* Adjust based on your table width */
    border-collapse: collapse;
    width: 100%;
            text-align: center;
            border-collapse: separate;
            word-wrap: break-word;
            margin:40px auto 0px auto;
}
main .section{
    margin: 5px;
    padding: 5px;
}
main .section h2,h3,h4{
    text-align: left;
}