/**
 * Provided Services
 */

/* ============================================================
   Section
   ============================================================ */

.provided-services {
    padding: var( --section-margins-sm ) 0;
    background-color: #fff;
}

/* ============================================================
   Header  —  heading + CTA button
   ============================================================ */

.ps__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.ps__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: normal;
    color: #494b4d;
    margin: 0;
}

/* ============================================================
   Yellow divider
   ============================================================ */

.ps__divider {
    width: 144px;
    height: 4px;
    background-color: var( --yellow );
    margin: 25px 0;
}

/* ============================================================
   Description
   ============================================================ */

.ps__description {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var( --grey );
    margin-bottom: 30px;
}

.ps__description p:last-child {
    margin-bottom: 0;
}

.ps__description strong,
.ps__description b {
    font-weight: 600;
}

/* ============================================================
   CTA button
   ============================================================ */

.ps__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 22px 30px;
    background-color: var( --yellow );
    color: #4a4b4d;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.44px;
    text-decoration: none;
    transition: var( --transition );
    white-space: nowrap;
}

.ps__cta:hover {
    opacity: 0.85;
    color: #4a4b4d;
}

.ps__cta .fas {
    font-size: 12px;
}

.ps__cta--desktop {
    display: none;
}

.ps__cta--mobile {
    display: inline-flex;
    margin-bottom: 30px;
}

/* ============================================================
   Desktop tabs  —  hidden on mobile
   ============================================================ */

.ps__tabs {
    display: none;
}

/* ============================================================
   Mobile category selector
   ============================================================ */

.ps__category-select {
    position: relative;
    margin-bottom: 15px;
}

.ps__category-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 331px;
    height: 64px;
    padding: 0 15px;
    border: 1px solid var( --blue );
    border-radius: 3px;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var( --blue );
    text-transform: uppercase;
    letter-spacing: 1.44px;
    cursor: pointer;
    transition: var( --transition );
}

.ps__category-btn-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.ps__category-btn[aria-expanded="true"] .ps__category-btn-icon {
    transform: rotate( 180deg );
}

.ps__category-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    width: 100%;
    max-width: 331px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var( --blue );
    border-top: 0;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 6px 16px 4px rgba( 0, 0, 0, 0.06 );
}

.ps__category-dropdown--open {
    display: block;
}

.ps__category-option {
    display: block;
    width: 100%;
    padding: 16px 15px;
    border: 0;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var( --blue );
    text-transform: uppercase;
    letter-spacing: 1.44px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ps__category-option:hover,
.ps__category-option--active {
    background-color: var( --ultra-light-grey );
}

/* ============================================================
   Panels
   ============================================================ */

.ps__panel {
    display: none;
}

.ps__panel--active {
    display: block;
}

/* ============================================================
   Desktop layout  —  hidden on mobile
   ============================================================ */

.ps__desktop-layout {
    display: none;
}

/* ============================================================
   Mobile accordion
   ============================================================ */

.ps__mobile-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ps__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 331px;
    height: 64px;
    padding: 0 15px;
    border: 1px solid var( --blue );
    border-radius: 3px;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var( --blue );
    text-transform: uppercase;
    letter-spacing: 1.44px;
    cursor: pointer;
    transition: var( --transition );
}

.ps__accordion-chevron {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.ps__accordion--open .ps__accordion-trigger {
    display: none;
}

.ps__accordion-panel {
    display: none;
    max-width: 331px;
}

.ps__accordion--open .ps__accordion-panel {
    display: block;
}

.ps__accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var( --blue );
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.44px;
    padding: 20px 16px;
    border: 0;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
}

.ps__accordion-body {
    background: #fff;
    padding: 30px 16px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 16px 4px rgba( 0, 0, 0, 0.06 );
}

.ps__accordion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ps__accordion-item {
    display: flex;
    align-items: flex-start;
    gap: 19px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var( --grey );
}

.ps__accordion-item::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background-color: var( --blue );
    margin-top: 8px;
}

/* ============================================================
   Tablet  (768px+)
   ============================================================ */

