/* Case Studies Section Styles */

.case-studies-section {
  background-color: #FFFFFF;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; /* To contain any decorative elements */
}

.case-studies-container {
  width: 100%;
  max-width: 1240px; /* Standard content width */
  margin: 0 auto;
  padding: 0 20px; /* Standard padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.case-studies-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px; /* Figma: gap 20px, using 16px for tighter feel */
  margin-bottom: 20px; /* Additional space before the card */
}

.case-studies-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.2; /* Adjusted from 61px for flexibility */
  color: #252525;
  max-width: 971px;
}

.case-studies-subtitle {
  font-family: 'Geist', sans-serif; /* Assuming Geist is loaded or fallback to sans-serif */
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: #797979;
  max-width: 700px; /* Constrain width for readability */
}

.case-study-card-wrapper {
  display: flex;
  justify-content: center; /* Centers the card if it's narrower than container */
  width: 100%;
}

.case-study-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30px; /* Figma: 24px, slightly more for balance */
  gap: 40px;
  width: 100%;
  max-width: 1184px; /* Figma: width */
  /* min-height: 493px; */ /* Removed, height: 100% and box-sizing will manage this */
  background: #EBF1FD; /* Colours/BF Primary Blue/blue-50 */
  box-sizing: border-box; /* Padding and border included in height */
  border: 2px solid #C0D4FA; /* Colours/BF Primary Blue/blue-100 */
  border-radius: 16px;
  position: relative; /* For potential pseudo-elements or patterns */
  overflow: hidden; /* To contain pattern if added */
  height: 100%; /* Each card fills the wrapper's height (now 493px) */
  flex-shrink: 0; /* Prevent cards from shrinking */
}

.case-study-text-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes Read More button down */
  align-items: flex-start;
  gap: 30px; /* Adjusted gap */
  flex: 1; /* Allow text content to take available space */
  max-width: 548px; /* Figma: width */
  z-index: 1; /* Above pattern */
}

.case-study-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px; /* Gap between logo/heading/tags block and stats block */
}

.case-study-logo-box {
  padding: 7px;
  background: #FFFFFF;
  border-radius: 10px;
  display: inline-block; /* To fit content */
  margin-bottom: 16px; /* Space below logo */
}

.case-study-logo {
  display: block;
  width: 195px; /* Figma: 194.97px */
  height: 40px; /* Figma: 39.53px */
  object-fit: contain;
}

.case-study-heading {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.125; /* 36px / 32px */
  color: #0E0E0E;
  margin-bottom: 16px;
}

.case-study-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Allow tags to wrap */
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 24px;
}

.case-study-tag {
  box-sizing: border-box;
  padding: 8px 12px;
  background: #C0D4FA;
  border: 1px solid #A2BFF7;
  border-radius: 8px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px; /* Figma: 16px, slightly smaller for balance */
  line-height: 1.25; /* 20px / 16px */
  color: #1D3F83;
}

.case-study-stats-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 30px; /* Figma: 16px, increased for clarity */
  width: 100%; /* Take full width of its container */
}

.case-study-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px; /* Figma: 8px, slightly smaller */
}

.stat-value {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.2; /* Figma: 61px */
  color: #1D3F83;
}

.stat-label {
  font-family: 'Geist', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.33; /* 24px / 18px */
  color: #3069D9;
}

.case-study-read-more {
  box-sizing: border-box;
  padding: 12px 24px; /* Figma: 14px 24px */
  background: #FFFFFF;
  border: 2px solid #1583D0;
  border-radius: 12px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 500; /* Figma: 400, slightly bolder */
  font-size: 16px;
  line-height: 1.25; /* 20px / 16px */
  color: #141414;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  align-self: flex-start; /* Align to the start of the flex container */
  margin-top: auto; /* Pushes to bottom if space-between is on parent */
}

.case-study-read-more:hover {
  background-color: #1583D0;
  color: #FFFFFF;
}

.case-study-image-container {
  flex: 1; /* Allow image container to take available space */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 548px; /* Figma: width */
  z-index: 1; /* Above pattern */
}

.case-study-image {
  width: 100%;
  max-height: 445px; /* Figma: height */
  object-fit: cover; /* Or contain, depending on image aspect ratio */
  border-radius: 14px;
}

/* Case Studies Body - to hold card wrapper and nav */
.case-studies-body {
  display: flex;
  align-items: center; /* Vertically center children (card wrapper and nav) */
  gap: 30px; /* Adjust gap as needed */
  position: relative; /* For potential absolute positioning within if needed */
}

.case-study-card-wrapper {
  flex-grow: 1; /* Card wrapper takes available space */
  overflow: hidden;
  height: 493px; /* Match Figma card height for the viewport */
  position: relative; /* For positioning the inner container */
}

.case-study-cards-inner-container {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  height: 100%; /* Should be tall enough to contain all cards, or use JS to set */
}

/* Vertical Carousel Navigation */
.case-study-carousel-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 16px;
  width: 36px;
  /* height: 246px; */ /* Height will be determined by content or can be set if needed */
  flex-shrink: 0; /* Prevent nav from shrinking */
}

.case-study-nav-button {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 1px solid #3573EE;
  border-radius: 50%; /* Circular button */
  background-color: #FFFFFF; /* Assuming white background, adjust if needed */
  color: #3573EE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  padding: 0;
}

.case-study-nav-button:hover,
.case-study-nav-button:focus {
  background-color: #3573EE;
  color: #FFFFFF;
  outline: none;
}

.case-study-nav-button i {
  font-size: 16px; /* Adjust icon size as needed */
}

/* Specific for up/down if needed, but general style covers it */
/* .case-study-nav-button.up {} */
/* .case-study-nav-button.down {} */

.case-study-nav-dots {
  display: flex;
  flex-direction: column;
  align-items: center; /* Figma said flex-start, but center is typical for dots */
  padding: 0;
  gap: 14px;
  width: 12px;
}

.case-study-nav-dot {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  background: #C0D4FA;
  border: 1px solid #C0D4FA; /* Or border: none; */
  border-radius: 50%; /* Circular dot */
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.case-study-nav-dot.active {
  background: #3573EE;
  border-color: #3573EE;
}

.case-study-nav-dot:not(.active):hover {
  background: #a0c4f8;
  border-color: #a0c4f8;
}

/* Responsive adjustments if needed */
@media (max-width: 1024px) {
  .case-study-card {
    flex-direction: column;
    align-items: center; /* Center items when stacked */
    padding: 20px;
    gap: 30px;
    min-height: auto;
  }
  .case-study-text-content,
  .case-study-image-container {
    max-width: 100%; /* Allow full width on smaller screens */
    align-items: center; /* Center text content */
    text-align: center;
  }
  .case-study-info, .case-study-stats-block, .case-study-tags {
    align-items: center;
    justify-content: center;
  }
   .case-study-read-more {
    align-self: center;
  }
  .case-study-heading {
    font-size: 28px;
  }
  .stat-value {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .case-studies-title {
    font-size: 36px;
  }
  .case-studies-subtitle {
    font-size: 18px;
  }
  .case-study-heading {
    font-size: 24px;
  }
  .stat-value {
    font-size: 32px;
  }
  .stat-label {
    font-size: 16px;
  }
  .case-study-tag {
    font-size: 12px;
  }
  .case-study-read-more {
    font-size: 14px;
    padding: 10px 20px;
  }
}