/* ==========================================
   CONTACT HERO
========================================== */

.contact-hero {

    width: 100%;

    padding: 75px 20px;

    background: #222222;

    text-align: center;

    box-sizing: border-box;
}


.contact-hero-content {

    max-width: 800px;

    margin: auto;
}


.contact-hero h1 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 42px;

    font-weight: 700;
}


.contact-hero p {

    margin: 0;

    color: #cccccc;

    font-size: 16px;

    line-height: 1.7;
}



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

.contact-section {

    width: 100%;

    padding: 70px 20px;

    background: #f7f7f7;

    box-sizing: border-box;
}


.contact-wrapper {

    width: 100%;

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 50px;

    align-items: start;
}



/* ==========================================
   CONTACT INFO
========================================== */

.contact-info {

    padding: 15px 0;
}


.contact-info h2 {

    margin: 0 0 15px;

    color: #222222;

    font-size: 30px;

    font-weight: 700;
}


.contact-intro {

    margin: 0 0 35px;

    color: #777777;

    font-size: 15px;

    line-height: 1.7;
}



/* Contact Item */

.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 26px;
}


.contact-icon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #222222;

    color: #ffffff;

    border-radius: 8px;

    font-size: 17px;
}


.contact-item h4 {

    margin: 2px 0 5px;

    color: #222222;

    font-size: 15px;

    font-weight: 600;
}


.contact-item p {

    margin: 0;

    color: #777777;

    font-size: 14px;

    line-height: 1.6;
}



/* ==========================================
   CONTACT FORM CARD
========================================== */

.contact-form-card {

    padding: 35px;

    background: #ffffff;

    border: 1px solid #e5e5e5;

    border-radius: 14px;

    box-shadow: 0 10px 35px rgba(0,0,0,0.07);

    box-sizing: border-box;
}


.contact-form-card h2 {

    margin: 0 0 8px;

    color: #222222;

    font-size: 26px;

    font-weight: 700;
}


.contact-form-card > p {

    margin: 0 0 25px;

    color: #777777;

    font-size: 14px;

    line-height: 1.6;
}



/* ==========================================
   FORM
========================================== */

#contactForm {

    width: 100%;

    margin: 0;

    padding: 0;

    background: transparent;

    border: none;
}


.contact-form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}


.contact-form-group {

    width: 100%;

    box-sizing: border-box;
}


.contact-full {

    grid-column: 1 / -1;
}



/* Labels */

#contactForm label {

    display: block;

    margin-bottom: 7px;

    color: #333333;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;
}


#contactForm label span {

    color: #d14b4b;
}



/* Inputs */

#contactForm input,
#contactForm textarea {

    display: block;

    width: 100%;

    padding: 13px 14px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dcdcdc;

    border-radius: 7px;

    color: #333333;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition: all 0.25s ease;
}


#contactForm input {

    height: 50px;
}


#contactForm textarea {

    min-height: 120px;

    resize: vertical;

    line-height: 1.5;
}



/* Placeholder */

#contactForm input::placeholder,
#contactForm textarea::placeholder {

    color: #999999;
}



/* Focus */

#contactForm input:focus,
#contactForm textarea:focus {

    border-color: #222222;

    box-shadow:
        0 0 0 3px rgba(0,0,0,0.06);
}



/* ==========================================
   BUTTON
========================================== */

#contactSubmit {

    width: 100%;

    height: 52px;

    padding: 0 20px;

    border: none;

    border-radius: 7px;

    background: #222222;

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.25s ease;
}


#contactSubmit i {

    margin-left: 8px;

    font-size: 13px;
}


#contactSubmit:hover {

    background: #000000;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(0,0,0,0.15);
}



/* ==========================================
   MOBILE
========================================== */

@media (max-width: 800px) {

    .contact-wrapper {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .contact-form-grid {

        grid-template-columns: 1fr;
    }


    .contact-full {

        grid-column: auto;
    }


    .contact-hero {

        padding: 55px 20px;
    }


    .contact-hero h1 {

        font-size: 32px;
    }


    .contact-section {

        padding: 45px 15px;
    }


    .contact-form-card {

        padding: 25px 20px;
    }


    .contact-info h2 {

        font-size: 26px;
    }

}