/*---------GENERAL EDITS FOR ENTIRE ALL FOR ALL PAGES STARTS HERE---------------GENERAL EDITS FOR ENTIRE ALL FOR ALL PAGES STARTS HERE HERE-------------------- */
/*---------GENERAL EDITS FOR ENTIRE ALL FOR ALL PAGES STARTS HERE---------------GENERAL EDITS FOR ENTIRE ALL FOR ALL PAGES STARTS HERE HERE-------------------- */
/* MAIN DIV BODY  */

body{
    color: #eee5e5d7;
    background-color: rgba(198, 190, 190, 0.87);
    /* background-color: var( --other); */
    background-color: var( --test-body-col);
    /* background-image:url(../ag-new-grid-template/images_background/pexels-brett-sayles-3653997.jpg) no-repeat; */
    
}

/* MAIN DIV BODY  */


/* CSS VARIABLES - DEFINE YOUR VARIABLES AND THEN USE THEM IN OTHER PARTS OF THE CODE AND CHANGE COLOR FROM :ROOT HERE */
/* THIS CAN BE ACCESS IN OTHER PARTS OF OUR CODE */
:root {
    --primary: #8c38ff;
    --light: #EEEEEE;
    --dark: #212121;
    --other: #5eb493;
    --grey: #b6a0cd2c;
    --dark-light: rgba(34, 77, 83, 0.888);
    --words-color:rgb(21, 104, 62);
    --nav-graycolor:rgb(68, 80, 80);
    --main-col: #0c1415a1;
    --footer-color: rgb(36, 41, 41);
    --footer-head-color: rgba(31, 141, 204, 0.888);
    --test-body-col: rgba(6, 60, 92, 0.888);



}

/* MARGIN AND TEXT TYPE FOR OUR PAGE */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Fira sans', sans-serif;
    /* box-sizing:border-box; */
}


/*----------------NEW NAV BAR TO USE START HERE--------------NEW NAV BAR TO USE START HERE---------------NEW NAV BAR TO USE START HERE--------------------------*/
/*----------------NEW NAV BAR TO USE START HERE--------------NEW NAV BAR TO USE START HERE---------------NEW NAV BAR TO USE START HERE--------------------------*/


/* ------ CONTAINER HOLDING OUR NAVBAR CAN RESIZE NAVBAR WIDTH ETC START----------------------------------------------------- */
.container-nav{
    width:100%;
    position:fixed;
    margin: 0 auto;

    display:flex;
    align-items:center;
    justify-content:space-evenly; /*space-between orginal value*/
    background-color: var( --dark-light);
    z-index: 9999;

}

/* ------ CONTAINER HOLDING OUR NAVBAR CAN RESIZE NAVBAR WIDTH ETC  ENDS----------------------------------------------------- */


/* -----------------NAVBAR MENU THREE LINES BUTTON WHEN PAGE RESIZE EDITS STARTS------------------------------------------- */
.nav {
    position:fixed;
    top:0;

    top:0;
    left:0;
    right:0;
    background-color: var( --dark);
    padding: 16px 32px; 
    border-bottom: 3px solid var(--primary);
}

/* This adjust our logo text */
h1 a {
    color:rgb(25, 130, 169);
    font-size:40px;
    font-weight: 900px;
    letter-spacing: 2px;
    text-transform:uppercase;
}

/* Dropdown menue for icon  */

.hamburger{
    display: block;
    position:relative;
    float:right; /*i put this in  right*/
    z-index: 1;
   
    user-select: none;
   
    appearance:none;
    border:none;
    outline: none;
    background: none;
    cursor:pointer;
   
   }

   /* MENU ICON EDIST */
.hamburger span {
    display: block;
    width: 40px;
    height:4px;
    margin-bottom: 5px;
    /* margin-right:10px; */
    position: relative;

    background-color: var(--light);
    border-radius:6px;
    z-index: 1;

    transform-origin:0 0;

    transition: 0.4s;
}
/* THIS DEALS WITH THE MOVEMENT OF OUR MENU ICON */
.hamburger:hover span:nth-child(2) {
    transform: translateX(10px);
    background-color: var(--primary);
 
 }
 /* THESE ARE USED TO TRANSFORM OUR SPAN THAT MAKE MENU */
.hamburger.is-active span:nth-child(1){
    transform: translate(0px, -2px) rotate(45deg);

}
.hamburger.is-active span:nth-child(2){
    opacity:0;
    transform: translateX(15px);
}

