/* ============================================*/
/* Elements in the Contact Us page */
/* ============================================*/
/* main-contact-box is a flex box inside the 'main' grid box, containing all the elements particular to the contact page It contains the 2 flex items: contact-box-one and contact-box-two*/
 .main-contact-box{
     display: flex;
     flex-direction: row;
     margin: 0 auto;
     padding: 30px 0;
     width: 90%;
     gap: 40px;
}
/* ============================================*/
/* box #1 of the Contact Us page */
/* ============================================*/
/* Flex box for main content box one */
 .contact-box-one {
     flex: 2;
}
/* title of this flex box */
 .contact-box-one h1 {
     text-align: left;
     color: #766730;
     font-size: 1.2rem;
     line-height: 1.4;
     padding-top: 18px;
}
/* form inside contact-box-one */
 .contact-box-one form {
     padding-top: 20px;
     color: #4E4112;
}
 .formbox {
     padding-bottom:10px;
}
 .form-group {
     margin-bottom: 15px;
     color: #766426;
     text-align: center;
}
 #id02 {
     display:none;
}
 .form-group label {
     display: block;
     margin-bottom:4px;
     font-size: 14px;
     font-weight: 600;
     text-align: left;
}
 .form-group label:first-child {
     margin-top:20px;
}
 .form-group input, .form-group textarea {
     width: 100%;
     padding: 15px;
     border: none;
     border-radius: 5px;
     background: rgba(241, 224, 119, 0.4);
     outline: 0;
     color: #4E4112;
}
 .form-group textarea {
     height: 100px;
     resize: none;
     margin-bottom: 10px;
}
/* submit email button */
 .form-group .btn {
     padding: 6px;
     border-radius: 20px;
     width: 50%;
     background: rgba(241, 224, 119, 0.4);
     color: #766426;
     font-size: 16px;
     font-weight: bold;
     cursor: pointer;
     border: 2px solid #B9A14E;
     text-align: center;
}
 input {
     font-size:1.0rem;
}
/* submit email hover button */
 .btn:hover {
     background: #f1e07799;
     color: #766730;
}
 div.response {
     margin-top:30px;
}
 .response h4 {
     color: #4E4112;
     font-weight:bold;
     font-size:1.1rem;
}
 .response h5 {
     color: darkgreen;
     color: #4E4112;
     font-weight:bold;
     padding:4px;
     font-size:1rem;
     text-decoration: underline;
}
 p.respond-message {
     color: #4E4112;
     color: #12431e;
}
 p.response-confirmed {
     color: #4E4112;
     padding:10px 0;
     font-weight:500;
}
/* ============================================*/
/* box #2 of the Contact Us page */
/* ============================================*/
/* second flex item, main content, displays as a box on the right containing text container and map on contact page*/
 .contact-box-two {
     flex: 3;
     color:#113f11;
     padding:0;
}
/* text section in flex box contact-box-two */
 .text-container h1 {
     font-size: 1.3rem;
     padding: 0 20px 20px 0;
     text-align: left;
     line-height: 1.2;
     color:#225F32;
}
/* formatting text box*/
 .text-container {
     padding: 20px;
    /* color: #12431e;
     */
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
}
.text-container p {
    font-size:1rem;
}
/* in text-container */
 .address {
     padding: 10px;
     background-color: #51895E;
     border-radius: 5px;
}
/* in text-container */
 .address p {
     padding-left: 20px;
     color: white;
     font-size:1rem;
}
/* map in flex box contact-box-two below text-container */
 .googlemap {
     display: block;
     min-height: 400px;
     width: 100%;
}
/* ============================================*/
/* Media Queries up to 900px */
/* ============================================*/
 @media(max-width:900px) {
     .main-contact-box{
         gap: 30px;
    }
     .contact-box-one{
         flex:3;
         padding:0;
    }
     .contact-box-two {
         flex:4;
         padding:0;
    }
     .googlemap {
         min-height: 340px;
    }
}
/* ============================================*/
/* Media Queries up to 700px */
/* ============================================*/
 @media(max-width:700px) {
     .main-contact-box{
         width: 90%;
         flex-direction: column-reverse;
    }
    /* title in flex box contact-box-one */
     .contact-box-one h1 {
         text-align: center;
    }
    /* space around form in flex box contact-box-one */
     .form-group {
         width: 90%;
         margin: 0 auto;
    }
     div.response {
         text-align:center;
    }
    /* change direction of flex items in contact-box-two - items: text and map */
     .contact-box-two {
         flex-direction: column-reverse;
         padding:0 20px;
    }
     .text-container h1 {
         text-align: center;
    }
     .text-container, .address {
         text-align: center;
    }
     .googlemap {
         min-height: 300px;
    }
}