/* =========================================
   RESET
========================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;
}

body{

    background:#f8f6f3;

    color:#222;

    font-family:'Poppins',sans-serif;
}

/* =========================================
   PAGE
========================================= */

.contact-page{

    max-width:1400px;

    margin:0 auto;

    padding:40px 24px 60px;
}

/* =========================================
   BREADCRUMB
========================================= */

.contact-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:30px;

    font-size:14px;
}

.contact-breadcrumb a{

    color:#777;

    text-decoration:none;
}

.contact-breadcrumb a:hover{

    color:#7B4F2C;
}

.active-breadcrumb{

    color:#7B4F2C;

    font-weight:600;
}

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

.contact-hero{

    text-align:center;

    max-width:800px;

    margin:0 auto 50px;
}

.contact-label{

    display:inline-block;

    color:#7B4F2C;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:14px;
}

.contact-hero h1{

    font-family:'Playfair Display',serif;

    font-size:52px;

    color:#2f1e12;

    margin-bottom:18px;
}

.contact-hero p{

    color:#666;

    line-height:1.8;

    font-size:15px;
}

/* =========================================
   GRID
========================================= */

.contact-grid{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr;

    gap:24px;

    align-items:start;
}

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

.contact-card{

    background:#fff;

    border:1px solid #ece5dc;

    border-radius:24px;

    padding:28px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);
}

.contact-card h2{

    font-size:28px;

    color:#2f1e12;

    margin-bottom:24px;

    font-family:'Playfair Display',serif;
}

.contact-card h3{

    font-size:22px;

    color:#2f1e12;

    margin-bottom:18px;

    font-family:'Playfair Display',serif;
}

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

.form-group{

    margin-bottom:18px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:500;
}

.form-group input,
.form-group textarea{

    width:100%;

    border:1px solid #e5ddd3;

    border-radius:14px;

    padding:14px 16px;

    font-size:14px;

    font-family:'Poppins',sans-serif;

    outline:none;

    transition:.25s;
}

.form-group input:focus,
.form-group textarea:focus{

    border-color:#7B4F2C;
}

.form-group textarea{

    resize:vertical;

    min-height:160px;
}

.contact-submit-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:#7B4F2C;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;
}

.contact-submit-btn:hover{

    transform:translateY(-2px);

    background:#8b5a35;
}

/* =========================================
   FIND US
========================================= */

.contact-middle-column,
.contact-right-column{

    display:flex;

    flex-direction:column;

    gap:24px;
}

.contact-card p{

    color:#666;

    line-height:1.8;

    font-size:14px;
}

/* =========================================
   MAP
========================================= */

.contact-map{

    overflow:hidden;

    border-radius:18px;

    border:1px solid #ece5dc;
}

.contact-map iframe{

    width:100%;

    height:280px;

    border:none;

    display:block;
}

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

.contact-info-item{

    padding:14px 0;

    border-bottom:1px solid #f2ede7;
}

.contact-info-item:last-child{

    border-bottom:none;

    padding-bottom:0;
}

.contact-info-item strong{

    display:block;

    color:#2f1e12;

    font-size:14px;

    margin-bottom:6px;
}

.contact-info-item span{

    color:#666;

    font-size:14px;

    line-height:1.7;
}

/* =========================================
   HOVER EFFECTS
========================================= */

.contact-card{

    transition:.25s;
}

.contact-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 14px 40px rgba(0,0,0,.06);
}

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

@media(max-width:1100px){

    .contact-grid{

        grid-template-columns:
        1fr 1fr;
    }

    .contact-form-card{

        grid-column:
        span 2;
    }

}

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

@media(max-width:768px){

    .contact-page{

        padding:24px 14px 40px;
    }

    .contact-grid{

        grid-template-columns:1fr;
    }

    .contact-form-card{

        grid-column:auto;
    }

    .contact-hero{

        margin-bottom:35px;
    }

    .contact-hero h1{

        font-size:34px;
    }

    .contact-card{

        padding:20px;
    }

    .contact-card h2{

        font-size:24px;
    }

    .contact-card h3{

        font-size:20px;
    }

    .contact-map iframe{

        height:240px;
    }

}

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

@media(max-width:480px){

    .contact-hero h1{

        font-size:28px;
    }

    .contact-hero p{

        font-size:14px;
    }

    .contact-submit-btn{

        height:52px;
    }

    .contact-map iframe{

        height:220px;
    }

}