/* ─── CONTACT ─── */

#contact_content {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3.5vw, 54px);
    max-width: 720px;
    margin: auto;
}

#contact_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(16px, 3.5vw, 54px);
}

#contact_intro {
    max-width: 50%;
    color: var(--color-white);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.7;
    margin: 0;
}

#contact_info {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.3vw, 18px);
}

.contact_info_item {
    display: flex;
    align-items: center;
    gap: clamp(7px, 1vw, 15px);
    text-decoration: none;
    transition: color 0.3s ease, filter 0.3s ease;
}

.contact_info_item img {
    width: clamp(12px, 1.7vw, 26px);
    height: clamp(12px, 1.7vw, 26px);
    object-fit: contain;
    filter: brightness(0.8) grayscale(1);
    transition: filter 0.3s ease;
}

.contact_info_item p {
    color: var(--color-white);
    margin: 0;
    font-size: clamp(16px, 1.3vw, 17px);
    transition: color 0.3s ease;
}

.contact_info_item:hover p {
    color: var(--color-blue);
}

.contact_info_item:hover img {
    filter: brightness(1) grayscale(1) sepia(1) saturate(5) hue-rotate(170deg);
}

#contact_form {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.3vw, 18px);
}

#contact_form_top {
    display: flex;
    gap: clamp(8px, 1.3vw, 18px);
}

.input_group {
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 0.5vw, 8px);
    flex: 1;
    position: relative;
    padding-bottom: clamp(14px, 1.5vw, 24px);
}

.input_group label {
    color: var(--color-white);
    font-size: clamp(16px, 1.3vw, 17px);
    opacity: 0.7;
    margin-left: clamp(7px, 1vw, 15px);
}

.input_group input,
.input_group textarea {
    background: transparent;
    border: 2px solid var(--color-blue);
    border-radius: 50px;
    padding: clamp(7px, 1vw, 15px) clamp(10px, 1.5vw, 21px);
    color: var(--color-white);
    font-family: 'JosefinSans', sans-serif;
    font-size: clamp(16px, 1.3vw, 17px);
    outline: none;
    transition: border-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.input_group textarea {
    border-radius: 24px;
    resize: none;
}

.input_group input:focus,
.input_group textarea:focus {
    border-color: var(--color-white);
}

#contact_form_bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#checkbox_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

#checkbox_group .error_msg {
    position: absolute;
    bottom: -22px;
    left: 0;
}

#contact_checkbox {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.8vw, 11px);
}

#contact_checkbox input[type="checkbox"] {
    width: clamp(10px, 1.3vw, 18px);
    height: clamp(10px, 1.3vw, 18px);
    border: 2px solid var(--color-blue);
    border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

#contact_checkbox input[type="checkbox"]:checked {
    background-color: var(--color-blue);
}

#contact_checkbox label {
    color: var(--color-white);
    font-size: clamp(16px, 1.1vw, 17px);
    opacity: 0.8;
}

#contact_checkbox label a {
    color: var(--color-blue);
    text-decoration: none;
}

#contact_send {
    background: transparent;
    border: 2px solid var(--color-blue);
    color: var(--color-white);
    font-family: 'JosefinSans', sans-serif;
    font-size: clamp(16px, 1.1vw, 17px);
    padding: clamp(6px, 0.8vw, 11px) clamp(14px, 2vw, 36px);
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#contact_send:hover {
    background-color: var(--color-blue);
    color: var(--color-dark);
}

.error_msg {
    color: #e74c3c;
    font-size: clamp(16px, 1.1vw, 17px);
    margin-left: clamp(7px, 1vw, 15px);
}

.input_group .error_msg {
    position: absolute;
    bottom: 4px;
    left: 0;
}