/* commons  */

main {
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
    margin-top: var(--spacer-60);
    margin-bottom: var(--spacer-120);

    @media screen and (max-width: 1024px) {
        flex-direction: column;
        gap: 40px;
        margin-bottom: var(--spacer-60);
    }
}

.contact-page_img {
width: 100%
}

/* Toggle - Mobile Only  */
.scrollBar {
    display: none;
    width: 100%;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;

    .tabs {
        --indicator-offset: 10px;
        --indicator-width: 10px;
        position: relative;
        display: flex;
        gap: 20px;
        justify-content: space-between;
        width: max-content;
        margin: 0 auto;
        border-bottom: 3px solid var(--bg-light-blue);
        padding-bottom: 16px;

        &::after {
            position: absolute;
            content: "";
            width: var(--indicator-width);
            height: 3px;
            background: var(--blue-red-gradient);
            border-radius: 5px;
            left: var(--indicator-offset);
            bottom: -3px;
            transition: left 300ms, width 300ms;
        }
    }

    .tab {
        background: var(--bg-black-secondary);
        opacity: 0.4;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        outline: none;
        border: none;
        cursor: pointer;
        /* transition: background 300ms, background-clip 300ms; */

        &.active {
            background: var(--blue-red-gradient);
            opacity: 1;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    @media screen and (max-width: 1024px) {
        display: block;
    }
}

/* Contact Form  */
.contact-page_form-section {
    max-width: 625px;
    width: 100%;
    height: auto;
    border: var(--border-light-blue);
    border-radius: var(--spacer-16);
    background: var(--section-gradient);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: var(--spacer-32);

    .contact-content {}

    .form {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        width: 100%;
        max-width: 625px;
        height: auto;
        /* margin-top: 32px; */

        .trackable-form {
            height: 100% !important;
            min-height: 450px !important;
        }

        .screen-reader-response {
            display: none;
        }

        .form-row {
            width: 100%;

            p {
                width: 100%;
                display: flex;
                gap: 24px;
                justify-content: start;
                align-items: start;
                margin-top: 20px;
            }
        }

        .form-row.phone {
            p {
                gap: 0;
            }
        }

        .form-row-inner {
            p {
                width: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
            }
        }

        input,
        select {
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #D8E5F4;
            background: #FFF;
            width: 100%;
            font-family: "Sora", sans-serif;
            color: var(--text-black-primary);
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
        }

        select:focus-visible,
        input:focus-visible {
            outline: 0;
        }

        input::placeholder,
        select::placeholder,
        textarea::placeholder {
            color: var(--text-grey2);
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
        }

        input[type='submit'] {
            border-radius: 8px;
            background: #E6323A;
            padding: 16px 32px;
            border: none;
            color: #fff;
            margin-top: 40px;
            width: fit-content;
            color: var(--text-white);
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: 0;
        }

        select[name="country-code"] {
            width: fit-content;
            padding-right: 0;
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            font-family: "Sora", sans-serif;
            color: var(--text-black-primary);
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            padding: 15px;
            padding-right: 0;
        }

        select[name="your-country"] {
            margin-top: 20px;
        }

        input[type='tel'] {
            width: 420px;
            padding-left: 15px;
            border-left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        input[type="email"] {
            width: 100%;
            margin-top: 20px;
        }

        .wpcf7-textarea {
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #D8E5F4;
            background: #FFF;
            width: 100%;
            font-family: "Sora", sans-serif;
            color: var(--text-black-primary);
            font-size: 14px;
            font-weight: 400;
            line-height: normal;

            height: 120px;
            resize: vertical;
            overflow-y: auto;
            margin-top: 20px;
        }

        .wpcf7-not-valid-tip {
            font-size: 14px;
        }

        .wpcf7-response-output {
            margin-top: 20px;
            font-size: 14px;
        }

        .wpcf7-list-item {
            width: 100%;
            display: flex;
            gap: 12px;
            margin-top: 12px;
            margin-left: 0;

            input {
                width: 20px;
                height: 20px;
                margin: 0;
            }

            .wpcf7-list-item-label {
                color: var(--text-grey5);
                font-size: 12px;
                font-weight: 400;
                line-height: 18px;
            }
        }

        /* 
        &:last-child {
            .form-row {
                p {
                    width: 100%;
                }

            }
        } */

        @media screen and (max-width: 1024px) {
            & {

                .form-row {
                    p {
                        flex-direction: column;
                    }

                    &.phone {
                        p {
                            flex-direction: row;
                        }
                    }
                }

                input[type='tel'] {
                    width: 100%;
                }

                input[type='submit'] {
                    width: 100%;
                    font-size: 14px;
                    line-height: 20px;
                    margin-top: 24px;
                }
            }
        }
    }

    @media screen and (max-width: 1025px) {
        & {
            border: 0;
            background: 0;
            gap: 20px;
            align-items: start;
            padding: 0;

            .contact-content {

                h3 {
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 32px;
                }
            }
        }
    }

    @media screen and (min-width: 601px) and (max-width: 1024px) {
        & {
            max-width: 100%;

            .contact-content {
                width: 100%;

                .form {
                    max-width: 100%;
                }
            }

        }
    }
}

/* Sales Team Info  */
.contact-page_info-section {
    max-width: 570px;
    width: 100%;
    height: auto;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-32);
    justify-content: start;
    align-items: start;
    text-align: start;

    .product-accordion-container {
        width: 100%;
        height: 100%;

        .accordion-container {
            width: 100%;
            height: auto;

            .accordion {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                gap: 0;
                border-bottom: var(--border-light-blue);
                padding-block: 0;

                .accordion-header {
                    width: 100%;
                    height: auto;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 8px;
                    cursor: pointer;
                    user-select: none;
                    padding-block: 24px;

                    .accordion-title {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 20px;

                        .sub-heading-primary {
                            color: var(--text-black-primary);
                        }

                        #logo {
                            width: 32px;
                            height: 32px;
                            object-fit: cover;
                        }
                    }

                    .accordion-icon {
                        width: 16px;
                        height: 16px;
                        display: inline-block;
                        background-size: contain;
                        background-repeat: no-repeat;
                        transition: transform 0.3s ease, opacity 0.3s ease;
                    }

                    &.open .accordion-icon {
                        transform: rotate(180deg);
                    }

                    .accordion-icon::before {
                        content: url("../images/plus-red.svg");
                    }

                    &.open .accordion-icon::before {
                        content: url("../images/minus-red.svg");
                    }
                }

                .accordion-content {
                    max-width: 100%;
                    max-height: 0;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    margin-left: 0;
                    margin-top: 0;
                    opacity: 0;
                    transition: max-height 0.5s ease, opacity 0.2s linear, margin-top 0.2s ease;

                    .contact {
                        width: fit-content;
                        height: auto;
                        display: flex;
                        justify-content: center;
                        align-items: start;
                        gap: 12px;

                        a {
                            text-decoration: none;
                            color: var(--text-black-primary);
                        }
                    }

                    &.open {
                        max-height: 500px;
                        opacity: 1;
                        transition: max-height 0.5s ease, opacity 0.5s linear, margin-top 0.2s ease;
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1025px) {
        & {
            margin-top: 0;
            gap: 0;

            .product-accordion-container {
                margin-block: 30px;
            }
        }
    }

    @media screen and (min-width: 601px) and (max-width: 1024px) {
        & {
            max-width: 100%;
        }
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
   main{ flex-direction: row;} 
   .scrollBar {display:none;}
   .contact-page_info-section {display:block !important;}
}