/*==================================================
  FIREBIRD HOLDINGS
  Professional Website Stylesheet
  Version 2.0
==================================================*/

/*==============================
  RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f5f7;
    color:#333;
    line-height:1.8;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    transition:.3s;
}

ul{
    list-style:none;
}

/*==============================
  COLORS
==============================*/

:root{

    --firebird-red:#8B1E24;
    --firebird-red-dark:#68161b;

    --gold:#C8A44D;

    --charcoal:#2F2F33;

    --light:#ffffff;

    --offwhite:#f7f7f7;

    --border:#dddddd;

    --shadow:0 10px 30px rgba(0,0,0,.08);

}

/*==============================
  TYPOGRAPHY
==============================*/

h1{

    font-size:3rem;

    color:white;

    margin-bottom:20px;

}

h2{

    color:var(--firebird-red);

    font-size:2rem;

    margin-bottom:20px;

}

h3{

    color:var(--charcoal);

    margin-bottom:15px;

}

p{

    margin-bottom:20px;

    font-size:1.1rem;

}

/*==============================
  CONTAINER
==============================*/

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

/*==============================
  HEADER
==============================*/

header{

    position:sticky;

    top:0;

    z-index:1000;

    background:white;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.top-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 40px;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:65px;

}

.logo h2{

    margin:0;

    color:var(--firebird-red);

    font-size:1.5rem;

}

/*==============================
 NAVIGATION
==============================*/

nav ul{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

nav ul li a{

    display:block;

    padding:10px 18px;

    border:2px solid var(--firebird-red);

    border-radius:30px;

    color:var(--firebird-red);

    font-weight:bold;

    background:white;

}

nav ul li a:hover{

    background:var(--firebird-red);

    color:white;

}

/*==============================
 HAMBURGER
==============================*/

.menu-toggle{

    display:none;

    font-size:2rem;

    color:var(--firebird-red);

    cursor:pointer;

}

/*==============================
 HERO
==============================*/

.hero{

    position:relative;

    height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:url("../images/hero-banner.jpg") center center/cover no-repeat;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:20px;

}

.hero-content p{

    color:white;

    font-size:1.35rem;

    margin-bottom:35px;

}

/*==============================
 BUTTONS
==============================*/

.btn{

    display:inline-block;

    padding:16px 36px;

    border-radius:40px;

    border:2px solid var(--gold);

    margin:10px;

    font-weight:bold;

}

.btn-primary{

    background:var(--firebird-red);

    color:white;

}

.btn-primary:hover{

    background:var(--firebird-red-dark);

}

.btn-secondary{

    background:transparent;

    color:white;

}

.btn-secondary:hover{

    background:var(--gold);

    color:black;

}

/*==============================
 MAIN CONTENT
==============================*/

.page-content{

    width:90%;

    max-width:1100px;

    margin:60px auto;

}

/*==============================
 CONTENT CARDS
==============================*/

.content-card{

    background:white;

    border-left:8px solid var(--firebird-red);

    border-radius:12px;

    box-shadow:var(--shadow);

    padding:40px;

    margin-bottom:40px;

    border:1px solid #e5e5e5;

    transition:.3s;

}

.content-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.content-card h2{

    border-bottom:3px solid var(--gold);

    padding-bottom:10px;

    margin-bottom:25px;

}

.content-card ul{

    margin-left:25px;

    list-style:disc;

}

.content-card li{

    margin-bottom:12px;

}

/*==============================
 SECTION TITLES
==============================*/

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title h2{

    font-size:2.5rem;

}

.section-title p{

    max-width:700px;

    margin:auto;

}
/*==================================================
  PART 2
  Feature Cards, CTA, Footer, Forms & Tables
==================================================*/


/*==============================
  FEATURE GRID
==============================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin:60px 0;

}

.feature-card{

    background:white;

    border-radius:12px;

    padding:35px;

    text-align:center;

    border-top:8px solid var(--firebird-red);

    box-shadow:var(--shadow);

    transition:.3s;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.feature-card img{

    width:70px;

    margin:0 auto 20px;

}

.feature-card h3{

    color:var(--firebird-red);

    margin-bottom:15px;

}

.feature-card p{

    margin-bottom:0;

}


/*==============================
  INFO GRID
==============================*/

.info-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:35px;

    margin:50px 0;

}


