/*
Template Name: Athletics
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/


/*********************center****************/
/* Consistent height for all carousel items */
#carouselExampleCaptions .carousel-item {
	min-height: 750px;
	position: relative;
	overflow: hidden;
}

#carouselExampleCaptions .carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.carousel-video-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 600px;
	overflow: hidden;
}

.carousel-video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carousel-video-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carousel-image-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 750px;
	overflow: hidden;
}

.carousel-image-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carousel-caption{
	background-color: var(--black_transparent)!important;
	bottom:0;
	color:var(--bs-white);
	width:40%;
    padding:30px 30px;
	text-align:left;
	left:8%;
	bottom:25%;
 }
 .carousel-caption.right{
	left: unset;
     right: 10%;
 }

.carousel-caption h1{
   font-size:40px;
   color:var(--bs-white);
 }

.event-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
/* Hide mobile tags on desktop, show desktop tags */
.carousel-tags-mobile {
	display: none;
}
.carousel-tags-desktop {
	display: block;
}

.event-tag {
	display: inline-block;
	padding: 4px 12px;
	background-color: var(--secondry);
	color: var(--bs-white);
	font-size: 12px;
	font-weight: 500;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.event-date {
	display: flex;
	align-items: center;
	color: var(--bs-white);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 10px;
}

.event-date i {
	color: var(--secondry);
	font-size: 16px;
}

.carousel-control-next, .carousel-control-prev{
	width:7%;
}

/*********************center_end****************/

/*********************explore****************/
.masonry-item img {
      width: 100%;
      height: auto;
      display: block;
 }

.arrow_button{
	border-radius:50%;
	border:1px solid var(--bs-white);
	width:45px;
	height:45px;
	line-height:45px;
	text-align:center;
}

/*********************explore_end****************/


/*********************join****************/

#join {
    background-image: url(../image/3.jpg);
    background-position: center center;
    background-size: cover;
}
/*********************join_end****************/


/*********************social****************/
.social_1_left_inner{
	padding-top:50%;
	display:none;
	 transition: 0.3s;
}
.social_1_left:hover .social_1_left_inner{
	display:block;
	 transition: 0.3s;
}
.social_1_right  .social_1_left_inner{
	padding-top:20%;
}
/*********************social_end****************/


@media screen and (max-width : 767px){
#carouselExampleCaptions .carousel-item {
	min-height: 300px;
}
.carousel-video-wrapper {
	min-height: 300px;
}
.carousel-image-wrapper {
	min-height: 300px;
	position: relative;
}
/* Tags positioned in top right corner on mobile */
.carousel-tags-mobile {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	display: block;
}
.carousel-tags-desktop {
	display: none;
}
.carousel-tags-mobile .event-tags {
	margin-bottom: 0;
	justify-content: flex-end;
}
.carousel-tags-mobile .event-tag {
	font-size: 10px;
	padding: 3px 8px;
	margin-left: 4px;
}
.carousel-caption{
	position:static!important;
	width:100%;
	padding: 20px 15px !important;
	background-color: var(--primary) !important;
 }
.carousel-caption h1 {
    font-size: 24px;
	line-height: 1.2;
	margin-bottom: 10px;
}
.carousel-caption p {
	font-size: 14px;
	line-height: 1.4;
	margin-top: 10px !important;
}
.event-date {
	font-size: 12px;
	margin-bottom: 8px;
}
.event-date i {
	font-size: 14px;
}
.carousel-caption .button {
   padding: 12px 18px;
   font-size: 14px;
}
.program_1_left{
	margin-top:10px;
	margin-bottom:10px;
}
.exep_1 p{
	width:100%!important;
}
.exep_1 .ms-3{
	margin-left:5px!important;
}

.testim_1_right{
	padding:15px!important;
}
.social_1_right{
	margin-top:20px;
}

.about_pg_1 p{
	width:100%!important;
}
.about_pg_2_left{
	padding-right:0!important;
	margin-bottom:20px;
}
.team_1_left{
	margin-top:10px;
	margin-bottom:10px;
}
.sport_1_inner1{
	position:static!important;
	background:var(--black_transparent_dark);
	margin-top:20px;
}
.sport_1_inner1 .font_60{
	font-size:36px;
}
 }


@media (min-width:576px) and (max-width:767px) {
.explore_2_left_inner2 .fs-3{
	font-size:20px!important;
}
.arrow_button {
    width: 35px;
    height: 35px;
    line-height: 35px;
}
 }
 
@media (min-width:768px) and (max-width:991px) {
#carouselExampleCaptions .carousel-item {
	min-height: 500px;
}
.carousel-video-wrapper {
	min-height: 500px;
}
.carousel-caption{
	width:50%;
    padding:15px 15px;
	text-align:left;
	bottom:15%;
 }
.carousel-caption h1{
   font-size:40px;
 }

.testim_1_right {
	padding:15px!important;
}
.social_1_right  .social_1_left_inner{
	padding-top:15%;
}
.team_1_left  .font_15{
	  font-size:12px;
	  margin-top:0!important;
}
.team_1_left  .fs-4{
	  font-size:15px!important;
}
 }

@media (min-width:992px) and (max-width:1200px) {
#carouselExampleCaptions .carousel-item {
	min-height: 750px;
}
.carousel-video-wrapper {
	min-height: 750px;
}
.carousel-image-wrapper {
	min-height: 750px;
}
.carousel-caption{
    padding:15px 15px;
 }
.carousel-caption h1{
   font-size:40px;
 }
.testim_1_right {
	padding:20px!important;
}
.social_1_right  .social_1_left_inner{
	padding-top:17%;
}
 }

@media (min-width:1201px) and (max-width:1350px) {
#carouselExampleCaptions .carousel-item {
	min-height: 750px;
}
.carousel-video-wrapper {
	min-height: 750px;
}
.carousel-image-wrapper {
	min-height: 750px;
}
 }
@media screen and (min-width : 1400px){
#carouselExampleCaptions .carousel-item {
	min-height: 750px;
}
.carousel-video-wrapper {
	min-height: 750px;
}
.carousel-image-wrapper {
	min-height: 750px;
}
 }