/* ----- SERVICE DETAILS ----- */
.ul-service-details {
    &-sidebar {
        @include md {
            display: flex;
            gap: 25px;
            align-items: flex-start;
        }

        @include sm {
            flex-direction: column;
            align-items: stretch;
            row-gap: 0;
        }

        >* {
            flex: 50%;

            @include sm {
                flex: auto;
                width: 70%;
                margin-inline: auto;
            }

            @include xxs {
                width: 100%;
            }
        }

        &-widget {
            background-color: #F2F7FD;
            border-radius: 10px;
            padding: clamp(20px, 2.10vw, 40px) clamp(15px, 1.84vw, 35px);

            &:not(:last-child) {
                margin-bottom: clamp(15px, 1.84vw, 35px);
            }

            &-title {
                font-size: clamp(18px, 1.16vw, 22px);
                color: var(--black);
                font-weight: 700;
                position: relative;
                margin-bottom: clamp(12px, 1.16vw, 22px);
                padding-bottom: clamp(8px, 0.68vw, 13px);

                &::before,
                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 3px;
                    width: 20px;
                    background-color: var(--black);
                }

                &::after {
                    left: 26px;
                    width: 63px;
                    background-color: var(--ul-primary);
                }
            }

            .service-list {
                display: flex;
                flex-direction: column;
                gap: clamp(9px, 0.63vw, 12px);

                a {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: var(--white);
                    color: var(--black);
                    padding: clamp(10px, 0.74vw, 14px) clamp(14px, 1.26vw, 24px);
                    border-radius: 8px;
                    font-size: clamp(13px, 0.84vw, 16px);
                    line-height: 1.7;
                    font-weight: 400;

                    &:hover,
                    &.current {
                        background-color: var(--ul-primary);
                        color: var(--white);
                    }
                }
            }
        }
    }

    &-cover-img {
        margin-bottom: clamp(20px, 2.10vw, 40px);
        display: flex;
        gap: clamp(15px, 1.58vw, 30px);

        >* {
            flex-shrink: 0;
            object-fit: cover;
            width: 100%;
            border-radius: 15px;
        }

        .img-1 {
            aspect-ratio: 230/301;
            width: 30%;
        }

        .img-2 {
            aspect-ratio: 510/301;
            flex-grow: 1;
            width: calc(70% - clamp(15px, 1.58vw, 30px));
        }
    }

    &-cta {
        display: grid;
        place-content: center;
        background-color: #000929;
        color: var(--white);
        text-align: center;
        border-radius: 10px;
        padding: 15px;
        aspect-ratio: 1/1;
        overflow: hidden;
        position: relative;
        z-index: 1;

        .icon {
            background-color: var(--white);
            color: var(--ul-primary);
            width: clamp(45px, 3.15vw, 60px);
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            margin: auto;
            font-size: clamp(17px, 1.05vw, 20px);
            outline: 1px solid var(--white);
            outline-offset: 5px;
            margin-bottom: clamp(14px, 1.26vw, 24px);
        }

        .title {
            font-weight: 700;
            font-size: clamp(18px, 1.16vw, 22px);
            margin-bottom: clamp(2px, 0.26vw, 5px);
        }

        .number {
            color: var(--white);
            font-size: clamp(15px, 0.95vw, 18px);
            font-weight: 700;

            &:hover {
                color: var(--ul-primary);
            }
        }
    }

    &-title {
        font-weight: 700;
        font-size: clamp(23px, 1.58vw, 30px);
        margin-bottom: clamp(12px, 1.42vw, 27px);
    }

    &-descr {
        font-size: clamp(13px, 0.84vw, 16px);
        color: var(--ul-gray2);
        line-height: 1.625;
        margin-bottom: clamp(16px, 1.37vw, 26px);
    }

    &-faq {
        .ul-single-accordion-item {
            border: 1px solid #eaf3f8;
            border-radius: 5px;
            padding-block: clamp(17px, 1.42vw, 27px);
            margin-bottom: clamp(7px, 0.53vw, 10px);

            &:last-child {
                margin-bottom: 0;
            }

            &__title {
                text-transform: unset;
                font-weight: 600;
                font-size: clamp(17px, 1.05vw, 20px);
            }

            &.open {
                background-color: #F2F7FD;
            }
        }
    }
}