@import url("team.css");
form {
margin-top: 40px;
}

textarea {
height: 200px;
/* width: 100%; */
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 24px;
border: 1px solid;
}

input, select {
padding: 12px 16px;
border-radius: 10px;
border: 1px solid;
}

label {
font-size: 14px;
}

form div {
display: flex;
flex-direction: row;
gap: 18px;
}

.contact {
display: flex;
flex-direction: row;
padding-inline: 100px;
flex-wrap: wrap;
/* flex-basis: 50%; */
}

.donate-p {
font-size: 16px!important;
padding-bottom: 10px!important;
margin-top: -8px!important;
/* max-width: 65ch!important; */
/* text-wrap: pretty!important; */
}

.contact form, .contact div {
flex-basis: 50%;
}

input, textarea {
width: 100%;
}

/* select, select::picker(select) {
appearance: base-select;
} */

option:hover, option:focus {
background-color: #ecdfd5;
}

.contact div:nth-child(2) {
padding: 40px;
}

.contact div a {
color: #874f26;
}

.contact p {
padding-bottom: 20px;
padding-left: 10px;
}

.font {
font-size: 28px;
padding-right: 16px;
}

h3 {
color: #36200f;
font-size: 24px;
}

li {
list-style-position: inside;
}

@media screen and (max-width: 475px) {
    .contact {
    padding-inline: 12px;
    }

    .contact form, .contact div {
    flex-basis: 100%;
    width: 100%;
    }
    
    .contact p {
    padding-bottom: 8px;
    padding-left: 0;
    }

    .contact div:nth-child(2) {
    padding: 0px;
    }

    form div {
    flex-direction: column;
    }
    
    .font {
    font-size: 22px;
    }
}

@media screen and (min-width: 475px) and (max-width: 640px) {
    .contact {
    padding-inline: 20px;
    }

    .contact form, .contact div {
    flex-basis: 100%;
    width: 100%;
    }
    
    .contact p {
    padding-bottom: 8px;
    padding-left: 0;
    }

    .contact div:nth-child(2) {
    padding: 0px;
    }        
    
    .font {
    font-size: 22px;
    }

    form div {
    flex-direction: column;
    }
}

@media screen and (min-width: 640px) and (max-width: 768px) {
    .contact {
    padding-inline: 30px;
    }

    .contact form, .contact div {
    flex-basis: 100%;
    width: 100%;
    }
    
    .contact p {
    padding-bottom: 8px;
    padding-left: 0;
    }

    .contact div:nth-child(2) {
    padding: 0px;
    }        
    
    .font {
    font-size: 22px;
    }

}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .contact {
    padding-inline: auto;
    }    
}

@media screen and (min-width: 1536px) and (max-width: 1866px) {
    .hero1 {
    padding-inline: 190px;
    }

    .contact {
    padding-inline: 400px;
    justify-content: space-between;
    }

    .vision p:not(:first-of-type), .donate p:not(:first-of-type), .history p:not(:first-of-type) {
    max-width: 70ch;
    }
}