/*==============================
  QUOTE SECTION
==============================*/

.quote{

    background:var(--firebird-red);

    color:white;

    padding:80px 40px;

    text-align:center;

    border-radius:15px;

    margin:70px 0;

}

.quote h2{

    color:white;

    margin-bottom:25px;

}

.quote p{

    max-width:900px;

    margin:auto;

    font-size:1.25rem;

}


/*==============================
  STATISTICS
==============================*/

.stats{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:25px;

    margin:60px 0;

}

.stat{

    background:white;

    padding:35px;

    text-align:center;

    border-radius:12px;

    border-bottom:6px solid var(--gold);

    box-shadow:var(--shadow);

}

.stat h2{

    color:var(--firebird-red);

    font-size:3rem;

}

.stat p{

    margin:0;

}


/*==============================
  CALL TO ACTION
==============================*/

.cta{

    background:linear-gradient(
        135deg,
        var(--firebird-red),
        var(--firebird-red-dark)
    );

    color:white;

    text-align:center;

    padding:90px 30px;

    border-radius:15px;

    margin:70px 0;

}

.cta h2{

    color:white;

    font-size:2.6rem;

}

.cta p{

    max-width:800px;

    margin:25px auto;

}


/*==============================
  EXPLORE CARDS
==============================*/

.explore-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin:60px 0;

}

.explore-card{

    background:white;

    border-radius:12px;

    border:2px solid var(--border);

    padding:30px;

    text-align:center;

    transition:.3s;

}

.explore-card:hover{

    border-color:var(--firebird-red);

    transform:translateY(-6px);

}

.explore-card h3{

    color:var(--firebird-red);

}


/*==============================
  FORMS
==============================*/

form{

    background:white;

    padding:40px;

    border-radius:12px;

    box-shadow:var(--shadow);

}

label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}

input,
textarea,
select{

    width:100%;

    padding:15px;

    border:1px solid #ccc;

    border-radius:8px;

    margin-bottom:25px;

    font-size:1rem;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--firebird-red);

    outline:none;

}

textarea{

    resize:vertical;

    min-height:180px;

}


/*==============================
 TABLES
==============================*/

table{

    width:100%;

    border-collapse:collapse;

    margin:40px 0;

    background:white;

    box-shadow:var(--shadow);

}

table th{

    background:var(--firebird-red);

    color:white;

    padding:18px;

}

table td{

    padding:18px;

    border:1px solid #ddd;

}

table tr:nth-child(even){

    background:#fafafa;

}


/*==============================
 ALERT BOXES
==============================*/

.alert{

    padding:25px;

    border-left:8px solid var(--gold);

    background:#fff8e8;

    border-radius:10px;

    margin:30px 0;

}


/*==============================
 SOCIAL LINKS
==============================*/

.social-links{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:25px;

}

.social-links a{

    display:inline-block;

    padding:12px 24px;

    border-radius:30px;

    background:var(--firebird-red);

    color:white;

    font-weight:bold;

}

.social-links a:hover{

    background:var(--gold);

    color:black;

}


/*==============================
 FOOTER
==============================*/
.site-footer{
    background:#111827;
    color:#ffffff;
    margin-top:80px;
    padding:70px 0 25px;
}
.footer-container{
    max-width:1300px;
    margin:auto;
    padding:0 30px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:45px;
}
.footer-logo{
    width:85px;
    margin-bottom:15px;
}
.footer-column h3{
    color:#C89B3C;
    margin-bottom:18px;
    font-size:1.2rem;
}
.footer-column p{
    color:#d1d5db;
    line-height:1.8;
    margin-bottom:12px;
}
.footer-column ul{
    list-style:none;
    padding:0;
}
.footer-column li{
    margin-bottom:12px;
}
.footer-column a{
    color:#d1d5db;
    text-decoration:none;
    transition:.3s;
}
.footer-column a:hover{
    color:#C89B3C;
    padding-left:5px;
}
.footer-buttons{
    display:flex;
    gap:12px;
    margin-top:20px;
}
.footer-btn{
    background:#C89B3C;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}
.footer-btn.secondary{
    background:#8B1E24;
}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    margin-top:55px;
    padding-top:25px;
    text-align:center;
}
.footer-bottom p{
    color:#9ca3af;
    margin:6px 0;
}
/*==================================================
  PART 3
  Responsive Design, Mobile Navigation,
  Animations, Utilities & Final Polish
==================================================*/

