body {
  font-family: 'Outfit', sans-serif !important;
  background-color: #fff;
  margin: 0;
}
.blog-top-container{
  background-color: #F2F6F8;
}
.blog-heading{
  color: #000;

font-size: 48px;
font-style: normal;
font-weight: 400;
line-height: 50px; /* 104.167% */
}
.card-heading{
  color: var(--black-90, #212121);
  margin-top: 10px;
font-size: 24px;
font-style: normal;
font-weight: 500;
    line-height: 25.876px;
}
.card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
 height: 412px;
  background-color: transparent;
  position: relative; /* Add this for positioning text over the image */
}
.card-effect {
    position: relative;
    overflow: hidden;
}

.card-effect::before {
    content: "";
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(60, 188, 175, 0.20);
    transition: bottom 0.5s ease-in-out;
}

.card-effect:hover::before {
    bottom: 0;
}

.card{
  border: none !important;
}

.card img {
  width: 100%;
  height: 100%;
  /* border-top-left-radius: 10px;
  border-top-right-radius: 10px; */
}


.image-container img {
    width: 100%;
    height: 300px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.card-content {
  position: absolute; /* Absolute positioning to overlay on image */
  bottom: 0; /* Aligns the text to the bottom of the image */
  left: 0;
  right: 0;
  padding: 15px;
  color: #fff; /* White text for contrast */
}
.card-title {
    text-shadow: 0px 0px 14px #000;
  font-size: 2vw;
  display: none;
}

.card-text {
  color: var(--black-50, #666);

font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 14.907px; /* 106.479% */
white-space: nowrap;       /* Text ko ek hi line mein rakhta hai */
overflow: hidden;          /* Extra text ko chhupa deta hai */
text-overflow: ellipsis;
}
.tag {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFD700; /* Example color for the tag */
  margin-bottom: 8px;
}
a{
    text-decoration: none !important;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px;
    font-size: 14px;
    color: #777;
    /* border-top: 1px solid #e0e0e0; */
    border-top: transparent;
    background-color: transparent;
}

.author-name {
    color: var(--black-70, #3D3D3D);
 
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 14.082px; /* 117.349% */
}

.read-more {
    color: #0073D1;
   
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.read-more:hover {
    text-decoration: underline;
}
.button-container {
  display: flex
;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 20px;
}
.ReadBtn{
    color: var(--Neutral-N0, #FFF);

font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
    display: inline-flex;
padding: 10px 20px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 7px;
background: #058ACB;
border: none;

    background: #3B8DBC !important;
    color: #fff !important;
   

}






@media (max-width: 768px) {
  .card-title {
 
    font-size: 2.1vw;
  }
  .image-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
  .read-more {
    font-size: 12px;
  }
  .card-content{
    padding: 3px;
  }
  .card-effect::before {
    content: "";
    position: absolute;
    bottom: -100%;
    display: none;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(60, 188, 175, 0.20);
    transition: bottom 0.5s ease-in-out;
}
.card-heading {
    color: var(--black-90, #212121);
    margin-top: 10px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 17.876px;
}
.card-text {
    color: var(--black-50, #666);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 14.907px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card, .card-effect{
overflow: visible;
}
.blog-heading{
  font-size: 32px;
}
.card{
  height: 325px;
}
.button-container{
  top: 1px;
}
.navbar{
    padding: 10px 0px !important;
}
}