/* Apply styles to the h1 element */
h1 {
    color: #333; /* Change text color to dark gray */
  }
  
  /* Apply styles to the .container div */
  .container {
    margin: 20px; /* Add some margin around the container */
    padding: 10px; /* Add padding inside the container */
    border: 1px solid #ccc; /* Add a border around the container */
  }
  
  /* Apply styles to the ul and li elements */
  ul {
    list-style-type: square; /* Change the list bullet style to squares */
  }
  
  li {
    margin: 5px 0; /* Add some vertical margin between list items */
  }
  .input-group-text{
    line-height: 40px;
  }
  
  .left-div {
    box-shadow: 0px 0px 2px 2px #0000001f;
    border-radius: 8px;
    width: 35%; /* Set the width of the left div to 50% of the container */
    float: left; /* Float the left div to the left side */
    background-color: #f2f2f2; /* Background color for the left div */
    padding: 20px;
    margin-left: 10%;
  margin-top: 2%;
     padding-top: 2%;/* Add padding to the left div */
     margin-bottom: 103px;
  }
  
  /* Apply styles to the right div with the "container" class */
  .right-div.container {
     box-shadow: 0px 0px 2px 2px #0000001f;
    border-radius: 8px;
    width: 35%; /* Set the width of the right div to 50% of the container */
    float: right; /* Float the right div to the right side */
    background-color: #f2f2f2; /* Background color for the left div */
    padding-top: 15px; /* Add padding to the right div */
    padding-right: 13px; /* Add padding to the right div */
    padding-left: 15px;
     margin-right: 10%;
    margin-top: 2%;
  }
  
  .title{
    font-family:"Figtree",sans-serif !important;
  }
  
  .b{
   font-weight: bold;
  font-size: 22px;
  }
  .c{
    font-size: 19px;
    font-weight: normal;
  }
  #ul_top_hypers {
  display: inline-block;
  }
  
  .shadow {
  width: 100px;
  margin: 0 auto;
  height: 100px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px;
  &.top {
    box-shadow: 0px -15px 10px -15px #111;    
  }
  &.bottom {
    box-shadow: 0px 15px 10px -15px #111;    
  }
  &.left {
    box-shadow: -15px 0px 10px -15px #111;    
  }
  &.right {
    box-shadow: 15px 0px 10px -15px #111;    
  }
  }
  
  /* Apply styles to the floating header */
  .header {
    position: fixed; /* Fix the header to the top of the viewport */
    top: 0; /* Align the header to the top of the viewport */
    width: 100%; /* Make the header span the full width of the viewport */
    background-color: #333; /* Background color for the header */
    color: #fff; /* Text color for the header */
    padding: 10px 0; /* Add padding to the header */
    text-align: center; /* Center-align the text within the header */
    z-index: 1000; /* Set a high z-index to ensure it stays on top */
    display: flex;
  flex-direction: row;
    box-shadow: 0px 15px 10px -15px #111;    
  
  }
  
  .footer {
    position: relative; /* Fix the header to the top of the viewport */
    bottom: 0; /* Align the header to the top of the viewport */
    width: 100%; /* Make the header span the full width of the viewport */
    background-color: #333; /* Background color for the header */
    color: #fff; /* Text color for the header */
    padding: 10px 0; /* Add padding to the header */
    text-align: center; /* Center-align the text within the header */
    z-index: 1000; /* Set a high z-index to ensure it stays on top */
    display: flex;
  flex-direction: row;
    box-shadow: 0px 15px 10px -15px #111;    
  
  }
  .block-right{
     margin-left: auto;
    padding-right: 20px;
    padding-top: 10px;
  }
  
  /* Apply styles to the content area below the header */
  .content {
    margin-top: 60px; /* Add margin to push content below the fixed header */
  }
  li {
         box-shadow: 0px 0px 2px 2px #0000001f;
  
    background-color: #fff; /* Set the background color for the list items */
    border: 1px solid #ccc; /* Add a border around the list items */
    border-radius: 10px; /* Apply rounded corners to the list items */
    padding: 10px; /* Add padding inside the list items */
    margin: 5px 0; /* Add some vertical margin between list items */
    list-style-type: none; /* Remove the default list bullet */
  }
  .horizontal-list {
    display: flex; /* Use flexbox to create a horizontal layout */
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    max-width: 100%; /* Ensure the container doesn't overflow its parent */
    margin-bottom: 20px; /* Add space at the bottom to separate it from other content */
  }
  
  /* Apply styles to the ul elements within the horizontal-list container */
  .horizontal-list ul {
    padding: 0; /* Remove default padding for ul elements */
    margin: 0; /* Remove default margin for ul elements */
    list-style: none; /* Remove list bullet styles */
  }
  
  
  
  /* Apply styles to the list items within the horizontal list */
  .horizontal-list li {
    padding: 10px; /* Add padding to the list items */
    border: 1px solid #ccc; /* Add a border around the list items */
    border-radius: 10px; /* Apply rounded corners to the list items */
    margin-right: 10px; /* Add some space between list items */
    list-style-type: none; /* Remove the default list bullet */
  }
  
  .selected {
    background-color: #ffcb0073; /* Change this to your desired background color */
    color: #333; /* Change this to your desired text color */
    cursor: pointer;
  }
  
  
  /* The Modal (background) */
  .modal {
  display: none; /* Hidden by default */
  }
  
  /* Modal Content */
  .modal-content {
  width: 320px;
  margin: 10% auto;
  align-items: center;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 20px;
  padding: 30px 30px 70px;
  }
  
  .modal-content button.close {
  width: 30px;
  font-size: 20px;
  color: #c0c5cb;
  align-self: flex-end;
  background-color: transparent;
  border: none;
  margin-bottom: 10px;
  }
  
  .modal-content img {
  width: 82px;
  margin-bottom: 15px;
  }
  
  .modal-content p {
  margin-bottom: 40px;
  font-size: 18px;
  }
  
  .modal-content button.accept {
  background-color: #ed6755;
  border: none;
  border-radius: 5px;
  width: 200px;
  padding: 14px;
  font-size: 16px;
  color: white;
  box-shadow: 0px 6px 18px -5px rgba(237, 103, 85, 1);
  }
  
  
  @media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .left-div {
    box-shadow: 0px 0px 2px 2px #0000001f;
    border-radius: 8px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-left: 5%;
    margin-top: 2%;
    margin-right: 5%;
    margin-bottom: 2%;
    width: 90%;
    height: auto;
    vertical-align: middle;
  }
  }
  @media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .right-div.container {
    box-shadow: 0px 0px 2px 2px #0000001f;
    border-radius: 8px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-left: 5%;
    margin-top: 2%;
    margin-right: 5%;
    margin-bottom: 2%;
    width: 90%;
    height: auto;
    vertical-align: middle;
  }
  }
  
  @media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .apnalogo {
    width: 27vw !important;
  padding: 10px;
  
  }
  .apnawa {
    
    width: 5vw !important;
    padding-top: 9px;
  
  }
  .block-right {
    
    padding-top: 17px !important;
  
  } 
  .footer-b {
  
  margin-left: 40px; padding-top: 10px !important;
  }
  .footer-c {
  
    margin-left: 40px; padding-top: 10px !important;
    }
  .footer-p {
    margin-right: 0px !important;
    margin-left: 0px !important; padding-top: 0px !important;
    }
  }