:root {

  --primary: #199FB1;

  --secondary: #A5F3FC;

  --dark: #0F172A;

  --slate: #64748B;

  --white: #ffffff;

  --bg-light: #f8fafc;

}



/* --- UNIFIED MASONRY GRID --- */

.masonry-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

}



.card-base {

  position: relative;

  border-radius: 28px;

  overflow: hidden;

  cursor: pointer;

  background: #eee;

  height: 250px; /* Increased base height */

  transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);

}



/* Proportional Heights for the Staggered Look */

.card-base.tall { height: 320px; } /* Increased tall height */

.mt-offset { margin-top: -70px; } /* Adjusted offset for larger boxes */



.card-base img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }

.card-base:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }

.card-base:hover img { transform: scale(1.1); }



/* --- V1: GEOMETRIC SWEEP + ARC INDICATOR --- */

@keyframes arcPulse {

  0% { filter: drop-shadow(0 0 2px rgba(25, 159, 177, 0.4)); transform: scale(1); }

  50% { filter: drop-shadow(0 0 10px rgba(25, 159, 177, 0.9)); transform: scale(1.05); }

  100% { filter: drop-shadow(0 0 2px rgba(25, 159, 177, 0.4)); transform: scale(1); }

}



.v1-reveal {

  position: absolute; inset: 0; background: var(--primary); color: white;

  display: flex; flex-direction: column; justify-content: center; padding: 25px;

  clip-path: circle(0% at 100% 100%); transition: 0.7s cubic-bezier(0.2, 1, 0.3, 1); z-index: 6;

}

.v1-trigger {

  position: absolute; bottom: -2px; right: -2px; width: 75px; height: 75px; z-index: 7; pointer-events: none;

  animation: arcPulse 2s infinite ease-in-out;

}

.v1-trigger svg { fill: var(--primary); }

.card-base:hover .v1-reveal { clip-path: circle(150% at 100% 100%); }

.v1-icon { position: absolute; bottom: 15px; right: 15px; color: white; z-index: 8; transition: 0.3s; pointer-events: none; font-size: 20px; }

.card-base:hover .v1-icon { transform: rotate(45deg) scale(1.2); }



.service-label { font-size: 18px; font-weight: 800; margin-bottom: 8px; }

.service-desc { font-size: 13px; opacity: 0.95; line-height: 1.5; }

.front-title { 
  position: absolute; 
  bottom: 20px; 
  left: 20px; 
  color: white; 
  font-weight: 700; 
  text-shadow: 0 2px 8px rgba(0,0,0,0.6); 
  z-index: 2; 
  font-size: 16px; 
  margin-right: 57px;
}



.content-section {

  padding-right: 40px;

}



@media (max-width: 991px) {

  .content-section { text-align: center; padding-right: 0; margin-bottom: 40px; }

  .mt-offset { margin-top: 0; }

  .masonry-grid { grid-template-columns: 1fr; }

  .card-base.tall, .card-base { height: 260px; }

}


/* @media (min-width: 992px){
  .md-screen-div-one {
    flex: 0 0 auto;
    width: 100%;
  }
  .md-screen-div-two {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .md-screen-div-one {
    flex: 0 0 auto;
    width: 65%;
  }
  .md-screen-div-two {
    flex: 0 0 auto;
    width: 35%;
  }
} */

/* Badge Styling */

.container-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Updated Badge Size & Color Styling */

.dim-sub-label {

  font-size: 17px;

  font-weight: 800;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  /* display: flex;

  align-items: center; */

  gap: 10px;

}



.text-black-label {

  color: #6f6f6f;

}



.text-brand-label {

  color: var(--primary);

}



/* Brand Styled Icon Circle */

.icon-badge-circle {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background-color: #E8F5F7;

  color: var(--primary);

  border-radius: 50%;

}



.content-section {

  max-width: 650px;

  margin-left: 0;

  text-align: left;

  padding: 40px 0;

}



/* Continuous Highlight Section */

.highlight-container {

  margin-top: 17px;

  display: flex;

  flex-direction: column;

  border-left: 3px solid var(--primary);

  padding-left: 20px;

  margin-left: 18px;

  gap: 12px;

  text-align: left;

  width: fit-content;

}



.highlight-line {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.highlight-line .sub-text {

  font-size: 18px;

  color: #475569;

  font-weight: 500;

  line-height: 1.9;

}



@media (max-width: 768px) {

  .content-section { padding: 20px; }

  .display-5 { font-size: 2.5rem; }

}