@media ( min-width: 768px ) {
    .ps__heading {
        font-size: 40px;
    }

    .ps__description {
        font-size: 18px;
    }

    .ps__accordion-trigger,
    .ps__accordion-panel,
    .ps__category-btn,
    .ps__category-dropdown {
        max-width: 100%;
    }
}

/* ============================================================
   Desktop  (1025px+)
   ============================================================ */

@media ( min-width: 1025px ) {

    .ps__heading {
        font-weight: 500;
        font-size: 50px;
        line-height: 1.3;
        color: #4a4b4d;
    }

    .ps__description {
        font-size: 20px;
        max-width: 987px;
    }

    .ps__cta--desktop {
        display: inline-flex;
    }

    .ps__cta--mobile {
        display: none;
    }

    /* ---- Tabs ---- */

    .ps__tabs {
        display: flex;
        align-items: stretch;
        background-color: var( --ultra-light-grey );
        border-radius: 4px;
        box-shadow: 0 6px 16px 0 rgba( 0, 0, 0, 0.11 );
        overflow: hidden;
    }

    .ps__tab {
        flex: 0 0 auto;
        padding: 0 30px;
        height: 55px;
        border: 0;
        background: transparent;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #4a4b4d;
        text-transform: uppercase;
        letter-spacing: 1.44px;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-align: left;
    }

    .ps__tab:hover {
        background-color: rgba( 247, 204, 64, 0.3 );
    }

    .ps__tab--active {
        background-color: var( --yellow );
        border-radius: 3px 3px 0 0;
    }

    /* ---- Category selector hidden on desktop ---- */

    .ps__category-select {
        display: none;
    }

    /* ---- Desktop layout ---- */

    .ps__desktop-layout {
        display: grid;
        grid-template-columns: 2fr 3fr;
    }

    .ps__mobile-layout {
        display: none;
    }

    /* ---- Icon grid ---- */

    .ps__icon-grid {
        display: grid;
        grid-template-columns: repeat( 2, 1fr );
        background: #fff;
        border-radius: 0 0 0 4px;
        box-shadow: 0 6px 16px 4px rgba( 0, 0, 0, 0.11 );
        overflow: hidden;
    }

    .ps__icon-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 30px 20px;
        border: 0;
        background: #fff;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        min-height: 200px;
    }

    .ps__icon-card:hover {
        background-color: rgba( 0, 129, 198, 0.05 );
    }

    .ps__icon-card--active {
        background-color: var( --blue );
    }

    .ps__icon-card--active:hover {
        background-color: var( --blue );
    }

    .ps__icon-card-img {
        width: 77px;
        height: 77px;
    }

    .ps__icon-card-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: filter 0.3s ease;
    }

    .ps__icon-card--active .ps__icon-card-img img {
        filter: brightness( 0 ) invert( 1 );
    }

    .ps__icon-card-name {
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-size: 22px;
        line-height: 1.5;
        color: var( --blue );
        text-align: center;
    }

    .ps__icon-card--active .ps__icon-card-name {
        color: #fff;
    }

    /* ---- Detail panel ---- */

    .ps__detail {
        display: none;
    }

    .ps__detail--active {
        display: flex;
        flex-direction: column;
    }

    .ps__detail-header {
        background-color: var( --blue );
        padding: 18px 30px;
        border-radius: 4px 4px 0 0;
    }

    .ps__detail-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-size: 24px;
        line-height: 1.5;
        color: #fff;
        margin: 0;
    }

    .ps__detail-body {
        flex: 1;
        background: #fff;
        padding: 30px;
        border-radius: 0 0 4px 0;
        box-shadow: 0 6px 16px 4px rgba( 0, 0, 0, 0.06 );
    }

    .ps__detail-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px 40px;
    }

    .ps__detail-item {
        display: flex;
        align-items: flex-start;
        gap: 19px;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        color: var( --grey );
    }

    .ps__detail-item::before {
        content: '';
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background-color: var( --blue );
        margin-top: 4px;
    }
}