*,
body
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
html{
    height:100%;
}
body {
    background: rgba(219, 223, 221, 0.836);
    overflow-x: hidden;
    min-height: 100%;
}

.header-wrapper {
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-around; 
    align-items: center;
   
}

/* styling  styling the advert section in header.php link */

#advert-wrapper{
        width: 100%;
        background-color: rgba(0,0,0,0.5) !important;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1000;
        /* transition: 2s ease-in; */
        
        
       
    }
    
    #advert-container{
        width: 80%;
        margin: 20px auto;
        padding: 30px 0px;
        border-radius: 20px;
        background-color: #fff !important; 
        display: flex;
        align-items: center;
        justify-content: center;
       
    }
    
      #advert-container img{
        width: 73%;
        border-radius: 20px;
        
    }
    
     
      #advert-container #advert-cancel{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(0,0,0,0.8) !important;
        font-weight: bolder;
        font-size: 24px;
        cursor: pointer;
        color:#fff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top:30px;
        right:140px;
        margin-top: -5px;  
        margin-right: 10px;
    }
    
     #advert-container #advert-cancel:hover{
        background-color: rgba(132, 127, 127, 0.8) !important;
        color:#000 !important;
        transition: .2s;
        cursor: pointer;
    }

    #togleAdvert{
        width: 100px;
        background-color: #9db4f7 !important;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        display: none;
        padding: 3px;
        border-radius: 0px 8px 0px 8px;
        z-index: 1500;
        position: fixed;
        min-height: 30px;
        right: 0;
        bottom: 0;
        transition: .2s; 
    }
    #togleAdvert:hover{
        background-color: #000 !important;
        color: white !important;
    }
    
/* close styling the advert section in header.php link*/

.logo-container.htc{
    width: 6%;
    object-fit: cover;
    margin-top: .5rem;
    margin-left: -20%;
   
}
.logo-container.htc img{        
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
}

.side-bar {
   width: 100%;
   height: auto;
   background-color: rgba(0, 0, 0, 0.7);
   box-sizing: border-box;
   z-index: 50;
   display: none;
   position: fixed;
   padding: 10px;
}
.side-bar #about-submenu{
    width: 100%; 
 }
 
 .leadership_link,.tour_link{
    pointer-events: none;
    
 }


main{
    position: sticky;
    top: 0px;
    overflow: hidden;
    
    
    
}




/* ----------------------- Navicon styling --------------------------------------- */
.navicon-div, .admin-navicon-div{
    display: none;
    
}


 .bars, .admin-bars{
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: -0.5rem;
    z-index: 10;
}

.site-name-container {
    display: flex;
    flex-direction: column;
    margin-left: -35%;
}

.site-name-container .site-name {
    color: aliceblue;
}

.site-name-container .motto {
    align-self: flex-end;
    font-size: 24px;
    font-family: monospace;
    color: bisque;
    
}

.top-bar {
    background: rgba(239, 5, 247, 0.842);
    padding: 0.3rem 1rem;
    border-bottom: 3px solid white;
    border-top:none;
    border-left:none;
    border-right:none;
    position: fixed;
    top: 0;
    min-width: 100%;
    z-index: 500;
 
}


/* a section for the navbar */

.nav-container {
    width: 100%;
    margin: 100px 0px 5px 0;
    padding: 1rem 2rem;
    background-color: rgba(137, 133, 141, 0.842);
    justify-content: center;
    align-items: center;
    position: relative;
}


.side-bar,
.x-symbol,
.nav-container ul{
    font-weight: bolder;
}



.nav-container ul>ul li:nth-of-type(5) a{
    color: rgba(94, 3, 97, 0.842);
   
}
.nav-container li {
    list-style: none;
    background-color: rgb(243, 240, 234);
    padding: 0.3rem .5rem;
    border-radius: .3rem;
    cursor: pointer;
}

.nav-container li a:link {
    display: block;
}

.nav-container li a:hover {
   
    color: rgb(88, 63, 63);
    transition: .5s;
}

.nav-container ul > li:hover{
   box-shadow: 0 0 1px 1px black;
}

.nav-container li ul {
    display: flex;
    gap:10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 10px;
    top: 2.6rem;
    width: 200px;
    z-index: 100;
    /* background-color: rgb(201, 182, 162); */
    
}

.nav-container ul li>ul {
   display: none; 
}
.nav-container ul li:hover >ul {
    display: block; 
    border-radius: 0px;
 }
 

 
 .nav-container ul li:hover >ul li{
    gap:10px; 
    border-radius: 0px;
    border-bottom: 1px solid gray;
    text-align: center;
 }
 /* .nav-container ul li ul li:nth-child(4) {
    border: none;
 } */
 
  .nav-container ul li ul li:nth-child(5) {
     background-color: rgb(243, 240, 234);
     /* color: rgb(88, 63, 63); */
     color: rgba(94, 3, 97, 0.842);
 }
 

.nav-container ul {
    display: flex;
    justify-content: space-between;
}

.nav-container li a {
    text-decoration: none;
}

/* ...................STYLING choose_sectiondiv ....................................*/


/* ...................STYLING SLIDER SECTION....................................*/





/* .slider-container {
    overflow: hidden;
    max-height: 100vh;
    
}

.slider-container figure {
    width: 500%;
    position: relative;
    margin: 0;
    left: 0;
   
    animation: slider 20s infinite;
}

figure img {
    width: 20%;
    float: left;
}

@keyframes slider {
    0% {
        left: 0;
    }
    20% {
        left: 0;
    }
    25% {
        left: -100%;
    }
    45% {
        left: -100%;
    }
    50% {
        left: -200%;
    }
    70% {
        left: -200%;
    }
    75% {
        left: -300%;
    }
    95% {
        left: -300%;
    }
    100% {
        left: -400%;
    }
} */
.slide_container{
    width: 100%;
    height: 100%; 
    border: none;
    outline: none;
    object-fit: fill;
    position: relative;
}
.slide_container img{
    width: 100%;
}

.poster-div{
    width: 100%;
    
}
.poster-div img{
    width: 100%;
    height: 100%;
}

/* -------------------THE AOS SLIDER IS HERE --------------------------------------*/

.main-aos{
    margin-top: 3rem;
    background-color: #f9f9f9;
    
  
}

.aos-header{
    margin-bottom: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    
}

.aos-header h1{
    font-size: 4rem;
    line-height: 1.5;
    margin-bottom: 2rem;  
}

.aos-header h3{
    margin-top: 1rem;
    line-height: 1.5;
    margin-bottom: 2rem;  
}


.aos-header span{
    color: brown;
}
.aos-container{
    max-width: 1300px;
    margin: 0 auto;
     
}



.aos-card{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    
}
.aos-card img{
    width: 100%;
    object-fit: contain;
    height: 400px;
    border: none;
    
}
.aos-card h3{
    margin-bottom: 1rem;
    
}

.aos-card .team-h3{
    text-align: center;
    
}

.aos-card .team-card img{
    width: 10%;
    
}
.aos-card .team-card{
    display:flex;
    
}
.aos-card p{
    line-height: 2.5;
}


#no-margin-b{
    margin-bottom: 0px;   
}
.aos-card>div{
      padding: 2rem;
      overflow:hidden;
      height: 400px;
      
}

.aos-card p{
    text-align: justify;
    margin-bottom: 2rem;
}


#why-htc{
   /* overflow-wrap: break-word; */
   width: fit-content; 
}

#section-about-why h1{
    overflow-wrap: break-word;
     
 }

.p-team, .p-why{
    font-size: 16px;
    font-weight: bolder;
    line-height: 1;
    
 }

