/******************************************************************
  Template Name: Specer
  Description: Specer Sport HTML Template
  Author: Colorlib
  Author URI: http://colorlib.com
  Version: 1.0
  Created: Colorlib
******************************************************************/

/* Scroll animation helpers (disabled: always visible) */
.animate-on-scroll,
.animate-on-scroll.will-animate,
.animate-on-scroll.will-animate.visible,
.fade-in-on-scroll,
.slide-in-left-on-scroll,
.scale-up-on-scroll {
    opacity: 1 !important;
    transform: none !important;
}

/* Map JS-added classes to existing keyframes */
/* Animation mappings disabled */

/* Note: no global overrides; visibility controlled by will-animate + visible */

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Match Schedule Section
6.  Latest News Section
7.  Video Section
8.  Popular News Section
9.  Contact
10.  Footer Style

-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Roboto", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	color: #636363;
	font-weight: 400;
	line-height: 24px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
	transition: transform 0.4s ease, filter 0.4s ease;
}

.hover-zoom img:hover {
	transform: scale(1.05);
}

.hover-bright img:hover {
	filter: brightness(1.1);
}

.card-hover {
    transition: all 0.3s ease;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #fff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 30px;
	text-align: left;
}

.section-title.sidebar-title:before {
	height: 2px;
}

.section-title.sidebar-title:after {
	height: 2px;
}

.section-title.sidebar-title h5 {
	font-size: 20px;
	color: #151618;
	font-weight: 500;
}

.section-title:before {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 70px;
	background: #C62828;
	content: "";
	z-index: 1;
}

.section-title:after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: #f2f2f2;
	content: "";
}

.section-title h3 {
	font-size: 28px;
	color: #151618;
	font-weight: 300;
}

.section-title h3 span {
    font-weight: 700;
    color: #151618;
}

/* UI polish: icons, spacing, and mobile readability */
.stat-item .stat-icon i,
.impact-item .impact-icon i,
.member-card .member-social i,
.document-card .doc-icon i {
    font-size: 28px;
}

@media (max-width: 576px) {
  .section-title h3 { font-size: 24px; }
  .stat-item { margin-bottom: 15px; }
  .timeline { gap: 12px; }
}

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    transition: transform 0.5s ease;
}

/* Readability overlays for hero-like sections using background images */
.large-blog.set-bg::before,
.blog-hero-section.set-bg::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
    z-index: 0;
}
.large-blog .bi-text, .large-blog .bi-tag { position: relative; z-index: 1; }
.blog-hero-section .bh-text { position: relative; z-index: 1; }

