@import url('banner.css');
@import url('faq.css');
@media (min-width: 1199px) {
    section {
        padding: 80px 0;
    }
}

section.global-banner {
    .breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;

        a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: .3s;

            &:hover {
                color: rgb(255 255 255);
            }
        }

        svg {
            height: 1rem;
            width: 1rem;
            color: rgba(255, 255, 255, 0.7);
        }
    }
}

section.business-highlights {
    padding-top: 24px;
    padding-bottom: 24px;
    border-color: hsl(var(--border));
    border-top-width: 1px;
    border-bottom-width: 1px;
    background-color: hsl(var(--muted));

    .d-grid {
        gap: 20px;
        justify-content: space-between;
        grid-template-columns: repeat(6, 1fr);
    }

    @media (max-width: 1199px) {
        .d-grid {
            grid-template-columns: repeat(3, 1fr);

            .business-highlight {
                justify-content: center !important;
            }
        }
    }

    @media (max-width: 767px) {
        .d-grid {
            grid-template-columns: 1fr;
        }
    }

    p {
        color: hsl(var(--foreground) / .8);
    }

    .business-highlight {
        gap: 4px;
        align-items: center;
        justify-content: flex-start;

        svg {
            width: 20px;
            height: 20px;
        }
    }
}

section.our-service {
    .d-flex {
        gap: 48px;
        align-items: center;
    }

    p {
        color: hsl(var(--muted-foreground));
        font-size: 16px;

        &:last-of-type {
            margin-bottom: 0;
        }

        a {
            color: hsl(var(--cta));
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 12px;

        svg {
            margin-right: 8px;
            width: 20px;
            height: 20px;
        }
    }

    img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        width: 100%;
        border-radius: 8px;
    }

    @media (min-width: 1025px) {

        .d-flex>div {
            width: 100%;
        }
    }

    @media (max-width: 1024px) {
        .d-flex {
            flex-direction: column;
        }

        .image {
            width: 100%;
        }

    }

    @media (min-width: 768px) {
        .d-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
}

section.additional-service-info {
    .additional-service-grid {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    @media (max-width: 767px) {
        .additional-service-grid {
            grid-template-columns: 1fr;
        }
    }

    .additional-service-card {
        background: #fff;
        border-radius: 12px;
        padding: 24px;
    }
}

section.gallery {

    .d-flex {
        gap: 24px;

        .service-gallery-card {
            width: 100%;
        }

        img {
            aspect-ratio: 16 / 9;
            width: 100%;
            border-radius: 8px;
            object-fit: cover;
        }
    }

    .service-gallery-actions a {
        width: max-content;
        margin: auto;

        svg {
            width: 16px;
            height: 16px;
        }
    }

    @media (max-width: 767px) {
        .d-flex {
            flex-direction: column;
        }
    }
}

section.faq {
    background-color: hsl(var(--muted));

    .faq_container {
        max-width: 768px;
        margin: auto;
    }
}

.why-choose-us {
    h3 {
        font-weight: 600;
    }

    .why-choose-us-list {
        max-width: 736px;
        margin: auto;
        gap: 16px;
        display: grid;
    }

    .why-choose-us-item {
        display: flex;
        gap: 16px;
        align-items: start;
        padding: 16px;
        background-color: hsl(var(--muted));
        border-radius: 8px;
    }

    .wcu-icon svg {
        width: 24px;
        height: 24px;
    }
}

section.service-area-reco {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;

    a {
        text-decoration: none;
        transition: .2s;
    }

    a.cta_area,
    a.pill {
        padding: 10px 16px;
        border-radius: 9999px;
    }

    a.cta_area,
    a.pill:hover {
        background: hsl(var(--cta));
        color: hsl(var(--cta-foreground));
    }

    a.cta_area:hover {
        background-color: hsl(var(--cta) / .9);
    }

    .page-links {
        display: flex;
        justify-content: center;
        gap: 24px;

        a.mini-link:hover {
            color: hsl(var(--cta));
        }
    }

    .area-pills {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    hr {
        margin: 32px 0;
        border-color: hsl(var(--border));
        opacity: 1;
    }
}

section.cta_group {
    background-color: hsl(var(--primary));

    .wrapper {
        >.d-flex {
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }
    }

    p {
        max-width: 672px;
        color: hsl(var(--primary-foreground) / .8);
    }

    .cta {
        gap: 16px;
        justify-content: center;

        a.bg-trans {
            border: none;
            background: transparent !important;
            padding: 0 !important;
        }

        a.bg-trans:hover,
        a.bg-trans:hover svg {
            color: hsl(var(--gold)) !important;
        }
    }

    @media (min-width: 1200px) {
        padding: 80px 0;
    }

    @media (max-width: 1199px) {
        text-align: center;

        & .wrapper {
            >.d-flex {
                flex-direction: column;
            }
        }
    }

    @media (max-width: 575px) {
        .cta {
            flex-direction: column;
            width: 100%;
        }
    }
}