@media screen and (max-width: 768px) {
    #GateLogsInformation{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }  
    .second-content {
        grid-template-columns: 1fr; /* Switching to a single column layout */
        grid-template-areas:
            "rfid"
            "photo"
            "form";
    }
    #GateLogsInformation {
        position: absolute; /* Change to absolute positioning */
        top: 80%; /* Adjust as needed for your layout */
        left: 50%; /* Adjust as needed for your layout */
        transform: translate(-50%, -50%);
    }
.cont-form{
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 500px;
    margin-bottom: 30px;
}  
.facultyPicture{
   
    width: 200px;
    height: 200px;
    
}
.photo{
    margin-bottom: 20px;
}
.facultyPicture{
    order: 1;
}
.photo {
    grid-area: photo;
    order: 1;
}
.in {
    height: 30px;
    width: 200px;
    font-size: 16px;
    padding-left: 5px;
   
    margin-bottom: 10px;
    }
    .thname{
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20px;
    }

.upper-container{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 25px;
}
.time-container{
    display: none;
}
.text-container{
    text-align: center;
    padding-right: 0px;
    line-height: 20px;
    
}
.header-name{
    font-size: 12px;
    line-height: 8px;
}
    .main-header{
        display: flex;
       
       
    }
    .logo{
        width: 50px;
        margin-left: 3px;
    }
    .pic1{
        height: 50px;
        width: 50px;
        border-radius: 50%;
    }
    .profile{
        height: 50px;
        width: 50px;
        position: absolute;
        top: 2px;
        right: 10px;
    }
    .nav-bar{ 
        height: 0px;
        position: absolute;
        top: 73px;
        left: 0px;
        right: 0px;
        width: 100vw;
        transition: 0.2s;
        font-size: 15px; 
        overflow: hidden;
        background: #800000;
        z-index: 2;
    }

    .nav-bar ul{
        display: block;
        width: 95%;
        margin: 15px 10px 0 10px;
        align-items: center; 
    }
    .nav-bar.active{
        height: 160px;
    }
    .tab{
        display: flex;
        align-items: start;
        justify-content: left;   
        background-color: #800000;
        border-radius: 0;
        width: 100%;
        margin-top: 0px ;   
    }
    .tab.active{
        background-color: #800000;
        font-weight: bold;
        color: white !important;
        border-bottom: white solid 2px;
        font-size: 13px;
    }
    .tab.active:hover {
        background-color: initial;
      }
  
     table {
        width: 1000px;   
    }
    th{
        position: sticky;
        font-size: 10px;
    }
    td{
        font-size: 10px; 
    }
    .leftpicture{
      display: none;
    }
    .tf1{
        width: 190px;
        height: 20px;
        border: solid maroon 2px;
        border-radius: 10px;
        margin-bottom: 8px;
        padding: 4px;
        border-radius: 10px;
        outline: maroon;
    }
    .middle-content{   
        overflow: auto;
        height: 450px;
        width: 350px;
        margin-left: 15px;
        margin-bottom: 100px;
        justify-content: center;
    }
   
    .left-content{
        margin-bottom: 10px;
    }

} 
@media screen and (max-width: 430px) {
    .header-name{
        font-size: 8px;
        line-height: 4px;
    }
    .logo{
        width: 30px;
        margin-left: 3px;
    }
    .pic1{
        height: 30px;
        width: 30px;
    }
    .profile{
        height: 30px;
        width: 30px;
    }

    .nav-bar{ 
        height: 0px;
        position: absolute;
        top: 50px;
        left: 0px;
        right: 0px;
        width: 100vw;
        transition: 0.2s;
        font-size: 10px; 
        overflow: hidden;
        background: #800000;
    }
    .nav-bar ul{
        display: block;
        width: 90%;
        margin: 15px auto 0 10px;
        align-items: center;     
    }
    .nav-bar.active{
        height: 160px;
    }
    .tab{
        display: flex;
        align-items: start;
        justify-content: left;
        color: white;
        text-align: center;
        background-color: #800000;
        border-radius: 0;
        width: 100%;
        margin-top: 0px ;
        font-size: 8px;
    }
    .tab.active{
        background-color: #800000;
        font-weight: bold;
        color: white !important;
        border-bottom: white solid 2px;
        font-size: 13px;
    }

    .top{ 
        
        display: flex;
        width: 100%;
        justify-content: space-around;
        margin-top: 10px;
    }

 
     table { 
        width: 1000px;    
    }
    th{
        position: sticky;
        font-size: 10px;
    }
    td{
        font-size: 10px;     
    }
    .leftpicture{
      display: none;
    }
    .tf1{
        width: 170px;
        height: 15px;
        border: solid maroon 2px;
        border-radius: 10px;
        margin-bottom: 8px;
        padding: 4px;
        border-radius: 10px;
        outline: maroon;
    }
    .middle-content{   
        overflow: auto;
        height: 450px;
        width: 330px;
        margin-left: 15px;
        
        justify-content: center;
        margin-bottom: 100px;
    }

   
    .left-content{
        margin-bottom: 10px;
    }
   
    .second-content {
        grid-template-columns: 1fr; /* Switching to a single column layout */
        grid-template-areas:
            "rfid"
            "photo"
            "form";
    }
    
    .photo{
        margin-bottom: 20px;
    }
    .facultyPicture{
        order: 1;
    }
    .photo {
        grid-area: photo;
        order: 1;
    }
}