.page-hero {
        margin-top: 80px;
        padding-top: 110px;
    }
    a.view-services {
        margin-top: 20px;
        padding: 10px 15px;
        width: max-content;
        border-radius: 10px;
        color: #000;
        background-color: #fff;
        justify-content: center;
        align-items: center;
        display: flex;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
    }
    section.mission {
        margin: 0 56px;
        & .inner {
            margin: 120px 0;
            padding: 50px;
            display: grid;
            justify-self: center;
            max-width: 740px;
            background-color: #181818;
            border-radius: 11px;
        }
        & p {
            text-align: center;
            margin-bottom: 14px;
            font-size: 16px;
            color: var(--muted);
        }
        & h2 {
            font-size: clamp(28px, 6vw, 38px);
            line-height: 1.06;
            font-weight: 400;
            text-align: center;            
        }
    }
    .services {
        scroll-margin-top: 120px;
        margin: 50px 56px;
        & h2 {
            font-size: clamp(28px, 6vw, 38px);
            text-align: center;
            font-weight: 500;
        }
        & div.tabs {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 30px;
            & div.service {
                border-radius: 11px;
                overflow: hidden;
                display: grid;
                height: auto;
                width: calc(33.33% - 20px);
                background-color: #181818;
                border: 1px solid var(--muted);
                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: flex;
                    overflow: hidden;
                }
            }
            & div.image {
                width: 100%;
                height: 210px;
                background-color: #e8e8e8;
            }
            & h3 {
                margin-bottom: 10px;
            }
            & div.texts {
                padding: 20px;
                & p {
                    font-size: 15px;
                    line-height: 1.4;
                    color: var(--muted);
                }
            }
        }
    }

    .faqs {
        scroll-margin-top: 120px;
        margin: 120px 56px;
        & .page-hero-inner {
            max-width: 780px;
        }
        & h2 {
            font-size: clamp(28px, 6vw, 38px);
            text-align: center;
            margin-bottom: 30px;
        } 
        & .faq {
            background-color: #181818;
            margin-bottom: 20px;
            border-radius: 11px;
        } 
        & .faq[data-visibility="hidden"] p.answer {
            display: none;
            /* padding: 20px; */
        } 
        & .faq[data-visibility="active"] svg {
            transform: rotate(45deg);

        }
        & .faq p.question {
            padding: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: 500;
            gap: 30px;
            & svg {
                height: 20px;
                width: 20px;
                display: flex;
                fill: #e8e8e8;
                overflow: visible;
            }
        } 
        & .faq p.answer {
            display: block;
            padding: 20px 20px 20px 20px;
            font-size: 15px;
            line-height: 1.4;
            color: var(--muted);
            margin-top: -20px;
        }      
    }
    @media (max-width: 860px){
        .mission {
            margin-left: 24px !important;
            margin-right: 24px !important;
            & .inner {
                margin: 56px 0 !important;
            }
        }
        .services {
            margin: 70px 24px 70px 24px !important;
        }
        .faqs {
            margin: 100px 24px 24px 24px !important;
        }
    }
    @media (max-width: 1010px) and (min-width: 571px) {
        .services div.service {
            width: calc(50% - 15px) !important;
        }
    }
    @media (max-width: 570px){        
        .services {
            & div.tabs {
                display: grid;
            }
            & .service {
                width: 100% !important;
            }
        }
    }