.hero-mid {
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 70vh;
  justify-content: center;
}

.hero-mid h1,
.hero-mid h5 {
  margin: 0;
  font-weight: 500;
  letter-spacing: 8px;
  text-transform: uppercase;
}
.hero-mid-top {
  width: 100%;
  height: 0;
}

.hero-mid-bot {
  margin-top: -20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f6f6f6;
  width: 100%;
  height: 20vh;
}

.posts-container {
  margin-top: -30vh;
  padding: 0 5%;
}
.post {
  display: flex;
  align-items: center;
  gap: 20px;
  background: white;
  padding: 20px;
}

.post-layout-left img,
.post-layout-right img {
  width: 50%; /* Adjust based on your actual image sizes */
  height: 445px;
  object-fit: cover;
}

.post-layout-left .post-content,
.post-layout-right .post-content {
  flex-grow: 1;
  width: 50%;
}

.post-layout-left {
  flex-direction: row;
}

.post-layout-right {
  flex-direction: row-reverse;
}

.post-content {
  display: flex;
  flex-direction: column;
}

.post-title {
  margin: 0;
}

.post-date {
  text-transform: uppercase;
  color: #222;
  opacity: 0.7;
  letter-spacing: 4px;
}

.post-summary {
  color: #222;
}

.postlink {
  text-decoration: none;
  color: #222;
}

.link-left {
  padding-left: 50px;
  position: relative;
  align-self: flex-start; /* Aligns the link to the left */
}

