/* =========================
   GLOBAL
========================= */

body {

    margin:0;
    padding:0;

    font-family:Arial, sans-serif;

    color:#facc15;

    background:
    linear-gradient(
    135deg,
    #0f172a,
    #1e1b4b
    );

}


/* =========================
   UNIFIED NAVBAR (ALL PAGES)
========================= */

.navbar {

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(15,23,42,.85);

    backdrop-filter: blur(10px);

    padding:14px;

    position:sticky;
    top:0;

    z-index:1000;

    border-bottom:1px solid rgba(255,255,255,.08);

}


.navbar a,
.dropbtn {

    color:#e5e7eb;

    text-decoration:none;

    padding:14px 18px;

    font-size:15px;

    border:none;

    background:none;

    cursor:pointer;

    transition:0.2s;

}


.navbar a:hover,
.dropdown:hover .dropbtn {

    color:#60a5fa;

}


.note {

    text-align:center;

    color:#cbd5e1;

    margin:15px auto;

    max-width:600px;

    padding:8px 14px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:8px;

}

/* =========================
   BACK TO TOP BUTTON
========================= */

.top-button {

    text-align:center;

    margin:40px 0;

}

.top-button a {

    display:inline-block;

    padding:10px 16px;

    background:#1f2937;

    color:#e5e7eb;

    text-decoration:none;

    border-radius:8px;

    border:1px solid rgba(255,255,255,.1);

    transition:0.2s;

}

.top-button a:hover {

    background:#2563eb;

    color:white;

}


/* OR if using floating button version */

.floating-top {

    position:fixed;

    bottom:20px;
    right:20px;

    width:45px;
    height:45px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#1f2937;

    color:#e5e7eb;

    text-decoration:none;

    border-radius:50%;

    font-size:18px;

    z-index:1000;

    transition:0.2s;

}

.floating-top:hover {

    background:#2563eb;

    transform:translateY(-2px);

}









/* =========================
   DROPDOWN (UNIFIED)
========================= */

.dropdown {

    position:relative;

}


.dropdown-content {

    display:none;

    position:absolute;

    background:#111827;

    min-width:180px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:8px;

    overflow:hidden;

}


.dropdown-content a {

    display:block;

    padding:10px 12px;

    color:#e5e7eb;

}


.dropdown-content a:hover {

    background:#1f2937;

}


.dropdown:hover .dropdown-content {

    display:block;

}

/* =========================
   DROPDOWN
========================= */

.dropdown {

    position:relative;

}

.dropdown-content {

    display:none;

    position:absolute;

    background:#1e1b4b;

    min-width:160px;

    box-shadow:0 8px 16px rgba(0,0,0,.4);

}

.dropdown-content a {

    display:block;
    padding:10px;
    color:white;

}

.dropdown-content a:hover {

    background:#333;

}

.dropdown:hover .dropdown-content {

    display:block;

}


/* =========================
   TEXT
========================= */

h1 {

    text-align:center;

    padding:20px;

    color:#ffffff;

}


h2 {

    text-align:center;

    margin:25px 0 10px 0;

    padding:0;

    color:#ffffff;

    font-weight:600;

}

h3 {
    text-align:center;

    margin:25px 0 10px 0;

    padding:0;

    color:#ffffff;

    font-weight:600;

}
h4 {
    text-align:center;

    margin:25px 0 10px 0;

    padding:0;

    color:#ffffff;

    font-weight:600;

}

h5 {
    text-align:center;

    margin:25px 0 10px 0;

    padding:0;

    color:#ffffff;

    font-weight:600;

}

/* =========================
   GALLERY
========================= */

.container {

    display:flex;
    justify-content:center;
    gap:15px;

    margin:20px auto;

    max-width:1000px;

}

.container img {

    width:30%;
    height:auto;

    border-radius:8px;

    border:2px solid #444;

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

    cursor:pointer;

}


/* =========================
   LIGHTBOX
========================= */

.overlay {

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:2000;

}

.overlay img {

    max-width:90%;
    max-height:90%;

    border:4px solid white;

}