/* --- WordCamp Bhopal Hero Section (Simplified) --- */
/* 1. Basic Hero Container Styles */
.wp-block-cover.has-base-color.has-text-color.has-link-color {
	position: relative;
	overflow: hidden;
/* This prevents any unexpected overflow issues */
}

/* 2. Heading and Image Animation */
/* Add a fade-in animation to the "WordPress" heading */
.main_hero_section_heading {
	animation: fadeInDown 1.5s ease-out;
}

/* Add a fade-in and slide-up animation to the "Bhopal" image */
.wp-block-image.aligncenter.size-full.is-resized {
	animation: fadeInUp 1.5s ease-out;
}

/* Keyframes for the text and image animations */
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 3. Responsive Adjustments */
@media (max-width: 768px) {
	.wp-block-cover.has-base-color {
		min-height: 500px !important;
	/* Adjust height for smaller screens */
	}
	
	.main_hero_section_heading {
		font-size: clamp(36px, 10vw, 50px) !important;
	}
	
	.wp-block-image.aligncenter.size-full.is-resized img {
		width: 180px !important;
	/* Adjust image size on mobile */
	}
}

/* --- Fade In Up Animation (CSS Only with Delay) --- */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ----------Homepage-section------ */
.sponsor_sec {
	display: flex;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), #000E43), url('https://bhopal.wordcamp.org/2025/files/2025/06/as-a-SPONSOR.png');
}

.speaker_sec {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), #000E43), url('https://bhopal.wordcamp.org/2025/files/2025/06/as-a-SPEAKER.png');
}

.attendes_sec {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), #000E43), url('https://bhopal.wordcamp.org/2025/files/2025/06/as-a-ATTENDEE.png');
}

.as_a_spon {
	margin-left: 0 !important;
}

/* -------button-globally------- */
.join_button {
	margin-right: 0 !important;
}

.wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all .3s ease;
	overflow: hidden;
}

/* Arrow pseudo-element */
.wp-block-button__link::after {
	content: '→';
	font-size: 16px;
	transition: transform .3s ease;
	display: inline-block;
	margin-left: 4px;
}

/* Hover effects */
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.wp-block-button__link:hover::after {
	transform: translateX(4px);
}

.gif_about {
	z-index: 10 !important;
}

.aboutbg {
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('https://bhopal.wordcamp.org/2025/files/2025/08/Group-58.png');
	background-position: bottom;
/*     border: 1px solid #c7c7c7;
    border-radius: 20px; */
}

.wcbhopal-wrapper {
	width: 100%;
	box-sizing: border-box;
	padding: 36px 12px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color: #0f1724;
}

/* Centering container but allowing grid to extend left/right visually */
.wcbhopal-container {
	max-width: 1400px;
	margin: 0 auto;
}

/* ---------- Grid ---------- */
/* first column (feature names) fixed, others flexible */
.wcbhopal-grid {
	display: grid;
	grid-template-columns: 280px repeat(5, 1fr);
	gap: 1px;
	background: #dbe7f5;
/* thin separators */
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}

/* Header cells */
.wcbhopal-grid .col-header {
	padding: 20px 16px;
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	line-height: 1.15;
}

/* Tier colors */
.hdr-platinum {
	background: #050A30;
}

/* teal */
.hdr-gold {
	background: #050A30;
	color: #FFFFFF;
}

/* warm gold */
.hdr-silver {
	background: #050A30;
	color: #FFFFFF;
}

/* cool silver */
.hdr-bronze {
	background: #050A30;
	color: #FFFFFF;
}

/* bronze */
.hdr-party {
	background-color: #FF8C00;
	border: none;
}

/* party purple */
/* First header (label) darker */
.col-label {
	background: #0b1220;
}

/* Feature column (first column) */
.wcbhopal-grid .feature {
	background: linear-gradient(180deg,#ffffff,#f7fbff);
	padding: 16px 18px;
	font-weight: 600;
	color: #092033;
	text-align: left;
}

/* Cells (tier columns) */
.wcbhopal-grid .cell {
	background: #fff;
	padding: 16px;
	text-align: center;
	font-size: 15px;
	color: #0f1724;
}

/* alternating row background for better reading */
.wcbhopal-grid .feature:nth-of-type(even),
.wcbhopal-grid .cell:nth-of-type(odd) {
	background: #fbfdff;
}

/* subtle hover to highlight row group (feature + 5 cells) */
.wcbhopal-grid .row-hover:hover ~ .row-hover {
}

/* We'll create a "row" effect by grouping with :nth-child selectors below */
.wcbhopal-grid > .feature:hover,
.wcbhopal-grid > .feature:hover + .cell,
.wcbhopal-grid > .feature:hover ~ .cell:nth-child(-n + 6) {
/* no-op (can't easily select the whole row); kept lightweight for perf */
}

/* ---------- Icons ---------- */
.wcb-icon {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin-right: 6px;
}

.icon-check {
	fill: #16a34a;
}

.icon-cross {
	fill: #dc2626;
}

/* emphasized cells (costs) */
.cell.cost {
	font-weight: 800;
	font-size: 16px;
	color: #0b1220;
	background: linear-gradient(180deg,#fff9eb,#fff5e6);
}

/* small muted text */
.small-muted {
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-top: 6px;
}

/* CTA styles (appear in last row optionally) */
.wcb-cta {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 8px;
	background: #0f1724;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(15,23,36,0.12);
}

/* Responsive: allow horizontal scroll on small screens, reduce column widths */
@media (max-width: 1100px) {
	.wcbhopal-grid {
		grid-template-columns: 220px repeat(5, minmax(160px, 1fr));
	}
}

@media (max-width: 780px) {
	.wcbhopal-grid {
		grid-template-columns: 180px repeat(5, 220px);
		overflow-x: auto;
	}
	
	.wcbhopal-wrapper {
		padding: 20px 6px;
	}
	
	.wcbhopal-container {
		padding: 0 6px;
	}
}

/* Make sponsorship table full width on larger screens while keeping it readable on smaller ones */
.sponsorship-table {
	width: 100vw;
/* Full viewport width */
	margin-left: calc(-50vw + 50%);
/* Centers and breaks out of content width */
}

.sponsorship-table table {
	width: 80%;
	border-collapse: collapse;
}

.sponsorship-table th,
.sponsorship-table td {
	padding: 12px 15px;
	text-align: center;
}

.sponsorship-table thead {
	background-color: #1e73be;
/* WordCamp blue */
	color: #fff;
}

.sponsorship-table tbody tr:nth-child(even) {
	background-color: #f9f9f9;
}

/* Responsive tweaks */
@media (max-width: 768px) {
	.sponsorship-table {
		width: 100%;
		margin-left: 0;
		overflow-x: auto;
	}
	
	.sponsorship-table table {
		font-size: 14px;
	}
}