@font-face {
    font-family: Orbitron;
    src: url(Orbitron/Orbitron-VariableFont_wght.ttf);
}

@font-face {
    font-family: Montserrat;
    src: url(Montserrat/Montserrat-VariableFont_wght.ttf);
}

.navbar {
     background: #7D0001;
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
}

.navbar-brand {
    font-family: Orbitron;
    font-weight: 400;
    text-transform: uppercase;
    color: #D4AF37 !important;
    letter-spacing: 2px;

}

.navbar-brand .brand-text span {
    font-size: 1rem; 
    padding-left: 0.5rem;
}

.navbar .nav-link {
    font-size: 1rem;
    font-weight: 200;
     transition: color 0.3s;
}

.navbar .nav-link:hover {
    color: #D4AF37 !important;
}

.nav-link {
    color: #f8f9fa !important;
    margin-right: 1rem;
}


.nav-item {
    font-family: Orbitron;
}

.navbar {
    z-index: 1030; 
}

/* hero section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    padding-left: 5%;
    position: relative;
    margin-top: 80px;
}

.hero-home {
    background: url('images/capitolhero1.png') center center/cover no-repeat;
    background-attachment: fixed;
}

.hero-ourhistory {
    background: url('images/heropg2.png') center center/cover no-repeat;
    background-attachment: fixed;
}

.hero-fashion {
    background: url('images/fashionhero.png') center center/cover no-repeat;
    background-attachment: fixed;
}

.hero-districts {
    background: url('images/districtshero.png') center center/cover no-repeat;
    background-attachment: fixed;
}

.hero-thehungergames {
    background: url('images/hungergameshero.png') center center/cover no-repeat;
    background-attachment: fixed;
}


.hero h1 {
    font-family: Orbitron;
    font-size: 3.5rem;
    font-weight: 700;
    color: #be9f37;
    max-width: 900px;
}


.hero p {
    font-size: 1.5rem;
    margin-top: 1rem;
    font-family: Montserrat;
    font-style: italic;
    max-width: 825px;
}

.hero-content {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    margin-left: 13.25rem;
}

.btn.btn-gold:hover {
    background-color: #be9f37;
    color: rgb(0, 0, 0);
     transform: scale(1.05);
}

.btn.btn-gold {
    font-family: Orbitron; 
    background-color: #D4AF37; 
    border: none; 
    color: black;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

#active {
    color: #D4AF37 !important; 
    font-weight: gold;
}

.darkdays-section {
    background: #faf1e2;
    padding-top: 0; 
    padding-bottom: 1rem;
    min-height: 500px;  
    width: 100%;
}

.darkdays-section h2.heading {
  margin-bottom: 0.25rem; /* reduces gap below heading */
}



h2.heading {
    font-family: Orbitron;
    color: #D4AF37;
    padding-bottom: 1em;
}

.dd-content {
    font-family: Montserrat;
    color: #F9F6F0;
}

.dd-content h3 {
    font-weight: 700;
}


.countdown-section {
    color: white;
    background-color: #0C2D54;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg fill-opacity='0.96'%3E%3Ccircle fill='%230C2D54' cx='50' cy='0' r='50'/%3E%3Cg fill='%230e2b50' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%2310294d' cx='50' cy='100' r='50'/%3E%3Cg fill='%23112749' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23122546' cx='50' cy='200' r='50'/%3E%3Cg fill='%23132342' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%2313213f' cx='50' cy='300' r='50'/%3E%3Cg fill='%23131f3c' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23131d38' cx='50' cy='400' r='50'/%3E%3Cg fill='%23131b35' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23131932' cx='50' cy='500' r='50'/%3E%3Cg fill='%2313182e' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%2312162b' cx='50' cy='600' r='50'/%3E%3Cg fill='%23111428' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23111225' cx='50' cy='700' r='50'/%3E%3Cg fill='%23101022' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%230f0d1f' cx='50' cy='800' r='50'/%3E%3Cg fill='%230d0a1c' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%230b0719' cx='50' cy='900' r='50'/%3E%3Cg fill='%23080416' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23050113' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: contain;  
}

/*background svg: <a href="https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/">Free SVG Backgrounds and Patterns by SVGBackgrounds.com</a>*/

.countdown-card {
    background-color: rgba(0, 0, 0, 0.486);
    padding: 2rem 1rem;
    border-radius: 12px;
    border: 1px solid #ffffff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    max-width: 900px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.time-box .number {
    background-color: #000;
    color: #ffffff;
    font-family: Orbitron;
    font-size: 2rem;
    font-weight: 700;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    text-align: center;
    width: 100%;
}

.time-box .label {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .time-box .number {
        font-size: 1.5rem;
        padding: 0.8rem 1rem;
    }
    .time-box .label {
        font-size: 0.8rem;
    }

    .the-reaping {
        padding: 1em 2em;
    }

    
}

.runway-highlights {
  padding: 3rem 2rem; /* vertical + horizontal padding */
}

@media (max-width: 992px) { /* tablets */
    .hero {
        height: 70vh;
        padding: 0 3%;
    }

     .hero h1 {
        font-size: 2.5rem;
        max-width: 600px;
    }

    .hero p {
        font-size: 1.2rem;
        max-width: 500px;
    }


     .hero-content {
        margin-left: 5%;
        align-items: flex-start; 
    }

    .btn.btn-gold {
        font-size: 1rem;
        padding: 0.65rem 1.5rem;
    }
}

