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

.contact {
    width: 100%;
    min-height: 100vh;

    padding: 100px 5% 90px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    background: #ffffff;
}


/* =========================================
   MAIN CONTAINER
========================================= */

.contact-container {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.8fr 1.6fr;

    gap: 70px;

    align-items: center;
}


/* =========================================
   LEFT CONTACT INFORMATION
========================================= */

.contact-info {
    padding: 20px 0;
}


.contact-label {
    display: inline-block;

    padding: 8px 18px;

    border: 1px solid #b9d8cf;

    border-radius: 30px;

    color: #38695d;

    background: #f5faf8;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 25px;
}


/* Title */

.contact-title {
    margin: 0;

    color: #285348;

    font-size: clamp(42px, 4vw, 60px);

    line-height: 1.1;

    font-weight: 700;
}


.contact-title span {
    color: #5cae9b;
}


/* Small line */

.contact-line {
    width: 75px;
    height: 3px;

    margin: 25px 0 28px;

    background: #5cae9b;

    border-radius: 5px;
}


/* Description */

.contact-description {
    max-width: 500px;

    margin-bottom: 35px;

    color: #5f706a;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   CONTACT DETAILS
========================================= */

.contact-detail {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;
}


.contact-icon {
    width: 45px;
    height: 45px;

    min-width: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #38695d;

    color: #ffffff;

    border-radius: 50%;

    font-size: 19px;

    box-shadow: 0 5px 15px rgba(56, 105, 93, 0.18);
}


.contact-detail h4 {
    margin: 0 0 4px;

    color: #285348;

    font-size: 16px;

    font-weight: 700;
}


.contact-detail p {
    margin: 0;

    color: #65756f;

    font-size: 14px;
}


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

.contact-form-box {
    width: 100%;

    padding: 30px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 10px 40px rgba(40, 83, 72, 0.10),
        0 2px 10px rgba(0, 0, 0, 0.03);

    border: 1px solid #edf2f0;
}


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

#contact-form {
    width: 100%;
}


/* Input row */

#contact-form .input-box {
    width: 100%;

    display: flex;

    gap: 25px;

    margin-bottom: 25px;
}


/* Inputs */

#contact-form input,
#contact-form textarea {

    width: 100%;

    padding: 17px 18px;

    box-sizing: border-box;

    background: #fbfdfc;

    border: 1px solid #cbdcd6;

    border-radius: 10px;

    outline: none;

    color: #263a35;

    font-family: inherit;

    font-size: 15px;

    transition: 0.3s ease;
}


/* Placeholder */

#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: #71817c;
}


/* Focus */

#contact-form input:focus,
#contact-form textarea:focus {

    border-color: #38695d;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(56, 105, 93, 0.08);
}


/* Message */

#contact-form textarea {

    min-height: 195px;

    resize: vertical;

    margin-bottom: 20px;
}


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

.send-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 15px 30px;

    background: #38695d;

    color: #ffffff;

    border: none;

    border-radius: 8px;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}


.send-btn:hover {

    background: #285348;

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(56, 105, 93, 0.25);
}


.send-btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;
}


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

#form-status {

    margin-top: 15px;

    font-size: 14px;

    font-weight: 600;
}


#form-status.success {
    color: #159447;
}


#form-status.error {
    color: #dc3545;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .contact-container {

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .contact-info {
        text-align: center;
    }

    .contact-description {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-line {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-detail {
        justify-content: center;
    }
}


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

@media (max-width: 600px) {

    .contact {

        padding: 80px 5% 60px;
    }

    .contact-title {

        font-size: 40px;
    }

    .contact-form-box {

        padding: 20px;
    }

    #contact-form .input-box {

        flex-direction: column;

        gap: 15px;

        margin-bottom: 15px;
    }

    #contact-form textarea {

        min-height: 150px;
    }

    .send-btn {

        width: 100%;
    }
}
.home-content .social-media a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: 50%;
    box-shadow: 0 .2rem .5rem var(--shadow-color);
    font-size: 2rem;
    color: var(--main-color);
    margin: 2.5rem 1.5rem 3rem 0;
    transition: .5s ease;
}

.home-content .social-media a:hover {
    background: var(--main-color);
    color: var(--white-color);
}