/* ---- from page-newcontact.php (originally lines 10-40) ---- */
.gradient-band-section {
    position: relative;
    padding-top: 140px;

}

.gradient-band-section::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    height: 220px;

    background-image: url("https://betamissionos.maxwellgeosystems56.com/wp-content/uploads/2026/03/BG4-01-scaled.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    pointer-events: none;
    z-index: 1;
}

.gradient-band-section .container {
    position: relative;
    z-index: 2;
}

/* ---- from page-newcontact.php (originally lines 195-274) ---- */
.map-container{
    width:100%;
    margin-top:5rem;
    position:relative;
}

/* marker */

.map-marker{
    position:absolute;
    transform:translate(-50%, -100%);
    cursor:pointer;
}


/* tooltip */

.map-tooltip{
    position:absolute;
    bottom:34px;
    left:50%;
    transform:translateX(-50%);
    background:#075056;
    color:white;
    font-size:13px;
    padding:8px 12px;
    border-radius:6px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:0.25s;
}

/* show tooltip */

.map-marker:hover .map-tooltip{
    opacity:1;
    visibility:visible;
}

.hero-bg-lines.herocontact {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(28, 40, 49, 1) 0%,   /* strong #1c2831 */
            rgba(28, 40, 49, 0.94) 5%,
            rgba(0, 0, 0, 0.95) 70%  /* deep black bottom */
        ),
        url('/wp-content/themes/missionos/assets/img/contact-bg.png');

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    z-index: 1;
    pointer-events: none;
    bottom: 10rem;
}
@media (max-width: 767px) {
    .map-marker img{
    width:8px;
}

}
@media (min-width: 768px) {
    .map-marker img{
    width:19px;
}
.map-marker.is-singapore img {
    width: 25px;
}

}

/* ---- from page-newcontact.php (originally lines 301-405) ---- */
.voice-trigger{
display:inline-flex;
align-items:center;
gap:10px;
background:linear-gradient(to bottom,#1c2831 0%,#0f1a22 40%,#000000 100%);
color:#fff;
border:none;
padding:10px 18px;
border-radius:14px;
cursor:pointer;
font-weight:600;
margin-bottom:25px;
}

.voice-trigger svg{
width:18px;
height:18px;
fill:#fff;
}

.voice-trigger.listening{
animation:pulseMic 1.2s infinite;
}

@keyframes pulseMic{
0%{box-shadow:0 0 0 0 rgba(253,89,2,.6);}
70%{box-shadow:0 0 0 10px rgba(253,89,2,0);}
100%{box-shadow:0 0 0 0 rgba(253,89,2,0);}
}

.required-note{
font-size:14px;
margin-bottom:18px;
color:#777;
}

.required-note span{
color:#fd5902;
font-weight:600;
}

.message-counter{
font-size:12px;
color:#777;
margin-top:6px;
text-align:right;
}

.message-counter.limit{
color:#fd5902;
font-weight:600;
}

/* phone input fix */

.iti{
width:100%;
}

.iti input{
width:100%;
height:48px;
padding-left:95px !important;
}

.form-success-message{
display:none;
position:relative;
background:linear-gradient(135deg,#fff4ed,#ffe6d6);
border:1px solid #fd5902;
color:#fd5902;
padding:22px 24px;
border-radius:12px;
margin-top:20px;
align-items:center;
justify-content:center;
font-weight:500;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.success-close{
position:absolute;
top:10px;
right:12px;
width:28px;
height:28px;
border-radius:50%;
border:none;
background:#fd5902;
color:#fff;
font-size:18px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.success-close:hover{
background:#d94a00;
transform:scale(1.08);
}