.aos-card:nth-child(even) img{
   order: 2;
}
.aos_learn_more{
    list-style: none;
    text-decoration: none;
    background-color: black;
    cursor: pointer;
    padding: .5rem;
    color: #fff;
    border-radius: 3px;
    margin-top: 10px;
   
   
}
.aos_learn_more:hover{
    opacity: 0.6;
    color: aqua;
    
}
/* STYLING THE ABOUT SECTION SMOOT SCROLLING */
.about {
    width: 80%;
    background-color: rgba(0,0,0,0.7);
    margin: 1rem auto;
    padding: 2rem;
    border-radius: 5px;
}
.about p{
    text-align: justify;
    line-height: 2.5;
}
.about-container{
    background-color: #686464; 
    border-radius: 10px;
   padding: 2rem 2rem; 
}

.about, .about-container{
    border: none;
    outline: none;
}

/* .about-container h1{
    margin-top: 7vh;
    margin-bottom: 2vh; 
    text-align: center;
    width: 100%;
    transform: translateY(-50%);
    font-family: sans-serif;
    background: linear-gradient(90deg, #ff0000, #ffff00, #ff00f3, #0033ff,#ff00c4,#ff0000);

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text; 
    background-size: 150%;
   
 } */
 
 .about-container .headers{
    margin-top: 25px;
    font-size: 24px;
    font-weight: bolder;
    
    /* margin-bottom: vh;
    text-align: center;
    width: 100%;
     transform: translateY(-50%);
    font-family: Arial black;
    background: linear-gradient(90deg, #ff0000, #ffff00, #ff00f3, #0033ff,#ff00c4,#ff0000);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text; 
    background-size: 150%;   */
 }
 
 .about-container h2{
   color:#fff ;
   
 }
.about-container p{
    color: #f0e5e5;
    line-height: 2.5;
    text-align: justify;
}
#about-location {
   width: 100%; 
}

.location-pix{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.location-pix img{
    width: 100%;
  
} 


#about-modus {
    width: 100%;  
  }
  
  #about-modus h1{
    margin-top: 3rem; 
    margin-bottom: 0;
    text-align: center;
 }
 #about-modus span{
    text-align: justify;
    color: #f0e5e5;
    line-height: 2.5;
 }
 
 #about-modus .span-h3{
    font-size: 1.5rem;
    color: white
 }
 
#about-modus .paragraph{
  text-indent: 25px;  
}

#about-modus .paragraph{
    text-indent: 25px;  
  }

  .about-wrapper{
    width: 80%;
    margin: 3rem auto;
    max-height: 100rem;
    background-color: rgba(0,0,0,0.7);
    padding: 1rem 2rem;
    box-sizing: border-box;
    border-radius: 15px;
  
}
.section-history h1{
  text-align: center; 
  margin-bottom: 7vh;
  color: rgb(100, 98, 98);
  text-decoration: underline;
    
}


.section-history{
    width: 100%;
    max-height: 900px;
    overflow-y: scroll;
    padding: 2rem 1.5rem;
    text-align: justify;
    line-height: 25px;
    background-color: beige;
    border-radius: 12px ;
}

.history-div>p{
    margin-top: 3vh;
    color: rgb(75, 70, 70);
}

.history-div>h2{
    
    color: rgba(94, 3, 97, 0.842);
}
  



/* --------------------------ABOUT PAGE--------------------------------- */




/* footer */

 footer{
    width:100%;
     position: relative; 
     top:80px;
     
} 

.futa_wrapper {
    padding: 20px 30px;
    width:100%;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    flex-wrap: wrap;
   margin: 0 auto;
    margin-top: 1rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    
  
}

.futa_nav  {
    border-left: .2rem solid pink;
    
}

.futa li {
    list-style: none;
    
}
.futa_nav,
.futa_contact_link {
    text-decoration: none;
    list-style: none;
    color: rgba(238, 224, 240, 0.952);
    cursor: pointer;

}

.futa_nav,
.futa_services,
.futa_contact {
   width: 300px; 

}

.futa_services #btn_futa_services{
    width: 7rem;
    height: 2rem;
    margin-top: 1rem;
    margin-left: 5rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
    background-color: peachpuff;
    font-weight: bolder;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    padding: 4px 10px;
  
    
}

.futa.futalinks>.futa_nav{
    line-height: 2rem;
}
 
.futa_nav,
.futa_services,
.futa_contact_link {
    padding: .3rem;
}

.futa_services h1{
    padding: .3rem 2rem 1rem;
    font-family: lato;
    font-size: 24px;
    text-align: center;
    border: 2px solid pink;
    padding: .1rem .5rem;
    border-radius: 12px;
    margin-bottom: .7rem;
}
.futa_services p{
    border-left: .2rem solid pink;
    padding-left: 12px;
}
.futa.futa_services p{
   text-align: left;
   line-height: 1.5;
}
.futa_nav,
.futa_contact_link {
    line-height: 2rem;
    font-size: 1.5rem;
}


.futa_contact_link:hover {
    color: pink;
    transition: .2s ease-in-out;
}

.futa_nav:hover {
    color: pink;
    transition: .2s ease-in-out;
}
.futa_contact p { 
    text-transform: uppercase;
    font-weight: 600px;
    border: 2px solid pink;
    padding: .1rem .5rem;
    border-radius: 12px;
    margin-bottom: .7rem;
}

.futa_contact >*{
    text-align: right;
}

.futa_contact p{
    text-align: center;
}

.faqs {
    width: 400px;
    height: 300px;
    border: 2px solid rgb(122, 7, 7);
    background-color: rgb(202, 181, 192);
    margin: 0 auto;
}

.faqs .comment {
    width: 100%;
    border: 1px solid red;
}

.copy-right-div{
   width: 100%; 
   background-color: black;
}

.copy-right{
    color: #bcb9b9;
    font-size: 18px;
    margin-left: 3rem;
    margin-bottom: 1rem;
    margin-top: .5rem;
    font-style: italic;
}
 hr{
    border: 1px solid red;
    
 }
 


/* --------------------------REGISTRATION PAGE--------------------------------- */

.reg_wrapper{
width: 80%;
margin: 5rem auto;
border-radius: 5px;
margin: 30px auto;
padding: 20px;

}

.div_wall {
    width: 100%;
    height: 100%;
   padding: 30px;
    margin: 70px  auto 10px;
    border-radius: 10px;
   box-shadow: 1px 1px 5px 3px rgb(136, 134, 134);
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
    
}

.div_wall h1{
    margin-bottom: 30px;
    text-align: center;
    font-size: clamp(12px,5vw,30px);
}
 .div_wall header {
    text-align: center;
}
.submit_div {
    width: 50%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    
}
.btn_reg_submit{
    background-color: green;
    color: #fff;
    width: 200px;
    font-weight: bolder;
    height: 3rem;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: 5px;
}


 .btn-reg{
   background-color:rgba(0, 0, 0,0.5);
   color: white;
   cursor: pointer;
   border: none;
   outline: none;
   border-radius: 5px;
   font-weight: bolder;
   padding: 10px;
   margin-left: 5%;
   margin-top: 3%;
   
  }

  .btn-reg:hover{
    background-color: rgba(0, 0, 0,0.3);
   
   }
  
  .btn-reg i{
    font-size: clamp(30px,10vw,60px);
    color:white;
    cursor: pointer;
  }

  
  .btn-reg a{
    text-decoration: none;
    color: white;
  }

/* --------------------------REGISTRATION PAGE  closed-------------------------------- */



/* ----------------------RESULT UPLOAD FORM------------------------- */

/* header and logo style*/

.header{
    margin-bottom: 5vh;
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
}

.header h1 p{
    text-align: center;
    color: #575252;
    background-color: red;
    
}
.header h1 span{
    color: #ce1e1e;
   
}
.header img{
    width:100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    padding-bottom: 1rem;
    
    
}
/* Result upload form itself style*/
.result_form_wrapper{
    width: 40%;
    box-shadow: 3px 4px 2px;
    border-radius: 12px;
    background-color: rgb(245, 169, 181);
    margin:  5rem auto;
    padding: 1% 2%; 
}  

