.section-description{
    text-align: center;
}
.service-hero .title,
.service-hero .subtitle {
    text-align: center !important;
}

/* Container for all service rows */
.services-row-container {
    border-top: 1px solid #eee; /* The single line at the very top */
}

/* Individual Service Item Styling */
.service-item-rich {
    padding: 2.5rem 0; /* Vertical padding */
    border-bottom: 1px solid #eee; /* The line separating each service */
    transition: background-color 0.3s;
}

/* Subtle background change on hover for the whole row */
.service-item-rich:hover {
    background-color: #fafafa; 
}

/* Remove default column margins from the main columns inside the service item */
.service-item-rich > .columns {
    margin: 0 !important;
    padding: 0;
}

/* Column for the Serial Number */
.service-number-col {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align number to the left */
}

.service-serial {
    font-size: 2rem; 
    font-weight: 700;
    color: #ccc; /* Light grey for the serial number */
    line-height: 1;
}

/* Column for the Image */
.service-image-col {
    display: flex;
    align-items: center;
    padding-left: 0; /* Ensure the image is tight against the number column if possible */
}

.service-row-image {
    width: 100%;
    height: auto;
    max-height: auto; /* Control image height */
    object-fit: cover;
    border-radius: 4px;
}

/* Column for the Content and Arrow */
.service-content-col {
    padding-left: 1.5rem; /* Space between image and text */
}

/* Ensure the inner columns (title/text/arrow) are aligned vertically */
.service-content-col .columns {
    margin: 0 !important;
}

.service-content-col .title {
    color: #222 !important; 
    
}

/* Arrow Link Styling */
.service-arrow-link {
    display: inline-flex;
    align-items: center;
    color: #e53935; /* Your brand red */
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap; /* Keep link text and arrow together */
}

.service-arrow-link i {
    font-size: 1.1em;
    margin-left: 0.5rem;
    transition: transform 0.3s;
}

.service-arrow-link:hover {
    color: #cc0000;
}

/* Push the arrow slightly right on hover */
.service-arrow-link:hover i {
    transform: translateX(1px);
}

