body {
  margin-top: 0px; /* Add a margin-top to push the page content below the sticky navigation */
}

.w3-top {
  position: sticky;
  top: 0;
}

.underlined-heading {
  text-decoration: underline;
}

#table_one {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#table_one td, #table_one th {
  border: 1px solid #ddd;
  padding: 8px;
}

 /* #table_one tr:nth-child(even){background-color: white;}  */
 #table_one tr:nth-child(){background-color: white;} 


#table_one tr:hover {background-color: #ddd;}

#table_one th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #0c0e0d;
  color: white;
}

@media screen and (min-width: 992px) {
  .whatsapp {
    display: none;
  }
}

/*  css code starts here for hide the div when the screen size is above 600 */
@media screen and (max-width: 990px) {
  .whatsapp_web {
    display: none;
  }
}

/* dark mode */
.dark-mode {
  background-color: #4f6668;
  color: white;
}

.dark-mode-icon {
  font-family: 'your-font-name'; /* Replace 'your-font-name' with the actual font that supports the Unicode character */
  font-size: 2px;
}

.responsive-image {
  max-width: 100%;
  height: auto;
}


   /* Default layout */
   #div1,#div3 {
    /* display: flex; */
     width: 100%;

 }     
 #advertisement {      
     width: 102%; 
     height: 5%;        
     top: 35px;    
     /* font-size: 2vw; */
     object-fit: cover;
     position: sticky;  
    
 }    
 /* For screens wider than 1366px (14 inches or larger) */
 @media screen and (min-width: 1366px) {
   #div1 {
         width: 60%;  /* Takes 60% of the width */
     }
 
     #advertisement {
         width: 20%;  /* Takes 30% of the width */
         top: 30px; 
         position: sticky;
        
     }
 }


   .hidden {
       display: none;
   }

   .visible {
       display: block;
   }


   /* Sidebar styling for div2 */
   #div2 {
       width: 350px;
       height: 100%;
       background-color: #333;
       color: white;
       padding: 20px;
       position: fixed;
       right: 0;
       top: 0;
       z-index: 2;
       overflow-y: auto; /* Enable scroll if content is too long */
   }

   /* Sidebar links styling */
   #div2 h2 {
       text-align: center;
       font-size: 20px;
       margin-bottom: 20px;
       border-bottom: 2px solid #555;
       padding-bottom: 10px;
   }

   #div2 ul {
       list-style-type: none;
       padding: 0;
   }

   #div2 ul li {
       margin: 15px 0;
   }

   #div2 ul li a {
       color: white;
       text-decoration: none;
       padding: 10px;
       display: block;
       background-color: #444;
       border-radius: 5px;
   }

   #div2 ul li a:hover {
       background-color: #555;
       cursor: pointer;
   }

   
   @media screen and (min-width: 1366px) {
   #div3 {
         width: 60%;  /* Takes 60% of the width */
         right: 20%;
     }

  #div2 {
         width: 40%;  /* Takes 60% of the width */
         right: 20%
         
     }
   }

   #div3 {         
       height: 100%;
       background-color: #333;
       color: white;
       padding: 20px;
       position: fixed;
       /* right: 0; */
       top: 0px;
       z-index: 2;
       overflow-y: auto; /* Enable scroll if content is too long */
   }

   /* Sidebar links styling */
   #div3 h2 {
       text-align: center;
       font-size: 20px;
       margin-bottom: 20px;
       border-bottom: 2px solid #555;
       padding-bottom: 10px;
   }

   #div3 ul {
       list-style-type: none;
       /* padding: 0; */
   }

   #div3 ul li {
       margin: 15px 0;
   }

   #div3 ul li a {
       color: rgb(221, 12, 12);
       text-decoration: none;
       padding: 10px;
       display: block;
       background-color: #cdb2b2;
       border-radius: 5px;
       text-align: center;
       text-shadow: 4px 4px 6px #555;
       font-size: 30px;
       font-family: fantasy;
       padding-top: 50;
       
   }

   #div3 ul li a:hover {
       background-color: #555;
       cursor: pointer;          
   }