/* @import url("cproj-global-vars.css"); */

.HoneContactBackgroundColor {
    position: relative;
    background: transparent;
    min-height: 500px;
    padding: 80px 0px 0px 0px;
}

.HoneContactBackgroundColor::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 430px;
    background-color: var(--cproj-color-bg-1);
    z-index: -1;
}

.HoneContactBackgroundColor::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-left: 150px solid var(--cproj-color-primary-light1);
    border-right: 200px solid transparent;
    border-bottom: 430px solid var(--cproj-color-primary-light1);
    border-top: 0 solid transparent;
}

.HoneContactContainer {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

.HoneContactMap {
    display: flex;
}

.ContactBackground {
    display: flex;
}

.mapWhite,
.map {
    display: none;
}

.mapWhite.active,
.map.active {
    display: block;
}

.information {
    position: absolute;
    display: none;
    background-color: var(--cproj-color-white);
    padding: 15px 20px;
    box-shadow: 0px 0px 15px var(--cproj-color-border-1);
    border-radius: 20px;
    box-sizing: border-box;
}

.informationContain {
    text-align: center;
    font-size: 14px;
    font-size: clamp(12px, 1vw, 16px);
}

.informationContain a {
    color: var(--cproj-color-black);
    text-decoration: none;
    transition: color 0.2s;
}

.informationContain a:hover {
    color: var(--cproj-color-primary);
}

#information0 {
    top: 14%;
    left: 15%;
}

#information1 {
    top: 4%;
    left: 36%;
}

#information2 {
    top: 20%;
    left: 66%;
}

.activeFlex {
    display: block;
}

.HomeContactFormBox {
    background-color: var(--cproj-color-white);
    padding: 50px;
    box-shadow: 0px 0px 15px var(--cproj-color-border-1);
    border-radius: 10px;
    transform: translate(40px, -30px);
    z-index: 99;
}

.HomeContactBox {
    border-radius: 6px;
}

.HomeContactMargin {
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    padding: 0 10px;
}

.HomeContactMargin input,
.HomeContactMargin .Selector,
.HomeContactBox .form-group textarea {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--form-border-default);
    width: 100%;
    color: var(--form-text-default);
    box-sizing: border-box;
    transition: border-bottom var(--transition-duration);
    padding: 8px 15px 8px 0;
    box-shadow: none;
}

.HomeContactMargin input:focus,
.HomeContactMargin .Selector:focus,
.HomeContactBox .form-group textarea:focus {
    outline: none;
    color: var(--form-text-focus);
    border-bottom: 2px solid var(--form-border-focus);
    box-shadow: none;
}

.HomeContactMargin input::placeholder,
.HomeContactBox .form-group textarea::placeholder {
    color: var(--form-text-default);
    opacity: 0.8;
}

.HomeContactBox .form-group textarea {
    resize: vertical;
    height: 95px;
    padding: 8px 15px 8px 0;
}

#messageBox {
    position: relative;
    margin-top: 10px;
}

#messageBox .labels {
    left: 0;
    top: 0;
}

.HomeContactBox .labels {
    position: absolute;
    left: 10px;
    top: 0;
    color: var(--form-text-default);
    font-size: 1.5rem;
    transition: all var(--transition-duration);
    pointer-events: none;
    z-index: 2;
}

.HomeContactBox .labels.active {
    transform: translateY(-100%);
    font-size: 1.25rem;
    color: var(--form-text-focus);
}

.HomeContactBox .labels+.fa-check {
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--cproj-color-success);
    z-index: 3;
    font-size: 1.2rem;
}

.ContactButton {
    background-color: var(--cproj-color-primary);
    text-align: center;
    border-radius: 5px;
    font-size: 2rem;
    padding: 0px 15px;
}

.ContactButton .ContactButtonText {
    color: var(--cproj-color-white);
    padding: 0;
    margin: 5px;
    font-size: 2rem;
}

.ContactBackground img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .HoneContactBackgroundColor::before {
        width: 100%;
        border-left: 0px solid var(--cproj-color-primary-light1);
        border-right: 0px solid transparent;
    }

    .HoneContactMap {
        display: none;
    }

    .HomeContactFormBox {
        transform: translate(0px, 0px);
    }
}

@media (min-width: 1921px) {
    .HoneContactContainer {
        width: 1670px;
    }

    .informationContain {
        font-size: 1.5rem;
    }
}