/* ===================== CONTACT SECTION ===================== */

.contact-section {
    padding: 100px 80px;
    font-family: Montserrat, sans-serif;

    .contact-wrapper {
        display: flex;
        gap: 60px;

        .contact-form-container {
            flex: 1.5;

            h2 {
                font-weight: 500;
                font-size: 1.8rem;
                margin-bottom: 10px;
            }

            .contact-form-intro {
                font-family: Inter, sans-serif;
                font-weight: 300;
                font-size: 0.95rem;
                color: rgba(0, 0, 0, 0.55);
                margin-bottom: 35px;
                line-height: 1.6;
            }

            .contact-form {
                display: flex;
                flex-direction: column;
                gap: 20px;

                .form-row {
                    display: flex;
                    gap: 20px;

                    .form-group {
                        flex: 1;
                    }
                }

                .form-group {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    label {
                        font-family: Inter, sans-serif;
                        font-weight: 400;
                        font-size: 0.85rem;
                        letter-spacing: 0.3px;
                        color: rgba(0, 0, 0, 0.7);
                    }

                    input,
                    textarea {
                        font-family: Inter, sans-serif;
                        font-weight: 300;
                        font-size: 0.95rem;
                        padding: 14px 18px;
                        border: 1px solid rgba(0, 0, 0, 0.15);
                        border-radius: 8px;
                        outline: none;
                        transition: border-color 0.3s ease;
                        background: rgba(0, 0, 0, 0.02);

                        &:focus {
                            border-color: rgba(0, 0, 0, 0.4);
                        }

                        &::placeholder {
                            color: rgba(0, 0, 0, 0.3);
                        }
                    }

                    textarea {
                        resize: vertical;
                        min-height: 140px;
                    }
                }

                .form-submit {
                    align-self: flex-start;
                    padding: 14px 40px;
                    background-color: black;
                    color: white;
                    border: none;
                    border-radius: 8px;
                    font-family: Montserrat, sans-serif;
                    font-weight: 500;
                    font-size: 0.95rem;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    cursor: pointer;
                    transition: background-color 0.3s ease;

                    &:hover {
                        background-color: #333;
                    }
                }
            }
        }

        .contact-info {
            flex: 0.8;
            display: flex;
            flex-direction: column;
            gap: 25px;
            padding-top: 70px;

            .contact-info-card {
                display: flex;
                gap: 18px;
                padding: 22px;
                background: rgba(0, 0, 0, 0.02);
                border-radius: 12px;
                transition: background 0.3s ease;

                &:hover {
                    background: rgba(0, 0, 0, 0.05);
                }

                .contact-info-icon {
                    width: 48px;
                    height: 48px;
                    min-width: 48px;
                    background: rgba(0, 0, 0, 0.82);
                    border-radius: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    font-size: 1.1rem;
                }

                .contact-info-text {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 4px;

                    h4 {
                        font-weight: 500;
                        font-size: 0.9rem;
                        letter-spacing: 0.3px;
                    }

                    p {
                        font-family: Inter, sans-serif;
                        font-weight: 300;
                        font-size: 0.88rem;
                        color: rgba(0, 0, 0, 0.55);
                        line-height: 1.5;
                    }
                }
            }
        }
    }
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1024px) {
    .contact-section {
        padding: 80px 40px;

        .contact-wrapper {
            gap: 40px;
        }
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 60px 20px;

        .contact-wrapper {
            flex-direction: column;
            gap: 50px;

            .contact-form-container {
                .contact-form .form-row {
                    flex-direction: column;
                    gap: 20px;
                }

                .contact-form .form-submit {
                    align-self: stretch;
                    text-align: center;
                }
            }

            .contact-info {
                padding-top: 0;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 15px;

                .contact-info-card {
                    flex: 1 1 calc(50% - 8px);
                    min-width: 200px;
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .contact-section .contact-wrapper .contact-info {
        flex-direction: column;

        .contact-info-card {
            flex: 1 1 100%;
        }
    }
}