/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
    .service-item-rich {
        padding: 1.5rem 0;
    }

    /* Reduce vertical padding around the columns on mobile */
    .service-number-col, 
    .service-image-col, 
    .service-content-col {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* On mobile, remove the long description and center the link/arrow below the title */
    .service-content-col .columns .column {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    
    .service-content-col .title {
        margin-bottom: 0.5rem !important;
    }

    /* Force the arrow link to the left on mobile for better flow */
    .service-content-col .has-text-right-desktop {
        text-align: left !important;
    }
}
/* --- Service Details Panel Styling (for sliding content) --- */



.close-panel-btn {
    margin-top: 1rem;
    cursor: pointer;
}
/* Custom CSS to increase the height of the Animation Service Detail rows */
.service-detail-item {
    /* Adds significant vertical spacing. Adjust '3rem' (approx 48px) as needed. */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Optional: Make the spacing less aggressive on mobile devices */
@media (max-width: 768px) {
    .service-detail-item {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}
/* Custom CSS to increase the height of the Animation Service Detail rows */
.service-detail-item {
    /* Adds significant vertical spacing. Adjust '3rem' (approx 48px) as needed. */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Optional: Make the spacing less aggressive on mobile devices */
@media (max-width: 768px) {
    .service-detail-item {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}
/* Custom CSS to increase the vertical space around the image */
.service-image-spacer {
    /* Increase this value to increase the row height */
    margin-top: 6rem !important;    /* Increased from 3rem */
    margin-bottom: 6rem !important; /* Increased from 3rem */
}

/* If you are using the service-detail-item class, ensure it has NO padding */
.service-detail-item {
    padding-top: initial;
    padding-bottom: initial;
}
/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
    
    /* ... (keep your existing mobile rules here) ... */
        .navbar{ 
            width: 100%;
        }
    /* Ensure the Name/Desc and Link columns stack and use full width */
    .service-content-col > .columns > .column {
        /* Force to full width on mobile, ensuring they stack vertically */
        width: 100% !important; 
        /* Adjust horizontal padding to match overall layout */
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Force the link's container to align its content to the left on mobile */
    .service-content-col .has-text-right-desktop {
        text-align: left !important;
    }
    
    /* Add vertical space (margin) below the service description (subtitle) 
       so the "View Details" link sits clearly below it. */
    .service-content-col .subtitle {
        margin-bottom: 1rem !important; 
    }
}
/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
    
    /* 1. HIDE the service description (subtitle) to move the link up */
    .service-content-col .subtitle {
        display: none !important;
    }

    /* 2. Ensure the link container aligns left on mobile (you likely have this already) */
    .service-content-col .has-text-right-desktop {
        text-align: left !important;
        /* Reduce top padding if the link is in a separate column */
        padding-top: 0; 
    }
    
    /* 3. Add a small margin below the service name (title) to separate it from the link */
    .service-content-col .title {
        margin-bottom: 0.5rem !important; /* Adjust this gap as needed */
    }
    
    /* 4. Ensure the link is treated as a block for correct spacing */
    .service-arrow-link {
        display: inline-block;
        margin-bottom: 1rem; /* Add space below the link before the next element/row */
    }
    
    /* Ensure the nested columns still stack correctly (if needed) */
    .service-content-col > .columns > .column {
        width: 100% !important; 
    }
}
/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
    
    /* HIDE the service description (subtitle) to move the link up */
    .service-content-col .subtitle {
        display: none !important;
    }

    /* Ensure the title is snug to the link */
    .service-content-col .title {
        margin-bottom: 0.5rem !important; /* Small gap between Title and Link */
    }

    /* Force the link's container to align its content to the left on mobile */
    .service-content-col .has-text-right-desktop {
        text-align: left !important;
        /* Ensure no extra top padding is pushing it down */
        padding-top: 0; 
    }
    
    /* Ensure the link is treated as a block for correct spacing */
    .service-arrow-link {
        display: inline-block;
        margin-bottom: 1rem; /* Space below the link before the next service row */
    }
    
    /* Ensure the nested columns still stack correctly */
    .service-content-col > .columns > .column {
        width: 100% !important; 
    }
}
/* Styling for the Detail Panel Header Area on Mobile/Tablet */
@media (max-width: 1023px) { 

    /* Ensure the main descriptive text takes full width */
    .service-details-panel .panel-content > p:first-child {
        width: 100%;
        display: block; /* Important: Treat as a full block element */
        text-align: left !important; /* Align the text to the left */
        margin-bottom: 0.5rem !important; /* Reduce space before the button */
    }

    /* Ensure the button container takes full width and aligns the button left */
    .service-details-panel .has-text-centered.mt-4 {
        width: 100%;
        display: block; /* Treat as a full block element */
        text-align: left !important; /* Crucial: Align the button left */
        margin-top: 0.5rem !important; /* Adjust space above the button */
    }
}
 
/* MOBILE + TABLET (Title + View Details only) */
@media (max-width: 1024px) {

    /* Hide the service description (subtitle) */
    .service-content-col .subtitle {
        display: none !important;
    }

    /* Stack title + button */
    .service-content-col .columns {
        flex-direction: column !important;
    }

    /* Make title full width */
    .service-content-col .columns > .column:first-child {
        width: 100% !important;
    }

    /* Move the View Details link immediately under the title */
    .service-content-col .columns > .column:last-child {
        width: 100% !important;
        text-align: left !important;
        padding-top: 0 !important;
        margin-top: 0.3rem !important;
    }

    .service-arrow-link {
        display: inline-block;
        margin-bottom: 0.3rem;
    }
}
/* ========== TIMELINE CONTAINER ========== */
.timeline-section {
    position: relative;
    padding: 80px 0;
}

/* The wrapper that holds the line */
#timeline-progress {
    position: relative;
    width: 100%;
}

/* ========== VERTICAL RED FALLING LINE ========== */
#progress-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: #ff3b30;
    height: 0;
    border-radius: 3px;
    z-index: 1;
}

/* ========== TIMELINE LAYOUT ========== */
.timeline {
    position: relative;
    width: 100%;
    margin-top: 60px;
}

/* Each step block */
.timeline-row {
    position: relative;
    margin: 80px 0;
}

/* ========== DOTS ========== */
.step-number {
    background: #ff3b30;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

/* hidden dot measuring element */
.timeline-row::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 20px;
    width: 18px;
    height: 18px;
    background: #ff3b30;
    border: 3px solid white;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    top: 50%;
    
}

/* ========== TIMELINE CARD ========== */
.timeline-card {
    width: 42%;
    background: #ffffff;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Left & Right alternating layout */
.timeline-row:nth-child(odd) .timeline-card {
    margin-left: 0;
}

.timeline-row:nth-child(even) .timeline-card {
    margin-left: 58%;
}

/* Responsive fix */
@media (max-width: 768px) {
    .timeline-card {
        width: 90%;
        margin: 0 auto !important;
    }
}
.timeline-row {
    position: relative;
    margin: 100px 0;
    min-height: 20px;
}
.timeline-row:nth-child(odd) .timeline-card {
    margin-left: 0;
}

.timeline-row:nth-child(even) .timeline-card {
    margin-left: 55%;
}

.timeline-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.timeline-dot {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 4px solid #ff3b30;
    z-index: 2;
    transition: 0.3s ease;
    scale: 0.5;
    opacity: 0;
}
#progress-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    background: linear-gradient(#ff3b30, #c70000);
    height: 0;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(255,0,0,0.4);
    z-index: 1;
}
/* default dot */
.timeline-row::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    background: #ff3b30;
    border: 3px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 3;
}

