.contestants-nav {
	justify-content: center;
	display: flex;
}
.contestants-nav .nav-item {
	margin: 0 10px 10px;
	list-style: none;
}
.contestants-nav .nav-item .nav-link:hover, .contestants-nav .nav-item .nav-link.active {
	background: #f1d9cd;
	color: #000;
}
.contestants-nav .nav-item .nav-link {
	font-size: 20px;
	font-size: 1.25rem;
	text-align: center;
	padding: 7px 20px;
	color: #fff;
	background: #260f07;
}
.contestant-section {
	text-align: center;
	padding: 40px 20px;
}
.contestant-section h2 {
	font-size: 2.5rem;
	color: #fff;
	font-weight: 300;
	margin-bottom: 40px;
}
.contestant-section h2 span {
	color: #e91e63;
	font-weight: 500;
}
.contestant-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}
.contestant-box {
	text-decoration: none;
	color: #ccc;
}
.image-wrapper {
	position: relative;
	overflow: hidden;
	border-radius: 5px 5px 0px 0px;
}
.image-wrapper img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.image-wrapper .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(233, 30, 99, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.image-wrapper .name {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #e91e63;
	color: #fff;
	text-align: center;
	padding: 10px 0;
	font-weight: 500;
	transition: background-color 0.3s ease;
}
.image-wrapper:hover .name {
	background-color: #d81b60;
}
.image-wrapper:hover .overlay {
	opacity: 1;
}
.image-wrapper:hover .name {
	transform: translateY(0%);
}
.contestant-box {
	background: white;
	border-radius: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
	transition: all 0.4s ease-in-out;
	cursor: pointer;
	padding: 10px;
	padding-bottom: 20px;
}
.contestant-box:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
	background: #fff8f0;
}
.vot_no {
	display: flex;
	justify-content: space-between;
	background: #f1d9cd;
	border-radius: 10px;
	padding: 5px 10px;
	margin-top: 10px;
}
.line {
	width: 1px;
	background-color: #260f07; /* line color */
	height: 20px; /* adjust as needed */
}
.content_sec h4 {
	color: #260f07;
	text-align: left;
	padding-top: 10px;
	font-weight: 600;
	font-size: 18px;
}
.content_sec h5 {
	text-align: left;
	padding-top: 10px;
	font-weight: 600;
	font-size: 18px;
	color: #5b463e;
}
.vote_area {
	margin-top:20px;
	text-align:left;
}
:root {
 --bg:#0f1720;
 --card-bg:#111214;
 --gold:#d5b34a;
 --muted:#b9b9b9;
 --accent:#e9e0c6;
 --glass: rgba(255, 255, 255, 0.04);
 --radius:14px;
}
.hero {
	text-align: center;
	padding: 48px 20px 56px;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.pretitle {
	color: var(--muted);
	margin-bottom: 10px;
	font-size: 18px;
}
.headline {
	color: #fff;
	font-size: 50px;
	letter-spacing: 2px;
	font-weight: 600;
	margin: 6px 0 12px;
	line-height: 0.95;
	text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
}
.tags_link a {
	font-size: 0.75rem;
	background: none;
	padding: 2px 8px;
	border-radius: 10px;
	margin-right: 5px;
	border: 1px solid #fff;
	color: #fff;
	padding: 6px 15px;
}
.wrap {
	max-width:var(--maxw);
	margin:0 auto;
}
h2.section-title {
	text-align:center;
	font-family:"Cinzel", serif;
	color:var(--gold);
	margin:8px 0 26px;
	font-size:28px;
	letter-spacing:0.6px;
}
.grid {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:20px;
	max-width:1350px;
	margin:0 auto;
	align-items:start;
}
/* Card base */
  .card_c {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.14));
	border-radius:var(--radius);
	overflow:hidden;
	border:2px solid rgba(213, 179, 74, 0.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
	display:flex;
	flex-direction:column;
 transition:transform .28s ease;
}
.card_c:hover {
	transform: translateY(-6px);
}
/* top image area */
  .card_c .media {
	position:relative;
	height:320px;
	background:#222;
	overflow:hidden;
}
.card_c .media img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
/* overlay that appears on hover - we only apply to .card--hoverable */
  .card--hoverable .overlay {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background: linear-gradient(180deg, rgba(8, 8, 8, 0.4) 0%, rgba(8, 8, 8, 0.7) 60%);
	color:#fff;
	padding:20px;
	display:flex;
	align-items:flex-end;
 transition: transform .28s ease, opacity .28s ease;
	transform: translateY(18%);
	opacity:0;
}
.card--hoverable:hover .overlay {
	transform: translateY(0%);
	opacity:1;
}
.overlay .txt {
	display:flex;
	flex-direction:column;
	gap:6px;
	width:100%;
}
.overlay .flag-name {
	font-weight:600;
	font-size:20px;
	letter-spacing:.6px;
	text-align: center;
}
.overlay .flag {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:16px;
	border-radius:3px;
	overflow:hidden;
	background:#fff;
}
.overlay .sub {
	font-size:12px;
	color:#fff;
	font-weight:600;
	text-transform:uppercase;
}
.overlay .small {
	font-size:12px;
	color:#ddd;
}
/* bottom info_c area */
  .card_c .info_c {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
	padding:18px;
	display:flex;
	flex-direction:column;
	gap:14px;
}
.votes-row {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
}
.votes-row .label {
	color:#fff;
	font-size:14px;
}
.votes-row .count {
	font-weight:700;
	color:var(--gold);
	font-size:20px;
}
.progress-wrap {
	display:flex;
	align-items:center;
	gap:12px;
}
.progress_c_c {
	height:8px;
	background: rgba(255, 255, 255, 0.04);
	border-radius:8px;
	flex:1;
	overflow:hidden;
	position:relative;
}
.progress_c_c > i {
	display:block;
	height:100%;
	width:60%;
	background: linear-gradient(90deg, rgba(213, 179, 74, 0.95), rgba(180, 140, 30, 0.9));
	border-radius:8px;
	box-shadow:0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.progress-percent {
	font-size:12px;
	color:var(--muted);
	width:48px;
	text-align:right;
}
.vote-btn {
	margin-top:6px;
	background: linear-gradient(90deg, var(--gold), #f3e6b0);
	border:none;
	color:#111;
	font-weight:700;
	padding:14px;
	border-radius:40px;
	cursor:pointer;
	box-shadow: 0 6px 16px rgba(213, 179, 74, 0.08);
	width:100%;
	text-align: center;
}
.share-row {
	display:flex;
	align-items:center;
	gap:8px;
	color:var(--muted);
	font-size:13px;
	margin-top:8px;
}
.share-row svg {
	width:16px;
	height:16px;
	opacity:0.9;
}
.lead-card .bg:hover {
	transform: scale(1.2);
}

  /* small responsive tweaks */
  @media (max-width:1100px) {
 .grid {
grid-template-columns:repeat(2, 1fr);
max-width:920px;
}
}
 @media (max-width:560px) {
 .grid {
grid-template-columns:1fr;
padding:0 12px;
}
 .card_c .media {
height:380px;
}
}
/* -------------- small style to make the 2nd card look like your screenshot (rounded inner gold border) -------------- */
  .card_c .card-inner {
	border-radius:inherit;
	overflow:hidden;
}
  /* make the image area have a subtle inner gold outline */
  .card_c .media::after {
 content:"";
 position:absolute;
 inset:8px;
 border-radius:10px;
 border:2px solid rgba(213, 179, 74, 0.06);
 pointer-events:none;
}
/* Styling specific to the second card content (for clarity) */
  .card--hoverable .overlay .title {
	font-size:18px;
	font-weight:800;
	display:flex;
	gap:8px;
	align-items:center;
}
.card--hoverable .overlay .subtitle {
	color:rgba(255, 255, 255, 0.85);
	font-size:12px;
}
.card--hoverable .overlay .focus {
	color:var(--muted);
	font-size:12px;
	margin-top:6px;
}
h2.lead-title {
	text-align:center;
	font-size:32px;
	margin:6px 0 6px;
	font-weight:800;
	color: #fff;
	margin-top: 30px;
}
p.lead-sub {
	text-align:center;
	color:rgba(255, 255, 255, 0.8);
	margin:0 0 26px;
}
/* 3-column grid */
  .lead-grid {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:22px;
	max-width:1250px;
	margin:0 auto 36px;
}
.lead-card {
	position:relative;
	border-radius:14px;
	overflow:hidden;
	min-height:520px;
	background:#111;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
	border:1px solid rgba(255, 255, 255, 0.03);
}
/* background image + dark gradient */
  .lead-card .bg {
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center;
	transform:scale(1.02);
	filter:brightness(.9);
}
 .lead-card::before {
 content:"";
 position:absolute;
 inset:0;
 background: linear-gradient(180deg, rgba(3, 3, 3, 0.35) 12%, rgba(0, 0, 0, 0.66) 62%);
 mix-blend-mode: normal;
}
/* rank badge top-right */
  .rank-badge {
	position:absolute;
	top:18px;
	right:20px;
	z-index:6;
	width:62px;
	height:62px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#111;
	font-weight:800;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
	border:4px solid rgba(255, 255, 255, 0.06);
	background:linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 200, 80, 0.92));
	transform:translateY(-6px);
}
/* different colors for #2 and #3 */
  .rank-badge.rank-2 {
	background:linear-gradient(180deg, #d0d4d8, #9aa0a6);
	color:#222;
}
.rank-badge.rank-3 {
	background:linear-gradient(180deg, #c46a0b, #8a4200);
	color:#fff;
}
.rank-badge small {
	display:block;
	font-size:11px;
	margin-top:2px;
	opacity:0.9;
	color:inherit;
	font-weight:700;
}
/* content area at bottom */
  .lead-content {
	position:relative;
	z-index:5;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	padding:26px;
	height:100%;
	padding-top: 180px;
	background: linear-gradient(180deg, rgba(7, 7, 7, 0.28) 0%, rgba(7, 7, 7, 0.7) 60%);
}
.flag {
	display:inline-block;
	width:34px;
	height:22px;
	border-radius:6px;
	overflow:hidden;
	margin:0 auto 12px;
	box-shadow:0 4px 12px rgba(0, 0, 0, 0.5);
}
.candidate-name {
	text-align:center;
	font-size:26px;
	font-weight:600;
	margin:4px 0 6px;
	text-shadow:0 2px 8px rgba(0, 0, 0, 0.5);
	color: #fff;
}
.currently {
	text-align:center;
	color:var(--muted);
	margin-bottom:6px;
	font-size:14px;
	opacity:0.95;
}
.subline {
	text-align:center;
	color:rgba(255, 255, 255, 0.85);
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:1px;
	margin-bottom:10px;
}
/* votes row */
  .votes-row {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:10px;
}
.votes-row .label {
	color:var(--muted);
	font-size:14px;
}
.votes-row .count {
	font-weight:800;
	color:#fff;
	font-size:18px;
}
.progress_c {
	height:9px;
	background: rgba(255, 255, 255, 0.06);
	border-radius:8px;
	overflow:hidden;
	margin-bottom:8px;
}
.progress_c > i {
	display:block;
	height:100%;
	width:40%;
	background: linear-gradient(90deg, var(--gold), #c36f0b);
	border-radius:8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
}
.percent {
	text-align:right;
	color:var(--muted);
	font-size:13px;
	margin-bottom:14px;
}
/* button & bottom row */
  .vote-now {
	display:block;
	margin:10px auto 10px;
	width:86%;
	padding:12px 18px;
	border-radius:40px;
	text-align:center;
	font-weight:800;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	border:2px solid rgba(255, 255, 255, 0.06);
	color:#fff;
	cursor:pointer;
	position:relative;
 transition: all .22s ease;
}
.vote-now .star {
	position:absolute;
	right:18px;
	top:50%;
	transform:translateY(-50%);
	color:var(--gold);
	font-size:18px;
}
.vote-now:hover {
	transform:translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.share-row {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	color:var(--muted);
	font-size:13px;
	margin-top:8px;
}
/* little decorative # tag near badge */
  .badge-number {
	position:absolute;
	top:48px;
	right:28px;
	z-index:7;
	color:#fff;
	font-weight:700;
	font-size:12px;
	opacity:0.95;
	text-shadow:0 1px 8px rgba(0, 0, 0, 0.6);
}

  /* mobile responsive */
  @media (max-width:1000px) {
 .lead-grid {
grid-template-columns:repeat(2, 1fr);
}
 .lead-card {
min-height:460px;
}
}
 @media (max-width:620px) {
 .lead-grid {
grid-template-columns:1fr;
}
 .lead-card {
min-height:520px;
}
 .rank-badge {
width:56px;
height:56px;
top:16px;
right:16px;
}
}
/* ===== TITLE ===== */
  .page-title {
	text-align:center;
	font-weight:800;
	font-size:26px;
	margin-bottom:20px;
	color:#fff;
}
/* HOVER EFFECT: image zoom + card lift */
.lead-card {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	cursor: pointer;
}
.lead-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
/* zoom effect */
.lead-card .bg {
	transition: transform 0.8s ease;
}
.lead-card:hover .bg {
	transform: scale(1.08);
}

/* optional: make the dark gradient slightly stronger on hover */
.lead-card:hover::before {
 background: linear-gradient(180deg, rgba(3, 3, 3, 0.45) 12%, rgba(0, 0, 0, 0.75) 62%);
 transition: background 0.35s ease;
}
/* overlay for second card */
  .card--hoverable .overlay {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background: linear-gradient(180deg, rgba(7, 7, 7, 0.28) 0%, rgba(7, 7, 7, 0.7) 60%);
	color:#fff;
	padding:22px;
	display:flex;
	align-items:flex-end;
 transition: transform .28s ease, opacity .28s ease;
	transform: translateY(20%);
	opacity:0;
}
.card--hoverable:hover .overlay {
	transform: translateY(0%);
	opacity:1;
}
.flag {
	width:26px;
	height:18px;
	display:inline-block;
	border-radius:3px;
	overflow:hidden;
}
.subtitle {
	font-size:12px;
	color:var(--muted);
	text-transform:uppercase;
	font-weight:700;
}
.focus {
	font-size:12px;
	color:#ddd;
	opacity:0.9;
}
.small {
	font-size:12px;
	color:#ddd;
}
/* bottom area (votes/progress/button) */
  
  .share-row {
	display:flex;
	align-items:center;
	gap:8px;
	color:var(--muted);
	font-size:13px;
	margin-top:8px;
}
/* ===== STATS PANELS ===== */
  .stats-wrap {
	max-width:1250px;
	margin:28px auto 0;
}
.stats-grid {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:18px;
}
.panel {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.25));
	border-radius:14px;
	padding:15px 26px;
	border:2px solid rgba(213, 179, 74, 0.12);
	box-shadow: 0 10px 30px rgba(2, 6, 12, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:120px;
}
.panel .title {
	text-align:center;
	font-size:12px;
	color:var(--muted);
	text-transform:uppercase;
	letter-spacing:1.6px;
	margin-bottom:6px;
}
.panel .big {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	font-weight:900;
	color:#fff;
	font-size:44px;
}
.panel .big .label {
	font-size:46px;
}
.panel .sub {
	text-align:center;
	color:#cfcfcf;
	margin-top:8px;
	font-size:13px;
	opacity:0.9;
}
.time-boxes {
	display:flex;
	gap:12px;
	justify-content:center;
	margin-top:12px;
	flex-wrap:wrap;
}
.time-box {
	background: rgba(0, 0, 0, 0.45);
	border-radius:10px;
	padding:12px 14px;
	min-width:68px;
	text-align:center;
}
.time-box .v {
	font-weight:800;
	color:var(--gold);
	font-size:20px;
}
.time-box .k {
	margin-top:6px;
	font-size:11px;
	color:var(--muted);
	text-transform:uppercase;
}
.sparkle {
	display:inline-block;
	transform-origin:center;
	animation: sparkle 2s linear infinite;
	margin-left:6px;
	font-size:20px;
}
 @keyframes sparkle {
0% {
transform: translateY(0) rotate(0deg) scale(1);
opacity:1;
}
50% {
transform: translateY(-6px) rotate(12deg) scale(1.06);
opacity:0.95;
}
100% {
transform: translateY(0) rotate(0deg) scale(1);
opacity:1;
}
}
.panel:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 30px #d4af374d;
	border-color: var(--color-gold-light);
}
  /* small decorative underline glow */
  .panel::after {
content:"";
display:block;
height:6px;
margin-top:16px;
width:100%;
border-radius:6px;
background:linear-gradient(90deg, transparent, rgba(213, 179, 74, 0.06), transparent);
}
.lead-card a:hover {
	text-decoration:none;
}

  /* responsiveness */
  @media (max-width:1200px) {
 .cards {
grid-template-columns:repeat(2, 1fr);
}
 .stats-grid {
grid-template-columns:repeat(2, 1fr);
}
}
 @media (max-width:600px) {
 .cards {
grid-template-columns:1fr;
gap:14px;
}
 .stats-grid {
grid-template-columns:1fr;
gap:14px;
}
 .card .media {
height:420px;
}
}
.modal {
	width:min(640px, 95%);
	background:#111827;
	color:#fff;
	border-radius:10px;
	padding:26px 28px;
	box-shadow:0 10px 50px rgba(0, 0, 0, 0.7);
	position:relative;
	margin: auto;
	width: 600px;
	height: 250px;
}
.modal .close {
	position:absolute;
	top:12px;
	right:14px;
	font-size:20px;
	cursor:pointer;
	color:#cfcfcf;
	background:transparent;
	border:none;
}
.modal h3 {
	margin:0 0 12px 0;
	font-weight:600
}
.modal p.lead {
	margin:0 0 18px 0;
	color:var(--muted)
}
.copy-row {
	display:flex;
	gap:12px;
	align-items:center;
	margin:10px 0 6px;
}
.copy-row input {
	flex:1;
	background:#0f1315;
	border:1px solid #fff;
	padding:12px 14px;
	border-radius:8px;
	color:#fff;
	font-size:14px;
	outline:none;
}
.copy-row button.copy {
	white-space:nowrap;
	padding:10px 14px;
	border-radius:8px;
	border:none;
	background:none;
	border:1px solid #fff;
	color:#fff;
	cursor:pointer;
	font-weight:600;
}
.share-line {
	margin-top:16px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:22px;
	font-size:20px;
}
.share-line .icon {
	width:44px;
	height:44px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:rgba(255, 255, 255, 0.03);
	cursor:pointer;
transition:transform .18s ease;
}
.share-line .icon:hover {
	transform:scale(1.05);
}
.overlay_c {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 2000;
	backdrop-filter: blur(2px);
	align-items: center;
	justify-content: center;
	padding: 28px;
	margin: auto;
	background: rgba(0, 0, 0, 0.65);
}
.sub {
	color:#fff;
}
.grid.container {
	max-width: 1250px;
}
.tags_link a.active {
	color:#6f5a1b
}
@media (max-width: 768px) {
	.headline{font-size: 25px;}
	.tags_link a{margin-bottom: 10px; display: inline-table;}
	.hero{ padding:20px 20px 30px;}
	.panel{ margin:10px; padding:15px 15px;}
	h2.lead-title{font-size: 22px;}
	.lead-card{ margin-left:10px; margin-right:10px;}
	.modal{ width:100%;}
	.contestant-section{ padding-left:0px; padding-right:0px;}
}