.hamburger.is-active span:nth-child(3){
    transform: translate(-3px, 3px) rotate(-45deg);
}

.hamburger.is-active:hover span {
     background-color: var(--primary);
}

/* -----------------NAVBAR MENU THREE LINES BUTTON WHEN PAGE RESIZE EDITS   ENDS------------------------------------------- */

/*-------------- THESE ARE USED TO TRANSFORM OUR SPAN THAT MAKE NAV MENU START--------------------------------- */
.menu{
    display:none;
    flex:1 1 0%;
    justify-content:flex-end;
    margin: 0 100px;  /*-16px*/


}

/* This is for our search button */
.menu .search{
    color: var(--light);
    margin: 0 16px;
    font-weight: 600;
    text-decoration:none;
    transition: 0.4s;
    padding: 8px 16px;
    border-radius: 99px; /*this put the circle edges around our selected nav icon*/
    cursor:pointer;

}

.menu  a  {
    color: white;
    margin: 0 16px;
    font-weight: 600;
    text-decoration:none;
    transition: 0.4s;
    padding: 8px 16px;
    border-radius: 99px; /*this put the circle edges around our selected nav icon*/
}

/* This actually is what cause our selected nav icon to change color */
.menu a.is-active, .menu a:hover,.menu .search:hover,.list-drop .nav-link7:hover {
    background-color: var(--footer-head-color);


}

@media (min-width:768px) {
    .hamburger {
        display:none;
    }
    .menu {
        display:flex;
    }

    .navbar {
        display:none;
    }

}

/*------------------------------ DROPDOWN NAV BAR STYLE SECTION STARTS--------------------------------------------- */

/* Navbar styles */
.navbar {
  background-color: #b3a5a5; /* Change the background color */
   background-color: transparent; /* Set background to transparent */
  padding: 10px; /* Add some padding for spacing */
  text-align: right; /* Center the content */
}

/* Hamburger styles */
.hamburger {
  display: inline-block; /* Display as inline-block for proper alignment */
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  background-color: white; /* Change the color of the hamburger lines */
  border-radius: 6px;
}

/* Dropdown button styles */
.dropbtn {
  font-size: 16px;
  color: white;
  background-color: inherit;
  border: none;
  padding: 14px 16px;
  cursor: pointer;
}

.dropbtn:hover {
  background-color: rgba(31, 141, 204, 0.888);
}

/* Dropdown content styles */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(55, 60, 63, 0.63);
  box-shadow: 0px 8px 16px 0px rgba(58, 57, 57, 0.2);
  z-index: 1;
  text-align: center; /* Align text to the left */
}

