/* =====================================
   WOODIJ CONTACT PAGE
===================================== */
/* =====================================
   HEADER FIX
===================================== */

.site-header {
    background: #ffffff;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid #eeeeee;
}

.header-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-header .logo {
    width: 150px;
    height: auto;
    display: block;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.nav a {
    color: #4169E1;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
}

.nav a:hover,
.nav a.active {
    color: #628A3D;
}

.header-button {
    background: #6F913F;
    color: #ffffff;
    text-decoration: none;

    padding: 14px 24px;
    border-radius: 4px;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;
}

.header-button:hover {
    background: #4169E1;
}


/* MOBILE HEADER */

@media (max-width: 900px) {

    .header-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 15px;
    }

}


@media (max-width: 600px) {

    .site-header .logo {
        width: 130px;
    }

    .nav a {
        font-size: 13px;
    }

    .header-button {
        padding: 12px 18px;
    }

}

/* CONTAINER */

.contact-container {

    width: 90%;

    max-width: 1200px;

    margin: auto;

}


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

.contact-hero {

    background:

        linear-gradient(
            135deg,
            #edf5e7,
            #dcebcf
        );

    padding:

        100px 0
        90px;

}


.contact-hero-content {

    max-width:

        850px;

}


.contact-small-title {

    display:

        inline-block;

    font-size:

        13px;

    font-weight:

        700;

    letter-spacing:

        2px;

    color:

        #4169E1;

    margin-bottom:

        20px;

}


.contact-hero h1 {

    font-family:

        'Playfair Display',
        serif;

    font-size:

        58px;

    line-height:

        1.15;

    color:

        #3B2A20;

    margin-bottom:

        25px;

}


.contact-hero h1 span {

    color:

        #628A3D;

}


.contact-hero p {

    max-width:

        700px;

    font-size:

        19px;

    line-height:

        1.7;

    color:

        #4A4038;

}


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

.contact-section {

    padding:

        100px 0;

    background:

        #ffffff;

}


.contact-section .contact-container {

    display:

        grid;

    grid-template-columns:

        1fr
        1fr;

    gap:

        90px;

    align-items:

        start;

}


/* =====================================
   LEFT SIDE
===================================== */

.section-label {

    display:

        inline-block;

    font-size:

        12px;

    font-weight:

        700;

    letter-spacing:

        2px;

    color:

        #4169E1;

    margin-bottom:

        15px;

}


.contact-info h2 {

    font-family:

        'Playfair Display',
        serif;

    font-size:

        42px;

    color:

        #3B2A20;

    margin-bottom:

        20px;

}


.contact-intro {

    font-size:

        17px;

    line-height:

        1.7;

    color:

        #5c534d;

    margin-bottom:

        45px;

}


/* CONTACT ITEM */

.contact-item {

    display:

        flex;

    align-items:

        flex-start;

    gap:

        18px;

    margin-bottom:

        28px;

}


.contact-icon {

    width:

        45px;

    height:

        45px;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    background:

        #edf5e7;

    color:

        #628A3D;

    border-radius:

        50%;

    font-size:

        20px;

}


.contact-item h4 {

    font-size:

        16px;

    margin:

        0
        0
        5px;

    color:

        #3B2A20;

}


.contact-item p {

    margin:

        0;

    color:

        #5c534d;

}


.contact-item a {

    color:

        #4169E1;

    text-decoration:

        none;

    font-weight:

        600;

}


/* =====================================
   SERVICES LIST
===================================== */

.contact-services {

    margin-top:

        50px;

    padding:

        30px;

    background:

        #f5f8f2;

    border-left:

        4px solid #628A3D;

}


.contact-services h3 {

    margin-top:

        0;

    color:

        #3B2A20;

    font-size:

        20px;

}


.contact-services ul {

    list-style:

        none;

    padding:

        0;

    margin:

        20px 0 0;

}


.contact-services li {

    margin-bottom:

        12px;

    color:

        #4A4038;

}


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

.contact-form-box {

    background:

        #ffffff;

    padding:

        45px;

    border-radius:

        10px;

    box-shadow:

        0
        10px
        40px
        rgba(0,0,0,0.08);

    border:

        1px solid
        #edf0ea;

}


.contact-form-box h2 {

    font-family:

        'Playfair Display',
        serif;

    font-size:

        34px;

    color:

        #3B2A20;

    margin-top:

        0;

    margin-bottom:

        10px;

}


.contact-form-box > p {

    color:

        #666;

    line-height:

        1.6;

    margin-bottom:

        30px;

}