.result_form_wrapper .result{
    width: 100%;
    height: 2.5rem;
    background-color: rgb(97, 94, 91);
    color: #fff;
    font-weight: bolder;
    border-radius: 5px;
    border: none;
    outline: none;
    padding-left: 1rem;
    padding-right: 1rem;
    
}

#file{
    width: 100%;
    background-color: aqua;
}

.result:hover{
   
    box-shadow:0 0 0 2px #fff;
    
    
    
}
.frm_result{
    display: flex;
    flex-direction: column;
    gap: .7rem;
    align-items: center;
    justify-content: center;
    /* flex-wrap: wrap; */
}

.result.submit.btn{
    background-color: rgb(5, 168, 5);
    font-size: 1.5rem;
    cursor: pointer;
}

/* ..................STYLING THE CONTACT FORM..................... */
/* .contact_body{
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;  
    overflow: auto;
} */
.p-telephone{
   font-size: 150px; 
   margin:5% 25%;
   position: relative;
   width: fit-content;
  
}

.contacts-wraper{
    width:  60%;
    padding: 2rem;
    background-color: #a09a9a;
    margin: 3rem auto;
    border-radius:12px;
    overflow-wrap: break-word;
    
}

.contact_topdiv{
    border: none;
    background-color:transparent;
    width: fit-content;
    margin: 2rem auto;
    position: relative;
}
.contact_topdiv .header-p{
    color: antiquewhite;
    font-size: 2rem;
    font-weight: bolder;
    
}

.contact_div{
    max-width:60rem;
    height:auto;
    margin: 7rem auto;
}
.contact_div p{
    line-height: 1.5;
    padding: 0.5rem;
    color: #fbf6f6;
    text-align: justify;
}  

.contact_tel{
    
    text-align: left;
} 

.social_media .email{
    color: #fbf6f6;
}
.contact_div h2{
    text-align: center;
    margin-bottom: 1rem;
    color:#575252
}

.social_media .mail_icon, .contact_tel{
    font-size: 28px;
    color: rgb(206, 24, 24);
    cursor: pointer;
    
}

.social_media{
    overflow-wrap: break-word;
}
    
/* ...............RESULT CHECKING FORM STYLING............ */

#checkresult_body{
    background-color: rgba(0, 0, 0, 0.6);
    width: 60%;
    /* max-height: 100vh; */
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0px;
    margin: 0 auto;
    
}

.result_check_wrapper{    
    width: 100%;
    margin: 0 auto;
    background-color: rgba(34, 32, 32, 0.4);
    padding: 10px;
    color: #fff;
    font-weight: bolder;
    border-radius: 12px;
    overflow: auto;
   } 
   
   
  
   
   .result_check_wrapper h1{
    text-align: center;
    margin-bottom: 10px;
   }
   
   .res_input{
    width: 100%;
    line-height: 2.5rem;
    background-color: #f0e5e5;
    padding-left: 0.5rem;
    
   }
   .select{
    height: 2.5rem;
   }
   
   .res_btn{
    padding: 2px;
    width: 100%;
    height: 3rem;
    border-radius: 5px;
    background-color: green;
    color: #fff;
    font-size: 24px;
    /* font-size: clamp(1rem,3vw+1,2rem); */
    margin: 0 auto;
    font-weight: bold;
    cursor: pointer;
   }
   
   #res_btn_ul-home{
    list-style-type: none;
   }
   
   #res_btn_ul-home span{
    font-size: 24px;
   }
   
   .res_btn.home{
    text-decoration: none;
    background-color: blue;
    padding: .5rem;
    margin-top: .5rem;
    border-radius: 10px;
    transition: .2s;
   }
   .res_btn.home:hover{
    background-color: #f9f9f9;
    color:blue;
    
   }
   
   
   /* The admin styling  goes below */
   .admin.body{
    background-color: white;
   }
   .admin-container{
    width: 80%;
    margin-left: 250px;
    margin-top: 150px;
     background-color:white;
     box-shadow: 2px 5px 3px 4px rgb(150, 149, 149);
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 40px;
    border-radius: 7px;
    gap: 35px;
    
    
    
}

.admin-container>*{
    cursor: pointer;
    padding: 10px;
}

.admin-container {
    text-align: center;
    
}
.admin-container p{
    color: black; 
    padding: 5px;
}
   

