/* =============================================
   Bright Web – Custom overrides
   ============================================= */

/* Bard rich-text content: bullet list icons */
.bard-content ul {
    margin: 8px 0 16px 0;
}

.bard-content ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 6px;
    list-style: none;
}

.bard-content ul li::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--color-secondary);
    font-size: 0.9em;
    line-height: 1;
}

/* =============================================
   Space Theme – Hero dark background + white text
   ============================================= */

.hero.hero-space-theme {
    background-color: #000 !important;
    background-image: none !important;
    position: relative;
    overflow: hidden;
}

.hero.hero-space-theme .hero-title h1,
.hero.hero-space-theme .hero-title p {
    color: #fff;
}

.hero.hero-space-theme .hero-vector img {
    opacity: 0.08;
    filter: invert(1);
}

/* =============================================
   Space Theme – Floating Icon Overlay
   ============================================= */

.space-icons-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.space-icon {
    position: absolute;
    color: rgba(255, 255, 255, 0.12);
    line-height: 1;
    user-select: none;
}

.space-icon i {
    display: block;
}

/* individual icon positions – hero (position on the span wrapper) */
.hero-space-theme .space-icon--rocket    { top: 8%;     left: 4%;    animation: float-slow 8s ease-in-out infinite; }
.hero-space-theme .space-icon--star1     { top: 22%;    left: 17%;   animation: twinkle 3s ease-in-out infinite; }
.hero-space-theme .space-icon--moon      { top: 6%;     right: 7%;   animation: float-slow 10s ease-in-out infinite 1s; }
.hero-space-theme .space-icon--satellite { top: 55%;    left: 2%;    animation: drift 14s linear infinite; }
.hero-space-theme .space-icon--meteor    { top: 12%;    right: 20%;  animation: float-slow 7s ease-in-out infinite 2s; }
.hero-space-theme .space-icon--star2     { top: 42%;    left: 7%;    animation: twinkle 4s ease-in-out infinite 0.5s; }
.hero-space-theme .space-icon--astronaut { bottom: 10%; left: 10%;   animation: float-slow 11s ease-in-out infinite 3s; }
.hero-space-theme .space-icon--earth     { bottom: 5%;  right: 3%;   animation: spin-slow 30s linear infinite; }
.hero-space-theme .space-icon--shuttle   { top: 68%;    right: 14%;  animation: float-slow 9s ease-in-out infinite 1.5s; }
.hero-space-theme .space-icon--star3     { bottom: 28%; right: 28%;  animation: twinkle 2.5s ease-in-out infinite 1s; }
.hero-space-theme .space-icon--dish      { bottom: 18%; left: 33%;   animation: float-slow 12s ease-in-out infinite 4s; }
.hero-space-theme .space-icon--globe     { top: 35%;    right: 2%;   animation: spin-slow 25s linear infinite; }

/* size + colour applied directly on the <i> so FA can't interfere */
/* green = #3A9D7C  |  yellow = #FFBC68  |  white = #fff */
.hero-space-theme .space-icon--rocket > i    { font-size: 80px !important;  color: rgba(58,  157, 124, 0.7) !important; }
.hero-space-theme .space-icon--star1 > i     { font-size: 20px !important;  color: rgba(255, 188, 104, 0.8) !important; }
.hero-space-theme .space-icon--moon > i      { font-size: 64px !important;  color: rgba(255, 188, 104, 0.7) !important; }
.hero-space-theme .space-icon--satellite > i { font-size: 40px !important;  color: rgba(58,  157, 124, 0.65) !important; }
.hero-space-theme .space-icon--meteor > i    { font-size: 48px !important;  color: rgba(255, 188, 104, 0.7) !important; }
.hero-space-theme .space-icon--star2 > i     { font-size: 14px !important;  color: rgba(255, 255, 255, 0.75) !important; }
.hero-space-theme .space-icon--astronaut > i { font-size: 96px !important;  color: rgba(58,  157, 124, 0.6) !important; }
.hero-space-theme .space-icon--earth > i     { font-size: 112px !important; color: rgba(255, 255, 255, 0.5) !important; }
.hero-space-theme .space-icon--shuttle > i   { font-size: 56px !important;  color: rgba(255, 255, 255, 0.65) !important; }
.hero-space-theme .space-icon--star3 > i     { font-size: 28px !important;  color: rgba(255, 255, 255, 0.65) !important; }
.hero-space-theme .space-icon--dish > i      { font-size: 36px !important;  color: rgba(255, 188, 104, 0.65) !important; }
.hero-space-theme .space-icon--globe > i     { font-size: 24px !important;  color: rgba(255, 255, 255, 0.6) !important; }

