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%;
 }     
 @media screen and (max-width: 1365px) {
  #left_ad_for_larger_display,
  #right_ad_for_larger_display {
    display: none !important;
  }
}

@media screen and (min-width: 1366px) {
  #div1 {
    width: 60%;
  }

  #left_ad_for_larger_display,
  #right_ad_for_larger_display {
    width: 20%;
    top: 30px;
    height: auto;
    max-height: none;
    position: sticky;
    border: 2px solid lightgray;
  }
}



   .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: 50px;
       font-family: fantasy;
       padding-top: 50;
       
   }

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




   .dropdown-btn {
    text-decoration: none;
    font-size: 22px;    
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    margin: 15px 0;
    color: black;
    text-decoration: none;
    padding: 10px;
    display: block;
    background-color: red;
    border-radius: 5px;
  }
  
  .dropdown-btn2 {
    /* padding: 6px 8px 6px 16px; */
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    margin: 15px 0;
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    background-color: #444;
    border-radius: 5px;
  }
 
  
  
  
  /* Add an active class to the active dropdown button */
  .active {
    background-color: rgb(38, 216, 22);
    color: black;
  }
  
  /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
  .dropdown-container {
    display: none;
    background: none;
    color: #5cc33a;
    padding-left: 8px;
  }
  
  /* Optional: Style the caret down icon */
  .fa-caret-down {
    float: right;
    padding-right: 8px;
  }