.admin-container i{
    font-size: clamp(30px,10vw,40px);
    color: rgb(130, 24, 127);
    padding-bottom: 10px;
    }
    
    .admin-container a{
        text-decoration: none;
         
        }
        
        .admin-container a{
            text-decoration: none;
             
            }
      .admin-container>a div{
       width: 200px;
       background-color:whitesmoke;
       box-shadow: 1px 1px 5px 4px rgba(0,0,0,0.4);
        padding-top: 20px;
        padding-bottom: 10px;
        border-radius: 10px;
      }
      
      .admin-container>a:hover>div {
        background-color: #a09a9a;
       }
      
       .admin-container>a:hover>div i{
        color: white;
       }
       
       .admin-container>a:hover>div p{
        color: white;
       }
       
      .admin-container>a:hover>div i{
        transform: translateY(-5%);
        transition: .1s;
         
       }
       .admin-wrapper{
        position: relative;
        overflow: auto;
        
        
       }
       
      .admin-wrapper .admin-sidebar{
        width: 240px;
        top: 100px;
        /* background-color:rgba(239, 5, 247, 0.842); */
        background-color:rgba(0,0,0,0.7);
        margin-left: 0px;
        position: fixed;
        display: block;
    }
    
      .admin-pix-div{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #f3efef;
        display: flex;
        align-items: center;
        justify-content: center;
        
      }
      
      .admin-pix-div img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        cursor: pointer;
        
      }
      .top-bar.admin{
        position: fixed;
        min-width: 100%;
        z-index: 1000;
      }
      
      .header-wrapper.admin { 
        justify-content: space-around; 
    }
    
    .header-wrapper.admin .site-name-container{
        margin-left: -80px;
    }
    
    .header-wrapper.admin .logo-container.htc{
        margin-left: 70px;
    }
   
    .admin-sidebar ul{
        width: 200px;
        padding: 10px;
        width: 100%;
        
    }
    
    .admin-sidebar ul li{
       list-style-type: none;
       line-height: 40px;
       width: 100%;
       border-bottom: 2px dotted white;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       font-size: 18px; 
       padding-left: 2px;
       
    }
    .admin-sidebar ul li:hover{
       background-color: rgba(0,0,0,0.5);
       transition: .2s;
     }
     
    .admin-sidebar ul li a{
        text-decoration: none;
        color: #f9f9f9;
        
     }
     
     /* Styling the admin 'manage_result' page */
     #manage-result-body{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
     }
     
     .result-management-wrapper{
        width: 90%;
        background-color: rgba(0,0,0,0.6);
        margin: 0 auto;
        padding: 20px;
     }
     .result-management-container{
        display: flex;
        width: 60%;
        border: 3px solid #bcb9b9;
        flex-direction: column;
        margin: 20px auto;
        padding: 20px;
        border-radius: 10px;
        
        
     }
     
     .result-management-container h1{
        text-align: center;
        margin-bottom: 30px;
        color: #bcb9b9;
        /* font-size: clamp(10px,20vw,30px); */
        /* overflow-wrap: break-word; */
     }
     
     .result-management-container .sel-group{
        width: 100%;
        height: 40px;
        margin: 0 auto;
        cursor: pointer;
     }
     .btn-result-mgt-div{
       display: flex;
       flex-wrap: wrap; 
       gap: 20px;
       align-items: center;
        justify-content: space-evenly;
     }
     .btn-reset-result-input, .btn-views-result{
        width: 300px;
        background-color: green;
        cursor: pointer;
        color: white;
        height: 40px;
        font-size: 24px;
        font-weight: bolder;
        text-align: center;
        border: none;
        outline: none;
        border-radius: 5px;
       
     }
     
     .btn-reset-result-input:hover{
        background-color: orchid;
        transition: .2s ease-in-out;
     }
     
     .btn-views-result:hover{
        background-color: orchid;
        transition: .2s ease-in-out; 
     }
      /* close  Styling the admin 'manage_result' page  */
     
     
     
     /* Styling the admin 'manage_result_script' page  */
      .terminal-result-wrapper, .annual-result-wrapper{
    
      background-color: rgba(0,0,0,0.6) !important;
      
     }
     
     .terminal-result-div, .annual-result-div{
       width: 1200px;
       margin: 30px auto;
      background-color: whitesmoke;
      padding: 5px;
      
     }
     
     .terminal-result-div h3{
       text-align: center;
       background-color: darkblue !important;
       color: #f5f5f5;
       margin-top: 20px;
       margin-bottom: 20px;
       width: 100%;
      }
      
      .annual-result-div h3{
        text-align: center;
        background-color: darkblue !important;
        color: #f5f5f5;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
       }
      
      .terminal-result-div .terminal_table{
       width: 100%;
       margin-top: 30px; 
      }
      
      .annual-result-div .annual_table{
        width: 100%;
        margin-top: 30px; 
       }
      
      .terminal-result-div .terminal_table td{
       padding: 3px;
      }
      
      .annual-result-div .annual_table td{
        padding: 3px;
        font-size: 14px;
        font-weight: bolder;
       }
      
        .center{
        text-align: center;
       }
       
        .terminal_table th {
            background-color: darkblue !important;
            color: white;
            font-weight: bolder;
            padding: 5px;
       }
       
       
       .annual_table th {
        background-color: darkblue !important;
        color: white;
        font-weight: bolder;
        padding: 5px;
   }
       
       .back{
        width: 100px;
        background-color: darkblue !important;
        padding: 5px;
        border-radius: 5px;
        margin-left: -700px;
       }
        .back a{
        width: 100%;
        color: white;
        font-weight: bolder;
        text-decoration: none;
        margin: 0px;
       } 
       
       .terminal-result-div .action{
        width: 70px;
        padding: 4px;
        font-size: 14px;
        font-style: italic;
        font-weight: bold;
        cursor: pointer;
        border-radius: 2px;
        border: none;
        outline: none;
       }
       
       .terminal-result-div .action.term_edit{
        
        background-color: green;
        color:whitesmoke;
       }
       
       .terminal-result-div .action.term_del{
        margin-left: 20px;
        background-color: rgb(246, 31, 31);
        color:whitesmoke;
       }
      /* close/ Styling the admin 'manage_result_script' page  */
      
      
     
      /* ...........Styling the admin 'manage_student' page .............. */
     
     .manage-student-wrapper{
        width: 100%;
        padding: 30px 20px; 
        margin-top: 70px; 
     }
     
     .manage-student-wrapper h1{
        text-align: center;
     }
     
     .manage-student-wrapper .manage-student-container{
        width: 80%;
        padding: 20px;
        text-align: center;
        gap: 20px;
        margin: 30px auto;
        box-shadow: 1px 1px 3px 1px rgb(125, 124, 124);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 5px;
    
     }
     .manage-student-container a{
        text-decoration: none;
     }
     
     .manage-student-container a> div{
        width: 200px;
       box-shadow: 1px 1px 5px 1px gray;
        border-radius: 5px;
        padding: 20px;
        color: purple;
     }
     .manage-student-container a> div p{
       margin-top: 20px;
     }
     
     .manage-student-container a> div i{
        font-size: clamp(30px, 10vw, 60px);
     }
     
     
     
     .manage-student-container a> div:hover> i{
        transform: translateY(-6%);
        transition: 0.3s;
      
     }
     
     
     /* ...........Styling the admin 'manage_student' page closed.............. */
      
     /* admin futa-wrapper style */
     .futa_wrapper.admin{
        margin-top: 180px;
        width: 95%;
     }
     
     .copy-right-div.admin{
        width: 95%;
        margin: 0 auto; 
     }
     /* admin futa-wrapperstyle closed */
     
     /*  Styling the admin 'Admin View Student profile' page  */
     .student_profile_wrapper{
        width: 70%;
        margin: 0 auto;
        padding: 20px 30px;
       
     }
     
     .std_pix{
       width: 120px;
       height: 120px;
       margin: 20px auto;
       border-radius: 12px; 
       padding: 0px;
     }
     
     .std_pix img{
        width: 120px;
        height: 120px;
        border-radius: 12px; 
       
      }
     
     .frm_std_profile{
        margin-bottom: 100px;
     }
     
     .std_search_group{
        width: 50%;
        min-width: 200px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        background-color: white;
        border-radius: 40px;  
        box-shadow: 1px 1px 4px 4px gray;
       
     }
     
     .std_search_group i{
        cursor: pointer;
     }
     
     .search_input{
        width: 300px;
        min-height: 30px;
        outline: none;
        border: none;
        border-radius: 10px;
     }
     
     .btn_admin_std_profile_submit{
        width: 200px;
        background-color: green;
        color: white;
        font-weight: bold;
        outline: none;
        border: none;
        border-radius: 20px 0px 20px 0px;
        cursor: pointer;
        font-size: 20px;
     }
     
     .std_profile_submit_div{
        width: 60%;
        display: flex;
        align-items: centre;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px;
        gap: 15px;
        
     }
     
     .student_profile_container{
        width: 100%;
        margin: 0 auto;
        padding: 20px;
        box-shadow: 1px 1px 4px 3px gray;
     }
     
     .std_profile_group{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
        padding: 20px;
        
     }
     .student_profile_wrapper h1{
        margin-bottom: 20px;
        text-align: center;
        color: rgb(21, 20, 20);
        
     }
     
     
     .student_profile_wrapper hr{
        border:1px solid gray;
        box-shadow: 1px 1px 1px 1px rgb(238, 230, 230);
        
     }
     /* Close Styling the admin 'Admin View Student profile' page  */
     
     
     
     
     /*  Styling the admin 'Admin Enroll Staff' page  */
     .staff_wrapper{
        width: 80%;
        margin: 0 auto;
        background-color: #686464;
        padding: 20px;
     }
     
     .staff_container{
        width: 100%;
        padding: 10px;
        background: rgba(219, 223, 221, 0.836);
        border-radius: 10px;
        align-items: center;
     }
     .frm_staff_enrollment{
        width: 100%;
        margin: 0 auto;
        padding: 0 100px;
        
     }
      #staff_pix{
        width: 100px;
        height: 100px;
        border-radius: 12px;
        margin: 20px auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     }
     #staff_pix img{
        width: 100px;
        height: 100px;
        border-radius: 12px; 
     }
     
     .staff_pix_upload{
        cursor: pointer;
     }
     
     .staff_group{
        width: 100%;
        border-radius: 5px;
        background-color: #bcb9b9; 
        padding: 4px 10px;
     }
     
     .staff_group input{
        width: 100%;
        border-radius: 5px;
        background-color: #bcb9b9; 
        padding: 4px 10px;
        border: none;
        outline: none;
       
     }
     
     .staff_group select{
        width: 100%;
        border-radius: 5px;
        background-color: #bcb9b9; 
        padding: 4px 10px;
        
     }
      #btn_enroll_staff{
      background-color: green;
      width: 50%;
      height: 30px;
      margin: 0 auto;
      color: white;
      font-weight: bold; 
      cursor: pointer;
      border: none;
      outline: none;
      border-radius: 5px;
     
     }
     #btn_enroll_staff:hover{
        background-color:red;
        transition: .5s ease-in;
     }
     
     .classes_taught{
      margin-left: 5px;
     
     }
     /* Close   Styling the admin 'Admin Enroll Staff' page  */
     
     /*  Styling the admin 'Subject Registration' page  */
     .subject_reg_div{
        width: 50%;
        margin: 60px auto;
        box-shadow: 1px 1px 4px 5px gray;
        padding: 20px;
        border-radius: 20px 0px 20px 0px;
     }
     
     .subject_reg_div div{
        width:  60%;
        margin: 0 auto;
        padding: 10px;
     }
     
     .subject_reg_div .subject-group{
        width:  100%;
       height: 30px;
       background-color: #333232;
       color: white;
       border-radius: 5px;
       padding-left: 20px;
       border: none;
        outline: none;
     }
     
     .subject_reg_div .btn_subj_reg{
        width: 80%;
        height: 30px;
        border-radius: 5px;
        border: none;
        outline: none;
        margin: 0 auto;
        background-color: green;
        color: white;
        cursor: pointer;
        font-weight: bolder;
        
     }
     /* Close Styling the admin 'Subject Registration' page  */
     
       /* Styling the Staff login page  */
     .staff_login_wrapper{
        width: 50%;
        background-color: white;
        margin:  auto;
        padding: 20px;
        border-radius: 10px;
     }
     
     .staff_login_wrapper h1{
        text-align: center;
        
     }
     
     .staff_login_content{
        width: 100%;
        background-color: rgb(248, 245, 245);
        padding: 5px;
     }
     
     .tcher-login-input-div{
       width: 50%; 
       margin: auto;
       margin-bottom: 30px;
       
     }
     .tcher-login-input-div .login_group {
        width: 100%;
        background-color: rgb(248, 245, 245);
        height: 30px;
        padding: 10px;
        outline: none;
        border-radius: 5px;
        
     }
     
     .staff_btndiv{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        
        
     }
     .staff_btndiv .staff_btn{
        width: 120px;
        height: 25px;
        margin-bottom: 20px; 
        background-color: green;
        color: white;
        border: none;
        outline: none;
        border-radius: 2px;
        cursor: pointer;
        font-weight: bolder;
       
     }
      /* Close Styling the Staff login page  */
      
      
      /*  Styling the Staff profile page  */
      .tcher_profile_wrapper{
        width: 100%;
        margin-top: 150px;
        background-color: whitesmoke;
      }
      .tcher_profile_wrapper .tcher_profile_h1{
       text-align: center;
       margin-top:20px;
       margin-bottom: 30;
       margin-left: 400px;
       font-size: 20px;
      }
      .tcher_profile_container{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
      }
      .tcher_leftbar{
        min-width: 260px;
        height: fit-content;
        position: fixed;
        top: 100px;
        padding-left: 10px;
        background: rgba(70, 1, 72, 0.842);
        
      }
      .tcher_rightbar{
        width: 900px;
       margin-left: 300px;
       padding: 10px;
       max-height: 500px;
       overflow: auto;
       
       box-shadow: 0px 0px 2px 3px gray;
       padding-top: 0px;
      }
      
      .tcher_leftbar{
        position: fixed;
        
      }
      
      .tcher_leftbar nav ul{
        padding: 0;
        margin-left: 0px;
      }
      .tcher_leftbar nav ul li{
        list-style-type: none;
        line-height: 35px;
        border-bottom: 1px dotted gray;
      }
      
    .tcher_leftbar nav ul li ul{
      display: none;
    }
    .tcher_leftbar nav ul li:hover> ul{
        display: block;
      }
      .tcher_leftbar nav ul li:hover{
        background-color: rgba(0, 0, 0, 0.1);
      }
      .tcher_leftbar nav ul li a{
        text-decoration: none;
        font-size: 24px;
        color: white;
      }
      
      .staff_pix_h1{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
        margin-top: -55px;
        border: none;
        outline: none;
        margin-bottom: 50px;
      }
      
      .staff_pix_h1>div{
        text-align: center;
       
      }
     
      .staff_pix_h1 p{
        margin-top: 75px;
        margin-right: 30px;
      }
      
      .staff_profile_pix{
        width: 70px;
        height: 70px;
        justify-content: center;
        align-content: center;
        border-radius: 50%;
        position:absolute;   
      }
      
      .staff_profile_pix img{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        position: absolute;
      }
      
      /* Close Styling the Staff profile page  */
      
      
      /*  Styling the class_count_sup  */
      .class_count_sup{
        min-width: 30px;
        min-height: 30px;
        align-items: center;
        border: 2px solid wheat;
        border-radius: 50%;
        padding: 2px;
        margin-left: -8px;
        font-size: 12px;
      }
      
      /*  Close Styling the class_count_sup  */
      
      
      /*  Styling the Score_sheet_form  */
      #download-scoresheet-wrapper{
        width: 50%;
        border: 2px solid rgb(111, 109, 109);
        padding: 20px;
        margin: 30px auto;
        background-color: #575252;
        border-radius: 0px 30px 0px 30px;
        
        
      }
      #scoresheet_fieldset{
        width: 100%;
        padding: 10px 30px;
        background-color: #6521aedf;
        position: relative;
        border-radius: 5px;
        
       
      }
      
      #scoresheet_fieldset legend{
        color: #fff;
        font-size: 12px;
      }
      .scoresheet_input{
        width: 100%;
        padding: 10px;
        /* margin-left: 10%; */
        outline: none;
        border: none;
        transition: .2s;
        font-weight: bolder;
        border-radius: 5px;
        cursor: pointer;
      }
      
      
      .scoresheet_input:hover{
        background-color: #686464;
        color:white;
      }
      .scoresheet_input.klass{
        margin-top: 30px;
        
      }
      .scoresheet_submit{
        width: 100%;
        padding: 5px 10px;
        margin-top: 20px;
        font-size: 24px;
        cursor: pointer;
        color: #f5f8f7e1;
        background-color: #1d4ddd;
        outline: none;
        border: none;
        border-radius: 20px;
        box-shadow: 0px 2px 0px 3px rgb(193, 187, 187);
        
        
      }
      
      .scoresheet_submit:hover{
        transition: .2s ease-in;
        background-color: rgb(119, 39, 39);
        color: white;
        
      }
      /*  Close Styling the Score_sheet_form   */
      
      
      /* Styling the Admin registration page */
      .admin_reg_wrapper{
        width: 100%;
        background-color: #e3dbdb;
      }
      
      .admin_reg_container{
        width: 80%;
        margin: 0 auto;
        border: 3px solid black;
        padding-left: 100px;
        padding-right: 100px;
        border-radius: 20px;
        background-color: rgb(251, 232, 232);
      }
      
      .admin_reg_container h1{
        text-align: center;
        margin: 30px;
        color: rgb(4, 103, 4);
        font-weight: bolder;
      }
      
      .admin_reg_container label{
        font-weight: bolder;
        
      }
      .admin_reg_group{
        width: 100%;
        height: 50px;
        
      }
      
      .admin_reg_group select{
        width: 100%;
        height: 50px;
        background-color: white;
        padding-left: 30px;
        border-radius: 5px;
        outline: none;
        border: none;
      }
      
      .admin_reg_group input{
        width: 100%;
        height: 100%;
       padding-left: 30px;
        padding-right: 30px;
        border-radius: 5px;
        border: none;
        outline: none;
      }
      
      .admin_reg_buttons{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
      
      
      .admin_reg_buttons input{
        width: 200px;
        height: 35px;
        cursor: pointer;
        color: white;
        font-weight: bolder;
        background-color: green;
        border-radius: 4px;
        border: none;
        outline: none;
        
      }
      
      .admin_reg_buttons input:hover{
        color:white ;
        font-weight: bolder;
        background-color:red;
        transition: .2s;
       
        
      }
      /* Close Styling the Admin registration page */
      
      
       /*  Styling the Admin Login page */
      .admin_login_wrapper{
        width: 100%;
       
      }
      
      .admin_login_wrapper h1{
        text-align: center;
        margin-top: 30px;
      }
      
      .admin_login_container{
        width: 50%;
        margin: 30px auto;
        padding: 20px;
        border-radius: 20px;
        /* border: 1px solid #0000ff; */
        box-shadow: 0px 0px 1px 3px gray;
      }
      
      .admin_login_container .login_group{
        width: 100%;
        height: 30px;
        padding-left: 20px;
        border: none;
        outline: none;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        font-weight: bolder;
        
      }
    
      .btn_admin_login_div{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        
      }
      
      .btn_admin_login_div>input{
        width: 200px;
        height: 45px;
        font-weight: bolder;
        margin-top: 40px;
        background-color: green;
        color: white;
        border: none;
        outline: none;
        border-radius: 5px; 
        cursor: pointer;
      
      }
      .btn_admin_login_div>input:hover{
        
        background-color: red;
     
      }
      #adm_login_port_session{
        position: absolute;
        top: 100px;
        right: 20px;
        color: green;
        font-style: italic;
        font-weight: bolder;
        
      }
      
      /* .admin_login_wrapper form{
        width: 100%;
        
      } */
      
      
       /* Close Styling the Admin Login page */
       
       
       
        /*  Styling the choose_sectiondiv div located at the header page */
       
       #choose_sectiondiv{
        width: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;z-index: 10000;
       
       }
       
       #choice{
        width: 50%;
        min-height: 60%;
        padding: 20px;
        background-color: whitesmoke;
        box-shadow: 1px 2px 4px 3px  gray;
        border-radius: 5px;
        position: fixed;
        top: 20%;
        left: 0;
        bottom: 20%;
        right: 0;
        margin: auto;
        overflow-y: auto;
        
       
       }
       
       #choice h3{
        text-align: center;
       }
       
       #the_section{
        width: 25%;
        min-height: 40%;
        background-color: whitesmoke;
        box-shadow: 1px 2px 4px 3px  gray;
        border-radius: 3px;
        position: fixed;
        top: 40%;
        left: 30%;
        bottom: 30%;
        right: 30%;
        margin: auto;
       padding: 20px;
       overflow-y: auto;
       
       }
       
       .sections {
       width: 80px;
        margin: auto;
       }
       .sections li{
        list-style-type: none;
        line-height: 30px;
        /* margin: auto; */
       }
       
        .sections li a{
        /* margin-left: 30%; */
        margin: auto;
         }
       
    .sections li:last-child{
        margin-bottom: 40px;
       }
       
       .section_btn_container{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        
        
       }
      
       .section_btn_container .btn_group{
        width: 150px;
        height: 30px;
        margin-left: 60px;
        background-color: green;
        color: white;
        font-weight: bolder;
        cursor: pointer;
        transition: .2s ease-in;
        border: none;
        outline: none;
        border-radius: 3px;
       }
       
       .section_btn_container .btn_group:hover{
      background-color: red;
        
        
       }
        /* Close Styling the choose_sectiondiv div */
        
        
     /* ..........  media query for admin container HERE BELOW..... */
