/* --- Carousel & Swiper Styles --- */
.swiper { width: 100%; height: 300px; margin-top: 20px; }
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

/* --- Main Layout & Colors --- */
body { background-color: #1a1a1a; color: #d4af37; font-family: sans-serif; text-align: center; padding-top: 50px; }
.vault-seal { width: 300px; cursor: pointer; border: 2px solid #d4af37; border-radius: 50%; padding: 10px; }
h1 { font-size: 2.5em; margin-top: 20px; }
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px; }
/* Gold door with a green accent outline */
.door { 
    padding: 20px; 
    border: 1px solid #d4af37; /* The Gold Border */
    outline: 2px solid #22c55e; /* The Green Accent Outline */
    width: 150px; 
    text-decoration: none; 
    color: #d4af37; 
    border-radius: 8px;
    margin: 5px; /* Added a tiny margin to keep outlines from touching */
}

/* For your special green button */
.green-accent { 
    border-color: #22c55e !important; 
    outline-color: #d4af37 !important; /* Inverted: Gold outline on Green border */
    color: #22c55e !important; 
}
/* --- Header & Project Card Styles --- */
header { text-align: center; margin-bottom: 40px; }
header img { display: block; margin: 0 auto; padding-top: 20px; }

.gold-accent { color: #fbbf24; }
.green-accent { color: #22c55e; }

/* --- New Layout Classes --- */
.full-width { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    margin-bottom: 20px; 
}

.row { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin-bottom: 20px; 
    width: 100%; 
}

/* Green accent inside the doors */
.green-accent { 
    border-color: #22c55e !important; 
    color: #22c55e !important; 
}

.status-inactive { color: #94a3b8; font-size: 0.8em; margin-left: 10px; font-style: italic; }
.project-card { border: 1px solid #334155; padding: 20px; margin: 10px; border-radius: 8px; }