/* inner banner page hero icons */
.banner-space-theme {
    position: relative;
    overflow: hidden;
}

.banner-space-icons .space-icon--rocket    { font-size: 3rem;   top: 15%;  left: 4%;   animation: float-slow 8s ease-in-out infinite; }
.banner-space-icons .space-icon--star1     { font-size: 1.2rem; top: 30%;  left: 20%;  animation: twinkle 3.5s ease-in-out infinite; }
.banner-space-icons .space-icon--moon      { font-size: 2.5rem; top: 10%;  right: 6%;  animation: float-slow 10s ease-in-out infinite 2s; }
.banner-space-icons .space-icon--satellite { font-size: 1.8rem; bottom: 20%; left: 8%;  animation: drift 16s linear infinite; }
.banner-space-icons .space-icon--meteor    { font-size: 2rem;   top: 20%;  right: 18%; animation: float-slow 7s ease-in-out infinite 1s; }
.banner-space-icons .space-icon--star2     { font-size: 0.9rem; bottom: 35%; right: 10%; animation: twinkle 2.8s ease-in-out infinite 0.5s; }

/* services section icons */
.services-space-theme {
    position: relative;
    overflow: hidden;
}

.services-space-icons .space-icon--shuttle    { font-size: 3rem;   top: 8%;   right: 4%;  animation: float-slow 9s ease-in-out infinite; }
.services-space-icons .space-icon--star1      { font-size: 1.1rem; top: 20%;  left: 3%;   animation: twinkle 3s ease-in-out infinite 0.5s; }
.services-space-icons .space-icon--astronaut  { font-size: 3.2rem; bottom: 5%; left: 3%;   animation: float-slow 11s ease-in-out infinite 2s; }
.services-space-icons .space-icon--meteor     { font-size: 2rem;   top: 15%;  left: 45%;  animation: float-slow 7s ease-in-out infinite 1s; }
.services-space-icons .space-icon--star2      { font-size: 0.8rem; bottom: 20%; right: 8%; animation: twinkle 4s ease-in-out infinite 1.5s; }
.services-space-icons .space-icon--infinity   { font-size: 2.5rem; bottom: 8%; right: 12%; animation: float-slow 10s ease-in-out infinite 3s; }

/* footer icons */
.footer-space-theme {
    position: relative;
    overflow: hidden;
}

.footer-space-icons .space-icon--star1     { font-size: 1rem;   top: 10%;  left: 5%;   animation: twinkle 3s ease-in-out infinite; }
.footer-space-icons .space-icon--rocket    { font-size: 2.5rem; top: 15%;  right: 5%;  animation: float-slow 10s ease-in-out infinite; }
.footer-space-icons .space-icon--moon      { font-size: 2rem;   bottom: 10%; left: 2%;  animation: float-slow 12s ease-in-out infinite 2s; }
.footer-space-icons .space-icon--star2     { font-size: 0.75rem; top: 40%;  right: 15%; animation: twinkle 2.5s ease-in-out infinite 1s; }
.footer-space-icons .space-icon--satellite { font-size: 1.8rem; bottom: 15%; right: 25%; animation: drift 20s linear infinite; }
.footer-space-icons .space-icon--earth     { font-size: 3rem;   bottom: 5%; left: 40%;  animation: spin-slow 35s linear infinite; }

/* =============================================
   Space Theme – Keyframe animations
   ============================================= */

@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%       { transform: translateY(-18px) rotate(5deg); }
    66%       { transform: translateY(10px) rotate(-3deg); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.08; transform: scale(1); }
    50%       { opacity: 0.28; transform: scale(1.4); }
}