@media screen and (min-width:820px) 
{
        .admin-container{
        justify-content: space-around;
        }
 
}
    
   /* ..........FOOTER  media query STYLES HERE BELOW..... */
 
@media screen and (max-width:815px) 
{
    
    .div_wall a{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .futa_wrapper {
    flex-direction: column;
}

.futa{
    width:100%;
    
}
.futa_services .p-services{
    border: none;
   
}

.futalinks>ul{
    text-align: left;
}
.futa_nav  {
    border: none;
    
}

.futa_contact>ul {
    border: none;
    text-align: left;
    
}


}
        /* footer media closed */
        
        /* result printout */
        @media all and (max-width: 800px){
            
            .result_printout{ 
                padding: 1rem .5rem;
                width: 100%;
               
            }
            
            #checkresult_body{
                padding: 10px;
                
            }
            
            #subject-header th{
                font-size: 11px;
            }
            #subject-row td{
                font-size: 12px;  
            }
            .header_text{
                font-size: 12px;
                line-height: 0.5;
                font-weight: bolder;
                font-family: Georgia, 'Times New Roman', Times, serif !important;
            
            }
            
            .result_top_div .result-header{
                
                margin-left: 5%;
            }
            
            .result_bottom_div #tbl_grade tr> td {
                font-size: 10px;
              }
              
              
              .result_bottom_div{
                flex-direction: column;
              }
              
              .comments_div {
                width: 100%;
              }
              
             
              
             
        }  
   
        
         /* The Hard copy styling */
         @media print and (max-width: 800px){
            
            .result_printout, .annual-result-div{ 
                padding: 5px;
                width: 700px;
               
            }
            .res_btn{
                display: none;
            }
            
            #btn_print, #print-annual{
                display: none;
            }
            
            .stamp-div{
                margin-top: 0px;
            }
            .header_text{
              line-height: 0px;  
            }
        
        }
        /* The Hard copy styling closed*/
        
        
        @media screen and (max-width:640px) 
{
    
    /* handle the nav links */
    main .nav-container{
        display: none;
    }
    
    .nav-container.top{
        display: none;
    }
    
    #checkresult_body{
        width:99%;
    }
    .result_logo_div{
        display: none;
    }
    

    .navicon-div, .admin-navicon-div{
        display: flex;
        width: 38px;
        height: 38px;
        margin-left: -90%;
        align-items: center;
        justify-content: center;
        position: absolute;
        border:  transparent;
        background-color: transparent;
        transition: .1s;
        border-radius: 5px;
    }
    
    /* media query of advert section in header.php */
    
       #advert-container{
        width: 90%;
        margin: 20px auto;
        padding: 20px 5px;
     
    }
    
      #advert-container img{
        width: 85%;
        border-radius: 20px;
        
    }
    
      #advert-container #advert-cancel{
        width: 30px;
        height: 30px;
        position: fixed;
        top:30px;
        right:30px;
        
    }
    /* /close media query of advert section in header.php */
    .navicon-div:hover{
       background-color: #d5cdcd;
    }
    .bars:hover{ 
        color: #575252; 
     }
    
     .admin-bars:hover{ 
        color: #575252; 
     }
     

     
    .side-bar  {
        position: absolute;
     }
     
     .p-team, .p-why{
        font-size: 18px;
        font-weight: bolder;
        line-height: 1;
     }
   
     .x-div, .admin-x-div{
        width: 36px;
        height: 36px;
        margin-left: 85%;
        position: absolute;
        top: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1px;
        border: transparent;
        outline: none;
        background-color: rgb(63, 69, 235) !important;
        transition: .2s;
        border-radius: 5px; 
        cursor: pointer;
    }
   
    .x-div:hover{
      background-color: #a09a9a !important;  
       cursor: pointer;
       color:#1a1818; 
    }
    
    .x-symbol{
         font-size:24px; color:beige !important;
         
    }
    
   
    .x-symbol:hover{
        cursor:pointer;
        
    }
     
    
    .bars
    {
    font-size:36px; color:beige !important;
    }
   
     
     .side-bar .nav-container ul li a {
        color: #f9f9f9;
        line-height: 35px; 
     }
     
     
     .side-bar .nav-container ul>:nth-of-type(5) {
        background-color:transparent;
       border-top: 1px solid #fff;
       padding: 10px 20px;
    }
     
    .nav-container{
        opacity: 1;
        background-color: transparent;
    }
    .nav-container ul{
        flex-direction: column;
        font-weight: normal;
        width: 100%;
        margin: 0 auto;
        background-color: transparent; 
        
    }
    .side-bar .nav-container ul li{
       
        border-bottom: 1px solid #f3efef;
        margin-bottom: 1rem;  
        
       
    }
    
     .side-bar .nav-container ul li:hover>ul{
       display: none;
    } 
    
      .side-bar .nav-container ul li ul{
       background-color: blanchedalmond;
    }
    
     .side-bar .nav-container ul li ul a{
       color:#0000ff
    }
    
    .logo-container.htc{
        display: none;  
    }
    .site-name{
        
         transform: translateX(45%);
        
    }
    
    /* styling the admin media query */
    
    .admin-wrapper .admin-sidebar{
        display: none;
    }
    
    .admin-container{
        width: 100%;
        padding: 5px 5px;
        flex-wrap: wrap;
        margin-left: 0px; 
        justify-content: space-evenly; 
    }
    
    .header-wrapper.admin .site-name{
        transform: translateX(25%);  
   }
   
   .header-wrapper.admin .motto{
    transform: translateX(-25%);
    font-size: 16px;  
}
.header-wrapper.admin .admin-pix-div{
    display: none;
}

  .header-wrapper.admin .site-name-container h1{
    font-size: 15px; 
   }
   
   /* media query for admin manage_result page below: */
   .result-management-wrapper{
    width: 100%;
    padding: 5px;
 }
   
   .result-management-container h1{
    font-size: 18px;
   }
   
   .result-management-container {
    padding: 0px;
    width: 100%;
    
   }
   
   .btn-reset-result-input, .btn-views-result{
    width: 100%;
    background-color: green;
    color: white;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
 }
 
 .btn-views-result{
    font-size: 12px;
 }
 /*  close media query for admin manage_result page */
   
   
   /* close styling the admin media query  */
    
    .nav-container li{
        color: #f9f9f9;
        background-color: transparent; 
       
    }
    
    .site-name-container h1{
        font-size: 1.2rem;
      
    }
    
    .site-name-container {
        margin-left: -80%;  
    }
   
    .motto {
        margin-right: -40%; 
    }
    /* ..............Admin View Student profile  MEDIA QUERY....... */
    .std_search_group{
        width: 100%;
        margin-left: 0px;
    }
    
    .search_input{
        max-width: 200px;
        min-height: 25px;
        font-size: 10px;
     }
    
    .student_profile_wrapper{
        padding: 5px;
    }
    .student_profile_container{
        padding: 2px;
    }
    /* ......... Close Admin View Student profile  MEDIA QUERY....... */
    
    /* ......... styling Admin staff enrollment form  MEDIA QUERY....... */
    .frm_staff_enrollment{
        padding: 0px;
    }
    .staff_group{
        padding: 2px 5px;
    }
    .staff_wrapper{
        padding: 2px;
    }
    .staff_container{
        padding: 4px;
    }
    #btn_enroll_staff{
        width: 100%;
    }
    /* ......... close Admin staff enrollment form  MEDIA QUERY....... */
    
    /* .........  Admin subject registration form  MEDIA QUERY....... */
    .subject_reg_div div{
        width:  100%;
        
     }
    /* .........close  Admin subject registration form  MEDIA QUERY....... */
    
    /* Styling the Teacher Login page */
    .staff_btndiv {
        flex-direction: column;
    }
    .staff_login_wrapper, .staff_login_content {
        padding-left: 2px;
        padding-right: 2px;
        
    }
    
    .tcher-login-input-div{
        width: 100%;
    }
    
    .tcher_profile_container{
        display: flex;
       flex-direction: column;
   
    }
    
    .tcher_rightbar, .tcher_leftbar{
        width: 100%;
        
    }
    
    .tcher_rightbar{
        margin-left: 0px;
    }
    
    .tcher_profile_h1{
       margin-left: 40px; 
       font-size: 16px;
       margin-bottom: 40px;
    }
     /* Close Styling the Teacher Login page */
    
     /* Styling the Admin registration page */
     .admin_reg_container{
        padding-left: 5px;
        padding-right: 5px;
      }
      
      .admin_reg_buttons{
        width: 100%;
       flex-direction: column;
       gap: 20px;
      }
      
      /* Close Styling the Admin registration page */
    
    /* Styling the Admin login page */
      .btn_admin_login_div{
       flex-direction: column;
       gap: 20px;
      }
      
      .admin_login_container{
        width: 100%;
        padding-top: 40px;
     
      }
      /*  Styling the choose_sectiondiv */
      
      
      /* Query Styling the Admin login page */
      #choice h3{
        font-size: 12px;
       
       }
       
       #the_section{
        padding: 2px;
       }
       
       .sections li a{
        font-size: 12px;
       }
       .section_btn_container{
        padding: 2px;
       }
       .section_btn_container .btn_group{
        width: 100%;
        margin: auto;
       }
       
       
      /* Close query Styling the choose_sectiondiv */
      
      
      
    /* ..............STYLING THE HISTORY SECTION MEDIA QUERY....... */
    
    .about-wrapper{

        width: 100%;
        padding: 10px;
        margin-top: 0.5rem;
        
    }
    .section-history{
        width: 100%;
        padding: 10px;
    }
    .history-div{
        width: 100%;
    }
    
    
    
    
    /* .....media query about..... */
    
    .about, .about-container{
        width: 100%;
        padding: 10px;
    }
   
   
      
    /* ------------------- THE AOS MEDIA STYLES------------- */
    .aos-card{
        display: block;
    }
    
    .aos-header h1{
        font-size: 3rem;    
    }
    
    .aos-card>div{
        
        overflow:auto;
 
  }
    
  
  /*  Styling the media screen for Score_sheet_form  */
  #download-scoresheet-wrapper{
    width: 100%;
    padding: 20px;
    margin: 10px auto;
   
  }
  #scoresheet_fieldset{
    padding: 4px 10px;
    
  }
  
  #scoresheet_fieldset legend{
    font-size: 10px;
  }
  .scoresheet_input{
    width: 100%;
    padding: 8px;
   
  }

  .scoresheet_input.klass{
    margin-top: 20px;
  }
  
  .scoresheet_submit{
    padding: 5px 10px;
    margin-top: 15px;
    font-size: 16px;
 
  }

  /*  Close Styling the Score_sheet_form   */
  
  
}
/* media........ 640 closed........ */
        
        

   @media screen and (max-width:600px) 
   {
    .res_btn{
        /* check result button */
        font-size: 1rem;
    }
   }
   
   
   /* -------------STYLING THE RESULT --------------------- */
