.small-logo {
    position: fixed; /* Change to fixed positioning */
    left: 1rem;
    top: 0.5rem; /* Adjust top position */
    width: 40px; /* Adjust size as needed */
    width: 4vw;
    min-width: 4px;
    height: auto;
  }
  
  
  /* Add these new styles to your existing CSS */
  
  .blog-header {
    background-color: #19181A;
    opacity: 0.9;
    transition: transform 0.7s ease-in-out;
  }
  
  .blog-header.hidden {
    transform: translateY(-100%);
  }
  
  .hero-image {
    margin-top: 2rem; /* Should match the header height */
  }
  
  .hero-image img {
    width: 100%;
    display: block;
  }
 
  .blog-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Align text to the left */
    margin-left: 7.5cm;
    margin-right: 6.5cm;
    margin-top: 2cm;
    max-width: 800px; /* Limit the width for better readability */
    margin-left: auto;
    margin-right: auto;
    font-family:'Times New Roman', Times, serif; /* You can change this to your preferred font */
    font-size: 22px; /* Adjust the base font size as needed */
    line-height: 1.6; /* Adds space between lines */
    color: #cfcfcf; /* Dark grey color for better contrast */
}

.blog-content h1 {
  font-size: 1.7em; /* Adjust font size for main title */
  margin-top: 1em;
  color:#ffffff;
  line-height: 1.2;
}

.blog-content h2 {
    font-size: 1em; /* Size for subheadings */
    margin-bottom: -1em;
    color: #a3a2a2;
}

.blog-content p:first-of-type {
  margin-top: 2em; /* Adjust space above first paragraph */
  margin-bottom: 2.5em;
  font-weight: bold;
  color:#ffffff
}

.blog-content p {
    margin-bottom: 3em; /* Space between paragraphs */
}

.blog-content ul, .blog-content ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

ul {
  margin-left: 20px; /* Adjust the left margin as needed */
  margin-top: -1em; /* Add some space after the list */
}
.blog-content li {
    margin-bottom: 0.5em;
}

.divider {
  border-top: .5px solid #bbb;
  margin: 0;
  margin-left: 9em;
  margin-right: 9em;
}

.filter-options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 0; /* Adjust this to match your divider's padding */
}

.dropdown {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.dropbtn {
  color: #ffffff;
  padding: 15px;
  font-size: 18px;
  font-family: 'Times New Roman', Times, serif;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: .5em;
  background-color: #000000;
  min-width: 150px;
  z-index: 1;
}

.dropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}

/* Ensure the filter options align with the divider */
.filter-options, .divider {
  max-width: 1200px; /* Adjust this value to match your divider's max-width */
  margin-left: 7em;
  margin-right: 7em;
}
.blog-page-title{
    align-items: center;
    margin-top:3em;
    font-size: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 3em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    font-family:"'Times New Roman', Times, serif"; /* You can change this to your preferred font */
    line-height: 1.8; /* Adds space between lines */
     }

  .page-header {
  margin-left: 8.5em;
  font-family:'Times New Roman', Times, serif; /* You can change this to your preferred font */
  font-size: 18px; /* Adjust the base font size as needed */
  color: #ffffff; /* Dark grey color for better contrast */
}

.debate-container {
display: flex;
align-items: flex-start;
margin-top: 20px;
}

.debate-image {
width: 210%;
margin-top: 4em;
padding-right: 0em;
margin-left: 7em; /* Add left margin to align with divider */
}

.debate-image img {
width: 95%;
height: auto;
}

.debate-text {
width: 50%;
}

.blog-title h1 {
font-size: 2.8em;  
margin-bottom: 1em;
margin-right: 3.5em;
margin-top: 2em;
color: #ffffff;
font-family: 'Times New Roman', Times, serif; 
font-size: 35px;
}

.blog-preview h1 {
font-size: 1.4em; 
font-weight: normal;
margin-right: 7em;
color:#ffffff;
font-family: 'Times New Roman', Times, serif; 
line-height: 1.5;
}

@media (max-width: 550px) {

    .small-logo {
        position: fixed; /* Change to fixed positioning */
        left: 1rem;
        top: 1rem; /* Adjust top position */
        width: 2.5em;
        min-width: 1.5em;
        height: auto;
      }

      .filter-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding: 0 10px;
        overflow-x: auto; /* Allow horizontal scrolling if needed */
      }
    
    .filter-options {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    margin: 0 -10px; /* Negative margin to counter parent padding if any */
  }

  .dropdown {
    display: inline-block;
    margin-right: 15px;
  }

  .dropbtn {
    background: none;
    border: none;
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    padding: 5px 10px;
    cursor: pointer;
  }

    
    .blog-content {
        margin-left: 1rem; /* Reduce margin for smaller screens */
        margin-right: 1rem; /* Reduce margin for smaller screens */
        font-size: 18px; /* Adjust base font size for readability on smaller screens */
    }

    .blog-content h1 {
        font-size: 1.3em; /* Adjust font size for main title */
        margin-top: 2em;
        margin-bottom: 1em;
    }

    .blog-content h2 {
        font-size: 1em; /* Adjust font size for subheadings */
    }

    .blog-content p:first-of-type {
        margin-top: -.5em; /* Adjust space above first paragraph */
        margin-bottom: 2.5em;
        font-weight: bold;
        color:#ffffff
    }
    .blog-content p {
        margin-bottom: 2em; /* Adjust space between paragraphs */
    }

    .blog-content ul,
    .blog-content ol {
        padding-left: 1em; /* Adjust padding for lists */
    }

    .hero-image {
        margin-top: 0rem; /* Adjust margin for smaller screens */
        margin-bottom: 2em;
    }

    .blog-content h2 {
      font-size: 1em; /* Size for subheadings */
      margin-bottom: 0em;
      margin-top: -.5em;
      color: #a3a2a2;
  }
}