/*==============================
  MOBILE NAVIGATION
==============================*/

@media (max-width: 992px){

    .top-bar{
        flex-wrap:wrap;
        padding:20px;
    }

    .menu-toggle{
        display:block;
    }

    nav{
        width:100%;
        display:none;
        margin-top:20px;
    }

    nav.active{
        display:block;
    }

    nav ul{
        flex-direction:column;
        gap:12px;
    }

    nav ul li a{
        width:100%;
        text-align:center;
    }

}

/*==============================
  TABLET
==============================*/

@media (max-width:900px){

    h1{
        font-size:2.4rem;
    }

    h2{
        font-size:1.8rem;
    }

    .hero{
        height:70vh;
    }

    .hero-content p{
        font-size:1.1rem;
    }

    .content-card{
        padding:30px;
    }

}

/*==============================
  PHONE
==============================*/

@media (max-width:768px){

    .container,
    .page-content{
        width:94%;
    }

    .hero{
        height:65vh;
    }

    .hero-content{
        padding:20px;
    }

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.6rem;
    }

    p{
        font-size:1rem;
    }

    .btn{
        display:block;
        width:100%;
        margin:12px 0;
        text-align:center;
    }

    .content-card{
        padding:25px;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .info-grid{
        grid-template-columns:1fr;
    }

    .explore-grid{
        grid-template-columns:1fr;
    }

}

/*==============================
  SMALL PHONE
==============================*/

@media (max-width:480px){

    .logo img{
        width:50px;
    }

    .logo h2{
        font-size:1.2rem;
    }

    .hero{
        height:60vh;
    }

    h1{
        font-size:1.7rem;
    }

    .hero-content p{
        font-size:1rem;
    }

    .content-card{
        padding:20px;
    }

}

/*==============================
  ANIMATIONS
==============================*/

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.fade{

    animation:fadeIn 1s ease both;

}

/*==============================
  IMAGE STYLES
==============================*/

.rounded-image{

    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow);
    margin:30px 0;

}

.shadow{

    box-shadow:var(--shadow);

}

/*==============================
  DIVIDERS
==============================*/

.divider{

    width:120px;
    height:4px;
    background:var(--gold);
    margin:20px auto 40px;

}

.left-divider{

    width:100px;
    height:4px;
    background:var(--gold);
    margin:15px 0 30px;

}

/*==============================
  SPACING HELPERS
==============================*/

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}

.pt-5{padding-top:60px;}
.pb-5{padding-bottom:60px;}

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

/*==============================
  BACKGROUNDS
==============================*/

.bg-light{
    background:#f8f8f8;
}

.bg-white{
    background:#ffffff;
}

.bg-red{
    background:var(--firebird-red);
    color:white;
}

.bg-charcoal{
    background:var(--charcoal);
    color:white;
}

/*==============================
  LINKS
==============================*/

.content-card a{

    color:var(--firebird-red);
    font-weight:bold;

}

.content-card a:hover{

    color:var(--gold);

}

/*==============================
  HORIZONTAL RULE
==============================*/

hr{

    border:none;
    height:1px;
    background:#ddd;
    margin:40px 0;

}

/*==============================
  LISTS
==============================*/

.content-card ol,
.content-card ul{

    margin-left:25px;
    margin-bottom:20px;

}

.content-card li{

    padding-bottom:10px;

}

/*==============================
  SELECTION COLOR
==============================*/

::selection{

    background:var(--firebird-red);
    color:white;

}

/*==============================
  SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#efefef;

}

::-webkit-scrollbar-thumb{

    background:var(--firebird-red);
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--firebird-red-dark);

}

/*==============================
  ACCESSIBILITY
==============================*/

a:focus,
button:focus,
input:focus,
textarea:focus{

    outline:3px solid var(--gold);
    outline-offset:3px;

}

/*==============================
  PRINT
==============================*/

@media print{

    header,
    footer,
    .btn,
    .menu-toggle{

        display:none;

    }

    body{

        background:white;
        color:black;

    }

    .content-card{

        box-shadow:none;
        border:1px solid #999;

    }

}