/* FORM GROUP */

.form-group {

    margin-bottom:

        20px;

}


.form-group label {

    display:

        block;

    font-size:

        14px;

    font-weight:

        600;

    margin-bottom:

        8px;

    color:

        #3B2A20;

}


.form-group input,

.form-group select,

.form-group textarea {

    width:

        100%;

    padding:

        14px
        15px;

    border:

        1px solid
        #dcdcdc;

    border-radius:

        5px;

    font-family:

        Arial,
        sans-serif;

    font-size:

        15px;

    box-sizing:

        border-box;

    outline:

        none;

}


/* INPUT FOCUS */

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color:

        #628A3D;

    box-shadow:

        0
        0
        0
        3px
        rgba(98,138,61,0.12);

}


.form-group textarea {

    min-height:

        150px;

    resize:

        vertical;

}


/* SUBMIT BUTTON */

.contact-submit {

    border:

        none;

    background:

        #628A3D;

    color:

        #ffffff;

    padding:

        16px
        30px;

    border-radius:

        4px;

    font-size:

        15px;

    font-weight:

        700;

    cursor:

        pointer;

    transition:

        0.3s;

}


.contact-submit:hover {

    background:

        #4169E1;

    transform:

        translateY(-2px);

}


/* =====================================
   CTA
===================================== */

.contact-cta {

    background:

        linear-gradient(
            135deg,
            #3B2A20,
            #4A4038
        );

    padding:

        70px 0;

}


.contact-cta .contact-container {

    display:

        flex;

    align-items:

        center;

    justify-content:

        space-between;

    gap:

        40px;

}


.contact-cta span {

    font-size:

        12px;

    letter-spacing:

        2px;

    font-weight:

        700;

    color:

        #a8d080;

}


.contact-cta h2 {

    color:

        white;

    font-family:

        'Playfair Display',
        serif;

    font-size:

        40px;

    max-width:

        650px;

    margin-bottom:

        0;

}


.cta-button {

    background:

        #6F913F;

    color:

        white;

    padding:

        16px
        28px;

    text-decoration:

        none;

    font-weight:

        700;

    border-radius:

        4px;

    white-space:

        nowrap;

    transition:

        0.3s;

}


.cta-button:hover {

    background:

        #4169E1;

}


/* =====================================
   FOOTER
===================================== */

.site-footer {

    background:

        #1f241d;

    color:

        white;

    padding:

        70px 0 0;

}


.footer-container {

    width:

        90%;

    max-width:

        1200px;

    margin:

        auto;

    display:

        grid;

    grid-template-columns:

        2fr
        1fr
        1fr;

    gap:

        70px;

}


.footer-brand img {

    width:

        170px;

    background:

        white;

    padding:

        5px;

    border-radius:

        3px;

}


.footer-brand p {

    color:

        #c7c7c7;

    line-height:

        1.7;

    max-width:

        350px;

}


.footer-links h4,

.footer-contact h4 {

    margin-top:

        0;

    color:

        white;

}


.footer-links a,

.footer-contact a {

    display:

        block;

    color:

        #c7c7c7;

    text-decoration:

        none;

    margin-bottom:

        12px;

}


.footer-links a:hover,

.footer-contact a:hover {

    color:

        #a8d080;

}


.footer-contact p {

    color:

        #c7c7c7;

}


.footer-bottom {

    margin-top:

        60px;

    padding:

        25px;

    text-align:

        center;

    border-top:

        1px solid
        #3c4438;

    color:

        #a5a5a5;

    font-size:

        14px;

}


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

@media
(max-width: 900px) {


    .contact-section .contact-container {

        grid-template-columns:

            1fr;

        gap:

            60px;

    }


    .contact-cta .contact-container {

        flex-direction:

            column;

        align-items:

            flex-start;

    }


    .footer-container {

        grid-template-columns:

            1fr;

        gap:

            40px;

    }


}


@media
(max-width: 768px) {


    .contact-hero {

        padding:

            80px 0;

    }


    .contact-hero h1 {

        font-size:

            42px;

    }


    .contact-info h2 {

        font-size:

            34px;

    }


    .contact-form-box {

        padding:

            30px
            22px;

    }


    .contact-cta h2 {

        font-size:

            32px;

    }


}


@media
(max-width: 480px) {


    .contact-hero h1 {

        font-size:

            36px;

    }


    .contact-hero p {

        font-size:

            17px;

    }


    .contact-section {

        padding:

            70px 0;

    }


}