.bbg {
    background: linear-gradient(270deg, #ff00cc, #3333ff);
    background-size: 400% 400%;
    animation: shimmer 5s ease infinite;
  }
  
  @keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
.sbx {
    position: relative;
    background: #ff007f;
    color: white;
    border: none;
    padding: 10px 20px;
    overflow: hidden;
    border-radius: 5px;
  }
  
  .sbx::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
    pointer-events: none;
  }
  
  .sbx:hover::before {
    transform: rotate(25deg) translate(100px, 100px);
  }
  

.wtbb {
    background-color: #000;
    color: #fff;
}

.txp {
    color: #000;
}
.gtxp {
    color: linear-gradient(to right, #FFD700, #FFA500);
}

.infobox {
    border: 4px solid;
    border-color:#000000 ;
    background-color: #fffefd ; 
    color: #000;
    border-radius: 20px;
    padding: 20px;
}

btn,ttlx {
    text-transform: uppercase;
    
}


.lxt {
    font-family: 'Josefin Slab', serif;
}


@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap');

.lxp {
    font-family: 'Crimson Text', serif;
}


.footer {
    flex-shrink: 0;
    background-color: #000; /* Match navbar's black background */
    color: #fff;            /* Match navbar's white text */
    padding: 1rem;
    text-align: center;
    width: 100%;
    margin-top: auto;
    font-family: 'Arial', sans-serif; /* Optional: match font */
    border-top: 1px solid #222; /* Optional: subtle separator line */
}

.bd {
    font-weight: bold;
  }

.ct{
    text-align: center;
  }


  
/* --- Navbar Base Styles --- */
.navx {
    border-bottom: 7px solid #C6A961;
    box-shadow: 0 4px 8px #ffd70099;
    background-color: #000;
    color: #fff;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative; /* Add this to contain absolutely positioned elements */
}

/* --- First Row: Logo and Brand --- */
.navbar-brand {
    display: flex;
    align-items: center;
    color: #fff !important;
    text-decoration: none;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar-brand img,
.logox {
    border-radius: 10px;
    max-height: 80px;
    margin-right: 1rem;
}

/* --- Toggle Button --- */
.navbar-toggler {
    border: none;
    background: transparent;
    color: #fff;
    padding: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 10;
}

.navbar-toggler:hover {
    transform: scale(1.1);
}

.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
}

/* --- Second Row: Navigation --- */
.navbar-collapse {
    width: 100%;
    background-color: #000; /* Ensure background is black */
    transition: all 0.3s ease;
}

/* --- Navigation Items --- */
.navbar-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #000; /* Ensure background is black */
}