@media (max-width: 576px) { /* mobile */
    .hero {
        height: 60vh;
        padding: 0 2%;
        flex-direction: column;
        justify-content: center;
    }

      .hero h1 {
        font-size: 1.8rem;
        text-align: center;
        max-width: 80%;
    }

    .hero p {
        font-size: 1rem;
        text-align: center;
        max-width: 80%;
    }

     .hero-content {
        margin-left: 0;
        margin-top: 1rem;
        align-items: center;  
        text-align: center;    
    }

      .hero-content a {
        display: flex;
        justify-content: center;
        text-decoration: none;
    }
 
      .btn.btn-gold {
        font-size: 1rem;
        padding: 0.65rem 1.5rem;
    }
  
}

.featured-officials {
    background: #faf1e2;
    color: #0C2D54; 
    padding: 5rem 0; 
}

.official-card {
    background: linear-gradient(135deg, #1C1C2C, #3A3A5A);
    color: #faf1e2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
       
}

.official-card:hover {
    background-color: #2A2A3A;
    transform: scale(1.05); 
}

.subscribe-section {
    background-color: #0C2D54;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(29,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23112749'/%3E%3Cstop offset='1' stop-color='%23050113'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%230C2D54' cx='12' cy='12' r='12'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/*SVG: <a href="https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/">Free SVG Backgrounds and Patterns by SVGBackgrounds.com</a>*/ 

.citizen-spotlight {
    background: #faf1e2 ;
}

.report-treason {
    color: white;
    background-color: #0C2D54;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg fill-opacity='0.96'%3E%3Ccircle fill='%230C2D54' cx='50' cy='0' r='50'/%3E%3Cg fill='%230e2b50' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%2310294d' cx='50' cy='100' r='50'/%3E%3Cg fill='%23112749' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23122546' cx='50' cy='200' r='50'/%3E%3Cg fill='%23132342' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%2313213f' cx='50' cy='300' r='50'/%3E%3Cg fill='%23131f3c' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23131d38' cx='50' cy='400' r='50'/%3E%3Cg fill='%23131b35' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23131932' cx='50' cy='500' r='50'/%3E%3Cg fill='%2313182e' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%2312162b' cx='50' cy='600' r='50'/%3E%3Cg fill='%23111428' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23111225' cx='50' cy='700' r='50'/%3E%3Cg fill='%23101022' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%230f0d1f' cx='50' cy='800' r='50'/%3E%3Cg fill='%230d0a1c' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%230b0719' cx='50' cy='900' r='50'/%3E%3Cg fill='%23080416' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23050113' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: contain;  
}

.gallery-card {
    background: linear-gradient(135deg, #1C1C2C, #3A3A5A);
    color: #faf1e2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.gallery-card:hover {
    background-color: #2A2A3A;
    transform: scale(1.05); 
}

.view-more {
    color: #be9f37;
}

.btn.btn-report:hover {
    background-color: #be9f37;
    color: rgb(0, 0, 0);
     transform: scale(1.05);
}

.btn.btn-report {
    font-family: Orbitron; 
    background-color: #D4AF37; 
    border: none; 
    color: black;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.history-card-body {
    border-radius: 10px;
    padding: 1em;
}

.history-card-body:hover {
    transform: scale(1.05); 
}

.our-history-timeline {
    background-color: #faf1e2;
    padding: 3em 6em;
}

.timeline-card {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s;
    background: linear-gradient(135deg, #1C1C2C, #3A3A5A);
}

.timeline-card:hover {
    transform: scale(1.05);
}

.timeline-card h5 {
    font-family: Orbitron;
    color: #D4AF37;
}

.timeline-card p {
    font-family: Montserrat;
    color: #F9F6F0;
}

.timeline-icon {
    font-size: 2rem;
}

.runway-highlights {
    background-color: #0C2D54;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg fill-opacity='0.96'%3E%3Ccircle fill='%230C2D54' cx='50' cy='0' r='50'/%3E%3Cg fill='%230e2b50' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%2310294d' cx='50' cy='100' r='50'/%3E%3Cg fill='%23112749' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23122546' cx='50' cy='200' r='50'/%3E%3Cg fill='%23132342' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%2313213f' cx='50' cy='300' r='50'/%3E%3Cg fill='%23131f3c' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23131d38' cx='50' cy='400' r='50'/%3E%3Cg fill='%23131b35' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23131932' cx='50' cy='500' r='50'/%3E%3Cg fill='%2313182e' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%2312162b' cx='50' cy='600' r='50'/%3E%3Cg fill='%23111428' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23111225' cx='50' cy='700' r='50'/%3E%3Cg fill='%23101022' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%230f0d1f' cx='50' cy='800' r='50'/%3E%3Cg fill='%230d0a1c' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%230b0719' cx='50' cy='900' r='50'/%3E%3Cg fill='%23080416' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23050113' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;

}

.gallery-card img {
    height: 300px;      
    object-fit: cover;   
    border-radius: 8px;  
}

.districts-section-card {
    background: linear-gradient(135deg, #1C1C2C, #3A3A5A);
    color:#f8f9fa; 
    font-family: Montserrat;
}
.districts-section-card:hover {
    transform: scale(1.125);
}

.the-reaping {
    padding: 2em 5em;
    background-color: #faf1e2;
    font-family: Montserrat;
    color: #0C2D54;
}

.fashion-img:hover {
     transform: scale(1.05);

}

.hero-soon { 
   background: url('images/comingsoon.jpg') center center/cover no-repeat;
   background-attachment: fixed;
}