/* contact.css */


body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.backgroundcontainer2 {
    display: flex;
    justify-content: space-between;
    /* text-align:center; */
    padding: 0 150px;
}
.contact-form{
    width:46%;
    background-color: #c0c0c054;
    /* font-size:25px; */
}

.contact-form{
    font-size:25px;
    color:#525151;
    font-family: Montserrat;
}

.address-page {
    width: 46%; 
    background-color: #c0c0c054;
}

.address-page h2{
    font-size:26px;
    color:#525151;
    text-align: center;
    font-family: Montserrat;
}

.address-page p{
    font-size:19px;
    color:#525151d2;
    text-align: center;
    
}

input, textarea{
    width:75%;
    padding:20px;
    margin-bottom:20px;  

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    border:none;
    background-color: rgba(114, 113, 113, 0.151);
    border-radius: 15px;
}

.contact-form{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

#submitBtn{
    width:40%;
    padding:12px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px; 
    background-color: #e0ad2a;
    cursor:pointer;
    border:none;
    border-radius: 15px;
    color:white;
}

#submitBtn:hover{
    background-color: #bd9225;
    transition: ease-in-out 0.2s;
}

.fa {
    padding: 10px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    /* margin: 6px 3px; */
    border-radius: 50%;
  }

.icons{
    text-align: center;
}

.fa:hover{
    opacity: 0.7;
}

.fa-facebook{
    background: #3B5998;
    color:white;
}

.fa-twitter{
    background: #55ACEE;
    color:white;
}

.fa-instagram {
    background: #125688;
    color: white;
}

.fa-pinterest {
    background: #cb2027;
    color: white;
}

.icons{
    display:flex;
    justify-content: center;
}

.icon-container{
    padding:5px;
}

.backgroundcontainer3{
    display:flex;
    justify-content: center;
    padding:50px;
}

@media only screen and (max-width: 768px) {
    .backgroundcontainer2 {
        flex-direction: column;
        padding: 0 30px;
    }

    .contact-form,
    .address-page {
        width: 100%; 
        margin-bottom: 20px; 
    }
}