/* ==========================================================================
   Header (Adjustments for Overlap)
   ========================================================================== */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    box-shadow: var(--box-shadow-sm);
    z-index: 1000;
    transition: var(--transition-base);
}

/* Sticky header styles - Adjust padding if needed */
#header-sticky.sticky {
    background: var(--gradient-primary);
    box-shadow: var(--box-shadow-md);
    /*  Add padding adjustments if the sticky header has a different height */
    /* padding-top: 0.8rem;  Example - adjust as needed
       padding-bottom: 0.8rem; */
}

#header-sticky.sticky .main-menu nav > ul > li > a,
#header-sticky.sticky .mobile-menu {
    color: var(--white);
}

/* ... (rest of your header styles - no changes needed here) ... */

/* ==========================================================================
   Main Content Area - Add Padding for Header
   ========================================================================== */

main {
    /*  Add padding-top to account for the fixed header */
    /*  This value should be at least the height of your header */
    padding-top: 70px;  /*  Initial padding - adjust this! */
    /*  Add a transition for smooth adjustment when the header becomes sticky */
    transition: padding-top 0.3s ease;
}

/* Adjust padding when header is sticky */
#header-sticky.sticky ~ main {
   /*  Adjust this padding if the sticky header has a different height */
    padding-top: 60px; /* Example - adjust this! */
}


/* ==========================================================================
   Page Title / Breadcrumb Area (Matching Image)
   ========================================================================== */

.page-title-area {
    background-color: var(--deep-blue); /* Dark blue background */
    padding: 2rem 0; /* Reduced padding */
    text-align: center;
}

.page-title-content h1 {
    font-size: 2.5rem; /* Smaller font size */
    color: var(--white); /* White text */
    margin-bottom: 0.5rem; /* Reduced margin */
}

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

.breadcrumb-item {
    color: rgba(255, 255, 255, 0.7); /* Lighter text color */
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}
.breadcrumb-item.active {
    color: var(--white); /* White text for active item */
    font-weight: 600;
}
/* ==========================================================================
   Service Details Area
   ========================================================================== */

.service-details-area {
    padding: 7.1875rem 0 5.625rem; /* 115px top, 90px bottom */
}

.service-details-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

/* Sidebar Styles */

.service-sidebar {
    grid-column: span 4; /* Span 4 columns */
}

.widget {
    margin-bottom: 2.5rem;
    background-color: var(--white);
    border-radius: var(--border-radius-md);
    padding: 1.875rem;
    box-shadow: var(--box-shadow-sm);
}

.widget-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--deep-blue);
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--light-blue); /* Add a subtle border */
    padding-bottom: 0.625rem;
}

.service-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-categories li {
    margin-bottom: 0.5rem;
}
.service-categories li a {
   display: block; /*  Make links fill the list item */
    padding: 0.5rem 0;
    color: var(--text-gray);
    text-decoration: none;
    transition: var(--transition-base);
    border-bottom: 1px solid #eee;
}
.service-categories li.active a,
.service-categories li a:hover,
.service-categories li a:focus {
    color: var(--accent-blue);
     text-decoration: none;
    font-weight: 600; /*  Make active link bold */
}
/* Main Content Styles */

.service-details-content {
    grid-column: span 8; /* Span 8 columns */
}

.service-image {
    margin-bottom: 1.875rem;
    border-radius: var(--border-radius-md); /* Add a border-radius */
    overflow: hidden; /* Clip image if it overflows */
     width: 100%;
    height: auto;
}

.service-details-content h3 {
    font-size: 2rem;
    color: var(--deep-blue);
    margin-bottom: 1rem;
}

.service-details-content h4 {
    font-size: 1.5rem;
    color: var(--deep-blue);
    margin-bottom: 0.75rem;
}

.service-details-content p {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .service-details-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }

    .service-sidebar,
    .service-details-content {
        grid-column: span 12; /* Full width */
    }
    .service-sidebar {
      margin-bottom: 2rem;
    }
}