.contact {
    .contact-content {
        padding: 120px 0;
        position: relative;
        z-index: 2;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(../images/contact-bg.png) center center;
            background-size: 50%;
            z-index: -1;
        }
        .contact-form {
            background: $white;
            border-radius: 15px 0 0 15px;
            border: 1px solid rgba($black-4, .1);
            border-right-width: 0;
            padding: 30px;
            .form-group {
                position: relative;
                margin-bottom: 25px;
                label {
                    display: block;
                    width: max-content;
                    font-size: 14px;
                    line-height: 100%;
                    margin: 0 15px;
                    padding: 0 5px;
                    background: $white;
                    color: $black-6;
                    margin-top: -1px;
                    margin-bottom: -5px;
                    position: relative;
                    z-index: 2;
                }
                input {
                    width: 100%;
                    height: 40px;
                    line-height: 38px;
                    font-size: 14px;
                    padding: 0 20px;
                    border: 1px solid rgba($black-4, .3);
                    border-radius: 20px;
                    transition: .3s;
                    .option.disabled {
                        display: none;
                    }
                    &:focus {
                        border-color: $color-1;
                    }
                }
                textarea {
                    width: 100%;
                    height: 100px;
                    line-height: 24px;
                    font-size: 14px;
                    padding: 10px 20px;
                    border: 1px solid rgba($black-4, .3);
                    border-radius: 20px;
                    vertical-align: top;
                    transition: .3s;
                    &:focus {
                        border-color: $color-1;
                    }
                }
            }
        }
        .contact-info {
            background: $gradient-9;
            border-radius: 0 15px 15px 0;
            height: 100%;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            position: relative;
            z-index: 2;
            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url(../images/contact-img.png) center center no-repeat;
                background-size: 50%;
                opacity: 0.1;
                z-index: -1;
            }
            .single-box{
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 30px;
                &:last-child {
                    margin-bottom: 0;
                }
                .part-icon {
                    text-align: center;
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 25px;
                    background: $white;
                    color: $color-1;
                    border-radius: 5px;
                }
                .part-txt {
                    width: calc(100% - 70px);
                    height: max-content;
                    margin-top: -6px;
                    margin-bottom: -8px;
                    >* {
                        display: block;
                        font-size: 16px;
                        line-height: 26px;
                        color: $white;
                        margin: 0;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 991px) and (min-width: 320px) {
    .contact {
        .contact-content {
            padding: 60px 0;
            .contact-form {
                border-radius: 10px 0 0 10px;
                padding: 25px 20px;
                .form-group {
                    input {
                        height: 35px;
                        line-height: 33px;
                        padding: 0 15px;
                    }
                    textarea {
                        border-radius: 15px;
                    }
                }
            }
            .contact-info {
                border-radius: 0 10px 10px 0;
                padding: 25px 20px;
                .single-box {
                    gap: 15px;
                    .part-icon {
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        font-size: 20px;
                    }
                    .part-txt {
                        width: calc(100% - 55px);
                        margin-bottom: -7px;
                        >* {
                            font-size: 14px;
                            line-height: 24px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 575px) and (min-width: 320px) {
    .contact {
        .contact-content {
            .order-e {
                order: 2;
            }
            .contact-form {
                border-radius: 0 0 10px 10px;
                border-top-width: 0;
                border-right-width: 1px;
            }
            .contact-info {
                border-radius: 10px 10px 0 0;
            }
        }
    }
}