/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-468 {
        /* reduced top padding so it sits closer to the hero */
        padding: clamp(0.75rem, 2vw, 1.25rem) 1rem clamp(1.5rem, 3vw, 2.5rem);
        position: relative;
        background-color: var(--primary);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 50,100' fill='%23d95e0f' opacity='0.5'/%3E%3Cpolygon points='0,0 50,100 0,100' fill='%23c05008' opacity='0.5'/%3E%3Cpolygon points='100,0 100,100 50,100' fill='%23c05008' opacity='0.5'/%3E%3Cpolygon points='15,0 85,0 50,78' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1'/%3E%3Cpolygon points='15,0 85,0 50,78' fill='%23ff8c3f' opacity='0.65'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-shadow: inset 0 -16px 48px rgba(0,0,0,0.5), inset 0 16px 48px rgba(0,0,0,0.35);
    }
    #services-468 .cs-container {
        width: 100%;
        /* narrower box = more left/right white space */
        max-width: 75rem;
        margin: auto;
    }
    /* White panel holding the cards */
    #services-468 .cs-panel {
        background-color: #fff;
        border-radius: 0.75rem;
        padding: clamp(0.5rem, 1vw, 0.75rem);
        box-shadow: 0px 24px 54px rgba(0, 0, 0, 0.18);
    }
    #services-468 .cs-card-group {
        margin: 0;
        padding: 0 0.25rem;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        gap: 0.75rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #services-468 .cs-card-group::-webkit-scrollbar {
        display: none;
    }
    #services-468 .cs-item {
        min-width: calc(50% - 0.375rem);
        flex-shrink: 0;
        scroll-snap-align: start;
        list-style: none;
        padding: clamp(0.375rem, 0.75vw, 0.5rem) 0.75rem;
        box-sizing: border-box;
        border-radius: 0.625rem;
        background-color: #fff;
        border: 3px solid transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.5rem, 1vw, 0.75rem);
        position: relative;
        transition: border-color 0.3s, box-shadow 0.3s;
    }
    /* Highlighted / hovered card gets the blue outline */
    #services-468 .cs-item:hover,
    #services-468 .cs-item.cs-active {
        border-color: var(--primary);
    }
    #services-468 .cs-item:nth-of-type(5) {
        width: auto;
    }
    #services-468 .cs-icon {
        /* 40px - 56px */
        width: clamp(1.75rem, 3vw, 2.25rem);
        height: auto;
    }
    #services-468 .cs-h3 {
        /* 14px - 17px */
        font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        line-height: 1.3em;
        text-align: center;
        margin: 0;
        color: var(--headerColor);
    }

    /* Scroll dots — mobile only */
    #services-468 .cs-scroll-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 0 0.25rem;
    }
    #services-468 .cs-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #cdd0d5;
        transition: background-color 0.3s, transform 0.3s;
        display: block;
    }
    #services-468 .cs-dot.cs-dot-active {
        background-color: var(--primary);
        transform: scale(1.3);
    }

    /* Blue banner bar with arrow + downward pointer */
    #services-468 .cs-banner {
        width: 100%;
        margin: clamp(0.5rem, 1vw, 0.75rem) 0 0;
        box-sizing: border-box;
        padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(1.5rem, 3vw, 2.5rem);
        background-color: var(--primary);
        border-radius: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        position: relative;
        transition: background-color 0.3s;
    }
    #services-468 .cs-banner:hover {
        background-color: var(--primaryDark);
    }
    #services-468 .cs-banner-text {
        font-size: clamp(0.875rem, 1.6vw, 1.25rem);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1.2em;
        color: #fff;
        margin: 0;
    }
    #services-468 .cs-banner-arrow {
        flex-shrink: 0;
        font-size: clamp(1.375rem, 2.5vw, 2rem);
        line-height: 1;
        color: #fff;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-468 .cs-card-group {
        flex-wrap: nowrap;
        flex-direction: row;
        overflow: visible;
        scroll-snap-type: none;
        gap: clamp(0.5rem, 1.5vw, 1.25rem);
        padding: 0;
        justify-content: space-between;
    }
    #services-468 .cs-item {
        flex: 1;
        min-width: 0;
        width: auto;
        scroll-snap-align: none;
    }
    #services-468 .cs-scroll-dots {
        display: none;
    }
}