/* Make sure the form stays above the overlay */
.form-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
}
.contact-form{
    box-sizing: border-box; 
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding-left: 30px;
    padding-right:30px;
    padding-bottom:20px;
    padding-top:40px;
    max-width:400px;
    margin: 0 auto;
}
body.dark-mode .contact-form{
    background-color: #1e1e1e;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    padding: 30px;
    margin: 0 auto;
    color: #f0f0f0;
}
.contact-form h1{
    color:#333;
}
body.dark-mode .contact-form h1{
    color:#fff;
}
.contact-form a{
    color:#7f00ff;
}
body.dark-mode .contact-form a{
    color:#00c6ff;
}
.contact-form input {
    background:#fff;
    color:#333;
    margin-bottom:10px;
}
body.dark-mode .contact-form input{
    background:#333;
    color:#fff;
}
.contact-form input::placeholder {
    color: #aaa;
}
body.dark-mode .contact-form input::placeholder {
    color: #ccc;
}
.contact-form select {
    background:#fff;
    color:#333;
    margin-bottom:10px;
}
body.dark-mode .contact-form select{
    background:#333;
    color:#fff;
}
.contact-form textarea{
    background:#fff;
    color:#333;
}
body.dark-mode .contact-form textarea{
    background:#333;
    color:#fff;
}
.contact-form textarea::placeholder {
    color: #aaa;
}
body.dark-mode .contact-form textarea::placeholder {
    color: #ccc;
}
.contact-form small{
    color:#333;
}
body.dark-mode .contact-form small{
    color:#fff;
}
.contact-half{
    width: 50%; 
    float: left; 
    box-sizing: border-box; 
    padding: 10px;
}
.contact-half a{
    color:#7f00ff;
}
body.dark-mode .contact-half a{
    color:#00c6ff;
}
.custom-full i{
    color:#7f00ff;
}
body.dark-mode .custom-full i{
    color:#00c6ff;
}
.custom-full h2{
    color:#333;
}
body.dark-mode .custom-full h2{
    color:#fff;
}
.contact-half p{
    color:#333;
}
body.dark-mode .contact-half p{
    color:#fff;
}

/* Tablets (Portrait and Landscape) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .contact-half{
        width: 50%;
    }
}
/* Mobile devices */
@media screen and (max-width: 768px) {
    .contact-half{
        width: 100%;
    }
}