/* ===============================
   MOBILE FRIENDLY UPGRADES
================================ */

@media (max-width: 900px) {

    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 18px;
    }

    .logo {
        width: 100%;
        justify-content: space-between;
    }

    .logo img {
        width: 55px;
    }

    .logo h2 {
        font-size: 1.2rem;
    }

    .logo p {
        font-size: 0.85rem;
    }

    .menu-toggle {
        display: block;
        align-self: flex-end;
        font-size: 2rem;
        cursor: pointer;
    }

    nav {
        width: 100%;
        display: none;
    }

    nav.active {
        display: block;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    nav ul li a {
        width: 100%;
        text-align: center;
        padding: 14px;
        border-radius: 10px;
    }

    .hero {
        min-height: 70vh;
        padding: 80px 20px;
    }

    .hero h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .hero p {
        font-size: 1rem;
    }

    .page-content {
        width: 94%;
        margin: 35px auto;
    }

    .content-card {
        padding: 22px;
        margin-bottom: 25px;
    }

    .content-card h2 {
        font-size: 1.55rem;
    }

    .content-card h3 {
        font-size: 1.15rem;
    }

    .content-card p,
    .content-card li {
        font-size: 1rem;
        line-height: 1.75;
    }

    .feature-grid,
    .explore-grid,
    .footer-container {
        grid-template-columns: 1fr;
    }

    .btn {
        display: block;
        width: 100%;
        text-align: center;
        margin: 12px 0;
    }

    .footer-buttons {
        flex-direction: column;
    }
/* ===============================
   FIX MOBILE HAMBURGER SCROLL
================================ */

@media (max-width: 992px) {

    header {
        max-height: 100vh;
        overflow-y: auto;
    }

    nav.active {
        display: block;
        max-height: 75vh;
        overflow-y: auto;
        padding-bottom: 25px;
    }

    nav ul {
        max-height: none;
    }

    nav ul li a {
        display: block;
        width: 100%;
    }

/* ===============================
   FINAL MOBILE + POLISH UPGRADES
================================ */

@media (max-width: 992px) {

    header {
        max-height: 100vh;
        overflow-y: auto;
    }

    .top-bar {
        padding: 14px 18px;
    }

    .logo img {
        width: 48px;
    }

    .logo h2 {
        font-size: 1.15rem;
    }

    .logo p {
        font-size: .8rem;
        line-height: 1.3;
    }

    nav.active {
        display: block;
        max-height: 75vh;
        overflow-y: auto;
        padding-bottom: 25px;
    }

    nav ul li a {
        padding: 11px 14px;
        font-size: .95rem;
        border-radius: 10px;
    }
}

/* Active page button */
nav ul li a.active {
    background: #8B1E24;
    color: #ffffff;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 24px;
    left: 24px;
    background: #8B1E24;
    color: white;
    padding: 12px 16px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    z-index: 9998;
}

.back-to-top:hover {
    background: #C89B3C;
    color: #111827;
}

/* Emergency banner */
.emergency-banner {
    background: #8B1E24;
    color: white;
    padding: 16px 20px;
    text-align: center;
    font-weight: bold;
}

.emergency-banner a {
    color: #FFD56A;
    text-decoration: underline;
}
  /* ===============================
   SIDE DRAWER MOBILE MENU
================================ */

.desktop-nav {
    display: block;
}

.menu-toggle {
    display: none;
    background: #8B1E24;
    color: white;
    border: 2px solid #C89B3C;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1.5rem;
    cursor: pointer;
}

.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9998;
}

.menu-overlay.active {
    display: block;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -340px;
    width: 320px;
    height: 100vh;
    background: #111827;
    color: white;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
    transition: right .3s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,.35);
}