.dropdown-content a {
  color: white;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #212121;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* List items styles */
.list-drop {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list-drop li {
  padding-bottom: 5px;
}

  /*---------------DROPDOWN NAV BAR STYLE SECTION ENDS--------------------------------------------------------- */

  /*----------------NEW NAV BAR TO USE END HERE--------------NEW NAV BAR TO USE END HERE---------------NEW NAV BAR TO USE END HERE--------------------------*/
/*----------------NEW NAV BAR TO USE END HERE--------------NEW NAV BAR TO USE END HERE---------------NEW NAV BAR TO USE END HERE--------------------------*/



/*---------------------------- BANNER OF PAGE  STARTS------------------------------------------------------------ */

.jumbotron{
    /* background-color:rgba(216, 86, 63, 0.932); */
    /* background-image: url(images/banner-1.jpg); */
    background-size: 100% no-repeat;
}

.banner_image{
    height:500px;
}

/* my slide container box */
.slideshow_box{
    max-width: 100%;
    position: relative;
    margin: auto;
}

/* Hide banner images by default */
.mySlides{
    display:none;
}
/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position:absolute;
    top:50%;
    width:auto;
    margin-top: -12x;
    padding:16px;
    color:white;
    font-weight:bold;
    font-size:18px;
    transition:0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(70, 65, 65, 0.8);
  }

  /* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active, .dot:hover {
    background-color: #717171;
  }

  /* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }


/* Your existing styles for larger screens */







/*---------------------------- BANNER OF PAGE  ENDS------------------------------------------------------------ */

/*---------CONTAINER MAIN EDTING STARTS--------------------CONTAINER MAIN EDTING STARTS---------------------CONTAINER MAIN EDTING STARTS------------------------ */
/*---------CONTAINER MAIN EDTING STARTS--------------------CONTAINER MAIN EDTING STARTS---------------------CONTAINER MAIN EDTING STARTS------------------------ */
.container{

}


/*---------CONTAINER MAIN EDTING ENDS--------------------CONTAINER MAIN EDTING ENDS---------------------CONTAINER MAIN EDTING ENDS------------------------ */
/*---------CONTAINER MAIN EDTING ENDS--------------------CONTAINER MAIN EDTING ENDS---------------------CONTAINER MAIN EDTING ENDS------------------------ */









/*---------FOOTER EDTING STARTS--------------------FOOTER EDTING STARTS---------------------FOOTER EDTING STARTS------------------------ */
/*---------FOOTER EDTING STARTS--------------------FOOTER EDTING STARTS---------------------FOOTER EDTING STARTS--------------------- */
.foot_box  {
    display:flex;
    height:300px;
    flex:1;
   background-color: var(--dark-light);

}

.foot-heads {
    margin-left:20%;
    padding-top: 15px;
    font-size: 1.5rem;
        /* color: rgba(172, 123, 123, 0.815); */
    /* color: rgb(204, 31, 31); */
    color: rgba(31, 141, 204, 0.888);


}

.foot_box > div  {

    flex:1;
  background-color:#232f36;
  /* background-color: var(--dark); */
  /* background-color: rgb(28, 32, 32); */
  --test-body-col: rgba(6, 60, 92, 0.888);
  background-color: rgba(6, 60, 92, 0.888);


   

}

.footer_list > li{
    list-style-type: none;
    margin-left:20%;
    padding-top: 10px;
    padding-bottom:10px;

}


.footer_list li > a {
    text-decoration: none;
    font-size: 1.2rem;
    
    color:rgba(244, 235, 235, 0.877);
    color: white;
  
}

/*---------FOOTER EDTING ENDS---------------------------FOOTER EDTING ENDS---------------------FOOTER EDTING ENDS------------------------ */
/*---------FOOTER EDTING ENDS---------------------------FOOTER EDTING ENDS---------------------FOOTER EDTING ENDS--------------------- */

/*---------FOOTER EDTING END-------------------------------------------------- */
/*---------FOOTER EDTING END-------------------------------------------------- */
/*---------FOOTER EDTING END-------------------------------------------------- */




/* -----AJUST OUR PAGE WHEN ITS RESIZE-------------WEBKIT-----------------------------*/
/* -----AJUST OUR PAGE WHEN ITS RESIZE-------------------------------------------*/
@media (min-width: 768px) and (max-width: 1199.98px) {  }

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

    /* THis resize our header which consist of our navbar */
    .head{
        max-width:inherit;
        overflow-x: hidden; /*prevent our page from scrolling left or right*/
    }

    /* This resize our image the screen size */
    .page_image {
        max-width:inherit;
    }
     
    /* TESIZE OUR TEMPLATE TO SHOW ON MOBILE ONE BOX ONLY */
    .container{
        grid-template-columns: 1fr 1fr;
        grid-auto-flow:dense;
        margin-left: 15%;
        margin-right: 15%;

        /* background:var(--dark); */
        /* box-shadow: 0px 0px 15px 15px rgba(122, 119, 109, 0.39); */


    }


    /* THIS REMOVES ANY BOX WE WANT WHEN USING MOBILE VIEW EG box 10 and menu is removed */
    .container > #content_10 , #menu {
     display:none;
 
    }

     /* .nav-link3 ,.nav-link4 ,.nav-link5 {
        display:none;
    } */

    .edit_button {
        margin-top:3px;
    }

    /* Change our footer from row to column */
    .foot_box{
        flex-direction:column;
    }


}


