/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {

    --p-tiny: 13px;
    --p-small: 14px;
    --p-medium: 16px;
    --p-big: 18px;
    --p-large: 20px;

    --white: #FFF;
    --light-white: #FEFCFB;
    --light-p: #585E6B;
    --primary-p: #E2F7FD;

    --gray-p: #B8CFF3;

    --dark-black: #111A2D;

    --primary-blue: #17C6F7;
    --primary-line-25: #51D3F8;
    --bg-blue: #E2F7FD;


    --light-section-section-5: #F2F0F0;
    --light-section-section-10: #E6E5E6;
    --light-section-section-25: #F8F6F5;
    --h1-lh: var(--h1-line-height);
    --h2-lh: var(--h2-line-height);
}

body {
    width: calc(100% - 16px) !important;
    margin: 8px !important;
}

header.scrolling .topbar {
    background-color: var(--light-section-section-5) !important;
}

.brxe-button {
    cursor: pointer;
}

.h2style {
    font-size: var(--h2);
    line-height: var(--h2-line-height);
}

.text-big {
    font-size: var(--p-big);
    line-height: 150%;
}

.text-small {
    font-size: var(--p-small);
    line-height: 150%;
}

.bricks-button {
    transition: all .25s;
}

.bricks-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px var(--primary-line-25);
    color: var(--white);
}

.header-menu-phone,
.header-menu-button {
    display: none;

    @media(max-width: 991px) {
        display: flex;
    }
}

.header-menu-phone {
    a {
        font-size: 0;
        position: relative;

        &:after {
            content: '';
            display: block;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 0;
            left: 30px;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%0A%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.6' y='0.6' width='38.8' height='38.8' rx='19.4' stroke='%23E6E5E6' stroke-width='1.2'/%3E%3Cpath d='M26.665 23.2827V25.2827C26.6657 25.4683 26.6277 25.6521 26.5533 25.8222C26.479 25.9924 26.3699 26.1451 26.233 26.2706C26.0962 26.3961 25.9347 26.4917 25.7588 26.5511C25.5829 26.6106 25.3966 26.6327 25.2117 26.616C23.1602 26.3931 21.1897 25.6921 19.4583 24.5693C17.8475 23.5458 16.4819 22.1801 15.4583 20.5693C14.3316 18.8301 13.6305 16.85 13.4117 14.7893C13.395 14.605 13.4169 14.4192 13.476 14.2438C13.5351 14.0683 13.63 13.9071 13.7548 13.7704C13.8796 13.6337 14.0315 13.5245 14.2009 13.4497C14.3702 13.3749 14.5532 13.3362 14.7383 13.336H16.7383C17.0619 13.3328 17.3755 13.4474 17.6208 13.6584C17.8661 13.8693 18.0264 14.1623 18.0717 14.4827C18.1561 15.1227 18.3126 15.7512 18.5383 16.356C18.628 16.5946 18.6474 16.8539 18.5943 17.1033C18.5411 17.3526 18.4176 17.5814 18.2383 17.7627L17.3917 18.6093C18.3407 20.2784 19.7226 21.6603 21.3917 22.6093L22.2383 21.7627C22.4196 21.5834 22.6484 21.4599 22.8977 21.4067C23.1471 21.3536 23.4064 21.373 23.645 21.4627C24.2498 21.6884 24.8783 21.8449 25.5183 21.9293C25.8422 21.975 26.1379 22.1381 26.3493 22.3877C26.5608 22.6372 26.6731 22.9557 26.665 23.2827Z' fill='%2317C6F7'/%3E%3Ccircle cx='34' cy='6' r='3' fill='%232CB267'/%3E%3C/svg%3E%0A");
        }
    }
}

.header-menu-button {
    padding: 0 30px;

    a {
        background-color: var(--primary-blue);
        width: max-content !important;
        color: var(--light-white);
        font-weight: 600;
        line-height: 125%;
        padding-top: 18px;
        padding-right: 26px;
        padding-bottom: 18px;
        padding-left: 26px;
        border-top: 1.6px solid transparent;
        border-bottom: 1.6px solid transparent;
        border-radius: 100px;
    }
}

.infinite-carousel,
.infinite-carousel-reverse,
.infinite-carousel-team {
    display: block;

    &:focus,
    &:focus-within,
    &:focus-visible {
        outline: none !important;
    }

    .testimonial {
        width: 488px;
        height: 350px !important;
        margin: 0 32px 0 0;
    }
}

.steps-1-3,
.steps-4-5 {
    .step {
        .grey-label {
            position: relative;

            &:after {
                content: '';
                display: block;
                width: 300px;
                height: 2px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: calc(50% + 64px);
                background: repeating-linear-gradient(90deg,
                        /* Direction of the gradient */
                        #E6E6E6,
                        /* Start color */
                        #E6E6E6 16px,
                        /* End color of the first grey stripe */
                        white 16px,
                        /* Start color of the white stripe */
                        white 41px
                        /* End color of the white stripe (35px grey + 16px white) */
                    );
            }

            @media(max-width: 768px) {
                &:after {
                    display: none;
                }
            }
        }

        &:last-child {
            .grey-label {
                &:after {
                    display: none;
                }
            }
        }
    }
}


