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

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

        .b-blue {
            background: rgb(31, 59, 97);
            transition: .3s;

            .icon {
                background: rgba(255, 255, 255, 0.1) !important;
            }

            p span.fs-14 {
                color: rgba(255, 255, 255, 0.7) !important;
            }

            &:hoer {
                background-color: hsl(var(--primary) / .9);
            }
        }

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

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

                .fs-14:first-of-type {
                    color: rgb(31, 59, 97);
                    font-weight: 600;
                }

                .fs-14:last-of-type {
                    color: hsl(var(--muted-foreground));
                }
            }

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


    .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;
        }

        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;
    }

    .contact-item,
    .form_card {
        padding: 16px;
        border-radius: 8px;
        background-color: hsl(var(--muted));
    }

    .form_card_container {
        display: grid;
        gap: 16px;

        .form_card p {
            display: flex;
            flex-direction: column;
            font-weight: 500;
            align-items: center;
        }
    }

    iframe {
        width: 100%;
        height: 200px;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    }

    .view-all a {
        font-weight: 500;
        text-decoration: none;
    }

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

            >div {
                width: 100%;
            }

            .form_details {
                max-width: 800pxz;
            }

            .header_content {
                max-width: 518px;
            }
        }
    }

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

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

        .two-cols {
            gap: 20px;
        }
    }

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

        .form_card_container {
            grid-template-columns: 1fr 1fr;
        }

        .two-cols {
            flex-direction: column;
        }
    }
}