/* blog section */
.blogsherosection {
  position: relative;
  width: 100%;
  /* min-height: 300px;
  display: flex;
  align-items: flex-end; */
  overflow: hidden;
  /* display: flex;
  align-items: center; */
}
.blogsherosection img {
  /* height: 1400px; */
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
  object-fit: cover;
}

.overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  box-sizing: border-box; /* Ensure padding doesn't overflow */
  max-height: 60%;
  flex-wrap: wrap;

}

.overlaycontainer {
    width: 100%;
    /* max-width: 85%; */
}

.overlay-content h3 {
  max-width: 80%;
  font-family: "Urbanist", sans-serif;
  font-size: 25px;
  font-weight: 300;
  color: white;
}
.custom-badge {
  display: inline-flex;
  align-items: center;
  background: #eae6fe; /* Light purple background */
  color: #6b46c1; /* Darker purple text */
  font-weight: 600;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 20px; /* Fully rounded corners */
}

.custom-badge .dot {
  width: 10px;
  height: 10px;
  background: #6b46c1; /* Dark purple dot */
  border-radius: 50%;
  margin-right: 8px;
}

/* style the blogcontent top */

.leftsideblogcontent {
  max-height: 530px;
  overflow-y: scroll;
}
.leftsideblogcontent::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, Edge */
}
.leftsideblogcontent h3 {
  font-family: "Urbanist", sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: rgba(7, 20, 86, 1);
}
.leftsideblogcontent p,li {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(152, 151, 151, 1);
  text-align: left;
}
.leftsideblog a{
  text-decoration: none;
}
.headingblogcontent {
  max-width: 60%;
}

.liststyle{
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: rgba(7, 20, 86, 1);
}

/* blog right side */

.blogrightside h3 {
  font-family: "Urbanist", sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: rgba(7, 20, 86, 1);
}
.blogrightside p {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(152, 151, 151, 1);
}
.optionsection{
  max-width: 70%;
}
.subheadingblogcontent h4{
  font-family: "Urbanist", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: rgba(7, 20, 86, 1);
}

.highlight-item {
  cursor: pointer;
  padding: 5px 10px;
  transition: color 0.3s ease, font-weight 0.3s ease, background-color 0.3s ease;

}

.highlight-item.active {
  color: rgba(152, 151, 151, 1);
  border-left: 2px solid rgba(7, 20, 86, 1);
  padding-left: 8px;
}

/* Social Card */
.social-card {
  background-color: #07135b; /* Dark blue */
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 250px; /* Set width */
  height: 10%;
}

/* Share Text */
.social-card p {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255);
}

/* Social Icons */
.social-icons a {
  color: #b3b7f5; /* Light purple */
  font-size: 20px;
  margin: 0 8px;
  text-decoration: none;
}

/* Hover Effect */
.social-icons a:hover {
  color: #ffffff; /* White on hover */
}


/* blog bottom content */

/* Section Title */
.section-title {
  font-family: "Urbanist", sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: rgba(7, 20, 86, 1);
}

/* Blog Card Container */
.blog-card {
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* Blog Image */
.blog-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  color: rgba(104, 38, 38, 1);
}

/* Blog Heading */
.blog-heading {
  font-family: "Urbanist", sans-serif;

  font-size: 24px;
  font-weight: 300;
  color: rgba(7, 20, 86, 1);

  margin: 10px 0;
}

/* Blog Description */
.blog-description {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(152, 151, 151, 1);
  text-align: left;
  margin-bottom: 20px;
}

.recentarticles i {
  padding: 1%;
}
/* Read Post Link */
.read-post {
  font-weight: bold;
  font-size: 14px;
  color: #000080;
  text-decoration: none;
}

.read-post:hover {
  text-decoration: underline;
}

/* styling of the time of the news section */
/* Ensure Right Side Scrolls Properly */
/* .newsrightside .scroll-container {
  max-height: 730px;
  overflow-y: scroll;
} */

/* .custom-card img {
  height: 220px;
} */
/* 
.newscontent {
  max-height: 630px;
  overflow-y: scroll;
} */
.scroll-container::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, Edge */
}
.newscontent h3 {
  font-family: "Urbanist", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: rgba(7, 20, 86, 1);
}

.newscontent p {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(152, 151, 151, 1);

  text-align: left;
}
.newscontent::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, Edge */
}

/* rightside news content */

.headcontainer{
  color: rgba(7, 20, 86, 1);
}
.custom-card h5 {
  font-family: "Urbanist", sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: rgba(7, 20, 86, 1);
}
.custom-card p {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(152, 151, 151, 1);
  text-align: left;
}

.custom-card span {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(41, 50, 122, 1);
  background-color: rgba(41, 50, 122, 0.2);
  text-align: left;
}

/* mobile view for recent news */
.recent-news {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
}

.recent-news h2 {
  color: #202f5b;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.news-card {
  border: none;
  margin-bottom: 30px;
}

.news-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

.announcement-badge {
  display: inline-block;
  background-color: #e6e9f5;
  color: #4d5998;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 4px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.news-title {
  color: #202f5b;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.news-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.news-meta {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 13px;
}

.news-date {
  margin-right: 20px;
}

.read-time {
  display: flex;
  align-items: center;
}

.read-time svg {
  margin-right: 5px;
}



/* ------------------------------------ */

/* blogs responsive */
@media (max-width: 768px) {
  .leftsideblogcontent h3{
    font-size: 26px;
  }
  .leftsideblogcontent p, li{
    font-size: 14px;
  }
  .blogrightside h3 {
    font-size: 26px;
  }
  .blogrightside p {
    font-size: 14px;
  }
  .social-card p {
    font-size: 14px;
  }
}

@media (max-width: 431px) {
  .headingblogcontent{
    max-width: 100%;
  }
  .leftsideblogcontent h3{
    font-size: 18px;
  }
  .leftsideblogcontent p, li{
    font-size: 12px;
  }
  .overlay-content h3{
    font-size: 10px;
  }
  .overlay-content{
    max-height: 35%;
  }
  .overlaycontainer {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .subheadingblogcontent h4 {
    font-size: 18px;
  }
.liststyle{
  font-size: 14px;
}
  .blogrightside h3 {
    font-size: 22px;
  }
  .blogrightside p {
    font-size: 14px;
  }
  .social-card p {
    font-size: 12px;
  }
}
/* newss */

@media (max-width: 1024px) {

  .custom-card h5{
    font-size: 16px;
  }
  .custom-card p{
    font-size: 10px;
  }
}

@media (max-width:426px){
  .newscontent h3 {
    font-size: 20px;
  }
  .newscontent p {
    font-size: 12px;
  }
}

/* image size proper */
.newsimg {
  width: 500px;         /* Set your desired fixed width */
  object-fit: contain;  /* Maintain aspect ratio without distortion */
  margin-bottom: 15px;
  display: block;       /* Ensures consistent spacing */
}

/* Optional: Create a container for better alignment */
.news-image-container {
  display: flex;
  align-items: center;
  height: 120px;        /* Match the image height */
  margin-bottom: 15px;
}

.headingblogcontent {
  scroll-margin-top: 100px; /* or whatever fits your layout */
}