@media all and (max-width:540px) {
    .result_form_wrapper .result{
    width: 11rem;  
    }
    
    .contacts-wraper{
        width:  100%;
        padding: 20px;
    }

}


@media screen and (max-width: 400px){
    .futa_wrapper{
       width: 100%;
       overflow:auto;
    }
    
    .result_check_wrapper{    
        padding: 10px;
       } 
       
       
      /* media for very small screen for result print out */ 
      .result_printout table td{
        font-size: 10px;  
        }

        .header_text, .status {
            font-size: 11px;
            line-height: 0px;
        } 
        
        .first-line.first-line{
            font-size: 11px;
        }
 }
       
 @media screen and (max-width: 320px){
    .admin-container a{
        width: 100%;
    }
    
    }
    




/*.................. STYLING THE PRINTOUT ...............HERE */

.header_text, ::before ::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   } 
   
   /* The result_printout div is set to a fixed width of 1000px so that it will have enough space for all it's children tables like bio-data and subjects tables to float inside it */
   .result_printout{
          width:1000px;
          padding:2px; 
          margin: 7rem auto;
          background-color: #fff !important;
          border-radius: 12px;
          border: 3px solid black !important;
           
           
         }
         
         .result_top_div .result-header{
            margin-left: 20%;
           }
         
    .result_top_div{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
         
         }
         
          .result_logo_div{

          width: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius:50%;
          margin-top: 20px;
         
         }
         
         .result_logo_div img{
          width: 100%;
          height: 100%;
          border-radius:50%;
         }
      
         .header_text{
          font-size: 14px;
          text-align: center;
          line-height: 0.5px;
          padding: auto;
          margin: 1rem;
          font-family: robotto !important; 
          font-weight: bold;
          
         }
        
         .first-line.first-line{
            font-size: 16px;
            font-weight: bolder;
            font-family: robotto !important; 
         }
          
         /* set the width of the biodata table and subject table to 100% to make them float inside the result_printout div */
    .result_printout #printout-biodata-table, #printout-subjects-table{
          align-self: center;
          width: 100%;
          border-collapse: collapse;
         } 
         
         .result_printout table th{
          background-color: darkblue !important;
          color: #fff;
          
         } 
         
         .result_printout table tr:nth-child(even){
          background-color: #f5f5f5 !important;
         } 
         
        #next-term, #subject, #remark{
         text-align: left;
         }
         
         .result_printout table td{
         text-align: center;
         border: 1px solid black !important;
            
         }
         
        
         
          .h2-result-details{
          text-align: center;
          font-weight: bolder;
          padding: 0;
         }
         
         .td-result-details{
          padding: 0;
         }
         
         .comments_div{
          width: 65%;
          /* border: 1px solid red; */
          padding: 10px;
      
         }
         
         .stamp-div{
            width: 40%;
            height: 7rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            border: none;
            outline: none; 
            border-radius: 20%;
         }
         
         .stamp-div img{
            width: 100%;
            height: 100%;
            border-radius: 20%;
        
         }
         
         
         #span_date{
          text-align: right;
         }
         
         .result_bottom_div{
          width: 100%;
          display: flex;
          justify-content: space-between;
          justify-items: center;
          
         }
         
         .status-div{
            width: fit-content;
           background-color: #1a1818;
           color: #f9f9f9;
           padding: 5px;
           border-radius: 3px;
         }
         
         .status-div .statusx{
            font-style: italic;
            font-family: arial black !important;
         }
         
         .grade_keys_div{
            width: 25%;
            border: 1px solid gray;
         }
         
         .grade_keys_div #tbl_grade{
            width: 100%;
         }
      
         .result_bottom_div #tbl_grade tr> td {
            
            font-size: 11px; 
          }
          
         
        
          
        
        /* ***********styling the annual table *************************/
        .annual-result-div-wrapper{
            width: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            padding:30px 40px;
            border:3px solid whitesmoke;
            background-color: rgba(0, 0,0, 0.7) !important;
            border-radius: 5px;
            position: fixed;
            display: none;
            overflow: auto;
        }
        
        #annual-table-wrapper{
            width: 1000px;
            margin: 0 auto;
            border: 3px solid whitesmoke;
        }
        
        .annual-result-div{
            width: 100%;
            margin: 0 auto;
            padding: 20px;
            border:3px solid whitesmoke;
            background-color: whitesmoke !important;
            border-radius: 5px;
         
        }
       
        
        #buton-div{
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-evenly;
            
        }
         
        #btn_view_annual,  #btn-print {
            width: 200px;
            cursor: pointer;
            padding: 5px;
            background-color: green;
            color: #f5f5f5;
            border: none;
            outline: none;
            border-radius: 5px;
            font-weight: bolder;
            
        }
        
        
        .annual-table-div{
           width: 100%;
           margin: 0 auto;
           border:1px solid whitesmoke;
          
        }
        
        .table-of-table-div{
            width: 100%;
             margin: 0 auto; 
            border: 2px solid whitesmoke;
        } 
        
       
        
        #annual-top-div{
          display: flex;
          flex-direction: row; 
          margin-top: 5px; 
          margin-bottom: 5px;
          align-items: center;
          justify-content: space-evenly;
        }
        
        .annual-caption{
            width: 70%;
            border: none;
            text-align: center;
            font-weight: bolder;
            font-size: 16px;
            background-color: darkblue !important;
            color: #f5f5f5;
            padding: 5px;
            border-radius: 5px;
            margin-left: -200px;
            /* word-wrap: break-word; */
        }
        
        .result_logo_div{
            margin-left: -200px;
        }
        
        .annual-table-div{
           display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
            margin: 0 auto;
        
        }
        
        .annual-f-table tr:nth-child(odd){
            background-color: #f5f5f5 !important;
        }
        .annual-f-table, .annual-s-table, .annual-t-table, .annual-annual-table, .annual-grade-table, .annual-remark-table, .annual-grand-total-table, .promotion-table, .annual-position-table, .subject-ave-table{
            border-collapse: collapse;
            text-align: center;
            padding: 0px; 
        }
        
        .annual-f-table td{
            border: 1px solid black;
            padding: 2px;
            font-size: 12px;
        }
        
        .annual-f-table #f-table-td{
            text-align: left;
            padding: 2px;
        }
        .annual-s-table td{
            /* border: 1px solid black; */
            padding: 2px;
        }
        #s-td{
            text-align: left;
        }
        .annual-t-table td{
            border: 1px solid black;
            padding: 2px;
            font-size: 12px;
        }
        .annual-s-table td{
            border: 1px solid black;
            padding: 2px;
            font-size: 12px;
        }
        
        .annual-annual-table td{
            border: 1px solid black;
            border-collapse: collapse;
            padding: 2px;
            font-size: 12px;
        }
       
        
        .annual_table{
            width: 100%;
            height: 100%;
            /* border: 1px solid black; */
            
        }
        
        .annual_table td{
           padding: 5px;
            border: 1px solid black;
            font-size: 10px;  
        }
    
        .annual-grade-table td{
                border: 1px solid black;
                padding: 2px;
                font-size: 12px;
        }
        
        .annual-remark-table td{
            border: 1px solid black;
                padding: 2px;
                font-size: 12px;
        }
        
        .promotion-table td{
            border: 1px solid black;
                padding: 2px;
                font-size: 12px;
        }
        
        .annual-status-table td{
            border: 1px solid black;
            padding: 2px;
            font-size: 12px;  
        }
        
        .annual-grand-total-table td{
            border: 1px solid black;
            padding: 2px;
            font-size: 12px;
        }
        .subject-ave-table td{
            border: 1px solid black;
            padding: 2px;
            font-size: 12px; 
        }
        
        .tbl_grade.annual{
            width: 200px; 
            text-align: center; 
          }
       
        #print-annual{
         width:400px;
        height:50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: green;
        color: #f5f5f5;
        font-weight: bolder;
        border: none;
        outline: none;
        border-radius: 5px;
        padding: 5px;
        font-size: 18px;
        cursor: pointer;
        }
       
        .tbl_grade.annual{
          width: 200px;  
        }
        .tbl_grade.annual th{
            font-weight: bold;
            color: #f5f5f5;
            background-color: darkblue !important;
        }
        .tbl_grade.annual td{
            font-size: 10px;
            margin-top: 0;
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        .annual-status{
            width: 70px;
            font-weight: bolder; 
            padding-left:5px;
            padding-top:5px; 
            padding-bottom:5px; 
            font-size:16px; 
            font-style:italic; 
            border-right:white;
            font-style: italic;
        }
        .annual-promotion-td{
            font-weight: bold; 
            font-size:24px;
            padding-left: 0px;
            border-left:white;
            font-style: italic;
            width: 120px;
            background-color: rgba(240, 235, 235, 0.9);
        }