/* Great Agency: services menu; extracted from Additional CSS. */
/* =========================
   MAIN MENU
========================= */

.great-services-menu {
    width: 100%;
    padding: 40px;
    padding-left: 80px;
    background: #fff;
    border-radius: 10px;
}


/* =========================
   SERVICE GROUP
========================= */

.service-group {
    margin-bottom: 20px;
}


/* =========================
   CATEGORY TITLE
========================= */

.service-group-title {
    font-size: 18px;
    color: #000000 !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}


/* =========================
   DESKTOP LINKS
========================= */

.desktop-service-links {
    display: block;
}


/* =========================
   LINK / HOVER AREA
========================= */

.service-link {
    position: relative;
    display: block;

    width: 100%;
    height: 26px;

    color: #181818;
    text-decoration: none;

    margin-bottom: 5px;
}


/* Remove default Elementor/link styling */

.service-link:hover,
.service-link:focus {
    color: #181818;
    text-decoration: none;
}


/* =========================
   TEXT
========================= */

.service-text {
    display: inline-block;

    font-size: 18px;
    line-height: 20px;

    transform: translateX(0);

    transition:
        transform 0.45s cubic-bezier(.22,1,.36,1),
        color 0.3s ease;

    will-change: transform;
}


/* =========================
   GREEN LINE
========================= */

.service-link::before {
    content: "";

    position: absolute;

    left: -60px;
    top: 50%;

    width: 0;
    height: 3px;

    background: #02E505;

    transform: translateY(-50%);

    opacity: 0;

    transition:
        width 0.35s ease,
        opacity 0.25s ease;
}


/* =========================
   HOVER
========================= */

.service-link:hover .service-text {
    transform: translateX(40px);
}

.service-link:hover::before {
    width: 40px;
    opacity: 1;
}


/* =========================
   ACTIVE
========================= */

.service-link.active .service-text {
    transform: translateX(40px);
}

.service-link.active::before {
    width: 40px;
    opacity: 1;
}


/* =========================
   MOBILE ACCORDION
========================= */

.mobile-service-group {
    display: none;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .great-services-menu {
        padding: 20px;
        border-radius: 10px;

    }


    /* Hide desktop version */

    .desktop-title,
    .desktop-service-links {
        display: none;
    }


    /* Group spacing */

    .service-group {
        margin-bottom: 0;
    }


    /* =========================
       ACCORDION
    ========================= */

    .mobile-service-group {
        display: block;

        border-bottom: 1px solid #e5e5e5;
    }


    /* =========================
       CATEGORY / SUMMARY
    ========================= */

    .mobile-service-group summary {

        position: relative;

        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        min-height: 55px;

        padding: 0;

        color: #000;

        font-size: 13px;
        font-weight: 700;

        line-height: 1.2;

        letter-spacing: 0.08em;

        cursor: pointer;

        list-style: none;
    }


    /* Remove browser arrow */

    .mobile-service-group summary::-webkit-details-marker {
        display: none;
    }

    .mobile-service-group summary::marker {
        display: none;
    }


    /* =========================
       PLUS ICON
    ========================= */

    .mobile-service-group summary::after {

        content: "+";

        font-size: 24px;
        font-weight: 300;

        line-height: 1;

        transition:
            transform 0.35s ease;
    }


    /* =========================
       MINUS ICON
    ========================= */

    .mobile-service-group[open] summary::after {

        content: "−";

        transform: rotate(180deg);
    }


    /* =========================
       MOBILE LINKS CONTAINER
    ========================= */

    .mobile-service-links {

        padding: 5px 0 15px 0;
    }


    /* =========================
       MOBILE LINK
    ========================= */

    .mobile-service-group .service-link {

        height: 38px;

        margin-bottom: 2px;

        padding-left: 15px;

        display: flex;
        align-items: center;

        color: #181818;
    }


    .mobile-service-group .service-text {

        font-size: 17px;
        line-height: 1;

        transform: translateX(0);

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1);
    }


    /* =========================
       MOBILE GREEN LINE
    ========================= */

    .mobile-service-group .service-link::before {

        left: 0;

        top: 50%;

        width: 0;

        height: 2px;

        transform: translateY(-50%);

        background: #02E505;

        opacity: 0;

        transition:
            width 0.3s ease,
            opacity 0.25s ease;
    }


    /* =========================
       ACTIVE MOBILE LINK
    ========================= */

    .mobile-service-group .service-link.active .service-text {

        transform: translateX(20px);
    }

    .mobile-service-group .service-link.active::before {

        width: 15px;

        opacity: 1;
    }


    /* =========================
       NO HOVER MOVEMENT MOBILE
    ========================= */

    .mobile-service-group .service-link:hover .service-text {

        transform: none;
    }

    .mobile-service-group .service-link:hover::before {

        width: 0;
        opacity: 0;
    }


    /* =========================
       FOCUS
    ========================= */

    .mobile-service-group summary:focus-visible {

        outline: 2px solid #02E505;
        outline-offset: 3px;
    }

}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

    .service-text,
    .service-link::before,
    .mobile-service-group summary::after {
        transition: none;
    }

}