.blog-page {
height: auto;
background: var(--background);
}
.blog-page .fa-solid{
  font-size: 15px;
}
.blog-page .news-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
color: black;
width: 100%;
}
.blog-page img{
  border-radius: 10px;
}
.blog-page .news-heading {
font-size: 8vw;
font-weight: 600;
text-align: center;
color: black;
float: left;
}

.blog-page .news-paragraph {
font-size: 4vw;
max-width: 90%;
font-weight: 400;
text-align: center;
}

.blog-page .news-card {
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 27px;
flex-wrap: wrap;
}

.blog-page .news-image img {
width: 384px;
height: 240px;
}

.blog-page .news-image {
object-fit: cover;
}

.blog-page .news-item {
border-radius: 15px;
width: 384px;
display: flex;
flex-direction: column;
gap: 20px;
transition: 0.5s ease;
}

.blog-page .news-content {
display: flex;
flex-direction: column;
gap: 20px;
}

.blog-page .news-content  .news-content-heading {
font-size: 6vw;
height: 40px;
font-weight: 600;
}

.blog-page .news-content  .news-content-paragraph {
color: rgba(124, 125, 130, 1);
font-size: 3.5vw;
overflow: hidden;
height: 81px;
line-height: 1.5em;
}

.blog-page .news-directive:hover,
.blog-page .news-ownership:hover,
.blog-page .news-recovery:hover {
transform: translateY(-10px);
}

.blog-page .news-contentbtn {
color: #1d6fa3;
font-size: 4vw;
font-weight: 700;
cursor: pointer;
}

.blog-page .news-image1,
.blog-page .news-image2,
.blog-page .news-image3 {
display: flex;
gap: 10px;
padding: 30px 20px 10px 30px;
align-items: center;
}

.blog-page .news-image1 img,
.blog-page .news-image2 img,
.blog-page .news-image3 img {
width: 32px;
height: 32px;
}

.blog-page .im,
.blog-page .in,
.blog-page .io {
padding: 15px;
border-radius: 15px;
}

.blog-page .im {
background: rgba(248, 241, 255, 1);
}

.blog-page .in {
background: rgba(243, 246, 255, 1);
}

.blog-page .io {
background: rgba(250, 230, 224, 1);
}
img{
  object-fit: cover;
}
.blog-page .Recent{
  background: var(--background);
}
.blog-page .recent-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 50px;
}

.blog-page .recent-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.blog-page .up {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.blog-page .up a, .blog-page .down a {
  text-decoration: none;
  color: black;
}
.blog-page .down {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-page .water {
  display: flex;
  gap: 30px;
}

.blog-page .migrating,
.blog-page .building {
  display: flex;
  gap: 20px;
}

.blog-page .right {
  display: flex;
  gap: 30px;
  flex-direction: column;
}

.blog-page .title {
  font-size: 26px;
  font-weight: 700;
}

.blog-page .left {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 592px;
}

.blog-page .water-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 592px;
}

.blog-page .left-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.blog-page .date {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
}

.blog-page .left-title,
.blog-page .water-title {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
}

.blog-page .left-paragraph,
.blog-page .water-paragraph {
  color: #667085;
  font-size: 16px;
}

.blog-page .water-paragraph {
  line-height: 25px;
}

.blog-page .migrating-content,
.blog-page .building-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 248px;
}

.blog-page .building-paragraph,
.blog-page .migrating-paragraph {
  color: #667085;
  font-size: 16px;
}

.blog-page .building-title,
.blog-page .migrating-title {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}
.blog-page .news-card a{
  text-decoration: none;
  color: black;
}

/* Media query for mobile view */
@media (max-width: 1200px) {

  .blog-page .building img ,.blog-page .migrating img{
    width: 100%;
  }
  .width-responsive{
    width: 830px !important;
  }

  .blog-page .up {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .blog-page .down {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .up .left img,.up .right img, .left img, .down img{
    width: 100%  !important;
  }
  .blog-page .left{
    width: 100%;
    gap: 10px;
  }


  .youtube{
    width: 100%;
  }
  .blog-page .water-content {
    width: 720px;
    gap: 10px;
  }
  .blog-page .recent-container{
    padding: 20px;
  }

  .blog-page .migrating-content,
  .blog-page .building-content {
    width: 100%;
  }
  .down .water img{
    width: 100% !important;
  }
.up .left .left-content{
  width: 100%;
}
  .blog-page .migrating,
  .blog-page .building {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .blog-page .water {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .blog-page .recent-content{
    padding: 20px;
  }

}

@media (min-width: 1024px) {
.blog-page .news-heading {
  float: left;
font-size: 22px;
}
.blog-page .news-paragraph {
font-size: 18px;
max-width: 640px;
}
.blog-page .news-content .news-content-heading {
font-size: 20px;
}
.blog-page .news-content .news-content-paragraph {
font-size: 14px;
}
.blog-page .news-contentbtn {
font-size: 16px;
}
}

@media (max-width: 768px) {
.blog-page .news-card {
flex-direction: column;
padding-left: 0;
}
}

@media (max-width: 480px) {
.blog-page .news-heading {
font-size: 16px;
}
.blog-page .news-paragraph {
font-size: 18px;
}
.blog-page .news-content  .news-content-heading {
font-size: 18px;
}
.blog-page .news-content  .news-content-paragraph {
font-size: 14px;
}
.blog-page .news-contentbtn {
font-size: 16px;
}
}

@media (max-width: 1024px) {
.blog-page .news-heading {
font-size: 20px;
}
.blog-page .news-paragraph {
font-size: 16px;
max-width: 640px;
}
.blog-page .news-content  .news-content-heading {
font-size: 20px;
}
.blog-page .news-content .news-content-paragraph {
font-size: 14px;
}
.blog-page .news-contentbtn {
font-size: 16px;
}
}

@media (max-width: 795px) {
  .blog-page .left {
    width: 100%;
  }
    .blog-page .right {
    width: 100%;
  }
  .blog-page .down .water{
    width: 100%;
  }
  .blog-page .down .water-content{
    width: 100%;
  }

}
@media (max-width: 830px) {
  .width-responsive {
    width: 100% !important;
  }
  
}
/* @media (max-width: 400px) {
  .blog-page .news-card {
    padding-left: 10px;
    padding-right: 10px;
  }
} */