@use '../../utils' as *;

/*----------------------------------------*/
/*  7.6 Contact css
/*----------------------------------------*/
.contact-inner {
    &-item {
        display: flex;
        @media #{$xs} {
            display: inherit;
        }
        &-icon {
            flex: 0 0 auto;
            margin-right: 24px;
            @media #{$xs} {
                margin-bottom: 10px;
            }
            & span {
                height: 64px;
                width: 64px;
                line-height: 64px;
                text-align: center;
                color: var(--tp-common-white);
                display: inline-block;
                background-color: var(--tp-theme-primary);
            }
        }
        &-content {
            & p {
                margin-bottom: 0;
                font-weight: 700;
                font-size: 24px;
                line-height: 150%;
                color: #0C0A1F;
            }
            & span,
            & a {
                font-size: 18px;
                line-height: 1.5;
                color: var(--tp-text-body);
                display: block;
            }
            & a {
                &:hover {
                    color: var(--tp-theme-primary);
                }
            }
        }
    } 
    &-form {
        background: #FCF4F1;
        padding: 48px 48px 43px 48px;
        @media #{$lg,$md,$xs} {
            margin-left: 0;
            padding: 48px 25px 43px 25px;
        }
    }
}
.form-inner {
    &-input {
        & input,
        & textarea {
            width: 100%;
            height: 80px;
            background-color: var(--tp-common-white) ;
            margin-bottom: 20px;
            box-shadow: 0px 10px 45px rgba(0, 0, 0, 0.04);
            border: none;
            padding: 0 25px;
            &::placeholder {
                font-weight: 400;
                font-size: 18px;
                line-height: 1.5;
                color: var(--tp-text-body);
            }
            &:focus {
                &::placeholder {
                    font-size: 0;
                }
            }
        }
        & textarea {
            height: 220px;
            resize: none;
            padding: 27px 25px;
            line-height: 1.2;
            margin-bottom: 15px;
        }
    }
    &-check {
        & input {
            flex: 0 0 auto;
        }
        & label {
            font-size: 18px;
            line-height: 1.5;
            color: #6A5952;
        }
        & .form-check-input {
            width: 18px;
            height: 18px;
            margin-right: 12px;
            &[type="checkbox"] {
                border-radius: 0;
            }
            &:checked {
                background-color: var(--tp-theme-primary);
                border-color: var(--tp-theme-primary);
            }
            &:focus {
                border-color: var(--tp-theme-primary);
                outline: 0;
                box-shadow:none;
            }
        }
    }
    &-btn {
        & .tp-btn {
            padding: 23px 46px;
            font-weight: 700;
            font-size: 20px;
        }
    }
}
.tpmap {
    &-wrapper {
        height: 530px;
        & iframe {
            height: 100%;
            width: 100%;
        }
    }
}