@keyframes drift {
    0%   { transform: translateX(0) translateY(0); }
    25%  { transform: translateX(30px) translateY(-15px); }
    50%  { transform: translateX(60px) translateY(5px); }
    75%  { transform: translateX(30px) translateY(20px); }
    100% { transform: translateX(0) translateY(0); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =============================================
   Dark background text colour fixes
   – sections now using #0D1B2A (deep space navy)
   ============================================= */

/* Footer text on dark background */
.footer .wc-footer-logo p,
.footer .wc-footer-menu h4,
.footer .wc-footer-menu .menu ul li a,
.footer .wc-footer-menu .contact-menu ul li a p,
.footer .copy-row .wc-copy-text p,
.footer .copy-row .wc-copy-text p a {
    color: rgba(255, 255, 255, 0.85);
}

.footer .wc-footer-menu .menu ul li a:hover {
    color: var(--color-secondary);
}

.footer .wc-footer-menu .contact-menu ul li a i {
    color: var(--color-primary);
}

/* Footer social icons */
.footer .wc-social-logo ul li a i {
    color: rgba(255, 255, 255, 0.7);
}

.footer .wc-social-logo ul li a:hover i {
    color: var(--color-secondary);
}

/* Fix footer-three light hover text (was cream, now on dark background) */
.footer-three .footer-three-copy .copy-text p a:hover {
    color: #fff !important;
}

/* Services section on dark background (background-secondary / our-services) */
.our-services.background-secondary .our-services-title h2,
.our-services.background-secondary .our-services-content h4,
.our-services.background-secondary .our-services-content p,
.our-services.background-secondary .mw-sub-title {
    color: #fff;
}

/* Testimonial wrapper on dark background */
.testimonial .testimonial-wrapper {
    background-color: #e5e7eb !important;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

/* Work section on dark background */
.work.section .work-wrap h2,
.work.section .work-wrap p,
.work.section .work-wrap h3 {
    color: #fff;
}

/* mw-image dark background – keep video visible */
.mw-image {
    background-color: #000 !important;
}

/* Ensure section content sits above the icon overlay */
.hero-space-theme .container,
.banner-space-theme .container,
.services-space-theme .container,
.footer-space-theme .container {
    position: relative;
    z-index: 1;
}

.banner-space-theme .banner-wrapper,
.hero-space-theme .wc-hero {
    position: relative;
    z-index: 1;
}

/* ── Black topbar ────────────────────────────── */
.header-three .header-topbar {
    background-color: #000 !important;
}

/* ── Black header ─────────────────────────────── */
.header,
.header.sticky,
.header-three,
.header-three.sticky,
.header-three .header-navbar {
    background-color: #000 !important;
    box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.4);
}

/* Nav links – white by default, yellow when active, brand colour on hover */
.header .wc-navbar .wc-navlist ul li a,
.header-three .wc-navbar .wc-navlist ul li a {
    color: #fff !important;
}

.header .wc-navbar .wc-navlist ul li a.active,
.header-three .wc-navbar .wc-navlist ul li a.active {
    color: #facc15 !important;
}

.header .wc-navbar .wc-navlist ul li a:hover,
.header-three .wc-navbar .wc-navlist ul li a:hover {
    color: var(--color-secondary) !important;
}

/* ── Mobile hamburger icon – fully white and opaque ── */
@media only screen and (max-width: 991px) {
    .header .bars-btn i {
        color: #fff !important;
        opacity: 1 !important;
        filter: none !important;
    }
}

/* ── Hamburger SVG path override ── */
.bars-btn svg path {
    fill: #ffffff;
}

/* ── Mobile nav – centre-align menu items ── */
@media only screen and (max-width: 991px) {
    .header .wc-navbar .wc-navlist .logo a {
        margin-left: auto;
        margin-right: auto;
    }

    .header .wc-navbar .wc-navlist ul li a {
        text-align: center;
    }

    .header .wc-navbar .wc-navlist ul .wc-connect {
        text-align: center;
    }
}

/* ── Hero section – prevent horizontal overflow on mobile ── */
@media only screen and (max-width: 991px) {
    .hero .wc-hero .hero-image {
        max-width: 100%;
    }

    .hero {
        overflow-x: hidden;
    }

    /* Restore containing block so video + badge stay inside wc-hero-image,
       not re-anchored to the whole hero section */
    .wc-hero-image {
        position: relative;
    }

    /* Hide the decorative location badge – not needed on mobile */
    .hero .wc-hero .hero-image .hero-image-text {
        display: none;
    }
}