/* -----AJUST OUR PAGE WHEN ITS RESIZE-------------------------------------------*/
@media only screen and (max-width: 600px){

  /* THis resize our header which consist of our navbar */
  .head{
      max-width:inherit;
      overflow-x: hidden; /*prevent our page from scrolling left or right*/
  }


  .container-nav{
      display:flex;
      /* flex-direction:row-reverse; */
      flex-direction: column;

      margin:0;
  }

  .logo {
      font-size: 2.2rem;


  }

  .navbar{
      width:370px;
      /* inline-flex */
      display:list-item;
      /* margin-left:-10px; */
      padding-right:20px;
      padding-left:20px;
      margin-left:30px;
      margin-right:20px;

       
  }

  /* This resize our image the screen size */
  .page_image {
      max-width:inherit;
  }
   
  /* TESIZE OUR TEMPLATE TO SHOW ON MOBILE ONE BOX ONLY */
  .container{
      grid-template-columns: 1fr;
      grid-auto-flow:dense;
      margin-left: 0%;
      margin-right: 0%;
      grid-gap:5px;


  }

  /* THIS REMOVES ANY BOX WE WANT WHEN USING MOBILE VIEW EG box 10 and menu is removed */
  .container > #content_10 , #menu, #content_1, #row-1 {
   display:none;

  }



  .nav-link3 ,.nav-link4 ,.nav-link5 {
       display:none;
  } 

  .edit_button {
      margin-top:3px;
  }

  /* Change our footer from row to column */
  .foot_box{
      display:grid;
      grid-template-columns: 1fr;

  }

  .box{
      width:400px;
      height:400px;
      border: .5px solid rgba(247, 244, 244, 0.95);
      border-radius:15px;
  
      /* border: 1px solid var(--primary); */
      /* box-shadow: 0px 0px 15px 15px rgba(55, 54, 51, 0.39); */

  
  
  }




}




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

    /* TESIZE OUR TEMPLATE TO SHOW ON MOBILE ONE BOX ONLY */
    .container{
        grid-template-columns: 1fr;
        grid-auto-flow:dense;
        margin-left: 0%;
        margin-right: 0%;

    }

    .container-nav{
        display:flex;
        /* flex-direction:row-reverse; */
        flex-direction: column;

        margin:0;
    }

    .logo {
        font-size: 2.2rem;


    }

    .navbar{
        width:350px;
        /* display:inline-flex; */
        margin-left:-15px;


         
  }

    /* THIS REMOVES ANY BOX WE WANT WHEN USING MOBILE VIEW EG box 10 and menu is removed */
    .container > #content_10 , #menu {
     display:none;
 
    }

     .nav-link3 ,.nav-link4 ,.nav-link5 {
        display:none;
    } 

    .edit_button {
        margin-top:3px;
    }



    /* Change our footer from row to column */
    .foot_box{
        flex-direction:column;
    }
 
    .foot_box > div  {

        flex:1;
       background-color:#2C82B5;
       background-color: var(--dark);
    
    }
    
    .footer_list > li{
        list-style-type: none;
        margin-left:20%;
        margin-right:20%;
        padding-top: 10px;
        padding-bottom:10px;
    
    }
    
    
    .footer_list li > a {
        text-decoration: none;
        font-size: 1.2rem;
        
        color:rgba(252, 249, 249, 0.97);
        color: white;
      
    }

}



/* -----------------------------move items on box services-------------------------------------- */

.service-box {
     /* display:grid; */
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* grid-column-end: span; */
    margin-left: 50px;;
    justify-content: center;
    margin:0;
    margin-top:50px;
    background-color: var(--light);
}

.ser-box{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;



}


.service-pic{
    /* width: 400px; */
    /* height:400px; */
    margin: 10px;
    transition: all 1s;
}

img:hover {
    transform: scale(1.1);
}

h1:hover {
    transform: scale(1.1) ;
}

/* -----------------------------move items on box services-------------------------------------- */
.main-container{
    width:1200px;
    margin:auto;
}

.about-wrapper{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));  
    padding-top:50px;
    padding-bottom:50px;
    padding-right:10px;
    padding-left:10px;
    gap:100px;
    /* column-gap: 50px; */
     /* row-gap:50px; */
  
}



/* ------------------------------------------------------------------------------------------------ */
.job-opening-box{
    display:grid;

    grid-template-rows: 1fr ;
    grid-template-areas: ' job-opening-box ' ;
    /* margin:10px; */
    justify-content: center;



}

.jobs{

    color:rgb(27, 26, 26);
    margin:10px;
    justify-content: center;
}

.form-box{
    display: grid;
    justify-content: center;

}

#contact-form{
    display:block;
    max-width:600px;
    margin: 0, auto;
    border: 1px solid var(--grey);
    padding:15px;
    border-radius:5px;
    background-color: var(--light);
    margin-bottom: 50px;
    color: rgb(170, 160, 160);

}

.input-field{
    width:100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--secondaryColor);
    border-radius: 5px;
    border:1px solid var(--dark);
    font-size: 14px;
    color: var(--dark);
 
}



