#form_wrapper{
width:92%;
max-width:45em;
background-color:#fdfafa;
border: .065em solid gray;
border-radius:2em;
box-shadow: 0.125em 0.125em 0.625em 0em rgba(0, 0, 0, 0.4); /* Subtle drop shadow */
margin:1em auto 2em auto; 
padding:0.75em 0.45em; 
}

#form_wrapper h1{
    font-size:0.95em;
}

.mid_pg04{
max-width: 40.5em;
margin:0 auto;
padding:0;
}
.mid_pg04 h1{
    color:rgb(71, 51, 51);
    margin:0 0 0 0.25em;
    padding:0;
    }
.mid_pg04 h2{
font-style:italic;    
color:black;
margin:0.5em 0 0.5em 0.5em;
padding:0;
}
    .mid_pg04 p{
    color:rgb(37, 23, 23);
    line-height: 1.5em;
    text-indent:0.25em;
    margin:0.45em 0 0 0.5em;
    padding:0;
    }

 .mid_pg05{
    max-width:14em;
    margin:1em 0 1em 10%;
    padding:1em;
    background-color: #2a6180;
    border: .065em solid gray;
border-radius:0.75em;
 }   
    
.form-fields{
font-size:1.1em;
margin:0 0 1em 1em ;
padding: 0;
}
.prompt-text{ cursor: pointer;
color: #a38282;
font-size: 0.75em;
margin:0 0 1em 2em;
padding:0 0 5em 0;
}

#message{
min-width: 17em;
min-height: 5em;  
font-size:1em;
background-color:#ebedf0;
color: #000;
border: 2px solid #afb2b6;
border-radius: 0.25em;
box-shadow: 0.125em 0.125em 0.625em 0em rgba(0, 0, 0, 0.4);
margin: 0 auto;
padding: 0.25em;
}

.input{
padding: 0.25em;color: #771c06;
font-size:1em;
background-color: #ebedf0;
color: #000;
border: 2px solid #afb2b6;
border-radius: 0.25em;
box-shadow: 0.125em 0.125em 0.625em 0em rgba(0, 0, 0, 0.4);
}

.sent-info{
font-weight:bold;
font-style:italic;
border-bottom:0.12em dotted gray;
margin:0.75em 0.75em;
padding:0.5em;
}

#cybergate {
    max-width: 26em;
    background: 
        url('../imgs/icons/solve_prompt.svg') no-repeat center right 1em,
        linear-gradient(to bottom, rgba(131, 166, 186, 1), rgba(150, 193, 218, 1));
    background-size: auto 2.5em, cover;
    border: 2px solid #afb2b6;
    border-radius: 0.5em;
    margin: 0 0 0 0.25em;
    padding: 0.55em 0 0.5em 0.25em;
}


#cybergate-error {
max-width:27em;
color: #771c06;
font-weight:bold;
letter-spacing:0.005em;
background: #E0B77E !important;
border: 2px solid #afb2b6;
border-radius: 0.5em;
margin:0 0 0.5em 0.5em;
padding: 0.75em 0 0.75em 0;
}

.cybergate-option{
    width:5em;    
    color: #7c2d14;
    font-size:1.25em;
    border:0.09em solid #a9cbdf;
    background: #6F93BB url('../imgs/icons/3bars_icon.svg') no-repeat center left;
    background-size: 25%;
    transition: all 0.2s ease-in-out;
    border-radius: 0.45em;
    margin:0.5em;
    padding:0.125em 0.065em 0.125em 1.35em;
    }
    .cybergate-option:hover{
    color:red;
    background: #c5deec url('../imgs/icons/3bars_icon.svg') no-repeat center left;
    background-size: 25%;
    border:0.09em solid #152f3f;
    background: #99b4c5 url('../imgs/icons/3bars_icon.svg') no-repeat center left;
    background-size: 25%;
    transition: all 0.2s ease-in-out;
    border-radius: 0.45em;
    margin:0.5em;
    padding:0.125em 0.065em 0.125em 1.35em;
    opacity: 0.4;
    }

#cybergate-close {
    display: inline-block;
    width: 1.5em; /* Adjust size as needed */
    height: 1.5em;
    background: url('../imgs/icons/3bars_icon.svg') no-repeat center left;
    background-size: contain;
    vertical-align: center;
    cursor: pointer;
    opacity: 0.8;
}


.show-error {
display: block; /* Shows the error box */
}

.hidden-error {
display: none; /* Hides the error box */  
}


.hidden-error {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.show-error {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}


.cybergate-icons {
width: 2.5em;
height: auto;
vertical-align: center;
margin-left: 5px;
}

/*  our non human visible bot trap field */ 
.honeypot {
    display: none; /* Fully hidden */
}

.hidden-label {
    position: absolute;
    left: -9999px; /* Screen reader friendly but invisible */
}

.hidden-input {
    position: absolute;
    left: -9999px; /* Ensures bots can see it, but not users */
}

  #contact_submit{
    display: flex;
    width: 8em;
    color: #122cbe;
    font-size:1.5em;
    font-weight: bold;
    background: #D9AC84 url('../imgs/icons/email.svg') no-repeat center right 0.75em;
    background-size: 2.25em; /* Adjust if needed */
    border: 0.15em solid rgba(103, 133, 168, 0.7);
    border-radius: 0.5em;
    text-align: left;
    cursor: pointer;
    margin: 0 auto;
    padding: 0.75em 0 0.75em 0.75em;
    text-decoration: none;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6), inset 1px 1px 4px rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease-in-out;
    }
    
    #contact_submit:hover{
    color: #0f5c05;
    background: #e0b77e url('../imgs/icons/email.svg') no-repeat center right 0.75em;
    border-color: rgba(103, 133, 168, 0.9);
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.7), inset 2px 2px 6px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    }