/* ==========================================================================
*
* Custom CSS Stylesheet. This is where you should add your own styles!
*
** ========================================================================== */

/* Simple style overrides or custom adds */

.some-css-selector {font-size:13px;}

/* ==========================================================================
** Competition Announcement Section Styles
========================================================================== */

.bg-red {
	background-color: #CD2122 !important;
}

.competition-announcement {
	background: linear-gradient(135deg, #CD2122 0%, #B01E1F 100%);
	padding: 60px 0;
	position: relative;
	overflow: hidden;
}

.competition-announcement::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
	opacity: 0.3;
	pointer-events: none;
}

.competition-title {
	color: #FFFFFF;
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 15px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	letter-spacing: 1px;
}

.competition-subtitle {
	color: #FFFFFF;
	font-size: 1.2rem;
	font-weight: 300;
	opacity: 0.9;
	margin-bottom: 0;
}

.competition-poster {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.competition-poster:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.competition-poster-link {
	display: inline-block;
	cursor: pointer;
}

.competition-poster-link:hover .competition-poster {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.competition-details {
	padding: 20px 0;
}

.competition-info-item {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	color: #FFFFFF;
	font-size: 1.1rem;
	line-height: 1.6;
}

.competition-info-item i {
	font-size: 1.3rem;
	margin-right: 15px;
	color: #FFD700;
	min-width: 25px;
}

.competition-info-item strong {
	color: #FFD700;
	margin-right: 8px;
}

.competition-events {
	margin-left: 40px;
	margin-top: -10px;
	margin-bottom: 20px;
}

.event-item {
	color: #FFFFFF;
	font-size: 1rem;
	line-height: 1.8;
	margin-bottom: 5px;
	padding-left: 10px;
}


.competition-actions {
	text-align: center;
}

.competition-info-text {
	color: #FFFFFF;
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: 20px;
	font-weight: 400;
}

/* Force transparent background for header on all devices */
.site-header .logo-container {
	background: transparent !important;
}

.site-header .site-header-main-wrapper,
.site-header .site-header-main {
	background: transparent !important;
}

/* Force transparent background for all footer content */
#footer * {
	background: transparent !important;
}

.competition-actions .btn {
	margin: 5px 10px;
	padding: 12px 25px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 5px;
	transition: all 0.3s ease;
}

.competition-actions .btn-white {
	background-color: #FFFFFF;
	color: #CD2122;
	border: 2px solid #FFFFFF;
}

.competition-actions .btn-white:hover {
	background-color: transparent;
	color: #FFFFFF;
	border-color: #FFFFFF;
	transform: translateY(-2px);
}

.competition-actions .btn-outline-white {
	background-color: transparent;
	color: #FFFFFF;
	border: 2px solid #FFFFFF;
}

.competition-actions .btn-outline-white:hover {
	background-color: #FFFFFF;
	color: #CD2122;
	transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.competition-title {
		font-size: 2rem;
	}
	
	.competition-subtitle {
		font-size: 1rem;
	}
	
	.competition-info-item {
		font-size: 1rem;
		margin-bottom: 15px;
	}
	
	.competition-actions .btn {
		display: block;
		width: 100%;
		margin: 10px 0;
	}
	
	/* Fix mobile header background */
	.site-header .logo-container {
		background: transparent !important;
	}
	
	/* Fix mobile header background for all header styles */
	.site-header[data-header-style="1"] .logo-container,
	.site-header[data-header-style="2"] .logo-container,
	.site-header[data-header-style="3"] .logo-container,
	.site-header[data-header-style="4"] .logo-container,
	.site-header[data-header-style="5"] .logo-container,
	.site-header[data-header-style="6"] .logo-container {
		background: transparent !important;
	}
	
	/* Fix mobile header main wrapper background */
	.site-header .site-header-main-wrapper,
	.site-header .site-header-main {
		background: transparent !important;
	}
	
	/* Force transparent background for mobile header */
	.site-header {
		background: transparent !important;
	}
	
	.site-header .site-header-main-center {
		background: transparent !important;
	}
	
	.site-header .main-menu-wrapper {
		background: transparent !important;
	}
}





/* ==========================================================================
** Responsive styles custom rules
* These rules are ready to be used for either overrides
* or just your own custom rules.
========================================================================== */


/** Higher screens+ **/
@media only screen and (min-width : 1921px){

}


/** Desktop+ **/
@media (min-width: 1200px) {

}


/** Laptop **/
@media (max-width: 1200px) {

}


/** Laptop+ **/
@media (min-width: 991px) {

}


/** Laptop **/
@media (min-width: 992px) and (max-width: 1199px) {

}


/** Large Tablets **/
@media (max-width: 992px) {

}


/** Tablets (landscape mode)  **/
@media (min-width: 768px) and (max-width: 991px) {

}


/** Tablets+  **/
@media (min-width: 768px) {

}


/** Tablets (portrait mode)  **/
@media (min-width : 481px) and (max-width : 768px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 767px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 600px) {

}


/** Smartphone portrait mode **/
@media (max-width: 480px) {

}


/** Normal phone portrait mode+ **/
@media (min-width: 320px) {
	
}