.accordion-item {
    overflow: hidden;
    background-color: var(--light-section-section-25);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 32px;

    .accordion-title-wrapper {
        padding: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

}


.gform_ajax_spinner {
    width: 36px !important;
    height: 36px !important;
}

.gform_wrapper {
    .gform_heading {
        display: none;
    }

    &:not(.pre-qualifying-form_wrapper) {
        .gform_submission_error {
            font-size: var(--p-small);
            line-height: 1.25;
            font-family: "LFT Etica";
            margin: 12px 0;
            text-align: center;
            color: red;
            background-color: var(--white);
            background: var(--white);
            padding: 7px;
            border-radius: 12px;
        }

        .validation_message {
            color: var(--white);
            font-size: var(--p-tiny);
            line-height: 1.25;
            margin: 8px 0;
        }

        form {
            .gform_body {

                .gform_fields {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    .gfield {
                        margin-bottom: 24px;
                        width: 100%;

                        .gfield_label {
                            font-size: var(--p-tiny);
                            font-weight: 600;
                            line-height: 125%;
                            color: var(--dark-black);
                            letter-spacing: 0.78px;
                            text-transform: uppercase;
                            margin-bottom: 8px;
                        }

                        &.gfield--width-half {
                            width: calc(50% - 8px);

                            @media(max-width: 640px) {
                                width: 100%;
                            }
                        }

                        &.gfield--type-textarea {
                            width: 100%;
                        }

                        .ginput_container {

                            input,
                            textarea,
                            select {
                                background-color: transparent;
                                padding: 18px 26px;
                                color: var(--light-p);
                                font-family: 'Lexend';
                                font-size: var(--p-medium);
                                font-style: normal;
                                font-weight: 500;
                                line-height: 125%;
                                border-radius: 100px;
                                border: 1.2px solid var(--light-section-section-10, #E6E5E6);
                                transition: all .25s;
                                font-family: "Overused Grotesk";

                                &:focus,
                                &:focus-within {
                                    border-bottom: 1px solid var(--white);
                                    box-shadow: none;
                                    outline: none;
                                }

                                &::placeholder {
                                    color: var(--light-p);
                                }

                            }

                            select {
                                background-color: var(--dark-section-bg);
                            }

                            textarea {
                                border-radius: 28px;
                                width: 100%;
                                height: 136px !important;
                                min-height: 136px !important;
                                max-height: 136px !important;
                            }

                        }
                    }
                }
            }

            .gform_footer {
                input {
                    color: var(--light-white);
                    font-size: var(--p-medium);
                    font-style: normal;
                    font-weight: 600;
                    line-height: 125%;
                    background: var(--primary-blue);
                    padding: 18px 32px;
                    outline: none;
                    border: 0;
                    width: 100%;
                    text-align: center;
                    transition: all .25s;
                    border-radius: 100px;

                    font-family: "Overused Grotesk";

                    background-size: 110% 350%;
                    background-repeat: no-repeat;
                    background-position: -140% -140%;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='100' cy='100' r='100' fill='rgba(0,0,0,0.5)' /%3E%3C/svg%3E%0A");
                    transition: background-position 250ms 100ms, color 250ms 100ms;

                    &:hover {
                        background-position: 50% 50%;
                    }

                }
            }
        }
    }
}

.contact-cols {
    .contact-col {
        position: relative;

        &:after {
            content: '';
            display: block;
            width: 1px;
            height: 200px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 100%;
            background: repeating-linear-gradient(0deg,
                    /* Direction of the gradient (vertical) */
                    #2D75E2,
                    /* Start color */
                    #2D75E2 24px,
                    /* End color of the first grey stripe */
                    #1666DF 24px,
                    /* Start color of the white stripe */
                    #1666DF 41px
                    /* End color of the white stripe (35px grey + 16px white) */
                );
        }

        @media(max-width: 991px) {
            &:after {
                display: none;
            }
        }
    }
}

img.rates-spinner {
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 25px 0px;
}

.brxe-filter-radio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: var(--light-section-section-25, #F8F6F5);
    padding: 8px;
    border-radius: 24px;

    li {
        padding: 12px 16px;
        font-weight: 600;
        font-size: var(--p-tiny);
        line-height: 125%;
        position: relative;

        input {
            appearance: none;
            position: absolute;
            inset: 0;
            border: 0;
            cursor: pointer;

            &:checked {
                background-color: var(--primary-blue);
                border-radius: 100px;

                &+span {
                    color: var(--light-white);
                    position: relative;
                }
            }
        }
    }
}


.vertical-list,
.horizontal-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;

    &.blue-icons {
        li {
            &:before {
                background-image: url("data:image/svg+xml,%0A%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6.5' r='6' fill='%2317C6F7'/%3E%3Cpath d='M5.30045 8.21696L3.67188 6.58839L4.07902 6.18125L5.30045 7.40268L7.92188 4.78125L8.32902 5.18839L5.30045 8.21696Z' fill='%23FEFCFB' stroke='%23FEFCFB' stroke-width='0.857143' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
            }
        }
    }
}

.vertical-list li,
.horizontal-list li {
    display: grid;
    align-items: center;
    grid-template-columns: 14px 1fr;
    grid-gap: 8px;
    font-size: var(--p-small);
    line-height: 150%;
}

.vertical-list li:before,
.horizontal-list li:before {
    content: '';
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--orange);
    background-image: url("data:image/svg+xml,%0A%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='7' fill='%23FEFCFB'/%3E%3Cpath d='M6.68125 9.50052L4.78125 7.60052L5.25625 7.12552L6.68125 8.55052L9.73958 5.49219L10.2146 5.96719L6.68125 9.50052Z' fill='%2317C6F7' stroke='%2317C6F7' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

}


.horizontal-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 16px 32px;
}

.normal-vertical-list {
    padding: 0;
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    gap: 16px;
}

.normal-vertical-list a {
    color: inherit;
}

.quote-reminder {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    border-radius: 8px 8px 0 0;

    &.active {
        display: flex !important;
    }
}

:where(:where(.brxe-div)) {
    --content-gap: 0;
}