/* Blog details hero section base */
.blog-hero-section {
    height: 420px;
    position: relative;
    display: flex;
    align-items: center;
}
.blog-hero-section .bh-text h2 { color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.35); }
.blog-hero-section .bh-text ul li { color: #ffffff; }

.parallax-bg {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateZ(0);
	perspective: 1000;
	backface-visibility: hidden;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.spad-2 {
	padding-top: 50px;
	padding-bottom: 70px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	font-size: 16px;
	color: #ffffff;
	background: #C62828;
	font-weight: 500;
	letter-spacing: 1px;
	display: inline-block;
	padding: 14px 36px 12px;
	transition: all 0.3s ease;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.primary-btn:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: #B71C1C;
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
	z-index: -1;
}

.primary-btn:hover:before {
	width: 100%;
}

.primary-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(198, 40, 40, 0.4);
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-40px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(40px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fade-in-up {
	animation: fadeInUp 0.8s ease forwards;
}

.fade-in-left {
	animation: fadeInLeft 0.8s ease forwards;
}

.fade-in-right {
	animation: fadeInRight 0.8s ease forwards;
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

/* Search Option */

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #333;
	background: none;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header__top .ht-info ul li {
	list-style: none;
	display: inline-block;
	margin-right: 35px;
	position: relative;
	font-size: 14px;
	color: #2d2d2d;
	padding: 20px 0 15px;
}

.header__top .ht-info ul li:after {
	position: absolute;
	right: -20px;
	top: 14px;
	width: 1px;
	height: 20px;
	background: #e5e5e5;
	content: "";
}

.header__top .ht-info ul li:last-child:after {
	display: none;
}

.header__top .ht-info ul li a {
	font-size: 14px;
	color: #2d2d2d;
}

.header__top .ht-links {
	text-align: right;
}

.header__top .ht-links a {
	display: inline-block;
	font-size: 14px;
	color: #2d2d2d;
	margin-left: 20px;
	padding: 20px 0 15px;
}


/*---------------------
  Hero
-----------------------*/

.hero-section {
	height: 700px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
	z-index: 1;
}

.hero-section .container {
	position: relative;
	z-index: 2;
}

.hs-item .hs-text {
	text-align: center;
	position: relative;
	z-index: 2;
}

.hs-item .hs-text h4 {
	color: #ffffff;
	margin-bottom: 25px;
	transform: translateY(20px);
	opacity: 0;
	animation: fadeInUp 1s forwards 0.5s;
}

.hs-item .hs-text h2 {
	font-size: 48px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 32px;
	transform: translateY(30px);
	opacity: 0;
	animation: fadeInUp 1s forwards 0.8s;
}

.hs-item .hs-text .primary-btn {
	transform: translateY(20px);
	opacity: 0;
	animation: fadeInUp 1s forwards 1.1s;
}

/*---------------------
  Trending News
-----------------------*/

.trending-news-section {
	background: #151618;
	position: relative;
	padding: 18px 0;
}

.trending-news-section .tn-title {
	font-size: 20px;
	color: #ffffff;
	font-weight: 500;
	background: #C62828;
	text-align: right;
	padding-right: 75px;
	padding-top: 14px;
	width: 32%;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	z-index: 1;
}

.trending-news-section .news-slider.owl-carousel .owl-nav {
	position: absolute;
	right: 0;
	top: 0;
}

.trending-news-section .news-slider.owl-carousel .owl-nav button {
	height: 22px;
	width: 22px;
	border: 1px solid #8a8b8c;
	text-align: center;
	font-size: 12px;
	color: #ababab;
	line-height: 22px;
	margin-left: 10px;
	background: #151618;
}

.trending-news-section .news-slider .nt-item {
	font-size: 16px;
	color: #ffffff;
	font-weight: 500;
	padding-left: 265px;
}

/*---------------------
  Match Section
-----------------------*/

.match-section {
	padding: 70px 0 60px;
}

.ms-content h4 {
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 25px;
}

.ms-content .mc-table {
	margin-bottom: 10px;
}

.ms-content .mc-table table {
	width: 100%;
}

.ms-content .mc-table table tr {
	background: rgba(21, 22, 24, 0.9);
	margin-bottom: 10px;
}

.ms-content .mc-table table tr td {
	padding: 16px 0;
	width: 200px;
}

.ms-content .mc-table table tr td img {
	height: 30px;
	width: 50px;
}

.ms-content .mc-table table tr td h6 {
	color: #ffffff;
	display: inline-block;
}

.ms-content .mc-table table tr td.left-team {
	padding-left: 40px;
}

.ms-content .mc-table table tr td.left-team img {
	float: left;
	margin-right: 10px;
}

.ms-content .mc-table table tr td.left-team h6 {
	overflow: hidden;
	line-height: 30px;
}

.ms-content .mc-table table tr td.right-team {
	text-align: right;
	padding-right: 40px;
}

.ms-content .mc-table table tr td.right-team img {
	float: right;
	margin-left: 10px;
}

.ms-content .mc-table table tr td.right-team h6 {
	float: right;
	line-height: 30px;
}

.ms-content .mc-table table tr td.mt-content {
	width: 150px;
	text-align: center;
}

.ms-content .mc-table table tr td.mt-content .mc-op {
	font-size: 14px;
	color: #ffffff;
}

.ms-content .mc-table table tr td.mt-content h4 {
	color: #ffffff;
	font-weight: 700;
	margin-top: 14px;
	margin-bottom: 12px;
}

/*---------------------
  Soccer Section
-----------------------*/

.soccer-section {
	padding: 70px 0;
}

.soccer-section .col-lg-12 {
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.soccer-section .col-lg-3 {
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.soccer-item {
	height: 405px;
	position: relative;
	margin-bottom: 10px;
}

.soccer-item .si-tag {
	color: #ffffff;
	background: #C62828;
	font-size: 10px;
	font-weight: 500;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 3px 9px;
	position: absolute;
	left: 10px;
	top: 10px;
}

.soccer-item .si-text {
	position: absolute;
	left: 0;
	bottom: 25px;
	width: 100%;
	padding: 0 30px;
}

.soccer-item .si-text h5 {
	margin-bottom: 6px;
}

.soccer-item .si-text h5 a {
	color: #ffffff;
	font-weight: 500;
	line-height: 26px;
}

.soccer-item .si-text ul li {
	list-style: none;
	display: inline-block;
	font-size: 13px;
	color: #ffffff;
	margin-right: 20px;
	position: relative;
}

.soccer-item .si-text ul li:after {
	position: absolute;
	right: -12px;
	top: 0;
	content: "|";
}

.soccer-item .si-text ul li:last-child {
	margin-right: 0;
}

.soccer-item .si-text ul li:last-child:after {
	display: none;
}

/*---------------------
  Latest Section
-----------------------*/

.latest-section {
	padding-bottom: 30px;
}

.section-title.latest-title h3 {
	float: left;
}

.section-title.latest-title ul {
	text-align: right;
}

.section-title.latest-title ul li {
	display: inline-block;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	color: #151618;
	padding: 4px 12px;
	background: #f2f2f2;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	margin-right: 5px;
	cursor: pointer;
}

.section-title.latest-title ul li:last-child {
	margin-right: 0;
}

.section-title.latest-title ul li:hover {
	background: #C62828;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
}

.news-item {
	overflow: hidden;
	margin-bottom: 30px;
}

.news-item.left-news .ni-pic {
	height: 240px;
	position: relative;
	float: none;
}

.news-item.left-news .ni-pic .ni-tag {
	color: #ffffff;
	background: #C62828;
	font-size: 10px;
	font-weight: 500;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 3px 9px;
	position: absolute;
	left: 10px;
	top: 10px;
}

.news-item.left-news .ni-text {
	padding-top: 25px;
	overflow: visible;
}

.news-item.left-news .ni-text h4 {
	margin-bottom: 15px;
}

.news-item.left-news .ni-text h4 a {
	color: #151618;
	line-height: 32px;
	font-weight: 500;
}

.news-item.left-news .ni-text ul {
	margin-bottom: 20px;
}

.news-item.left-news .ni-text p {
	font-size: 14px;
	color: #636363;
	line-height: 24px;
}

.news-item .ni-pic {
	float: left;
	margin-right: 20px;
}

.news-item .ni-pic img {
	height: 100px;
	width: 100px;
}

.news-item .ni-text {
	overflow: hidden;
	padding-top: 6px;
}

.news-item .ni-text h5 {
	margin-bottom: 8px;
}

.news-item .ni-text h5 a {
	color: #151618;
	font-weight: 500;
	line-height: 26px;
}

.news-item .ni-text ul li {
	list-style: none;
	display: inline-block;
	font-size: 14px;
	color: #ababab;
	margin-right: 20px;
	position: relative;
}

.news-item .ni-text ul li i {
	color: #C62828;
}

.news-item .ni-text ul li:after {
	position: absolute;
	right: -12px;
	top: 0;
	content: "|";
}

.news-item .ni-text ul li:last-child {
	margin-right: 0;
}

.news-item .ni-text ul li:last-child:after {
	display: none;
}

.points-table table {
	width: 100%;
}

.points-table table thead tr th {
	font-size: 14px;
	color: #ffffff;
	font-weight: 500;
	background: #2c2d2f;
	padding: 14px 0 13px;
}

.points-table table thead tr th.th-o {
	text-align: center;
}

.points-table table tbody {
	border: 1px solid #e5e5e5;
	border-top: none;
	border-bottom: none;
}

.points-table table tbody tr {
	border-bottom: 1px solid #e7e7e7;
}

.points-table table tbody tr td {
	text-align: center;
	font-size: 14px;
	color: #636363;
	padding: 12px 0;
}

.points-table table tbody tr td.team-name {
	text-align: left;
	width: 130px;
}

.points-table table tbody tr td.team-name img {
	height: 22px;
	width: 36px;
	margin-right: 6px;
	display: inline-block;
}

.points-table table tbody tr td.team-name span {
	display: inline-block;
	font-size: 14px;
	color: #2d2d2d;
	font-weight: 500;
}

.points-table .p-all {
	font-size: 14px;
	color: #000000;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	background: #f2f2f2;
	display: block;
	text-align: center;
	padding: 15px;
}

/*---------------------
  Video Section
-----------------------*/


.video-slider.owl-carousel {
	margin-right: 0;
}

.video-slider.owl-carousel .col-lg-3 {
	max-width: 100%;
}

.video-slider.owl-carousel .owl-nav {
	position: absolute;
	right: 15px;
	top: -78px;
}

.video-slider.owl-carousel .owl-nav button {
	font-size: 20px;
	color: #636363;
	width: 30px;
	height: 30px;
	border: 1px solid #d5d5d5;
	line-height: 30px;
	text-align: center;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	margin-right: 10px;
}

.video-slider.owl-carousel .owl-nav button:last-child {
	margin-right: 0;
}

.video-slider.owl-carousel .owl-nav button:hover {
	background: #C62828;
	color: #ffffff;
	border-color: #C62828;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
}

.video-item {
	height: 200px;
	position: relative;
}

.video-item:hover .play-btn {
	opacity: 1;
	visibility: visible;
}

.video-item .vi-title {
	position: absolute;
	left: 0;
	top: 15px;
	width: 100%;
	padding: 0 20px;
}

.video-item .vi-title h5 {
	color: #ffffff;
	font-weight: 500;
	line-height: 26px;
}

.video-item .play-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-20px, -20px);
	-ms-transform: translate(-20px, -20px);
	transform: translate(-20px, -20px);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.video-item .vi-time {
	font-size: 14px;
	color: #ffffff;
	letter-spacing: 1px;
	display: inline-block;
	background: rgba(0, 0, 0, 0.7);
	padding: 3px 10px;
	position: absolute;
	right: 0;
	bottom: 0;
}

/*---------------------
  Popurlar News Section
-----------------------*/

.news-item.popular-item {
	height: 240px;
	position: relative;
}

.news-item.popular-item .ni-tag {
	color: #ffffff;
	background: #C62828;
	font-size: 10px;
	font-weight: 500;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 3px 9px;
	position: absolute;
	left: 10px;
	top: 10px;
}

.news-item.popular-item .ni-tag.tenis {
	background: #0047AB;
}

.news-item.popular-item .ni-tag.football {
	background: #e3ce1e;
}

.news-item.popular-item .ni-text {
	padding-top: 0;
	position: absolute;
	left: 0;
	bottom: 16px;
	width: 100%;
	padding: 0 20px;
}

.news-item.popular-item .ni-text h5 a {
	color: #ffffff;
}

.news-item.popular-item .ni-text ul li {
	color: #ffffff;
}

.news-item.popular-item .ni-text ul li i {
	color: #ffffff;
}

.follow-links {
	margin-bottom: 70px;
}

.follow-links ul li {
	list-style: none;
	overflow: hidden;
	padding: 12px 16px 10px 20px;
	margin-bottom: 10px;
}

.follow-links ul li.facebook {
	background: #506eaa;
}

.follow-links ul li.twitter {
	background: #55acee;
}

.follow-links ul li.google {
	background: #dd4b39;
}

.follow-links ul li i {
	font-size: 14px;
	color: #ffffff;
	float: left;
	line-height: 24px;
}

.follow-links ul li .fl-name {
	font-size: 16px;
	color: #ffffff;
	font-weight: 500;
	float: left;
	margin-left: 32px;
	position: relative;
}

.follow-links ul li .fl-name:after {
	position: absolute;
	left: -15px;
	top: -2px;
	height: 26px;
	width: 1px;
	background: #ffffff;
	content: "";
}

.follow-links ul li .fl-fan {
	font-size: 14px;
	color: #ffffff;
	float: right;
}

.vote-option {
	height: 290px;
}

.vote-option .vo-text {
	height: 100%;
	padding-left: 30px;
	padding-top: 42px;
}

.vote-option .vo-text h5 {
	color: #ffffff;
	font-weight: 700;
	line-height: 26px;
	margin-bottom: 20px;
}

.vote-option .vo-text .vt-item {
	margin-bottom: 4px;
}

.vote-option .vo-text .vt-item input {
	position: absolute;
	visibility: hidden;
}

.vote-option .vo-text .vt-item label {
	font-size: 16px;
	color: #ffffff;
	position: relative;
	padding-left: 22px;
	cursor: pointer;
}

.vote-option .vo-text .vt-item label:before {
	position: absolute;
	left: 0;
	top: 4px;
	width: 14px;
	height: 14px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	content: "";
}

.vote-option .vo-text .vt-item input[type=radio]:checked+label:before {
	background: #ffffff;
}

/*---------------------
  Footer
-----------------------*/

.footer-section {
	padding-top: 60px;
}

.fs-logo {
	margin-bottom: 30px;
}

.fs-logo .logo {
	margin-bottom: 10px;
}

.fs-logo .logo a {
	display: inline-block;
}

.fs-logo ul {
	margin-bottom: 22px;
}

.fs-logo ul li {
	font-size: 14px;
	color: #ababab;
	line-height: 25px;
	position: relative;
	list-style: none;
	padding-left: 30px;
}

.fs-logo ul li i {
	font-size: 16px;
	color: #C62828;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 8px;
}

.fs-logo .fs-social a {
	display: inline-block;
	height: 39px;
	width: 39px;
	border: 1px solid #3d3d3f;
	border-radius: 50%;
	text-align: center;
	line-height: 39px;
	color: #b3b7c8;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	margin-right: 10px;
	margin-bottom: 10px;
}

.fs-logo .fs-social a:last-child {
	margin-right: 0;
}

.fs-logo .fs-social a:hover {
	background: #C62828;
	border-color: #C62828;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
}

.fs-widget {
	margin-bottom: 30px;
	overflow: hidden;
}

.fs-widget h4 {
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 26px;
}

.fs-widget .fw-links {
	width: 42%;
	float: left;
}

.fs-widget .fw-links li {
	list-style: none;
}

.fs-widget .fw-links li a {
	font-size: 16px;
	color: #b5b8be;
	line-height: 36px;
	font-weight: 500;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.fs-widget .fw-links li a:hover {
	color: #C62828;
}

.fs-widget .fw-item {
	margin-bottom: 18px;
}

.fs-widget .fw-item h5 {
	margin-bottom: 8px;
}

.fs-widget .fw-item h5 a {
	color: #ffffff;
	font-weight: 500;
	line-height: 26px;
}

.fs-widget .fw-item ul li {
	list-style: none;
	display: inline-block;
	font-size: 14px;
	color: #ababab;
	margin-right: 20px;
	position: relative;
}

.fs-widget .fw-item ul li i {
	color: #dd1515;
}

.fs-widget .fw-item ul li:after {
	position: absolute;
	right: -12px;
	top: 0;
	content: "|";
}

.fs-widget .fw-item ul li:last-child {
	margin-right: 0;
}

.fs-widget .fw-item ul li:last-child:after {
	display: none;
}

.copyright-option {
	border-top: 1px solid #2d2e30;
	padding-top: 10px;
	padding-bottom: 12px;
	margin-top: 20px;
}

.copyright-option .co-text {
	font-size: 14px;
	color: #636363;
	float: left;
	line-height: 24px;
}

.copyright-option .co-widget {
	text-align: right;
}

.copyright-option .co-widget ul {
	list-style: none;
}

.copyright-option .co-widget ul li {
	font-size: 14px;
	display: inline-block;
	margin-right: 45px;
}

.copyright-option .co-widget ul li a {
	color: #636363;
}

.copyright-option .co-widget ul li:last-child {
	margin-right: 0;
}

/* --------------------------------- Other Pages Styles --------------------------------- */

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-section {
	height: 300px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
}

/* Overlay for breadcrumb background when using set-bg */
.breadcrumb-section.set-bg { position: relative; }
.breadcrumb-section.set-bg::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 0; }
.breadcrumb-section .bs-text { position: relative; z-index: 1; }

.breadcrumb-section .bs-text h2 {
	font-family: 'Poppins', sans-serif;
	font-size: 48px;
	color: #ffffff;
	font-weight: 600;
	text-transform: capitalize;
}

/*---------------------
  Schedule Section
-----------------------*/

.schedule-section {
	padding-top: 70px;
	padding-bottom: 70px;
}

.schedule-text .st-title {
	font-size: 22px;
	color: #ffffff;
	font-weight: 500;
	background: #dd1515;
	text-align: center;
	padding: 12px 0 14px;
	margin-bottom: 30px;
}

.schedule-text .st-table table {
	width: 100%;
}

.schedule-text .st-table table tbody tr {
	border-bottom: 1px solid #e5e5e5;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.schedule-text .st-table table tbody tr:last-child {
	border: none;
}

.schedule-text .st-table table tbody tr:hover {
	background: #f2f2f2;
	border-color: #f2f2f2;
}

.schedule-text .st-table table tbody tr td {
	width: 150px;
	padding: 16px 0;
}

.schedule-text .st-table table tbody tr td img {
	height: 30px;
	width: 50px;
}

.schedule-text .st-table table tbody tr td h4 {
	line-height: 30px;
	color: #151618;
	font-weight: 500;
}

.schedule-text .st-table table tbody tr td.left-team {
	padding-left: 20px;
}

.schedule-text .st-table table tbody tr td.left-team img {
	float: left;
	margin-right: 10px;
}

.schedule-text .st-table table tbody tr td.left-team h4 {
	overflow: hidden;
}

.schedule-text .st-table table tbody tr td.right-team {
	text-align: right;
	padding-right: 20px;
}

.schedule-text .st-table table tbody tr td.right-team img {
	float: right;
	margin-left: 10px;
}

.schedule-text .st-table table tbody tr td.right-team h4 {
	float: right;
}

.schedule-text .st-table table tbody tr td.st-option {
	text-align: center;
}

.schedule-text .st-table table tbody tr td.st-option h4 {
	color: #dd1515;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 14px;
	margin-bottom: 12px;
}

.schedule-text .st-table table tbody tr td.st-option .so-text {
	font-size: 14px;
	color: #636363;
}

.schedule-sidebar .ss-widget {
	margin-bottom: 55px;
}

.schedule-sidebar .ss-widget.other-sport {
	margin-bottom: 0;
}

.schedule-sidebar .ss-widget ul li {
	list-style: none;
	position: relative;
	padding-left: 22px;
}

.schedule-sidebar .ss-widget ul li a {
	font-size: 16px;
	color: #636363;
	line-height: 30px;
}

.schedule-sidebar .ss-widget ul li:before {
	position: absolute;
	left: 0;
	top: 11px;
	height: 8px;
	width: 8px;
	background: #636363;
	content: "";
	border-radius: 50%;
}

.schedule-sidebar .ss-league {
	margin-bottom: 65px;
}

.schedule-sidebar .ss-league .sl-item {
	margin-bottom: 25px;
	display: block;
	overflow: hidden;
}

.schedule-sidebar .ss-league .sl-item img {
	height: 22px;
	width: 36px;
	float: left;
	margin-right: 10px;
}

.schedule-sidebar .ss-league .sl-item span {
	font-size: 14px;
	color: #2d2d2d;
	font-weight: 500;
	overflow: hidden;
	line-height: 22px;
	display: inline-block;
}

/*---------------------
  Blog Section
-----------------------*/

.blog-section {
	padding-top: 70px;
	padding-bottom: 70px;
}

.large-blog {
	height: 500px;
	position: relative;
	margin-bottom: 50px;
}

.large-blog .bi-tag {
	font-size: 12px;
	color: #ffffff;
	background: #dd1515;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: inline-block;
	padding: 4px 15px;
	position: absolute;
	left: 20px;
	top: 20px;
}

.large-blog .bi-text {
	position: absolute;
	left: 0;
	bottom: 34px;
	width: 100%;
	padding: 0 30px;
}

.large-blog .bi-text h3 {
	margin-bottom: 15px;
}

.large-blog .bi-text h3 a {
	color: #ffffff;
	line-height: 38px;
	font-weight: 500;
}

.large-blog .bi-text ul li {
	list-style: none;
	display: inline-block;
	font-size: 13px;
	color: #ffffff;
	margin-right: 20px;
	position: relative;
}

.large-blog .bi-text ul li:after {
	position: absolute;
	right: -12px;
	top: 0;
	content: "|";
}

.large-blog .bi-text ul li:last-child {
	margin-right: 0;
}

.large-blog .bi-text ul li:last-child:after {
	display: none;
}

.blog-items .single-item {
    overflow: hidden;
    margin-bottom: 30px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.blog-items .single-item:last-child {
    margin-bottom: 0;
}

.blog-items .single-item .bi-pic {
    float: none;
    margin: 0;
}

.blog-items .single-item .bi-pic img {
    border-radius: 2px;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-items .single-item .bi-text {
    overflow: hidden;
    padding: 15px 15px 20px;
}

.blog-items .single-item .bi-text h4 {
    margin-bottom: 12px;
}

.blog-items .single-item .bi-text h4 a {
	color: #151618;
	line-height: 32px;
	font-weight: 500;
}

.blog-items .single-item .bi-text ul {
	margin-bottom: 20px;
}

.blog-items .single-item .bi-text ul li {
    list-style: none;
    display: inline-block;
    font-size: 13px;
    color: #777;
    margin-right: 20px;
    position: relative;
}

.blog-items .single-item .bi-text ul li i {
	color: #dd1515;
}

.blog-items .single-item .bi-text ul li:after {
	position: absolute;
	right: -12px;
	top: 0;
	content: "|";
}

.blog-items .single-item .bi-text ul li:last-child {
	margin-right: 0;
}

.blog-items .single-item .bi-text ul li:last-child:after {
    display: none;
}

/* Category tag for collage cards */
.blog-items .single-item .bi-text .bi-tag {
    color: #ffffff;
    background: #dd1515;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    margin-bottom: 8px;
}

.blog-items .single-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.blog-items .single-item .bi-text p {
	font-size: 14px;
	color: #636363;
}

.more-blog {
	margin-top: 50px;
}

.more-blog a {
	display: inline-block;
	font-size: 14px;
	color: #636363;
	border: 2px solid #e5e5e5;
	border-radius: 2px;
	font-weight: 500;
	text-transform: uppercase;
	padding: 10px 22px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	margin-right: 16px;
}

.more-blog a:hover {
	background: #dd1515;
	color: #ffffff;
	border-color: #dd1515;
}

.blog-sidebar .bs-categories {
	margin-bottom: 60px;
}

.blog-sidebar .bs-categories ul li {
	list-style: none;
	position: relative;
	padding-left: 22px;
}

.blog-sidebar .bs-categories ul li a {
	font-size: 16px;
	color: #151618;
	line-height: 30px;
}

.blog-sidebar .bs-categories ul li:before {
	position: absolute;
	left: 0;
	top: 11px;
	height: 8px;
	width: 8px;
	background: #636363;
	content: "";
	border-radius: 50%;
}

.blog-sidebar .bs-recent {
	margin-bottom: 65px;
}

.blog-sidebar .bs-popular-tag .tags a {
	display: inline-block;
	font-size: 14px;
	color: #636363;
	font-weight: 500;
	text-transform: uppercase;
	background: #f2f2f2;
	padding: 4px 16px;
	margin-right: 6px;
	margin-bottom: 10px;
}

/*---------------------
  Blog Hero
-----------------------*/

.blog-hero-section {
	height: 600px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.blog-hero-section .bh-text h2 {
	font-size: 48px;
	color: #ffffff;
	font-weight: 500;
	line-height: 60px;
	margin-bottom: 18px;
}

.blog-hero-section .bh-text ul li {
	list-style: none;
	display: inline-block;
	font-size: 13px;
	color: #ababab;
	margin-right: 20px;
	position: relative;
}

.blog-hero-section .bh-text ul li i {
	color: #dd1515;
}

.blog-hero-section .bh-text ul li:after {
	position: absolute;
	right: -12px;
	top: 0;
	content: "|";
}

.blog-hero-section .bh-text ul li:last-child {
	margin-right: 0;
}

.blog-hero-section .bh-text ul li:last-child:after {
	display: none;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details-section {
	padding-top: 70px;
	padding-bottom: 70px;
}

.left-blog-pad {
	padding-right: 60px;
}

.bd-text .bd-title {
	margin-bottom: 45px;
}

.bd-text .bd-pic {
	margin-bottom: 16px;
}

.bd-text .bd-pic .row {
	margin: 0 -10px;
}

.bd-text .bd-pic .col-md-4,
.bd-text .bd-pic .col-sm-6,
.bd-text .bd-pic .col-md-8 {
	padding: 0 10px;
}

.bd-text .bd-pic img {
	min-width: 100%;
	margin-bottom: 20px;
}

.bd-text .bd-more-title p {
	margin-bottom: 30px;
}

.bd-text .bd-tags {
	padding-bottom: 24px;
	border-bottom: 1px solid #e5e5e5;
	margin-top: 45px;
	margin-bottom: 65px;
}

.bd-text .bd-tags a {
	display: inline-block;
	color: #636363;
	background: #f2f2f2;
	border-radius: 2px;
	padding: 4px 24px;
	text-transform: uppercase;
	margin-right: 6px;
	margin-bottom: 6px;
}

.bd-text .comment-option h4 {
	color: #151618;
	font-weight: 500;
	margin-bottom: 35px;
}

.bd-text .comment-option .single-comment-item {
	margin-bottom: 30px;
}

.bd-text .comment-option .single-comment-item.reply-comment {
	padding-left: 131px;
}

.bd-text .comment-option .single-comment-item.reply-comment .sc-author {
	margin-right: 30px;
}

.bd-text .comment-option .single-comment-item.first-comment .sc-text {
	position: relative;
}

.bd-text .comment-option .single-comment-item.first-comment .sc-text:before {
	position: absolute;
	left: 0;
	top: 8px;
	height: 260px;
	width: 1px;
	background: #e9e9e9;
	content: "";
}

.bd-text .comment-option .single-comment-item.second-comment .sc-text {
	position: relative;
}

.bd-text .comment-option .single-comment-item.second-comment .sc-text:before {
	position: absolute;
	left: 0;
	top: 8px;
	height: 100px;
	width: 1px;
	background: #e9e9e9;
	content: "";
}

.bd-text .comment-option .single-comment-item .sc-author {
	float: left;
	margin-right: 30px;
}

.bd-text .comment-option .single-comment-item .sc-author img {
	height: 70px;
	width: 70px;
	border-radius: 50%;
}

.bd-text .comment-option .single-comment-item .sc-text {
	display: table;
	padding-left: 30px;
}

.bd-text .comment-option .single-comment-item .sc-text span {
	font-size: 12px;
	color: #dd1515;
}

.bd-text .comment-option .single-comment-item .sc-text h5 {
	color: #151618;
	font-weight: 500;
	margin-top: 8px;
	margin-bottom: 14px;
}

.bd-text .comment-option .single-comment-item .sc-text p {
	font-size: 14px;
	line-height: 22px;
}

.bd-text .comment-option .single-comment-item .sc-text .comment-btn {
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	color: #dd1515;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	padding: 4px 26px;
	font-weight: 500;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	margin-bottom: 10px;
}

.bd-text .comment-option .single-comment-item .sc-text .comment-btn.like-btn {
	margin-right: 10px;
}

.bd-text .comment-form h4 {
	color: #151618;
	font-weight: 500;
	margin-bottom: 35px;
}

.bd-text .comment-form form input {
	height: 46px;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	width: 100%;
	padding-left: 20px;
	font-size: 14px;
	color: #ababab;
	margin-bottom: 30px;
	padding-right: 5px;
}

.bd-text .comment-form form input::-webkit-input-placeholder {
	color: #ababab;
}

.bd-text .comment-form form input::-moz-placeholder {
	color: #ababab;
}

.bd-text .comment-form form input:-ms-input-placeholder {
	color: #ababab;
}

.bd-text .comment-form form input::-ms-input-placeholder {
	color: #ababab;
}

.bd-text .comment-form form input::placeholder {
	color: #ababab;
}

.bd-text .comment-form form textarea {
	height: 120px;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	width: 100%;
	padding-left: 20px;
	padding-top: 12px;
	font-size: 14px;
	color: #ababab;
	resize: none;
	margin-bottom: 32px;
	padding-right: 5px;
}

.bd-text .comment-form form textarea::-webkit-input-placeholder {
	color: #ababab;
}

.bd-text .comment-form form textarea::-moz-placeholder {
	color: #ababab;
}

.bd-text .comment-form form textarea:-ms-input-placeholder {
	color: #ababab;
}

.bd-text .comment-form form textarea::-ms-input-placeholder {
	color: #ababab;
}

.bd-text .comment-form form textarea::placeholder {
	color: #ababab;
}

.bd-text .comment-form form button {
	font-size: 14px;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 500;
	background: #dd1515;
	border: none;
	padding: 12px 34px 10px 40px;
	border-radius: 2px;
}

/*---------------------
  Map
-----------------------*/

.map {
	height: 500px;
}

.map iframe {
	width: 100%;
}

/*---------------------
  Contact Section
-----------------------*/

.contact-section {
	padding-bottom: 70px;
	padding-top: 90px;
}

.contact-form h2 {
	color: #151618;
	font-weight: 500;
	margin-bottom: 38px;
}

.contact-form form .group-in {
	margin-bottom: 25px;
}

.contact-form form .group-in label {
	font-size: 16px;
	color: #151618;
}

.contact-form form .group-in input {
	width: 100%;
	height: 46px;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	font-size: 14px;
	color: #151618;
	padding-left: 20px;
	padding-right: 5px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.contact-form form .group-in input:focus {
	border-color: #dd1515;
}

.contact-form form .group-in textarea {
	width: 100%;
	height: 140px;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	font-size: 14px;
	color: #151618;
	padding-left: 20px;
	padding-right: 5px;
	resize: none;
	padding-top: 12px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	margin-bottom: 8px;
}

.contact-form form .group-in textarea:focus {
	border-color: #dd1515;
}

.contact-form form button {
	font-size: 14px;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 500;
	background: #dd1515;
	border: none;
	padding: 12px 34px 10px 40px;
	letter-spacing: 1px;
}

.contact-info h2 {
	color: #151618;
	font-weight: 500;
	margin-bottom: 38px;
}

.contact-info p {
	font-size: 14px;
	line-height: 26px;
	margin-bottom: 30px;
}

.contact-info .ci-address {
	margin-bottom: 20px;
}

.contact-info .ci-address h5 {
	color: #151618;
	font-weight: 500;
	margin-bottom: 12px;
}

.contact-info .ci-address ul li {
	list-style: none;
	font-size: 14px;
	color: #636363;
	line-height: 30px;
}

/*---------------------
  Club Section
-----------------------*/

.club-section {
	padding-top: 80px;
	padding-bottom: 70px;
}

.club-content .cc-pic {
	text-align: center;
}

.club-content .cc-text .ct-title {
	margin-bottom: 45px;
}

.club-content .cc-text .ct-title h3 {
	font-size: 28px;
	color: #151618;
	font-weight: 500;
	margin-bottom: 30px;
}

.club-content .cc-text .ct-widget ul li {
	list-style: none;
	display: inline-block;
	width: 30%;
	float: left;
	margin-bottom: 12px;
}

.club-content .cc-text .ct-widget ul li h5 {
	color: #151618;
	font-weight: 500;
	margin-bottom: 8px;
}

.club-content .cc-text .ct-widget ul li .cw-social a {
	display: inline-block;
	color: #636363;
	margin-right: 20px;
}

.club-content .cc-text .ct-widget ul li .cw-social a:last-child {
	margin-right: 0;
}

.club-tab-list {
	margin-top: 30px;
}

.club-tab-list .nav {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding-bottom: 48px;
	border-bottom: 1px solid #e5e5e5;
}

.club-tab-list .nav .nav-item {
	margin-right: 45px;
}

.club-tab-list .nav .nav-item:last-child {
	margin-right: 0px;
}

.club-tab-list .nav .nav-item .nav-link {
	color: #ababab;
	font-weight: 500;
	font-size: 18px;
	background: transparent;
	border: none;
	padding: 0;
}

.club-tab-list .nav .nav-item .nav-link.active {
	color: #151618;
}

.club-tab-list .tab-content .club-tab-content .ct-item {
	overflow: hidden;
	padding: 20px 0;
	border-bottom: 1px solid #e5e5e5;
}

.club-tab-list .tab-content .club-tab-content .ct-item .ci-text {
	float: left;
}

.club-tab-list .tab-content .club-tab-content .ct-item .ci-text img {
	height: 70px;
	width: 70px;
	float: left;
	margin-right: 20px;
}

.club-tab-list .tab-content .club-tab-content .ct-item .ci-text h5 {
	color: #151618;
	font-weight: 500;
	overflow: hidden;
	padding-top: 24px;
}

.club-tab-list .tab-content .club-tab-content .ct-item .ci-name {
	float: right;
	color: #636363;
	font-size: 18px;
	font-weight: 500;
	padding-top: 22px;
}

/* HBAI Custom Styles */

/* Card hover effects */
.news-item, .soccer-item, .video-item {
	transition: all 0.3s ease;
}

.news-item:hover, .soccer-item:hover, .video-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Button hover effects */
.btn, .primary-btn {
	transition: all 0.3s ease;
}

.btn:hover, .primary-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Navigation hover effects */
.header__nav .nav-menu .main-menu li a {
	transition: all 0.3s ease;
}

.header__nav .nav-menu .main-menu li a:hover {
	transform: translateY(-2px);
}

/* Table hover effects */
.points-table table tbody tr, .schedule-text .st-table table tbody tr {
	transition: all 0.3s ease;
}

.points-table table tbody tr:hover, .schedule-text .st-table table tbody tr:hover {
	transform: translateX(5px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Social media hover effects */
.fs-logo .fs-social a {
	transition: all 0.3s ease;
}

.fs-logo .fs-social a:hover {
	transform: translateY(-3px) scale(1.1);
}

/* HBAI Brand Colors */
:root {
	--hba-red: #C62828;
	--hba-blue: #0047AB;
	--hba-red-dark: #B71C1C;
	--hba-blue-dark: #003A8C;
}

/* About Page Styles */
.about-text h3 {
	color: #C62828;
	margin-bottom: 20px;
	font-weight: 600;
}

.about-pic img {
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.vm-item, .structure-item, .activity-item, .membership-item {
	text-align: center;
	padding: 30px 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
	transition: all 0.3s ease;
}

.vm-item:hover, .structure-item:hover, .activity-item:hover, .membership-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.vm-icon, .si-icon, .mi-icon {
	margin-bottom: 20px;
}

.vm-item h3, .structure-item h4, .activity-item h4, .membership-item h4 {
	color: #151618;
	margin-bottom: 15px;
	font-weight: 600;
}

.activity-item {
	text-align: left;
	padding: 25px;
}

.activity-item h4 {
	color: #151618;
	margin-bottom: 15px;
	font-weight: 600;
}

/* Events Page Styles */
.result-item {
	background: #fff;
	border-radius: 8px;
	padding: 25px;
	margin-bottom: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.result-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ri-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #f0f0f0;
}

.ri-header h4 {
	color: #C62828;
	margin: 0;
	font-weight: 600;
}

.ri-date {
	color: #666;
	font-size: 14px;
}

.team-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.tr-team {
	display: flex;
	align-items: center;
	font-weight: 600;
}

.tr-team img {
	width: 30px;
	height: 20px;
	margin: 0 10px;
}

.tr-score {
	font-size: 24px;
	font-weight: 700;
	color: #C62828;
}

.calendar-item {
	background: #fff;
	border-radius: 8px;
	padding: 25px;
	margin-bottom: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
}

.calendar-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ci-date {
	background: #C62828;
	color: #fff;
	padding: 15px;
	border-radius: 8px;
	text-align: center;
	margin-right: 20px;
	min-width: 80px;
}

.ci-day {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.ci-month {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ci-content h4 {
	color: #151618;
	margin-bottom: 10px;
	font-weight: 600;
}

.ci-location {
	color: #666;
	font-size: 14px;
}

.ci-location i {
	color: #C62828;
	margin-right: 5px;
}

.registration-cta {
	padding: 60px 0;
}

.cta-content h2 {
	margin-bottom: 15px;
}

.cta-button {
	text-align: right;
}

@media (max-width: 768px) {
	.cta-button {
		text-align: center;
		margin-top: 20px;
	}
	
	.calendar-item {
		flex-direction: column;
		text-align: center;
	}
	
	.ci-date {
		margin-right: 0;
		margin-bottom: 15px;
	}
}

/* Players Page Styles */
.registration-form {
	background: #fff;
	padding: 40px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	font-weight: 600;
	color: #151618;
	margin-bottom: 8px;
	display: block;
}

.form-control {
	border: 2px solid #e0e0e0;
	border-radius: 4px;
	padding: 0px 15px;
	font-size: 14px;
	transition: all 0.3s ease;
}

.form-control:focus {
	border-color: #C62828;
	box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.25);
}

.registration-info {
	position: sticky;
	top: 20px;
}

.ri-item {
	background: #fff;
	padding: 25px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ri-item h4 {
	color: #151618;
	margin-bottom: 15px;
	font-weight: 600;
}

.ri-item ul {
	list-style: none;
	padding: 0;
}

.ri-item ul li {
	padding: 5px 0;
	color: #666;
}

.ri-item ul li:before {
	content: "✓";
	color: #C62828;
	font-weight: bold;
	margin-right: 8px;
}

.fee-info {
	text-align: center;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
}

.fee-amount {
	font-size: 36px;
	font-weight: 700;
	color: #C62828;
	margin-bottom: 5px;
}

.fee-period {
	color: #666;
	font-size: 14px;
	margin-bottom: 10px;
}

.player-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	margin-bottom: 30px;
}

.player-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.pc-image {
	position: relative;
	overflow: hidden;
	height: 250px;
}

.pc-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.player-card:hover .pc-image img {
	transform: scale(1.1);
}

.pc-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.player-card:hover .pc-overlay {
	opacity: 1;
}

.pc-stats {
	text-align: center;
	color: #fff;
}

.stat-item {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
}

.pc-info {
	padding: 20px;
}

.pc-info h4 {
	color: #151618;
	margin-bottom: 5px;
	font-weight: 600;
}

.pc-info p {
	color: #666;
	margin-bottom: 15px;
}

.pc-achievements {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.achievement {
	background: #C62828;
	color: #fff;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}

.ch-history-item {
	background: #fff;
	padding: 25px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}

.ch-history-item:hover {
	transform: translateX(5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.chi-year {
	background: #C62828;
	color: #fff;
	padding: 15px 20px;
	border-radius: 8px;
	font-size: 24px;
	font-weight: 700;
	margin-right: 20px;
	min-width: 80px;
	text-align: center;
}

.chi-content h4 {
	color: #151618;
	margin-bottom: 10px;
	font-weight: 600;
}

.chi-content p {
	color: #666;
	margin-bottom: 5px;
}

@media (max-width: 768px) {
	.registration-form {
		padding: 20px;
	}
	
	.ch-history-item {
		flex-direction: column;
		text-align: center;
	}
	
	.chi-year {
		margin-right: 0;
		margin-bottom: 15px;
	}
}

/* Gallery Page Styles */
.gallery-filter {
	text-align: center;
	margin-bottom: 50px;
}

.filter-controls {
	list-style: none;
	padding: 0;
	margin: 0;
}

.filter-controls li {
	display: inline-block;
	margin: 0 10px;
	padding: 10px 20px;
	background: #f8f9fa;
	color: #666;
	border-radius: 25px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
}

.filter-controls li.active,
.filter-controls li:hover {
	background: #C62828;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
}

.gallery-item {
	margin-bottom: 30px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.gallery-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gi-image {
	position: relative;
	overflow: hidden;
	height: 250px;
}

.gi-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gallery-item:hover .gi-image img {
	transform: scale(1.1);
}

.gi-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gallery-item:hover .gi-overlay {
	opacity: 1;
}

.gi-content {
	text-align: center;
	color: #fff;
}

.gi-content h4 {
	color: #fff;
	margin-bottom: 10px;
	font-weight: 600;
}

.gi-content p {
	color: #fff;
	margin-bottom: 15px;
}

.gi-link {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: #C62828;
	color: #fff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	font-size: 18px;
	transition: all 0.3s ease;
}

.gi-link:hover {
	background: #fff;
	color: #C62828;
	transform: scale(1.1);
}

.video-gallery-item {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	margin-bottom: 30px;
}

.video-gallery-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.vgi-image {
	position: relative;
	overflow: hidden;
	height: 200px;
}

.vgi-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vgi-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.video-gallery-item:hover .vgi-overlay {
	opacity: 1;
}

.vgi-play {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: #C62828;
	color: #fff;
	border-radius: 50%;
	line-height: 60px;
	text-align: center;
	font-size: 24px;
	transition: all 0.3s ease;
}

.vgi-play:hover {
	background: #fff;
	color: #C62828;
	transform: scale(1.1);
}

.vgi-content {
	padding: 20px;
}

.vgi-content h4 {
	color: #151618;
	margin-bottom: 10px;
	font-weight: 600;
}

.vgi-content p {
	color: #666;
	margin: 0;
}

.photo-item {
	position: relative;
	margin-bottom: 30px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.photo-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.photo-item img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.photo-item:hover img {
	transform: scale(1.1);
}

.pi-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.photo-item:hover .pi-overlay {
	opacity: 1;
}

.pi-link {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: #C62828;
	color: #fff;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	font-size: 16px;
	transition: all 0.3s ease;
}

.pi-link:hover {
	background: #fff;
	color: #C62828;
	transform: scale(1.1);
}

/* Gallery Filter Animation */
.gallery-item {
	opacity: 1;
	transform: scale(1);
	transition: all 0.3s ease;
}

.gallery-item.hidden {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}

@media (max-width: 767px) {
	.filter-controls li {
		margin: 5px;
		padding: 8px 16px;
		font-size: 14px;
	}
	
	.gi-image, .vgi-image {
		height: 200px;
	}
	
	.photo-item img {
		height: 150px;
	}
}

/*-------------------------------- Respinsive Media Styles --------------------------------*/

@media only screen and (min-width: 1301px) and (max-width: 1750px) {
	.trending-news-section .tn-title {
		width: 25%;
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1300px) {
	.trending-news-section .tn-title {
		width: 22%;
	}
}

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}
}

/* Medium Device: 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__nav .nav-menu .main-menu li {
		margin-right: 3px;
	}
	.ms-content .mc-table table tr td.left-team {
		padding-left: 15px;
	}
	.ms-content .mc-table table tr td.right-team {
		padding-right: 15px;
	}
	.club-content .cc-text .ct-widget ul li {
		width: 33.33%;
	}
	.trending-news-section .tn-title {
		width: 25%;
	}
	.left-blog-pad {
		padding-right: 15px;
	}
}

@media only screen and (max-width: 991px) {
	.vote-option {
		margin-bottom: 30px;
	}
	.header__nav .nav-menu {
		display: none;
	}
	.header__top .ht-info {
		display: none;
	}
	.header__top .ht-links {
		display: none;
	}
	.header__nav .container {
		position: relative;
	}

	/* Show canvas-open button on mobile */
	.canvas-open {
		display: block !important;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 18px;
		color: #ffffff;
		cursor: pointer;
		z-index: 9;
		padding: 10px;
		background: transparent;
		border: none;
	}

	.canvas-open:hover {
		color: #ffcc00;
	}

	.club-content .cc-pic {
		margin-bottom: 30px;
	}
	.schedule-sidebar {
		margin-top: 30px;
	}
	.blog-sidebar {
		margin-top: 40px;
	}
	.contact-info {
		padding-top: 40px;
	}
}

/*---------------------
  Slider Section
-----------------------*/
.slider-section {
	position: relative;
	height: 80vh;
	min-height: 500px;
	overflow: hidden;
}

.slider-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.slider {
	position: relative;
	width: 100%;
	height: 100%;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide.active {
	opacity: 1;
}

.slide img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
	z-index: 2;
}

.slide-content {
	position: relative;
	z-index: 3;
	text-align: left;
	color: white;
	max-width: 800px;
	padding: 0 20px;
}

.slide-title {

	color: white;
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	animation: slideInUp 1s ease-out;

}

.slide-desc {
	color: white;
	font-size: 1.2rem;
	margin-bottom: 30px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	animation: slideInUp 1s ease-out 0.3s both;
}

.slide-buttons {
	animation: slideInUp 1s ease-out 0.6s both;
}

.slide-btn {
	display: inline-block;
	padding: 12px 30px;
	margin: 0 10px;
	background: #C62828;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.3s ease;
	border: 2px solid #C62828;
}

.slide-btn:hover {
	background: transparent;
	color: #C62828;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
}

.slide-btn.blue {
	background: #0047AB;
	border-color: #0047AB;
}

.slide-btn.blue:hover {
	background: transparent;
	color: #0047AB;
	box-shadow: 0 4px 8px rgba(0, 71, 171, 0.3);
}

.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	font-size: 2rem;
	padding: 10px 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 4;
	backdrop-filter: blur(10px);
	border-radius: 0px;
}

.slider-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-50%) scale(1.1);
}

.slider-btn.prev {
	left: 30px;
}

.slider-btn.next {
	right: 30px;
}

.slider-dots {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 4;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all 0.3s ease;
}

.dot.active {
	background: #C62828;
	transform: scale(1.2);
}

.dot:hover {
	background: rgba(255, 255, 255, 0.8);
}

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

/* Responsive Slider Styles */
@media only screen and (max-width: 991px) {
	.slider-section {
		height: 70vh;
		min-height: 500px;
	}
	
	.slide-title {
		font-size: 2.5rem;
	}
	
	.slide-desc {
		font-size: 1rem;
	}
	
	.slider-btn {
		font-size: 1.5rem;
		padding: 10px 15px;
	}
	
	.slider-btn.prev {
		left: 15px;
	}
	
	.slider-btn.next {
		right: 15px;
	}
}

@media only screen and (max-width: 767px) {
	.slider-section {
		height: 60vh;
		min-height: 400px;
	}
	
	.slide-title {
		font-size: 2rem;
		margin-bottom: 15px;
	}
	
	.slide-desc {
		font-size: 0.9rem;
		margin-bottom: 20px;
	}
	
	.slide-btn {
		padding: 10px 20px;
		margin: 0 5px;
		font-size: 0.9rem;
	}
	
	.slider-btn {
		font-size: 1.2rem;
		padding: 8px 12px;
	}
	
	.slider-btn.prev {
		left: 10px;
	}
	
	.slider-btn.next {
		right: 10px;
	}
	
	.slider-dots {
		bottom: 20px;
	}
}

.games-part {
	margin-top: 100px;
	padding: 80px 0;
	background-image: url('../img/breadcrum.webp');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	position: relative;
}

.games-part::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.games-part .container {
    position: relative;
    z-index: 2;
}

/* Games Part card spacing and typography */
/* Use custom row class to control gutters consistently */
.games-part .parts-row {
    margin-left: -5px;
    margin-right: -5px;
    row-gap: 10px; /* ensure 10px vertical gap between rows */
}

.games-part .parts-row > [class*="col-"] {
    padding: 5px; /* 10px gap between columns (5px on each side) */
    margin-bottom: 10px; /* fallback vertical gap for browsers without flex gap */
}

.games-part .card-body {
    text-align: center; /* align heading and paragraph */
    margin: 0; /* avoid extra width that breaks grid */
    background-color: rgba(255, 255, 255, 0.909);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.games-part .card-body:hover {
    background-color: #ffffff; /* solid white on hover */
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    transform: translateY(-2px);
}

.games-part .card-body h5 {
    font-weight: 700; /* make card heading bolder */
}
.games-part .card-body {
	background-color: #ffffff8f;
}

/* ===================== FAQ Styles ===================== */
.faq-section { background: transparent; }
.faq-accordion .faq-item { background: rgba(255,255,255,0.9); border: 1px solid rgba(138, 130, 130, 0.4); margin-bottom: 0px; transition: background-color 0.25s ease; }
.faq-accordion .faq-item:hover { background-color: #fff; transform: translateY(-1px); }
.faq-accordion .faq-question { color: #222; padding: 16px 52px 16px 16px; text-decoration: none; position: relative; font-weight: 500; }
.faq-accordion .faq-question .icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #e63946; }
.faq-accordion .faq-question .minus-icon { display: none; }
.faq-accordion .faq-question[aria-expanded="true"] .plus-icon { display: none; }
.faq-accordion .faq-question[aria-expanded="true"] .minus-icon { display: inline-block; }
.faq-accordion .faq-answer { padding: 16px 16px 16px 16px; color: #282828; background-color: rgba(252, 238, 238, 0.9); font-weight: 400;}
.faq-accordion .collapse { border-top: 1px dashed rgba(0,0,0,0.1); }

/* FAQ left-column engagement cards */
.faq-section .engage-card {
  background-color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 10px 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  margin-bottom: 0; /* use column margin for row gap control */
}
.faq-section .engage-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.faq-section .engage-card h5 {
  font-weight: 700;
  margin-bottom: 6px;
}
.faq-section .engage-card p {
  color: #555;
  margin-bottom: 0;
}

/* 8px gutters for engagement cards */
.faq-section .engage-row {
  margin-left: -4px;  /* pair with 4px column padding for 8px gutters */
  margin-right: -4px;
  /* Avoid flex gap on Bootstrap rows to prevent wrapping issues */
}
.faq-section .engage-row > [class*="col-"] {
  padding-left: 4px;
  padding-right: 4px;
  margin-bottom: 8px; /* 8px vertical spacing between rows */
}

/* ===================== Committee Members Card Fixes ===================== */
/* Add comfortable padding and prevent size change on hover */
.member-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.member-card .member-info {
  padding: 16px;
}
.member-card .member-photo {
  display: block;
}
/* Disable image zoom inside committee member cards */
.member-card .hover-zoom img,
.member-card .hover-zoom img:hover {
  transform: none !important;
}

/* Keep a subtle movement without changing card size */
.member-card.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* ===================== Rule Book Spacing & Card Padding ===================== */
.rule-card {
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.rule-card .rule-icon {
  color: var(--hba-blue);
  font-size: 24px;
  margin-bottom: 8px;
}
.rule-card h4 { 
  margin-bottom: 6px;
}
.rule-card p {
  margin-bottom: 0;
}

/* Summary blocks: white background + inner padding */
.rules-summary {
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-bottom: 16px;
}
.rules-summary h4 { margin-bottom: 10px; }
.rules-summary .rules-list { margin: 0; padding-left: 0; }
.rules-summary .rules-list li { margin-bottom: 6px; }

/* Download block spacing for Rule Book page */
.download-section .download-card {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Table of contents spacing */
.table-of-contents .contents-list { margin-bottom: 12px; }