/* ==========================================================================
   Page Title Area (Consistent)
   ========================================================================== */
.page-title-area {
    background-color: var(--deep-blue); /* Or your desired background */
    padding: 2rem 0;
    text-align: center;
}

.page-title-content h1 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.breadcrumb {
    justify-content: center;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
     text-decoration: underline;
}
.breadcrumb-item.active {
    color: var(--white);
    font-weight: 600;
}

/* ==========================================================================
  About Section
   ========================================================================== */
.about-section {
  padding: 7.1875rem 0 4.375rem;
  background-color: var(--white);
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  align-items: center;
}

.about-image {
    position: relative; /* Needed for aspect ratio handling */
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio (adjust as needed) */
    overflow: hidden;  /* Hide any overflowing image */
    border-radius: var(--border-radius-md);
}
 .about-image img {
    position: absolute; /* Take image out of the flow */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio and cover the area */
    object-position: center; /* Center the image */
}
.about-section .section-title h2 {
  color: var(--deep-blue);
}
.about-section .section-title h6 {
  color: var(--accent-blue);
}
 .about-content p {
    color: var(--text-gray);
    margin-bottom: 1rem;
    line-height: 1.6;
}
/* ==========================================================================
    Testimonial Area
   ========================================================================== */

   .testimonial-section {
    padding: 7.1875rem 0; /* 115px top, 120px bottom */
    position: relative;
    background-color: var(--deep-blue); /* Use your desired background color */
    color: var(--white); /* Text color on the background */
    overflow: hidden;        /* Hide overflowing carousel items */
}

.testimonial-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*  Subtle background gradient (optional - adjust to your liking) */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.4));
    z-index: 1; /* Behind the content */
}

.testimonial-section > .container {
    position: relative; /* Ensure container is above background */
    z-index: 2;
}

.testimonial-carousel {
    /*  No specific styles needed here if using overflow-x */
    overflow-x: auto;
}

.testimonial-wrapper {
    display: flex; /* Allows for horizontal scrolling */
    gap: 2rem;     /* Space between testimonials */
    padding-bottom: 1rem; /* Add padding to prevent scrollbar overlap */
     width: max-content;
}
.testimonial-section .section-title h2 {
    color: var(--white);
}
.testimonial-section .section-title h6 {
    color: var(--accent-blue);
}
.single-testimonial {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    border-radius: var(--border-radius-md);
    padding: 2.5rem; /* 40px */
    box-shadow: var(--box-shadow-sm);
    transition: var(--transition-base);
    flex: 0 0 auto;      /* Don't grow or shrink, use width */
    width: 350px;       /* Adjust width as needed */
     /* For a basic carousel, don't let items shrink */
}

.single-testimonial:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-md);
}

.testimonial-content {
    margin-bottom: 1.875rem;
    position: relative; /* For positioning the quote icons */
}

.testimonial-content p {
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 0; /* Remove default bottom margin */
    color: #eee;
}

.quote-icon {
    font-size: 2.5rem; /* Larger quote icons */
    color: var(--accent-blue);
    font-family: Georgia, serif; /* Use a serif font for quotes */
    line-height: 1;
    position: absolute; /* Position the quote icons */
}

.quote-icon:first-child {
    top: 0;
    left: 0;
}

.quote-icon:last-child {
    bottom: 0;
    right: 0;
}
.testimonial-content p {
    padding-left: 2rem;
    padding-right: 2rem;
}
.testimonial-meta {
    display: flex; /* Align avatar and info */
    align-items: center;
    gap: 1.25rem;  /* 20px */
}

.testimonial-avatar {
    width: 60px; /* Adjust size as needed */
    height: 60px;
    border-radius: 50%; /* Circular avatar */
    overflow: hidden; /* Clip image to the circle */
    flex-shrink: 0;     /* Prevent avatar from shrinking */
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image fills the circle */
    object-position: center;
}

.testimonial-info {
  /* No specific styles, let content flow */
}
.testimonial-info h5 {
     color: white;
}
.testimonial-info span {
     color: #eee;
}
.testimonial-rating {
    margin-top: 0.5rem;
    color: var(--warning-yellow); /* Use your star color */
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .testimonial-wrapper {
        flex-wrap: nowrap; /* Prevent wrapping on small screens */
    }
     .single-testimonial {
        width: 85%; /* Adjust width for smaller screens */
        /*  Or use a fixed width if you prefer: width: 280px; */
    }
}

/* ==========================================================================
    capabilities section
   ========================================================================== */
.capabilities-area {
    padding: 7.1875rem 0; /* 115px top/bottom */
    position: relative;
    background-color: var(--light-blue);  /* Light background */
    overflow: hidden; /* For background effect */
}

.capabilities-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*  Subtle gradient or pattern (optional - adjust to your liking) */
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
    z-index: 1; /* Behind content */
}

.capabilities-area > .container {
  position: relative; /* Ensure container is above the background */
    z-index: 2;
}
.capabilities-area .section-title h2 {
  color: var(--deep-blue);
}
.capabilities-area .section-title h6 {
  color: var(--accent-blue);
}
.capabilities-area .section-title p {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-gray);
}
.single-capability {
    margin-bottom: 3.125rem; /* 50px */
    background-color: var(--white);
    border-radius: var(--border-radius-md);
    padding: 2.5rem;  /* Add padding inside the card */
    box-shadow: var(--box-shadow-sm);
    transition: var(--transition-base);
     text-align: center; /* Center content */
}
.single-capability:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-md);
}
.capability-icon {
  width: 4.375rem;
  height: 4.375rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5625rem;
  background-color: var(--light-blue);
  transition: var(--transition-base);
}
.capability-icon i {
    font-size: 2rem; /* 32px */
    color: var(--primary-blue);
    transition: var(--transition-base);
}
.single-capability:hover .capability-icon {
    background-color: var(--primary-blue);
    transform: rotate(360deg);
}
.single-capability:hover .capability-icon i {
    color: var(--white);
}
.capability-content h4 {
    font-size: 1.25rem; /* 20px */
    margin-bottom: 0.625rem; /* 10px */
    color: var(--deep-blue);
}
.capability-content p {
   color: var(--text-gray);
    margin-bottom: 0; /* Remove default bottom margin */
    line-height: 1.5; /* Improve readability */
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .single-capability {
    padding: 1.875rem; /* Reduce padding on smaller screens */
  }
  .capability-icon {
    margin-bottom: 1.25rem;
  }
  .capability-content h4 {
    font-size: 1.125rem;
  }
}

@media (max-width: 767.98px) {

  .capabilities-area .section-title p {
    max-width: 100%; /* Allow full width on smaller screens */
  }
    .section-title {
        margin-bottom: 2rem;
    }
}

/* Responsive Adjustments */

@media (max-width: 991.98px) {
     .about-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
      .about-image {
        margin-bottom: 2rem; /* Add spacing between image and content */
    }
}