@import url('section-cta.css');
@import url('banner.css');

section.global-banner {
    nav.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);
        }
    }

    .location-pill {
        background-color: hsl(var(--gold) / .2);
        padding: 6px 16px;
        font-weight: 600;
        border-radius: 9999px;
        width: max-content;
    }

    .banner-content {
        color: #ffffffe6;
    }

    @media (max-width: 767px) {
        .banner-cta {
            justify-content: center;

            a {
                width: 100%;
            }
        }
    }
}

section.service-area-map {
    background-color: hsl(var(--background));
}

section.service-area-services {
    background-color: hsl(var(--muted));
}

section.service-area-map {

    .service-area-map-layout {

        .d-flex a {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }
    }

    .map-content {

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

        ul {
            padding: 0 0 0 16px;
        }

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

    .map-embed {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        background: #fff;

        iframe {
            height: 100%;
            width: 100%;
        }
    }

    @media (min-width: 1025px) {
        .service-area-map-layout>div {
            width: 100%;
        }

        .service-area-map-layout {
            gap: 48px;
        }
    }

    @media (max-width: 1024px) {
        .service-area-map-layout {
            gap: 32px;
            flex-direction: column;
        }

        iframe {
            min-height: 300px;
        }
    }
}

section.service-area-services {
    .services-grid {
        gap: 24px;
    }

    .service-card {
        text-decoration: none;
        background: #fff;
        border: 1px solid hsl(var(--border));
        border-radius: 12px;
        padding: 24px;
        transition: .3s;
        display: flex;
        flex-direction: column;
        min-height: 180px;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        }

        h3 {
            font-weight: 600;
        }

        .icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background-color: hsl(var(--cta) / .1);
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
                width: 24px;
                height: 24px;
                color: hsl(var(--cta));
            }
        }

        .learn-more {
            margin-top: auto;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: .3s;
            margin: 0;

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

        &:hover .learn-more {
            gap: 12px;
        }
    }

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

    @media (min-width: 768px) and (max-width: 991px) {
        .services-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

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

        .service-card {
            padding: 20px;
        }
    }
}

section.service-area-why {
    background-color: hsl(var(--primary));

    .header_content p {
        color: #fffc;
    }


    .why-grid {
        gap: 24px;

        p {
            color: #ffffffb3;
        }

        h3 {
            font-weight: 600;
        }
    }

    .why-card {
        margin: auto;
        padding: 1.5rem;
        width: 100%;
    }

    .why-icon {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        background-color: hsl(var(--gold) / .2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px auto;

        svg {
            color: hsl(var(--gold));
        }
    }

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

    @media (min-width: 768px) and (max-width: 991px) {
        .why-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

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

section.service-area-review {
    .review-card {
        background: hsl(var(--card));
        border: 1px solid hsl(var(--border));
        border-radius: 12px;
        padding: 48px;
        max-width: 768px;
        margin: auto;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);

        svg path {
            fill: hsl(var(--gold));
        }
    }

    .review-content p {
        font-size: 24px;
        color: hsl(var(--foreground));
        margin-bottom: 24px;
        line-height: 2rem;

        &::before {
            content: open-quote;
        }

        &::after {
            content: close-quote;
        }
    }

    .reviewer-container {
        align-items: center;
        gap: 16px;

        .initial {
            background-color: hsl(var(--primary));
            width: 48px;
            height: 48px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;

            p {
                font-weight: 600;
            }
        }

    }

    .reviewer {
        flex-direction: column;

        .name {
            color: hsl(var(--foreground));
        }

        .info {
            color: hsl(var(--muted-foreground));
            font-size: 14px;
        }
    }

    @media (max-width: 767px) {
        .review-card {
            padding: 22px;
        }

        .review-content p {
            font-size: 18px;
            line-height: 1.5rem;
        }
    }
}

.service-area-communities {
    background-color: hsl(var(--muted));

    .communities-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
    }

    .community-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        text-decoration: none;
        color: hsl(var(--cta));
        font-weight: 500;
        transition: transform .2s ease, box-shadow .2s ease;

        .icon {
            display: inline-flex;
            line-height: 0;

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

        .label {
            font-weight: 500;
        }

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        }
    }

    .communities-view-all {
        text-align: center;
        margin-top: 28px;

        .view-all-link {
            color: hsl(var(--cta));
            text-decoration: none;
            transition: .3s;

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

            &:hover {
                color: hsl(var(--cta) / .8);
            }
        }
    }
}



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

    h3 {
        color: rgb(30, 58, 95);
        font-size: 24px;
    }

    .header_content p {
        color: #fffc;
    }

    .contact-detail {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .contact-item {
        display: flex;
        gap: 16px;
        text-decoration: none;
    }

    .icon {
        height: 40px;
        width: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: hsl(var(--gold) / .2);

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

    .contact-item p {
        display: flex;
        flex-direction: column;
        width: max-content;
        margin: 0;

        .fs-16 {
            font-weight: 600;
            color: #fff;
        }

        .fs-14 {
            color: #fffc;
        }
    }

    .form-container {
        background-color: hsl(var(--card));
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        border: 1px solid rgba(30, 58, 95, 0.2);
        border-radius: 12px;
        padding: 32px;

        .two-cols {
            display: flex;
            gap: 20px;

        }

        label {
            font-size: 14px;
            margin-bottom: 8px;
            font-weight: 500;
            color: rgb(30 58 95 / var(--tw-text-opacity, 1));
        }

        span.wpcf7-not-valid-tip {
            font-size: 14px;
            margin-top: 8px;
        }

        span.wpcf7-list-item-label {
            font-weight: 400;
            margin: 0 16px 0 0;


        }

        span.wpcf7-list-item {
            margin: 0 !important;

            label {
                gap: 8px;
                display: flex;
                margin: 0 !important;
            }
        }

        span.wpcf7-spinner {
            position: absolute;
        }
    }

    .field,
    input,
    select {
        width: 100%;
    }

    select,
    input:not(.bg-cta):not([type="radio"]) {
        font-size: 14px;
        padding: 8px 12px;
        background-color: hsl(var(--background));
        border: 1px solid rgba(30, 58, 95, 0.3);
        border-radius: 8px;
        min-height: 40px;
    }

    input.bg-cta {
        border: none;
        height: 48px;
    }

    @media (min-width: 1200px) {
        .wrapper>.d-flex {
            justify-content: space-between;

            >div {
                width: 100%;
                max-width: 652px;
            }
        }
    }

    @media (max-width: 1199px) {
        .wrapper>.d-flex {
            flex-direction: column;
            gap: 40px;
        }
    }

    @media (max-width: 767px) {
        .form-container {
            padding: 20px;
        }

        .two-cols {
            gap: 0px !important;
            flex-direction: column;
        }
    }
}

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