.custom-table {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow: hidden;
  }
  .custom-table th, .custom-table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    text-align: left;
  }






  /* Custom CSS for table styling my table in user app */
.custom-table {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow: hidden;
    width: 100%;
    margin-bottom: 1rem;
    background-color: #ffffff90;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .custom-table th, .custom-table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    text-align: left;
  }
  
  .custom-table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
  }
  
  .custom-table tbody tr:hover {
    background-color: #f8f9fa;
  }
  
  /* Responsive table styling  in user app */
  @media (max-width: 575.98px) {
    .custom-table {
      display: block;
      width: 100%;
      overflow-x: auto;
    }
  }
  
  /* Optional: Add some space around the table */
  .container {
    margin-top: 20px;
  }
  
  /* Optional: Style for header */
  h1 {
    color: #007bff;
  }

  /* Custom CSS for table styling */
.custom-table {
  width: 100%;
  margin-bottom: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.custom-table th, .custom-table td {
  border: 1px solid #dee2e6;
  padding: 0.75rem;
  text-align: center;
}

.custom-table thead th {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.custom-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* Buttons in the "Actions" column */
.custom-table .btn {
  margin-right: 5px;
}

/* Responsive table styling */
@media (max-width: 575.98px) {
  .custom-table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* Optional: Add some space around the table */
.container {
  margin-top: 20px;
}

/* Optional: Style for header */
h5.card-title {
  color: #007bff;
}




.single-table-column {
  margin: 20px; /* Add margin as needed */
  padding: 20px; /* Add padding as needed */
  text-align: center; /* Center the content */
}

@media (max-width: 767px) {
  .single-table-column {
      width: 100%;
      margin: 5px;
      padding: 10px; /* Adjust padding for small screens */
  }
}




/* Custom CSS for table styling   Jan 26 2024 */






/* Custom CSS for table styling */
.container {
    margin-top: 20px;
  }
  
  .card {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .card-body {
    padding: 1.25rem;
  }
  
  .card-title {
    color: #007bff;
  }
  
  .table.custom-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
    background-color: #ffffffa8;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .table.custom-table th,
  .table.custom-table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    text-align: left;
  }
  
  .table.custom-table thead th {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
  }
  
  .table.custom-table tbody tr:hover {
    background-color: #f8f9fa;
  }
  
  /* Buttons in the "Actions" column */
  .table.custom-table .btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    margin-right: 5px;
    text-align: center;
    text-decoration: none;
    background-color: #007bff;
    color: #fff;
    border: 1px solid #007bff;
    border-radius: 4px;
  }
  
  .table.custom-table .btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
  }
  
  /* Responsive table styling */
  @media (max-width: 575.98px) {
    .table.custom-table {
      display: block;
      width: 100%;
      overflow-x: auto;
    }
  }






  /* January 30 2024 */



  /* Custom styles for the user details table */
.custom-table-container {
  margin-top: 20px;
}

.custom-table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-collapse: collapse;
  border-spacing: 0;
}

.custom-table th,
.custom-table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.custom-table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.custom-table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

/* Custom styles for the user status form */
.custom-form-container {
  margin-top: 20px;
}

.custom-form-outline {
  margin-bottom: 1rem;
}

.custom-submit-button {
  background-color: #077dfc;
  color: #fff;
}

/* Additional styles as needed */




/* UPDATE TO THE DROPDOWN NAV BAR ON SMALL SCREEN */

/* Add media query for small screens */
@media (max-width: 767px) {
  .navbar {
      /* Styles specific to small screens go here */
      /* For example, you might want to make the navbar full-width */
      width: 100%;
      background-color:  rgba(6, 60, 92, 0.888);
  }

  .hamburger {
      /* Adjust styles for the hamburger icon on small screens */
      float: none; /* Remove float for center alignment */
      margin: 10px; /* Add margin for spacing */
  }

  .dropdown-content {
      /* Adjust styles for the dropdown content on small screens */
      position: relative;
      margin-top: 10px; /* Add margin for spacing */
  }

  .list-drop {
      /* Adjust styles for the list items in the dropdown on small screens */
      padding: 10px; /* Add padding for spacing */
  }

  .list-drop li {
      /* Adjust styles for individual list items in the dropdown on small screens */
      display: block;
      margin-bottom: 5px; /* Add margin for spacing between items */
  }
}

/* UPDATE TO THE DROPDOWN NAV BAR ON SMALL SCREEN */