/* === Achievement carousel: no clipping + equal cards === */

/* Viewport: horizontal scroll only, room for shadows/reveal offset */
.achievement-carousel-viewport{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  height:auto !important;
  padding:6px 4px 40px !important;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.achievement-carousel-viewport::-webkit-scrollbar{display:none;}

/* Track */
.achievement-gallery{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:24px !important;
  padding-bottom:0 !important;
  height:auto !important;
}

/* Cards: identical width + height */
.achievement-gallery > article{
  --cards:4;
  flex:0 0 calc((100% - (var(--cards) - 1) * 24px) / var(--cards)) !important;
  max-width:calc((100% - (var(--cards) - 1) * 24px) / var(--cards)) !important;
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  min-height:100%;
  scroll-snap-align:start;
  overflow:hidden;
}

/* Reveal animation must not push cards outside the viewport */
.achievement-gallery > article.site-animate,
.achievement-gallery > article.site-animate.in-view{
  transform:none !important;
}
.achievement-gallery > article.site-animate:not(.in-view){
  transform:translate3d(0,12px,0) !important;
}

/* Image area: fixed height, full image visible */
.achievement-gallery > article .sf-atomic-image{
  flex:0 0 270px !important;
  height:270px !important;
  width:100% !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.achievement-gallery > article .sf-atomic-image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block;
}

/* Text area fills remaining height so all cards end at same line */
.achievement-gallery > article > .sf-native-container{
  flex:1 1 auto !important;
}

/* Responsive card count */
@media (max-width:1200px){ .achievement-gallery > article{ --cards:3; } }
@media (max-width:900px) { .achievement-gallery > article{ --cards:2; } }
@media (max-width:600px) { .achievement-gallery > article{ --cards:1; } }

/* services card */
/* === Saurashtra – Service cards (complete) === */

.service-carousel-viewport{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  height:auto !important;
  width:100% !important;
  padding:6px 4px 30px !important;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.service-carousel-viewport::-webkit-scrollbar{display:none;}

.service-cards-grid{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:20px !important;
  width:100% !important;
  height:auto !important;
}

/* Card column */
.service-cards-grid > article.service-info-card{
  --sc-cards:5;
  --sc-gap:20px;
  flex:0 0 calc((100% - (var(--sc-cards) - 1) * var(--sc-gap)) / var(--sc-cards)) !important;
  max-width:calc((100% - (var(--sc-cards) - 1) * var(--sc-gap)) / var(--sc-cards)) !important;
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-rows:1fr !important;
  grid-template-columns:100% !important;
  align-self:stretch !important;
  scroll-snap-align:start;
}

/* Inner <a> = visible card: text row grows, image row at bottom */
.service-cards-grid > article.service-info-card > .e-con{
  display:grid !important;
  grid-template-rows:1fr auto !important;
  grid-template-columns:100% !important;
  height:100% !important;
  min-height:0 !important;
  width:100% !important;
  padding-bottom:0 !important;
  row-gap:0 !important;
  align-self:stretch !important;
  overflow:hidden;
}

.service-info-card .service-card-content{
  grid-row:1 !important;
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
}

.service-info-card h2,
.service-info-card h3{
  min-height:2.6em;
}

/* Image row – flush to bottom */
.service-info-card .service-image{
  grid-row:2 !important;
  align-self:end !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 10;
  line-height:0;
  overflow:hidden;
  background-size:cover !important;
  background-position:center !important;
}
.service-info-card .service-image > *,
.service-info-card .service-image .elementor-widget-container{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.service-info-card .service-image img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
}

@media (min-width:1025px){
  .service-carousel-viewport{
    overflow:visible !important;
    scroll-snap-type:none !important;
  }
}

@media (max-width:1024px){
  .service-cards-grid > article.service-info-card{ --sc-cards:3; }
}
@media (max-width:767px){
  .service-cards-grid > article.service-info-card{ --sc-cards:2; }
}
@media (max-width:600px){
  .service-cards-grid > article.service-info-card{ --sc-cards:1.15; }
  .service-info-card h2,
  .service-info-card h3{ min-height:0; }
}