/* =========================
   ICON FONT (KEEP ALL GLYPHS)
   ========================= */
@font-face{
  font-family:"ets";
  src:
    url("fonts/ets.woff2") format("woff2"),
    url("fonts/ets.woff") format("woff");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

[class^="icon-"]::before,
[class*=" icon-"]::before{
  font-family:"ets";
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1em;
  margin-left:.2em;
  font-size:110%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.icon-x:before { content: '\e800'; } /* '' */
.icon-home:before { content: '\e801'; } /* '' */
.icon-search:before { content: '\e802'; } /* '' */
.icon-mail:before { content: '\e803'; } /* '' */
.icon-quote-l:before { content: '\e804'; } /* '' */
.icon-quote-r:before { content: '\e805'; } /* '' */
.icon-earth:before { content: '\e826'; } /* '' */
.icon-mars:before { content: '\e827'; } /* '' */
.icon-moon:before { content: '\e828'; } /* '' */
.icon-sun:before { content: '\e829'; } /* '' */
.icon-saturn:before { content: '\e82a'; } /* '' */
.icon-uranus:before { content: '\e82b'; } /* '' */
.icon-death-star:before { content: '\e82c'; } /* '' */
.icon-venus:before { content: '\e82d'; } /* '' */
.icon-black-hole:before { content: '\e82f'; } /* '' */
.icon-solar-system:before { content: '\e831'; } /* '' */
.icon-galaxy:before { content: '\e832'; } /* '' */
.icon-sputnik:before { content: '\e833'; } /* '' */
.icon-astronaut:before { content: '\e834'; } /* '' */
.icon-extraterrestrial-head:before { content: '\e835'; } /* '' */
.icon-iss:before { content: '\e836'; } /* '' */
.icon-sputnik-1:before { content: '\e837'; } /* '' */
.icon-module:before { content: '\e839'; } /* '' */
.icon-mars-rover:before { content: '\e83a'; } /* '' */
.icon-shuttle:before { content: '\e83b'; } /* '' */
.icon-rocket-1:before { content: '\e83c'; } /* '' */
.icon-rocket-launch:before { content: '\e83d'; } /* '' */
.icon-ufo:before { content: '\e83e'; } /* '' */
.icon-lander:before { content: '\e83f'; } /* '' */
.icon-lander-1:before { content: '\e841'; } /* '' */
.icon-telescope:before { content: '\e842'; } /* '' */
.icon-telescope-building:before { content: '\e843'; } /* '' */
.icon-radio-telescope:before { content: '\e844'; } /* '' */
.icon-radar-1:before { content: '\e845'; } /* '' */
.icon-astronaut-1:before { content: '\e846'; } /* '' */
.icon-neptune:before { content: '\e847'; } /* '' */
.icon-rocket:before { content: '\e848'; } /* '' */
.icon-footprints:before { content: '\e849'; } /* '' */
.icon-bluesky:before { content: '\e86c'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-linkedin:before { content: '\f0e1'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-circle:before { content: '\f1db'; } /* '' */
.icon-copyright:before { content: '\f1f9'; } /* '' */

i[class^="icon-"]:before,
i[class*=" icon-"]:before{
  margin:0;
}

.etssvg{
  display:flex;
  justify-content:center;
  gap:40px;
  font-size:300%;
  color:#666;
  margin:10px 40px 10px 40px;
}


/* =========================
   GLOBAL / TYPOGRAPHY
   ========================= */
body{
  padding-top:42px; /* header height */
  background-color:#000;
  background-image:url("spacegraphics/reticle.gif");
  background-attachment:scroll;
  background-repeat:repeat;
  color:#fff;
  font-size:14px;
  line-height:31px;
  letter-spacing:0;
  font-weight:400;
  padding-left:0;
  padding-right:0;
  padding-bottom:0;
  margin:0;
  font-family:"Lato", Helvetica, Arial, sans-serif;
}

a{
  color:#fff;
  text-decoration:none !important;
  outline:0 !important;
}
a:hover{
  color:#FF7979 !important;
}

p{
  font-size:16px;
  font-weight:400;
  line-height:21px;
  letter-spacing:.06em;
  margin-top:0;
  margin-bottom:1em;
  text-rendering:optimizeLegibility;
}

b{ font-weight:900; }

h1{
  font-size:44px;
  text-shadow:0 0 10px #E8EFFF;
  font-family:"Orbitron","Lato",Helvetica,Arial,sans-serif;
  line-height:150%;
  letter-spacing:7px;
  padding:10px;
  margin:0;
}

/* =========================
   PAGE-SPECIFIC CLASSES
   ========================= */
.atch{
  font-family:"Orbitron","Lato",Helvetica,Arial,sans-serif;
  position:relative;
  padding:0;
}

.hoot4{
  font-size:14px;
  text-align:center;
  letter-spacing:3px;
  padding:0;
  text-transform:uppercase;
  line-height:1.6;
}

.service-box{
  margin-bottom:1.5rem;
}

.containerftoppage{
  max-width:550px;
  margin:auto;
  padding:0 10px;
  text-align:left;
}

.containerbubble{
  background-image:url("spacegraphics/spacequotebubble.svg");
  background-position:top center;
  background-repeat:no-repeat;
  background-size:contain;
  padding-bottom:0;
}

.containerGAF{
  align-items:center;
  text-align:center;
  margin:auto;
  padding:1px 0;
  color:#fff;
}

.containerfpage{
  max-width:550px;
  margin:auto;
  padding:0 10px;
  text-align:left;
  color:#fff;
}

.containersearch{
  max-width:550px;
  margin:auto;
  padding:0 10px 0;
  text-align:center;
}

.quote{
  color:#fff;
  text-align:left;
  padding-left:16px;
  text-indent:-16px;
  margin-bottom:20px;
  font-size:17px;
  text-rendering:optimizeLegibility;
}

.curlyq{
  font-size:14px;
  color:#FF7979;
}

.dash{
  margin-left:60px;
  text-align:left;
  font-style:italic;
  display:block;
  margin-bottom:35px;
}

cite{
  color:#fff;                     /* keep text white */
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color:#FF7979;  /* red dashed underline */
  text-decoration-thickness: 2px;
}


.aligncenter{
  display:block;
  text-align:center;
  margin:0 auto;
  padding:0;
  border:0;
  background:none;
}
.alignleft{
  display:block;
  text-align:left;
  margin:0;
  border:0;
  padding:0;
  background:none;
}

/* used on the main content section wrapper */
.bluebckgnd-section{
  position:relative;
  z-index:2;
  display:block;
  margin:0;
  padding:0;
  align-items:center;
  text-align:center;
  background-image:url("spacegraphics/reticle.gif");
  background-attachment:scroll;
}

/* =========================
   HEADER (FIXED TOP BAR)
   ========================= */

.header-section{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9999;
  margin:0;
  padding:0;
  background: rgba(51,51,51,.85); /* instead of opacity */
}

/* keep the nav occupying full width cleanly */
.navbar{
  width:100%;
  padding-left:20px;
  padding-right:20px;
}

/* brand text matches icon color and Orbitron-first */
.navbar-brand{
  font-family:"Orbitron","Lato",Helvetica,Arial,sans-serif;
  color:#fff !important;
  letter-spacing:1px;
}
.navbar-brand:hover,
.navbar-brand:focus{
  color:#FF7979 !important;
}

/* social icon row */
.social a{
  color:#fff;
  width:25px;
  height:30px;
  line-height:30px;
  text-align:center;
  display:inline-block;
}
.social a:hover{
  color:#FF7979 !important;
}

/* =========================
   FOOTER
   ========================= */
.footer{
  padding:30px 0 0;
  background:#000;
  color:#fff;
}

#stickyfooter{
  position:relative;
  left:0;
  bottom:0;
  width:100%;
  z-index:1;
}

.copytri{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  background-image:url("spacegraphics/grayradiotelescope.gif");
  background-position:bottom right;
  background-repeat:no-repeat;
  background-size:contain;
}
.copytri p:last-child{ margin-bottom:0; }

.copyrights{
  padding:20px 0 10px;
  background:#333;
  position:relative;
  margin-top:0 !important;
}

.copymessage{
  display:block;
  color:#fff;
}

/* =========================
   RESPONSIVE (ONLY WHAT YOU NEED)
   ========================= */
@media screen and (max-width:768px){
  /* your original intent: reduce big H1 */
  h1{ font-size:30px; }

  /* keep padding comfy on narrow screens */
  .container-fluid{
    padding-left:5px;
    padding-right:5px;
  }
}

/* =========================
   SEARCH BOX (ETS) — NARROW
   ========================= */

#search .search-form{
  width: min(300px, 90vw);
  max-width: 300px;
  margin: 0 auto;
}

#search .form-control{
  min-height: 40px;
  width: 100%;
  flex: 1 1 auto;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}

#search .form-control::placeholder{
  color: rgba(255,255,255,0.7);
}