.link-right {
  padding-right: 50px;
  position: relative;
  align-self: flex-end; /* Aligns the link to the right */
}
.link-right::after {
  content: "";
  position: absolute;
  top: 50%; /* Center the line vertically */
  right: -40px; /* Adjust as needed */
  width: 80px; /* Length of the line */
  height: 1px; /* Thickness of the line */
  background-color: black;
  transform: translateY(
    -50%
  ); /* Center the line vertically with respect to the link */
}
.link-left::before {
  content: "";
  position: absolute;
  top: 50%; /* Center the line vertically */
  left: -40px; /* Adjust as needed */
  width: 80px; /* Length of the line */
  height: 1px; /* Thickness of the line */
  background-color: black;
  transform: translateY(
    -50%
  ); /* Center the line vertically with respect to the link */
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 5vh 0;
    font-weight: 500;
    color: #222222a2;
    font-size: 20px;
    font-family: 'Jost';
    letter-spacing: 4px;
              list-style: none;
}
.pagination li {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.pagination li img {
    width: 30px; /* Adjust size as needed */
    height: auto;
    display: block;
}

.current-page-bold {
    font-weight: bold; 
    color: #000;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) 
{
  
    .hero-mid {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 60vh;
        justify-content: center;
      }
    
      
      
      .posts-container {
        margin-top: -30vh;
        padding: 0 5%;
      }
      .post {
        display: flex;
        align-items: center;
        gap: 20px;
        background: white;
        padding: 20px;
      }
      
      .post-layout-left img,
      .post-layout-right img {
        width: 100%; /* Adjust based on your actual image sizes */
        height: auto;
      }
      
      .post-layout-left .post-content,
      .post-layout-right .post-content {
        flex-grow: 1;

      }
      
      .post-layout-left {
        flex-direction: column;
      }
      
      .post-layout-right {
        flex-direction: column;
      }
      
      .post-content {
        display: flex;
        flex-direction: column;
      }
      
      .post-title {
        margin: 0;
      }
      
      .post-date {
        text-transform: uppercase;
        color: #222;
        opacity: 0.7;
        letter-spacing: 4px;
      }
      
      .post-summary {
        color: #222;
      }
      
      .postlink {
        text-decoration: none;
        color: #222;
      }
      
      .link-left {
        padding-left: 50px;
        position: relative;
        align-self: flex-start; /* Aligns the link to the left */
      }
      
      .link-right {
        padding-right: 50px;
        position: relative;
        align-self: flex-end; /* Aligns the link to the right */
      }
      .link-right::after {
        content: "";
        position: absolute;
        top: 50%; /* Center the line vertically */
        right: 0px; /* Adjust as needed */
        width: 40px; /* Length of the line */
        height: 1px; /* Thickness of the line */
        background-color: black;
        transform: translateY(
          -50%
        ); /* Center the line vertically with respect to the link */
      }
      .link-left::before {
        content: "";
        position: absolute;
        top: 50%; /* Center the line vertically */
        right:0;
        left: 0; /* Adjust as needed */
        width: 40px; /* Length of the line */
        height: 1px; /* Thickness of the line */
        background-color: black;
        transform: translateY(
          -50%
        ); /* Center the line vertically with respect to the link */
      }
      .pagination {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          margin: 5vh 0;
          font-weight: 500;
          color: #222222a2;
          font-size: 20px;
          font-family: 'Jost';
          letter-spacing: 4px;
      }
      .pagination li {
          border: none;
          background: none;
          cursor: pointer;
          padding: 0;
      }
      
      .pagination li img {
          width: 30px; /* Adjust size as needed */
          height: auto;
          display: block;
      }
      
      .current-page-bold {
          font-weight: bold; 
          color: #000;
      } 
}

@media (max-width: 768px) 
{
    .hero-mid {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 80vh;
        justify-content: center;
      }
    
      
      
      .posts-container {
        margin-top: -30vh;
        padding: 0 5%;
      }
      .post {
        display: flex;
        align-items: center;
        gap: 20px;
        background: white;
        padding: 20px;
      }
      
      .post-layout-left img,
      .post-layout-right img {
        width: 100%; /* Adjust based on your actual image sizes */
        height: 250px;
      }
      
      .post-layout-left .post-content,
      .post-layout-right .post-content {
        flex-grow: 1;
                width: 100%;
      }
      
      .post-layout-left {
        flex-direction: column;
      }
      
      .post-layout-right {
        flex-direction: column;
      }
      
      .post-content {
        display: flex;
        flex-direction: column;
      }
      
      .post-title {
        margin: 0;
      }
      
      .post-date {
        text-transform: uppercase;
        color: #222;
        opacity: 0.7;
        letter-spacing: 4px;
      }
      
      .post-summary {
        color: #222;
      }
      
      .postlink {
        text-decoration: none;
        color: #222;
      }
      
      .link-left {
        padding-left: 50px;
        position: relative;
        align-self: flex-start; /* Aligns the link to the left */
      }
      
      .link-right {
        padding-right: 50px;
        position: relative;
        align-self: flex-end; /* Aligns the link to the right */
      }
      .link-right::after {
        content: "";
        position: absolute;
        top: 50%; /* Center the line vertically */
        right: 0px; /* Adjust as needed */
        width: 40px; /* Length of the line */
        height: 1px; /* Thickness of the line */
        background-color: black;
        transform: translateY(
          -50%
        ); /* Center the line vertically with respect to the link */
      }
      .link-left::before {
        content: "";
        position: absolute;
        top: 50%; /* Center the line vertically */
        right:0;
        left: 0; /* Adjust as needed */
        width: 40px; /* Length of the line */
        height: 1px; /* Thickness of the line */
        background-color: black;
        transform: translateY(
          -50%
        ); /* Center the line vertically with respect to the link */
      }
      .pagination {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          margin: 5vh 0;
          font-weight: 500;
          color: #222222a2;
          font-size: 20px;
          font-family: 'Jost';
          letter-spacing: 4px;

      }
      .pagination li {
          border: none;
          background: none;
          cursor: pointer;
          padding: 0;
      }
      
      .pagination li img {
          width: 30px; /* Adjust size as needed */
          height: auto;
          display: block;
      }
      
      .current-page-bold {
          font-weight: bold; 
          color: #000;
      } 
}


.pagination li a{
    text-decoration: none;
    font-weight: bold;
    color: #000;
        font-size: 20px;
    font-family: 'Jost';
    letter-spacing: 4px;
}
.first-text{
  padding: 30px 5%;
}

.hero-mid-blog{
  height: 75vh;
}

@media only screen and (max-width: 768px){
  .hero-mid-blog{
    height: 93vh;
  
  }

  .first-text{
      padding-bottom: 0px;
  }
}

@media only screen and (min-width: 1600px){

  .post-layout-left img, .post-layout-right img{
  width: 100%;
  max-width: 800px;
  }
}