#hero-banner{
    position: relative;  background-size: cover;
    background-repeat: no-repeat;    width: 100%;
    height: 50vh;  max-height: 550px;  background-position: bottom;
   }
   #hero-banner .banner-text{
    position: absolute;
    z-index: 3;
    margin-top: 185px;
    margin-left: 25px;
    text-align: left;
    padding: 0 20px;
    color: #fff;
    background: rgba(0, 0, 0, 0.15);
   }
   #hero-banner .banner-text h1{ letter-spacing: 3px;line-height: 63px;}
   #hero-banner .banner-text p{ color: #fff;padding-left: 0px;font-size: 18px;}
   .blog-content{    padding: 25px; background-color: #FCF7F3; text-align: left;  }
   .blog-content h4{    padding: 25px 5px;   }
   .blog-content p{font-size: 18px;}
   .cursive{font-family: "Sebastian"; text-transform: none; color: rgba(235, 94, 89, 1);
      font-size: 40px; font-weight: 600;letter-spacing: 2pt;}
    .blog-content p.cursive{text-align: center;font-size: 40px; padding: 10px 25px;}

.image-card {
  max-width: 900px;          /* adjust as needed */
  margin: 40px auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;          /* important for rounded corners */
}

.image-wrapper img {
  width: 100%;
  display: block;
  border-radius: 16px 16px 0 0;  /* rounded top only */
  max-height: 550px;
}

.image-caption {
  padding: 14px 18px;
  font-size: 13px;
  color: #888;
  text-align: center;
  background: #fff;
}

/****************************/
#gujarat_through {  text-align: center;  padding: 25px 5px; background: #FCF7F3;}
:root{
  --bg: #fbf6f2;
  --card-bg: #ffffff;
  --muted: #9b9b9b;
  --muted-2: #d9d2cc;
  --accent: #ff6b4a;
  --radius: 10px;
  --gap: 24px;
  --card-shadow: 0 6px 20px rgba(18,18,18,0.05);
}

/* Container background */
#gujarat_through .grid-container-bg{
  padding: 25px;
}

/* Flex row */
#gujarat_through .blog-row{
  display:flex;
  flex-wrap:wrap;
  gap: var(--gap);
}

/* Card sizing */
#gujarat_through .card{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border: 1px solid rgba(30,30,30,0.03);
  box-sizing:border-box;
  flex: 1 1 calc((100% - (var(--gap) * 2)) / 3);
  min-width: 220px;
  transition:transform .12s ease, box-shadow .12s ease;
}
#gujarat_through .card:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(18,18,18,0.06); }

/* Responsive columns */
@media (max-width:1100px){#gujarat_through  .card{ flex: 1 1 calc((100% - var(--gap)) / 2); } }
@media (max-width:620px){ #gujarat_through .card{ flex: 1 1 100%; } }

/* Media */
#gujarat_through .card .media{
  position: relative;
  width:100%;
  height: 200px;
  overflow:hidden;
}
@media (max-width:620px){ .card .media{ height: 160px; } #hero-banner .banner-text{position: absolute;
    margin-top: 230px;
    margin-left: 0px;
    text-align: left;
    padding: 5px 20px;
    width: 90%;} #hero-banner .banner-text h1{line-height: 40px;}}
#gujarat_through .card .media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* badge (small pill) */
#gujarat_through .badge{
  position:absolute;  left:12px;
  top:12px;  background: rgba(255,255,255,0.95);
  display:inline-flex;  align-items:center;
  gap:8px;  padding:6px 10px;
  border-radius:50px;  font-size:10px;
  color:#6b6b6b;  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 4px 10px rgba(10,10,10,0.04);
}

/* Content */
#gujarat_through .content{ padding:20px; display:flex; flex-direction:column; gap:14px; flex:1 1 auto; }

/* Title - serif, left aligned, thin like Figma */
#gujarat_through .card h3{
  font-weight:400;           /* lighter weight for that delicate look */
  font-size:20px;  margin:0;  color:#2b2b2b;
  line-height:1.15;  text-align:left;  letter-spacing:0.2px;
}

/* Excerpt - slightly narrower feel, comfortable leading */
#gujarat_through .excerpt{
  font-size:15px;  color:#6f6f6f;  line-height:1.65;
  margin:0;  max-width:100%;
}

/* divider above meta row (subtle) */
#gujarat_through .meta-sep{
  height:1px;  background: var(--muted-2);
  border-radius:1px;  margin-top:6px;
  margin-bottom:8px;  opacity:1;
}

/* meta row: left aligned with small icons and separators */
#gujarat_through .meta{
  display:flex;  gap:18px;  align-items:center;
  font-size:13px;  color:var(--muted);  flex-wrap:wrap;
}
#gujarat_through .meta .meta-item{
  display:inline-flex;  gap:10px;
  align-items:center;  color:var(--muted);
}
#gujarat_through .meta .dot{
  width:6px;  height:2px;  background:var(--muted-2);
  display:inline-block;  border-radius:2px;  margin:0 6px;
  transform:translateY(-1px);
}

/* Read more: on its own left-bottom line, accent color */
#gujarat_through .read-more{
  display:inline-flex;  align-items:center;
  gap:8px; color:var(--accent);  text-decoration:none;
  margin-top:12px;  font-size:14px;font-style: normal;
font-weight: 400;line-height: 24px;padding-top: 15px;
}
#gujarat_through .read-more svg{ width:14px; height:14px; transition:transform .14s ease; }
#gujarat_through .read-more:hover svg{ transform:translateX(4px); }
#gujarat_through .read-more:hover { background: #fff;}
/* spacer pushes read-more down if content shorter */
#gujarat_through .content .spacer{ margin-top:auto; }
#gujarat_through .card .badge img{ width:auto; }
.gray-dot {
    width: 4px;    height: 4px;    background: #c8c2bc;   /* light gray */
    border-radius: 50%;    display: inline-block;
    margin: 0 8px;         /* spacing left–right */
    flex-shrink: 0;
}
/* small adjustments: badge text smaller on mobile */
@media (max-width:420px){
  #gujarat_through .badge{ padding:6px 8px; font-size:11px; }
  #gujarat_through .card h3{ font-size:18px; }
  #gujarat_through .excerpt{ font-size:14px; }
}

/****************************/