#search .form-control:focus{
  background: rgba(255,255,255,0.12);
  border-color: #FF7979;
  box-shadow: 0 0 0 0.25rem rgba(255,121,121,0.25);
  color: #fff;
}

#search .btn{
  min-height: 40px;
  flex: 0 0 44px;  /* fixed button width */
  border-radius: 8px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#search button.btn.btn-primary{
  background-color:#FF7979 !important;
  border-color:#FF7979 !important;
  color:#000 !important;
  text-transform: none;
  letter-spacing: 0;
}

#search .btn.btn-primary:hover{
  background: #ff5f5f;
  border-color: #ff5f5f;
}

#search .btn .icon-search::before{
  font-size: 20px;
  line-height: 1;
}


#search button.btn.btn-primary:focus,
#search button.btn.btn-primary:active{
  box-shadow: 0 0 0 0.25rem rgba(255,121,121,0.35);
  background:#ff5f5f;
  border-color:#ff5f5f;
}



/* Mobile: make header + footer icon rows full-width + spread out */
@media (max-width:768px){

  /* HEADER icons */
  .header-section .social{
    display:flex !important;
    width:100% !important;                 /* key */
    justify-content:space-between !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    font-size:130%;
    padding:6px 6px;
  }

  /* Make the UL + LI actually allow full width */
  .header-section .navbar-nav{
    width:100% !important;
    margin:0 !important;
  }
  .header-section .navbar-nav > .nav-item{
    width:100% !important;
    flex:1 1 100% !important;              /* key */
  }

  /* FOOTER icons (keep same behavior) */
  .footer .copyrights .social{
    display:flex !important;
    width:100% !important;
    justify-content:space-between !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    font-size:130%;
    padding:6px 6px;
  }
}
	
	/* Make the UL and its single LI stretch full width */
.header-section .navbar-nav{
  width:100% !important;
  flex:0 0 100% !important;
}

.header-section .navbar-nav > .nav-item{
  width:100% !important;        /* <-- THIS fixes the left clustering */
  flex:0 0 100% !important;
  display:flex !important;
  justify-content:center !important;
}

  .header-section{
    background-color: rgba(0,0,0,0.95);  /* darker on mobile */
  }