.mobile-drawer.active {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.drawer-header h3 {
    color: #C89B3C;
    margin: 0;
}

.drawer-header button {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

.drawer-section {
    margin-bottom: 26px;
}

.drawer-section h4 {
    color: #C89B3C;
    margin-bottom: 10px;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.drawer-section a {
    display: block;
    color: #e5e7eb;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
}

.drawer-section a:hover {
    color: #C89B3C;
    padding-left: 6px;
}

@media (max-width: 992px) {

    .desktop-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .top-bar {
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 420px) {
    .mobile-drawer {
        width: 88vw;
        right: -90vw;
    }

  }
  /* ===============================
   FORCE SIDE DRAWER TO WORK
================================ */

.menu-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 9998 !important;
}

.menu-overlay.active {
    display: block !important;
}

.mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -360px !important;
    width: 320px !important;
    height: 100vh !important;
    background: #111827 !important;
    color: white !important;
    z-index: 9999 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    transition: right .3s ease !important;
    box-shadow: -10px 0 30px rgba(0,0,0,.35) !important;
}

.mobile-drawer.active {
    right: 0 !important;
}

.mobile-drawer a {
    display: block !important;
    color: #e5e7eb !important;
    text-decoration: none !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.drawer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.drawer-header h3,
.drawer-section h4 {
    color: #C89B3C !important;
}
  }
  /* ===============================
   VERSION 2 HEADER
================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 9997;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(139,30,36,.18);
}

.header-inner {
    max-width: 1400px;
    margin: auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    min-width: 275px;
}

.brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.brand h2 {
    margin: 0;
    color: #8B1E24;
    font-size: 1.35rem;
}

.brand p {
    margin: 4px 0 0;
    color: #374151;
    font-size: .9rem;
    line-height: 1.35;
}

.desktop-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.desktop-nav a {
    display: inline-block;
    padding: 10px 16px;
    border: 2px solid #8B1E24;
    border-radius: 999px;
    color: #8B1E24;
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    transition: .25s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    background: #8B1E24;
    color: #ffffff;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.donate-button {
    background: #C89B3C;
    color: #111827;
    text-decoration: none;
    font-weight: 800;
    padding: 11px 18px;
    border-radius: 999px;
    border: 2px solid #C89B3C;
    white-space: nowrap;
}

.donate-button:hover {
    background: #8B1E24;
    color: #ffffff;
    border-color: #8B1E24;
}

.menu-toggle {
    display: none;
    background: #8B1E24;
    color: #ffffff;
    border: 2px solid #C89B3C;
    border-radius: 10px;
    padding: 8px 13px;
    font-size: 1.55rem;
    cursor: pointer;
}

/* Mobile drawer */

.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.58);
    z-index: 9998;
}

.menu-overlay.active {
    display: block;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -360px;
    width: 330px;
    height: 100vh;
    background: #111827;
    color: #ffffff;
    z-index: 9999;
    padding: 22px;
    overflow-y: auto;
    transition: right .3s ease;
    box-shadow: -12px 0 35px rgba(0,0,0,.4);
}

.mobile-drawer.active {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.drawer-header h3 {
    margin: 0;
    color: #C89B3C;
}

.drawer-header p {
    margin: 4px 0 0;
    color: #d1d5db;
}

.drawer-header button {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

.drawer-section {
    margin-bottom: 26px;
}

.drawer-section h4 {
    color: #C89B3C;
    margin-bottom: 10px;
    font-size: .9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.drawer-section a {
    display: block;
    color: #e5e7eb;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.drawer-section a:hover {
    color: #C89B3C;
    padding-left: 6px;
}

/* Tablet / smaller desktop */

@media (max-width: 1200px) {
    .desktop-nav a {
        padding: 9px 12px;
        font-size: .88rem;
    }

    .brand {
        min-width: 240px;
    }

    .brand h2 {
        font-size: 1.2rem;
    }
}

/* Mobile */

@media (max-width: 992px) {

    .desktop-nav {
        display: none;
    }

    .menu-toggle {
        display: inline-block;
    }

    .header-inner {
        padding: 12px 18px;
    }

    .brand {
        min-width: 0;
    }

    .brand img {
        width: 48px;
        height: 48px;
    }

    .brand h2 {
        font-size: 1.05rem;
    }

    .brand p {
        font-size: .75rem;
    }

    .donate-button {
        display: none;
    }
}

@media (max-width: 430px) {
    .mobile-drawer {
        width: 88vw;
        right: -90vw;
    }
}
  


/*==================================================
  END OF FIREBIRD HOLDINGS STYLESHEET
==================================================*/
/* Happy Birthday Danielle, may all your wishes come true. */