.navbar-nav .nav-item {
    width: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #fff !important;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.nav-link i, 
.nav-link [data-lucide] {
    margin-right: 0.5rem;
}

.nav-link:hover,
.nav-link:focus {
    background-color: #222;
    color: #fff;
}

.nav-link:active {
    transform: scale(0.98);
}

/* --- Dropdown Styles --- */
.dropdown-menu {
    background-color: #111 !important;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

.dropdown-item {
    color: #fff !important;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.dropdown-item i,
.dropdown-item [data-lucide] {
    margin-right: 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #222;
}

/* --- Mobile Layout (Default) --- */
.d-flex.w-100.align-items-center.justify-content-between {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

/* --- Fix for Bootstrap's collapse --- */
@media (max-width: 991px) {
    /* Critical fix for the toggle issue */
    .collapse:not(.show) {
        display: none !important;
    }
    
    .collapse.show {
        display: block !important;
    }
    
    /* Ensure the collapsed menu appears below the navbar */
    .navbar-collapse {
        position: absolute;
        top: 100%; /* Position right below the navbar */
        left: 0;
        right: 0;
        z-index: 1000;
        background-color: #000;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Ensure dropdown menus appear properly */
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: #111 !important;
        border: none;
        box-shadow: none;
    }
    
    /* Fix for navbar-text */
    .navbar-text {
        padding: 0.75rem 1rem;
        display: block;
        width: 100%;
    }
}

/* --- Desktop Layout (≥ 992px) --- */
@media (min-width: 992px) {
    .navx {
        flex-direction: column;
    }
    
    /* First row - centered logo and text */
    .d-flex.w-100.align-items-center.justify-content-between {
        justify-content: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem 0;
    }
    
    /* This ensures the logo and text are centered */
    .navbar-brand {
        justify-content: center;
        margin: 0 auto; /* Center the brand */
    }
    
    /* Hide the toggler on desktop */
    .navbar-toggler {
        display: none;
    }
    
    /* Second row - navigation */
    .navbar-collapse {
        display: block !important;
        height: auto !important;
        padding: 0.5rem 2rem;
        position: static; /* Reset position for desktop */
    }
    
    .navbar-nav {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .navbar-nav .nav-item {
        width: auto;
        margin: 0 0.5rem;
    }
    
    .nav-link {
        padding: 0.5rem 1rem;
        justify-content: center;
    }
    
    /* Dropdown positioning */
    .dropdown-menu {
        position: absolute !important;
        left: 50%;
        transform: translateX(-50%);
        min-width: 200px;
    }
}

/* --- User Indicator --- */
.navbar-text {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #FFD43B !important;
}

.navbar-text [data-lucide="user"] {
    margin-right: 0.5rem;
}

/* Override any Bootstrap styles that might be causing issues */
@media (max-width: 991px) {
    .navbar-collapse.collapse.show {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Force black background on all navbar elements */
    .navx, 
    .navbar-collapse,
    .navbar-nav,
    .nav-item,
    .nav-link {
        background-color: #000;
    }
    
    /* Ensure the navbar-brand doesn't take too much space */
    .navbar-brand {
        flex: 1;
        justify-content: flex-start;
    }
}
/* ✨ Brilliant Gold Button - Solid Color */
.gbwt {
    text-transform: uppercase;
    background-color: #d4af37; /* Solid brilliant gold */
    color: #fff8dc;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.gbwt:hover {
    background-color: #e6c85e;
}

.gbwt:active {
    transform: scale(0.98);
    background-color: #b89629;
}

.gbwt:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}


/* 🖤 Brilliant Black Button with White Text */
.bbwt {
    text-transform: uppercase;
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.bbwt:hover {
    background-color: #333333;
}

.bbwt:active {
    transform: scale(0.98);
    background-color: #111;
}

.bbwt:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}


.hypx {
    text-decoration: none; 
    cursor: pointer;       
}

.hypx:hover,
.hypx:focus,
.hypx:active,
.hypx:visited {
    text-decoration: none;
}



/* Color 0 - #322D29 */
.bg-0 { background-color: #322D29; }
.tc-0 { color: #322D29; }
.bc-0 { border: 2px solid #322D29; border-radius: 0.5rem; }

/* Color 1 - #72383D */
.bg-1 { background-color: #72383D; }
.tc-1 { color: #72383D; }
.bc-1 { border: 2px solid #72383D; border-radius: 0.5rem; }

/* Color 2 - #AC9C8D */
.bg-2 { background-color: #AC9C8D; }
.tc-2 { color: #AC9C8D; }
.bc-2 { border: 2px solid #AC9C8D; border-radius: 0.5rem; }

/* Color 3 - #D1C7BD */
.bg-3 { background-color: #D1C7BD; }
.tc-3 { color: #D1C7BD; }
.bc-3 { border: 2px solid #D1C7BD; border-radius: 0.5rem; }

/* Color 4 - #D9D9D9 */
.bg-4 { background-color: #D9D9D9; }
.tc-4 { color: #D9D9D9; }
.bc-4 { border: 2px solid #D9D9D9; border-radius: 0.5rem; }

/* Color 5 - #EFE9E1 */
.bg-5 { background-color: #EFE9E1; }
.tc-5 { color: #EFE9E1; }
.bc-5 { border: 2px solid #EFE9E1; border-radius: 0.5rem; }


/* Color 0 - #322D29 */
.bg-6 { background-color: #ffffff; }
.tc-6 { color: #ffffff; }
.bc-6 { border: 2px solid #ffffff; border-radius: 0.5rem; }

.bg-7 { background-color: #D4AF37; }
.tc-7 { color: #D4AF37; }
.bc-7 { border: 2px solid #D4AF37; border-radius: 0.5rem; }

.bg-8 { background-color: #C6A961; }
.tc-8 { color: #C6A961; }
.bc-8 { border: 2px solid #C6A961; border-radius: 0.5rem; }

.bg-9 { background-color: #000000; }
.tc-9 { color: #000000; }
.bc-9 { border: 2px solid #000000; border-radius: 0.5rem; }

.hc-0:hover { color: #322D29; }
.hc-1:hover { color: #72383D; }
.hc-2:hover { color: #AC9C8D; }
.hc-3:hover { color: #D1C7BD; }
.hc-4:hover { color: #D9D9D9; }
.hc-5:hover { color: #EFE9E1; }
.hc-6:hover { color: #ffffff; }
.hc-7:hover { color: #D4AF37; }
.hc-8:hover { color: #C6A961; }
.hc-9:hover { color: #000000; }


/* === 🎨 Hover Background Color Utilities === */
.hbg-0:hover { background-color: #322D29; }
.hbg-1:hover { background-color: #72383D; }
.hbg-2:hover { background-color: #AC9C8D; }
.hbg-3:hover { background-color: #D1C7BD; }
.hbg-4:hover { background-color: #D9D9D9; }
.hbg-5:hover { background-color: #EFE9E1; }
.hbg-6:hover { background-color: #ffffff; }
.hbg-7:hover { background-color: #D4AF37; }
.hbg-8:hover { background-color: #C6A961; }
.hbg-9:hover { background-color: #000000; }
.bh-0:hover { border-color: #322D29; }
.bh-1:hover { border-color: #72383D; }
.bh-2:hover { border-color: #AC9C8D; }
.bh-3:hover { border-color: #D1C7BD; }
.bh-4:hover { border-color: #D9D9D9; }
.bh-5:hover { border-color: #EFE9E1; }
.bh-6:hover { border-color: #ffffff; }
.bh-7:hover { border-color: #D4AF37; }
.bh-8:hover { border-color: #C6A961; }
.bh-9:hover { border-color: #000000; }


.fxs:focus {
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.4); 
  }


  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  nav {
        font-family: 'Josefin Slab', serif;
      text-transform: uppercase;
    font-weight: bold;

  }
.bc-1-4-0 { border-left: 5px solid #322D29; }
.bc-1-4-1 { border-left: 5px solid #72383D; }
.bc-1-4-2 { border-left: 5px solid #AC9C8D; }
.bc-1-4-3 { border-left: 5px solid #D1C7BD; }
.bc-1-4-4 { border-left: 5px solid #D9D9D9; }
.bc-1-4-5 { border-left: 5px solid #EFE9E1; }
.bc-1-4-6 { border-left: 5px solid #ffffff; }
.bc-1-4-7 { border-left: 5px solid #D4AF37; }
.bc-1-4-8 { border-left: 5px solid #C6A961; }
.bc-1-4-9 { border-left: 5px solid #000000; }