/* enlarged effect when activated */
.timeline-row.active-dot::before {
    transform: translate(-50%, -50%) scale(1.7);
    box-shadow: 0 0 12px rgba(255, 59, 48, 0.7);
}

/* default dot */
.timeline-row::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    background: #ff3b30;
    border: 3px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 3;
}

/* enlarged effect when activated */
.timeline-row.active-dot::before {
    transform: translate(-50%, -50%) scale(1.7); /* Scale up dot */
    box-shadow: 0 0 12px rgba(255, 59, 48, 0.7); /* Add glowing shadow */
}

/* Optional: Add a style to the content card when active */
.timeline-row.active-dot .timeline-card {
    border: 1px solid #ff3b30;
    transition: border 0.3s ease;
}
.timeline-row::before {
    /* ... other styles ... */
    top: 50% !important; /* The visual dot is vertically centered within the row */
    transform: translate(-50%, -50%) !important;
    /* ... other styles ... */
}
/* ================================================= */
/* === RESPONSIVE: HIDE LINE AND DOTS ON MOBILE/TABLET === */
/* ================================================= */

@media (max-width: 1023px) {
    /* 1. Hide the vertical line */
    #progress-line {
        display: none !important;
    }

    /* 2. Hide the dots (which are pseudo-elements on .timeline-row) */
    .timeline-row::before {
        display: none !important;
        content: none !important; /* Use content:none for pseudo-elements */
    }

    /* Optional: Ensure the timeline cards stack correctly */
    .timeline-row .timeline-card {
        width: 100% !important; /* Force cards to full width */
        margin-left: 0 !important; /* Remove any left/right offsets for the card */
    }
}
/* ======================================= */
/* ========== VERTICAL PROGRESS LINE ========== */
/* This now uses a CLASS selector to support multiple timelines */
.progress-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; /* Must match the width in your original ID selector */
    background: linear-gradient(#ff3b30, #c70000); /* Must match your original color/gradient */
    height: 0;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(255,0,0,0.4);
    z-index: 1;
}

/* Also ensure your media query update (for mobile view) is included */
@media (max-width: 1023px) {
    .progress-line {
        display: none !important;
    }
    /* ... and other mobile styles for .timeline-row::before ... */
}
/* service-details-panel: Hides the panel by default */

/* Style for the close button */
.close-panel-btn {
    margin-top: 1rem;
    cursor: pointer;
}

/* ======================================= */
/* ========== SERVICE DETAIL PANEL (The definitive block) ========== */
.service-details-panel {
    max-height: 0 !important; 
    overflow: hidden !important; 
    opacity: 0 !important;
    padding: 0 !important; 
    margin: 0 !important;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    background-color: #f7f7f7;
    border-bottom: 1px solid #eee;
}

/* Showing state (on click) */
.service-details-panel.is-active {
    max-height: 3000px !important; /* Large height for slide down */
    opacity: 1 !important;
    padding-top: 2rem !important; 
    padding-bottom: 2rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
}

/* Ensure the inner content doesn't push it open when closed */
.service-details-panel:not(.is-active) .panel-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Restore content padding when active */
.service-details-panel.is-active .panel-content {
    padding: 2rem 2.5rem !important;
}
/* 1. Base State (Hidden) */
.service-details-panel {
    /* CRITICAL: Hides the content by collapsing its height */
    max-height: 0; 
    overflow: hidden;

    /* OPTIONAL: Adds padding for visual space, but make sure it's inside the transition */
    padding-top: 0; 
    padding-bottom: 0;
    
    /* CRITICAL: Defines the animation effect */
    transition: max-height 0.5s ease-out, padding-top 0.5s ease-out, padding-bottom 0.5s ease-out;
}

/* 2. Active State (Shown) */
.service-details-panel.is-active {
    /* CRITICAL: Set this to a value guaranteed to be larger than your panel's content. */
    /* 1000px is a safe number for almost any content block. */
    max-height: 1000px; 
    
    /* Restore/apply the desired vertical padding */
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem;
}