body {
    font-family: Montserrat, sans-serif;
    margin: 0;
    padding: 0;
    color: rgb(66, 66, 66);
}
a {
    color:black;
    text-decoration: none;
}

h1 {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: rgb(35, 136, 219);
}

.footer{margin-top:40px;color:white;background-color: #777; border-top:1px solid grey;}

.icons{
    width: 50px;
    margin-bottom:-20px;
    margin-top:30px;
}

.menu, .dropdown{
    font-size: 14.6px;
    font-weight: 600;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 70px;
}

/* Flex settings */
.columns{
        display: flex;
        flex-direction: row;
        width:100%;
    }
.columns > div, .columns > a{
    flex: 1;
    text-align: center;
    overflow: hidden;
}

.column_padded{
    padding:15px;
    margin:0;
    text-align: left !important;
}

.three-column{
    position: relative;
    text-align: center;
}

.three_column > img{
    height:29vw;
}

.three_column > span{
    position:absolute;
    margin-top:14vw;
    color: white;
    font-size: 3vw  ;
    font-weight: 600;
    text-align: center;
    display:block;
    width:33%;
    text-shadow: 2px 2px #000000;
}

.three_column > span > a{
    color:white;
}
.three_column > span > a:hover{
    color:orange;
}


.message-error {
    color: red;
    margin-bottom: 20px;
}

.message-success {
    color: green !important;
    margin-bottom: 20px;
}

.hidden {
    display:none;
}

/* Existing styles for container, input, textarea, and submit button */
.form_container{
    padding:0;
    margin:0;
    width:100%;
}

/* Additional style for the select element */
.form_container select {
    width: 100%; /* Full width */
    border: none; /* Remove border */
    border-bottom: 1px solid white; /* Add underline */
    outline: none; /* Remove focus outline */
    padding: 2px 0; /* Add some padding */
    background: transparent; /* Transparent background */
    -webkit-appearance: none; /* Remove default styling for WebKit browsers */
    -moz-appearance: none; /* Remove default styling for Mozilla browsers */
    appearance: none; /* Remove default styling */
    box-sizing: border-box; /* Include padding and border in the element's width */
    margin-bottom: 30px;
    margin-top: 5px;
    color:white;
}

.form_container .select-container {
    position: relative;
    width: 90%;
}

.form_container select {
    width: 100%;
    /* Other select styles... */
    -webkit-appearance: none; /* Remove default styling for WebKit browsers */
    -moz-appearance: none; /* Remove default styling for Mozilla browsers */
    appearance: none; /* Remove default styling */
}

.form_container .select-container::after {
    content: '▼'; /* Dropdown arrow */
    position: absolute;
    right: 10px; /* Adjust as needed */
    top: 30%;
    transform: translateY(-45%);
    pointer-events: none; /* Prevent the arrow from being clickable */
}

input[type="submit"]{margin-top: 30px;}


label{margin-bottom: 0px;}

/* Style for input and textarea elements */
.form_container input[type="text"],
.form_container input[type="email"],
.form_container input[type="tel"],
.form_container textarea {
    width: 90%; /* Full width */
    border: none; /* Remove border */
    border-bottom: 1px solid #ccc; /* Add underline */
    outline: none; /* Remove focus outline */
    padding: 2px 3px; /* Add some padding */
    background: rgb(66, 66, 66); /* Transparent background */
    box-sizing: border-box; /* Include padding and border in the element's width */
    margin-bottom: 30px;
    margin-top: 5px;
    color:white;
}

.grey option{color: rgb(66, 66, 66); padding:3px;}

.form_container textarea{border:1px solid #ccc; /* Add underline */ }


/* Style for focus state of the select element */
.form_container select:focus {
    border-bottom: 1px solid #000; /* Darker underline on focus */
}
@media screen and (max-width: 765px) {
    .hamburger {
        display: block !important;
    }
    .menu {
        display: none !important;
    }
}

/* Media Query for smaller screens */
@media (max-width: 600px) {
    .columns {
        /* Stack flex items vertically on small screens */
        flex-direction: column;
    }
    
    .three_column > img{
        height:95vw;
    }
    
    .columns > div {
       flex: 1 !important;
    } 

    .columns > div {
       flex: 1 !important;
    }

    .three_column > span{
        margin-top: 50vw;
        width:95vw;
        font-size:7vw;
    }
    
    .footer .columns div, .footerer .columns div a {text-align:center !important;}
}

.grey{
    background-color: rgb(66, 66, 66) !important;
    color: white;
}