.text-white *{
	color:#fff !important;
}
#message-area .alert{
	margin-top: 15px;
    border-radius: 25px;
}

.about-description *{
	color: white !important;
}
.about-description figcaption {
	display: none;
}
.about-description img{
	width: 100%;
	height: 100%;
	max-width: 500px;
	max-height: 500px;
}
.is-invalid { border-color: #dc3545 !important; }
.is-valid { border-color: #198754 !important; }
.spinner-border { width: 1rem; height: 1rem; }

.bd-service-area {
    position: relative;
    background: url('../images/patterns/world-map-light.jpg') no-repeat center;
    background-size: cover;
    z-index: 1;
}

.bd-service-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 10, 30, 0.81); /* dark navy overlay, adjust opacity */
    z-index: 0;
}

/* placement */
.asfm-sky{ position:absolute; left:0; right:0; pointer-events:none; z-index:0; inset: 0;
 z-index: 0;
  overflow: hidden;   /* <-- important: prevent horizontal scroll */ }
.asfm-sky--band{ top:0px; height:320px; }
.asfm-sky-svg{ width:100%; height:100%; }

/* VISIBLY animate the dashed route */
.asfm-route{
  stroke: rgba(159,186,206,.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  stroke-dashoffset: 0;
  animation: asfm-dash 8s linear infinite;
}
.asfm-route-glow{
  stroke: rgba(164,228,255,.20);
  stroke-width: 16;
  opacity: .8;
}

/* motion along the same path (with WebKit prefixes) */
.asfm-plane{
  position:absolute; top:0; left:0; z-index:1;
  width: 0; height: 0; /* triangle fallback visible even if CSP blocks images */
  border-left: 18px solid #ffffff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.9));
  offset-path: path('M50,420 C 250,140 950,140 1150,420 S 950,480 600,320 250,420 50,420');
  -webkit-offset-path: path('M50,420 C 250,140 950,140 1150,420 S 950,480 600,320 250,420 50,420');
  offset-rotate: auto;
  -webkit-offset-rotate: auto;
  animation: asfm-plane-move 10s linear infinite;
}

/* beacons */
.asfm-beacon{
  position:absolute; width:10px; height:10px; border-radius:50%;
  left: var(--bx,50%); top: var(--by,50%);         /* % positions */
  transform: translate(-50%,-50%);
  background:#aee3ff;
  box-shadow: 0 0 18px rgba(120,200,255,.9), 0 0 4px rgba(120,200,255,.9) inset;
  animation: asfm-beacon-pulse 2.4s ease-in-out infinite;
}

/* optional extra safety on tiny screens */


.bd-about-area { position: relative; overflow: hidden; }   /* if not already */


/* lift real content above (exclude decorations) */
.bd-about-area > *:not(.asfm-sky):not(.asfm-globe):not(.asfm-orb):not(.bd-about-shape){
  position: relative; z-index: 1;
}

/* animations */
@keyframes asfm-dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -440; } /* adjust speed/length */
}
@keyframes asfm-plane-move {
  0%   { offset-distance: 0%;   -webkit-offset-distance: 0%; }
  100% { offset-distance: 100%; -webkit-offset-distance: 100%; }
}
@keyframes asfm-beacon-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);   opacity: .9; }
  50%     { transform: translate(-50%,-50%) scale(1.8); opacity: .2; }
}

/* accessibility & responsive */
@media (prefers-reduced-motion: reduce){
  .asfm-plane, .asfm-beacon, .asfm-route { animation: none !important; }
}

@media (max-width: 576px) {
  .asfm-sky{ 
    display:block; 
  }
  .asfm-sky--band{ 
    top:20px;                 /* lower so it doesn’t cover the heading */
    height:175px; 
  }
  .asfm-route{ stroke-width:1.5; }
  .asfm-plane{ animation-duration:12s; }  /* a bit slower */
}

/* Ensure the banner can hold absolutely-positioned overlays */
.bd-banner-four-area { position: relative; overflow: hidden; }

/* Background image (you already have include-bg) usually sits behind content */
.bd-banner-four-thumb { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; z-index: 0; }
/* adjust width to match your current layout */

.asfm-hero-sky{
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1; /* above the image, below text */
}
.asfm-hero-sky-svg{ width: 100%; height: 100%; }

/* Make the dashed line feel alive (marching dashes) */
.asfm-hero-sky #asfmOrbit{
  animation: asfmDash 10s linear infinite;
}

@keyframes asfmDash {
  from { stroke-dashoffset: 0;   }
  to   { stroke-dashoffset: -480; }
}

/* CSS motion-path plane */
.asfm-hero-plane{
animation-delay: 0s !important; /* force immediate start */
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 0; height: 0;             /* triangle plane so no CSP issues */
  border-left: 22px solid #ffffff; /* plane body */
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.9));

  /* follow the same path as the main orbit */
  offset-path: path('M280,420 C 620,140 1080,120 1200,340 S 1020,580 720,460 420,520 280,420');
  -webkit-offset-path: path('M280,420 C 620,140 1080,120 1200,340 S 1020,580 720,460 420,520 280,420');

  offset-rotate: auto;
  -webkit-offset-rotate: auto;

  animation: asfmHeroPlane 9s linear infinite;
}

@keyframes asfmHeroPlane {
  0%   { offset-distance: 0%;   -webkit-offset-distance: 0%; }
  100% { offset-distance: 100%; -webkit-offset-distance: 100%; }
}

/* Desktop-only emphasis; tone down on mobile so it never fights reading */
@media (max-width: 991.98px){
  .bd-banner-four-thumb{ width: 100%; opacity:.85; } /* full-bleed image on mobile if you prefer */
  .asfm-hero-sky{ opacity: .35; }
  .asfm-hero-plane{ border-left-width: 16px; border-top-width: 8px; border-bottom-width: 8px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .asfm-hero-plane, .asfm-hero-sky #asfmOrbit{ animation: none !important; }
}

.bd-banner-four-content{ position: relative; z-index: 3; }

.phase-brief {
    text-align: justify;
}

.phase-title {
    font-size: 17px;
    min-height: 46px;
}