/* Services Section Styling */

.services-section {
  position: relative; /* For positioning absolute children like pattern and ellipse */
  width: 100%; /* Figma mentions 1440px, but typically sections are full-width with inner containers */
  /* Assuming 1440px is the max-width of the content area if not full bleed */
  /* height: 617px; */ /* Height will likely be determined by content */
  background: #1583D0; /* Figma: #1583D0 */
  overflow: hidden; /* To contain the absolutely positioned large background elements */
  padding: 60px 0; /* Example padding, adjust as needed */
  margin-top: 80px; /* Space above the services section */
}

.services-pattern-bg {
  position: absolute;
  width: 1628.2px;
  height: 1596.65px;
  left: -453px;
  top: -74.03px;
  background: linear-gradient(129.38deg, rgba(255, 255, 255, 0) 24.67%, rgba(255, 255, 255, 0.2) 74.92%);
  opacity: 0.5;
  transform: rotate(-7.23deg);
  z-index: 1; /* Behind content */
}

.services-ellipse-bg {
  position: absolute;
  width: 1081.3px;
  height: 363px;
  left: 179.59px;
  top: 464.83px;
  background: #E7E6E6;
  opacity: 0.5;
  filter: blur(150px);
  transform: rotate(0.06deg);
  z-index: 1; /* Behind content */
}

.services-content-container {
  position: relative; /* To stack above background elements */
  z-index: 2; /* Above background elements */
  max-width: 1300px; /* Increased width to prevent card cropping */
  margin: 0 auto;
  padding: 0 20px; /* Standard padding */
  display: flex;
  flex-direction: column;
  align-items: center; /* Figma: align center */
  gap: 0px; /* Figma: Frame 1984079819 gap */
}

.services-main-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align to the start to prevent cutting off the first card */
  padding: 0px;
  gap: 48px; /* Figma: Frame 1984079818 gap */
  width: 100%; /* Ensure it takes available width within content-container */
  overflow: hidden; /* Hide the overflowing cards to create a viewport */
}

.services-header {
  display: flex;
  flex-direction: column;
  align-items: center; /* Figma: align center */
  padding: 0px;
  gap: 20px; /* Figma: Frame 1984079672 gap */
}

.services-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  text-align: center;
  color: #FFFFFF;
  margin: 0; /* Reset default margin */
}

.services-subtitle {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #FFFFFF;
  margin: 0; /* Reset default margin */
  max-width: 600px; /* Optional: to constrain width if text is too long */
}

.services-cards-container {
  display: flex;
  flex-direction: row;
  align-items: stretch; /* Ensures cards take full height if their content differs */
  padding: 0px;
  gap: 20px; /* Figma: Frame 1984079817 gap */
  transition: transform 0.5s ease-in-out;
  flex-wrap: nowrap; /* Explicitly prevent wrapping */
  /* No explicit width: it should be the sum of its children's widths */
}

.service-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 24px; /* Figma: Frame 1000004398 gap */
  width: 295px; /* Figma: width */
  min-height: 260px; /* Reduced height */
  background: #FFFFFF;
  border: 1px solid #E5E7EB; /* Figma: Gray/200 */
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0; /* Prevent cards from shrinking */
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.service-card-icon-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0; /* Removed padding to maximize space for img */
  width: 48px; /* Figma: width */
  height: 48px; /* Figma: height */
  background: #EBF1FD; /* Figma: BitsFlow Light Blue */
  border-radius: 50%; /* To make it a circle */
}

.service-card-icon-wrapper img {
  width: 100%; /* Fill the wrapper */
  height: 100%; /* Fill the wrapper */
  object-fit: contain; /* Ensures the SVG scales nicely within the 48x48 box */
}

.service-card-text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px; /* Figma: Frame 1000004397 gap */
  align-self: stretch; /* Takes full width within card padding */
}

.service-card-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 600; /* Figma: SemiBold */
  font-size: 20px;
  line-height: 28px;
  color: #1F2937; /* Figma: Gray/900 */
  margin: 0; /* Reset default margin */
  align-self: stretch;
}

.service-card-description {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-style: normal;
  font-weight: 400; /* Figma: Regular */
  font-size: 14px;
  line-height: 20px;
  color: #4B5563; /* Figma: Gray/600 */
  margin: 0; /* Reset default margin */
  align-self: stretch;
  flex-grow: 1; /* Allow description to take available space, pushing 'Learn More' down */
}

.service-card-learn-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; /* Align icon to the start */
  padding: 8px 0; /* Add some padding if needed, adjust as necessary */
  /* gap: 8px; */ /* Gap might not be needed if only icon is present */
  color: #0062D1; /* Figma: BitsFlow Primary Blue */
  text-decoration: none;
  transition: color 0.3s ease;
  width: 24px; /* Set a width to contain the icon */
  height: 24px; /* Set a height */
  border: 1px solid #0062D1; /* Example border, similar to Figma arrow buttons */
  border-radius: 50%;
  justify-content: center; /* Center icon within the circle */
}

.service-card-learn-more i {
  font-size: 12px; /* Adjust icon size if needed */
  transition: transform 0.3s ease;
  line-height: 1; /* Ensure icon is centered if it has inherent line-height */
}

.service-card-learn-more:hover {
  color: #FFFFFF; /* White icon on hover */
  background-color: #00408A; /* Darker blue background for hover */
  border-color: #00408A;
  /* text-decoration: underline; */ /* Not needed for icon only */
}

.service-card-learn-more:hover i {
  transform: translateX(3px);
}

.services-carousel-controls {
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* Align buttons to the right */
  align-items: center;
  padding: 0px;
  gap: 16px; /* Figma: gap between buttons */
  margin-top: 24px; /* Add some space above the controls, adjust as needed */
  width: 100%; /* Ensure the container takes full width to allow right alignment */
}

.service-carousel-nav-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px; /* Figma: padding */
  width: 44px; /* Figma: width */
  height: 44px; /* Figma: height */
  background: #FFFFFF; /* Figma: White */
  border: 1px solid #D1D5DB; /* Figma: Gray/300 */
  border-radius: 50%; /* Circular buttons */
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  color: #374151; /* Figma: Gray/700 for icon color */
}

.service-carousel-nav-btn i {
  font-size: 16px; /* Adjust icon size as needed */
  line-height: 1; /* Ensure icon is centered vertically */
}

.service-carousel-nav-btn:hover {
  background: #F3F4F6; /* Figma: Gray/100 */
  border-color: #9CA3AF; /* Figma: Gray/400 */
}

.service-carousel-nav-btn:disabled {
  background: #F9FAFB; /* Figma: Gray/50 */
  border-color: #E5E7EB; /* Figma: Gray/200 */
  color: #9CA3AF; /* Figma: Gray/400 for icon color */
  opacity: 0.7; /* Slightly more visible than 0.5, adjust as preferred */
  cursor: not-allowed;
}

/* End of Services Section Styling */