/*
Yellow: #FEDD00
White: #FFFFFF
Red: #A50000*/    

html , body{
    /*background: linear-gradient(to right, #FE8C45, #D02A11);*/
    margin: 0;
    padding: 0;
   /* background: linear-gradient(
        #FE8C45,
        #FE8C45 var(--line-offset),
        #dedede var(--line-offset)
    );*/
    width: 100vw;
    /%height: 100vh;&/
    font-family: 'Lexend Deca', sans-serif;
    color: #878787;

    --menu-item-size: 50px;
    --green-color: #329680;
    --blue-color: #099c95;
   
    --white-color: #FFF;
    --gray-color: #EDEDED;
    --container-width: 700px;
    --container-height: 400px;
    --line-offset: calc((100% - var(--container-height))/ 2 + var(--menu-item-size) + 0.6em);
}



header{
	top:-2px !important;	
	.navbar-nav>li>a{
	  text-transform: uppercase;
	  font-size: 12px;
	  margin-right:20px;
	  color: #fff;
	}

.navbar{
	padding:0;
	}
	
	.navbar>.container, .navbar>.container-fluid{
		    justify-content: flex-start !important;
			
	}
	.navbarloc{
		position: absolute; bottom: -1px;right:100px;
	}
.navbar-toggler {
    /*padding: .20rem .50rem;*/
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid white;

    }

.wrapper{
      width: 100%;
    position: absolute;
    height: 100%;
    background-color: #F4C430;
    clip-path: polygon(86% 0%, 100% 0%, 100% 56%, 100% 100%, 90% 100%);
    transition: 1s all;
}

.navbar-brand{
  color:#fff;
  font-family: 'Allerta Stencil', sans-serif;
  padding-bottom: 2px;
  font-size: 27px;
}

/*.navbar-red:hover .wrapper{

  clip-path: polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 65% 100%);

}*/

.navbar-brand:hover{

  color:#fff;
  
}

.navbar-red {
	background: url(../../assets/icons/header.png) center center no-repeat;
	/*background: linear-gradient(to right, #ffffff, #ffffff);*/
	background-size: cover; 	
	display: flex;
	align-items: center;
	justify-content: center;	
	color: #17203D;	
	width: 100% !important;
	box-sizing: border-box;				
    color: #fff;   
}
.btn-clug{z-index:10;right:-20px; position: absolute;
}
.navbar-clip-left{
	color: #fff;
    left:0;
	width: 9%;
    position: absolute;
    height: 101%;
    background-color: #F4C430;
    /*clip-path: polygon(0 0, 75% 0%, 100% 100%, 0% 100%);*/
	clip-path: polygon(0 0, 71% 0%, 105% 100%, 0% 100%);
    transition: 1s all;
}

.container-fluid{
margin-left:0;
padding-left:0;
}
.all-show{

  z-index: 10;
}

}

.main-menu {
    display: flex;
    list-style: none;
    margin: auto 0;
    padding: 11px 0 0px 0;
}

.main-menu > li {
	box-sizing: border-box;
    height: var(--menu-item-size);
    width: calc(3.5 * var(--menu-item-size));  
    line-height: var(--menu-item-size);
    padding: 0 2em;
    margin: 1px;
    transition: 0.5s linear all;
    background: #084DAA;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
	margin-left: -10px;
}
.main-menu > li .nav-link{
	text-decoration :none;
	color: #ffffff;
	transition: color 0.3s ease;
	padding:0;
	display: contents;
}
.main-menu > li:not(.with-submenu) {
    clip-path: polygon(10% 0%, 0% 100%, 95% 100%, 100% 50%, 95% 0%);
    shape-outside: polygon(10% 0%, 0% 100%, 95% 100%, 100% 50%, 95% 0%);
}

.main-menu > li:nth-child() {
    transform: translateX(-5%);
}

/*
.main-menu > li:nth-child(2) {
    transform: translateX(-5%);
}

.main-menu > li:nth-child(3) {
    transform: translateX(-10%)
}

.main-menu > li:nth-child(4) {
    transform: translateX(-15%)
}*/
.main-menu i {
    margin-right: 5px;
}

.main-menu > li:hover:not(.active) {
    background: linear-gradient(to right, #00133D, #00133D);
    color: #ddd;
}

.main-menu > li:active:not(.active),
.main-menu > li:active:not(.with-submenu){
    background: var(--blue-color);
    color: var(--white-color);
}

.main-menu > li:hover i:not(li.active) {
    color: #D02A11;
}

.main-menu > li.active ,.main-menu > li.active >  a.nav-link  {
    color: #fff !important;
    background: linear-gradient(to right, #00133D, #00133D);
    cursor: default;   
}

main{
margin-top:100px;
width:100%;
background-color:#D8ECF7;
}
article {
   background: var(--gray-color);
   padding: 1em;
   border-radius: 0 0 5px 5px;
   box-shadow: 5px 5px 5px #CCC;
   position: relative;
   z-index: -1;
}

h1 {
    font-size: 115%;
    margin: 1em 2em;
    padding: 0;
    position: relative;
    color: #777;
}

.content {
    padding: 0 0 0 3em;
    font-size: 16px;
}

.submenu {
    display: none;
    position: absolute;
    z-index: 10;
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
    min-width: calc(3.5 * var(--menu-item-size) - 5%);
    box-shadow: 5px 5px 5px #CCC;
}

.with-submenu {
    position: relative;
    display: inline-block;
    clip-path: polygon(10% 0%, 0% 100%, 0% 500%, 95% 500%, 95% 100%, 100% 50%, 95% 0%);
    shape-outside: polygon(10% 0%, 0% 100%, 95% 100%, 100% 50%, 95% 0%);
}

.with-submenu:hover .submenu {
    display: block;
}

.submenu > li {
    background: #084DAA;
    border-bottom: 1px solid var(--gray-color); 
    color: #FFFFFF;
    padding: 1.2em 1em;
    transition: 0.3s all linear;
    display: block;
    line-height: 0%;
}

.submenu > li:hover ,.main-menu > li .nav-link:hover {
    background: var(--gray-color);
	color:#084DAA !important;
}

.submenu > li:active , .main-menu > li .nav-link:active {
    background: var(--white-color);
	color:#084DAA !important;
}	

	


header div .container-fluid{
margin-left:0;
padding-left:0;
}
.all-show{
  padding-left: 0 !important;
  z-index: 10;
}
header div h5{
	text-align: left;   
    color: #dddddd;
    font-size: 16px; 
	top: 10px;
    position: relative;	
	left:20px;
}
header div img{
	position:relative;
	height: auto;
	width: 100px;
	left: 0;
	border-radius: 5px;
}
/*
header div .navs {
	display: flex;
	
	background-color:#17203D   !important;
	color:#fff;
	font-size:12px;
	font-weight:700;
	border-bottom: 3px solid #EFB442;
}
header .nav{		   
	float: right;
	right: 5px;
	position: absolute;
}
header .nav a {
	color: #EFB442;
	margin:0 5px;
	text-decoration: none;
	text-align: center;
	font-size:12px;
}
header .nav a:hover {
	color:#ffffff;
	background-color: #17203D;	
	margin:0 5px;
	border-bottom:3px solid #EFB442;
}
header .nav > .nav-item > .nav-link.active  {
	
	background-color: #17203D;	
	margin:0 5px;
	border-bottom:3px solid #EFB442;
}
*/
footer {
	text-align: center;
	bottom: 0;
	height: auto; 
	.footer-img {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	   
		margin-top: -1px;
	}
	.footer-img img {
		width: 100%; 
		height: auto;
		max-width: 100%;		
	}
}

#home_container {
		
	.home-blocks{
		background: url(../../assets/icons/greenbg.png) center center no-repeat;
		background-size: cover;    
		align-items: center;
		justify-content: center;
		color: #17203D;
		width: 100% !important;
		box-sizing: border-box;
	}
    .carousel-inner, .full-size-img {
    height: 100%; /* Ensures full height for both */
}

	.full-size-img {


    height: 100%; 
}
	h2{
		color:#E52D27;
	}	
}

	.home-block{
		max-width: 100%;	   
		display: flex;
		flex-direction: row;		
		align-items: center;
		
	}

	#sponcers , #patners{
		background-color:#FFFFFF ; /*#040C38;*/	
		/*border:1px solid #FEDD00;*/
		border-radius:5px;
		color:#D02A11;
		justify-content: center;
		height: 95px !important;
	}
	#sponcers img{
		width:100%;			
	}
	#latest_news_container{		
		background: url(../../assets/icons/yellowbg.png) center center no-repeat;   
		background-size: cover; 		
		display: flex;
		align-items: center;
		justify-content: center;	
		padding:10px 0;
	
		#latest_news{
			display:flex;
			background-color:#FFFFFF;			
			border:1px solid #FEDD00;
			border-radius:5px;
			color:#17203D;
			justify-content: center;
		}
		#latest_news .block {
			width: 18rem;			
		}
		.card-img-top {
			width: 100%;
			border-top-left-radius: calc(.25rem - 1px);
			border-top-right-radius: calc(.25rem - 1px);
			height: 180px;
		}
		h5{
			color:#FFFFFF;
		}
	}
	
	
	.view_all {
		color: #FFFFFF;            
		text-decoration: none;            
		font-size:14px;
		font-weight:700;
	}
	.view_all : hover {
		color:#FFFFFF;	
		text-decoration: none;
	}
		
	
	section div h5, .sub_tittls h5{
		 text-transform: uppercase;
		text-align: left;
		color: #FFFFFF;
		font-weight:700;
	}
	section div a{
		color: #FFFFFF;
		font-weight:500;
	}
	#galary-container{
		background: url(../../assets/icons/yellowbg.png) center center no-repeat;
		background-size: cover; 		
		display: flex;
		align-items: center;
		justify-content: center;	
		padding:10px 0;
	}
	
	#photos .card {
		position: relative;
		overflow: hidden;
		border: none;
		    height: 225px;
	}

	#photos .card-img-top {
		transition: all 0.3s ease;
		height: 100%;
	}

	#photos .card-body {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.7); /* Dark background */
		color: white;
		padding: 20px;
		opacity: 0; /* Hide the text initially */
		transition: opacity 0.3s ease;
		transform: translateY(100%);
	}

	#photos .card:hover .card-body {
		opacity: 1; /* Show the text on hover */
		transform: translateY(0); /* Slide the text up */
	}

	#photos .card:hover .card-img-top {
		transform: scale(1.1); /* Slight zoom-in on hover */
	}

	#photos .card-title {
		font-size: 1.2rem;
		font-weight: bold;
	}

	#photos .card-text {
		font-size: 1rem;
	}


	#latest_events{
		display:flex;		
		border-radius:5px;
		color:#17203D;
		justify-content: center;
	
		#latest_events .block{
			width: 23rem;			
		}
	}
	
	#recent_matches_container{
		
		background: url(../../assets/icons/hggreenbg.png) center center no-repeat;   
		background-size: cover; 		
		display: flex;
		align-items: center;
		justify-content: center;
		
		
		section div h5, .sub_tittls h5 {
		text-transform: uppercase;
		text-align: left;
		color: #FFFFFF;
		font-weight: 700;
		font-size: 18px;
		}
		section div a {
		text-decoration: none;
    font-size: 14px;
    font-weight: 700;
	}

		
		#recent_matches{
		/*background-color:#84b637;
		/*border:1px solid #FEDD00;*/
		border-radius:5px;
		color:#040C38;
		border: unset;
		justify-content: center;	
		}
		 #upcoming_matches{
		/*background-color:#84b637;
		/*border:1px solid #FEDD00;*/
		border-radius:5px;
		color:#040C38;
		border: unset;
		
		}
		#recent_matches .carousel-item img , #upcoming_matches .carousel-item img{
			width:100%;
			height: 350px;
		}
		.card{
			    border: 1px solid #84b637;
		}
		.carousel{
			background:transparent !important; 
		
		}
		.card{
			background:transparent !important;
		}
	}

#back-to-top {
	  background-color: #EFB442;	
	  color:#FFFFFF;
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  display: none;
	  z-index: 99;
	}

	.social-media-block {
    position: fixed; /* Sticks the block to a fixed position */
    top: 50%; /* Centers vertically */
    right: 0px; /* Adjust the horizontal distance from the right edge */
    transform: translateY(-50%); /* Ensures vertical centering */
    display: flex;
    flex-direction: column; /* Stacks the icons vertically */
    gap: 10px; /* Adds space between the icons */
    z-index: 1000; /* Ensures it stays above other content */
	background: #084DAA;
    border-radius: 5px 0 0 5px;
	    padding: 5px;
	}

	.social-media-block a {
		text-decoration: none; /* Removes underline from links */
		color: #FFFFFF; /* Default icon color (change as needed) */
		transition: transform 0.3s, color 0.3s; /* Adds a hover effect */
	}

	.social-media-block a:hover {
		color: #ffffff; /* Change color on hover */
		transform: scale(1.2); /* Slightly enlarge the icon on hover */
	}

}
.carousel-inner{	
	 background: linear-gradient(to left, #FFFFFF, #084DAA);
    color: #ddd;
}
.carousel-indicators [data-target] {
	background-color: #ddd;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin: 2px;
}
.carousel-indicators .active {
	background-color: #EFB442 !important;
	/*border: 2px solid #A50000;*/
}
.carousel-control-prev-icon, .carousel-control-next-icon {
	background-color: #EFB442; 
	border-radius: 50%; 
}


#about_container{
	background-color:#fff !important;/*#0D2757*/
	width:100%;
	
	#about_title {
		
		background: url(../../assets/icons/title_bg.png) center center no-repeat;    
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30px;
		color: #17203D;
		margin-top: 40px;
		width: 100% !important;
		box-sizing: border-box;	
		margin-bottom:25px;	
	}
	#about_title h2 {
		padding:10px;
		/*border-bottom:5px solid #EFB442;*/
		color:#fff;
        text-transform: uppercase;		
	}
	p{
		line-height: 30px;
       text-align: justify;
	
	}
	.subtitle{
	 background: linear-gradient(to top, #FE8C45, #D02A11);
	 padding:10px 0;
	 border-radius:5px;
	}
	h5{
	    text-align: center;
	}
	table {
		border-radius:5px;
	}
	thead th {
		background-color: #17203D; 
		color: #EFB442;           
		border: 2px solid #ddd; 
		border-radius:5px;		
	}
	table, th, td {
		border: 1px solid #ddd; 
		border-collapse: collapse;
    }
	tbody tr:nth-child(odd) {
        background-color: #f9f9f9; 
	}

	tbody tr:nth-child(even) {
		background-color: #f1f1f1;
	}	
}

#leadership_container{
	background-color:#fff !important;/*#0D2757*/
	width:100%;
	
	#leadership_title {
		
		background: url(../../assets/icons/title_bg.png) center center no-repeat;    
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30px;
		color: #17203D;
		margin-top: 40px;
		width: 100% !important;
		box-sizing: border-box;	
		margin-bottom:25px;	
	}
	#leadership_title h2 {
		padding:10px;
		/*border-bottom:5px solid #EFB442;*/
		color:#fff;		
	}
	.leader_img{
		width: 100%;
		height: auto;
		max-width: 100%;
		display: block;
		margin: 0 auto; 	
	}
}
#media_container{
	background-color:#fff !important;/*#0D2757*/
	width:100%;
	#media_title {
		background: url(../../assets/icons/title_bg.png) center center no-repeat;    
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 40px;
		color: #17203D;
		margin-top: -1px;
		width: 100% !important;
		box-sizing: border-box;	
		margin-bottom:25px;			
	}
	#media_title h2 {				
		color:#fff;
		text-transform:uppercase;
	}
	#media_latest_news{
		display:flex;		
		border-radius:5px;
		color:#17203D;
		justify-content: center;
	}
	#media_latest_news .block{
		width: 22rem;		
	}
	#media_latest_news .card-body {
		background-color:#EFB442;
		color:#17203D;
	}
	#media_latest_news .block a {
		color:#17203D;
		display: flex;
		justify-content: right;    
		font-size: 11px;
		text-decoration: none;			
	}
}

#media_latest_news_row{
 .card-body {
		background-color:#FFFFFF;
		color:#17203D;
		
	}
 .card-body a{
		color:#17203D;
		display: flex;
		justify-content: right;    
		font-size: 11px;
		text-decoration: none;			
	}
}

#photo_container{
	background-color:#fff !important;/*#0D2757*/
	width:100%;
	#photo_title {
		
		background: url(../../assets/icons/title_bg.png) center center no-repeat;    
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30px;
		color: #17203D;
		margin-top: 40px;
		width: 100% !important;
		box-sizing: border-box;	
		margin-bottom:25px;	
	}
	#photo_title h2 {
		padding:10px;
		//border-bottom:5px solid #EFB442;
		color:#fff;		
	}
	#photos-carousel-container{
		/*background: linear-gradient(to left, #FE8C45, #D02A11);*/
		padding:15px;
		width:100%;		
	}
	#photos-carousel .card{
		border:none;
	}
	#photos-carousel .card-body{
		padding:0;
	}
	#photos-carousel-container1{
		background: linear-gradient(to left, #054BA9 ,#004098);
		padding:15px;
		width:100%;	
	}
	
	#photoCarouselmain {
        height: 450px;
    }

    #photoCarouselmain .carousel-inner {
		background: linear-gradient(to left, #FE8C45 ,#D02A11);
        height: 100%;
    }

    #photoCarouselmain .carousel-item {
        height: 100%; /* Ensure items fill the carousel */
        transition: transform 0.5s ease-in-out; /* Adjust transition timing */
    }

    #photoCarouselmain .carousel-item img {
        height: 100%;
        width: 100%;
        object-fit: cover; /* Keep images proportional and filling the space */
    }
}

#schedule_container{
	background-color:#fff !important;/*#0D2757*/
	width:100%;
	
	#schedule_title {
		background: url(../../assets/icons/contact-bg.png) center center no-repeat;    
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30px;
		color: #17203D;
		margin-top: 40px;
		width: 100% !important;
		box-sizing: border-box;	
		margin-bottom:25px;			
	}
	#schedule_title h2 {
		padding:10px;
		//border-bottom:5px solid #EFB442;
		color:#fff;	
	}
	
	table {
		border-radius:5px;
	}
	thead th {
		background-color: #17203D; 
		color: #EFB442;           
		border: 2px solid #ddd; 
		border-radius:5px;		
	}
	table, th, td {
		border: 1px solid #ddd; 
		border-collapse: collapse;
    }
	tbody tr:nth-child(odd) {
        background-color: #f9f9f9; 
	}

	tbody tr:nth-child(even) {
		background-color: #f1f1f1;
	}	
	
}

#contact_container{
	background-color:#fff !important;/*#0D2757*/
	width:100%;
	
	#contact_title {
		background: url(../../assets/icons/contact-bg.png) center center no-repeat;    
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30px;
		color: #17203D;
		margin-top: 40px;
		width: 100% !important;
		box-sizing: border-box;	
		margin-bottom:25px;			
	}
	#contact_title h2 {
		padding:10px;
		//border-bottom:5px solid #EFB442;
		color:#fff;	
	}
	#card-left .card{
	 height:330px;
	}
	
	#card-right .card{
	height:175px;
	}
	.card p{
		text-align:left;
	}
	
}

@media (max-width: 600px) {
	nav {
		flex-direction: column;
	}
	nav a {
		text-align: left;
		padding: 10px;
	}
}

@media (max-width: 768px) {
    /* Adjusting wrapper and navbar */
    .wrapper, .navbar-clip-left {
        clip-path: none;
        width: 100%;
    }

    .navbar-clip-left {
        display: none; /* Hide the left clip section on small screens */
    }

    .navbar-brand img {
        max-width: 40px;
    }

    .main-menu {
        display: block;
        text-align: center;
    }

	
   /* .main-menu > li {
        display: block;
        margin: 0 auto;
        padding: 0.5em 0;
    }

    /* Font and logo adjustments for smaller screens */
    .navbar-brand h5 {
        font-size: 1rem;
    }
}

/* Further adjustments for very small screens */
@media (max-width: 480px) {
    .navbar-red {		
        padding: 0.5em;
        text-align: center;
    }

    .social-media-block {
        display: flex;
        justify-content: center;
        margin-top: 0.5em;
    }

    .d-flex.flex-column.sim button {
        width: 100%;
        font-size: 0.9em;
    }
}

        
/* Ensure items stack vertically in mobile view */
@media (max-width: 991px) {
	.submenu {
		position: static;
		width: 100%;
	}
}
/* Mobile adjustments */
@media (max-width: 768px),@media only screen and (max-width: 390px) {
    .navbar-brand img {
        width: 50px; /* Adjust logo size */
        height: auto;
		position: absolute;
    }

    .navbar-collapse h5 {
        font-size: 1rem; /* Smaller font size for mobile */
    }

    /* Align content to the center and adjust margins */
    .navbar .container-fluid {
        flex-direction: column;
        align-items: center;
    }

    /* Adjust margin of elements in the header */
    .navbar .social-media-block {
        margin-top: 10px;
    }

    /* Hide non-essential items on small screens */
    .navbar-clip-left, .wrapper {
        display: none;
    }

    /* Collapsible menu style for mobile */
    .main-menu {
      /* display: none; /* Hide by default */
	          text-align: start;
			  color: #ddd;
    }
	.main-menu > li .nav-link{
	color: #ddd;
}
	 .main-menu  > li{
        /*background: none; /* Hide by default */
		color:#ddd;
    }
	.main-menu > li.active ,.main-menu > li.active >  a.nav-link  {
		/* background: none;*/	
		 color:#ddd;
	}
	.main-menu > li:hover:not(.active) {
   /*background: none;*/
		color: #ddd;
	}
	.head_text{
		display:flex;
	}
		button:focus {
		outline:none;
		outline: none;
	}
   
	.navbar-toggler {
    display: flex;
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: none;
    border-radius: none;
}
	
	header div h5 {
		text-align: left;
        color: #FFFFFF;
        font-size: 14px;
        top: 5px;
        position: relative;
        left: 0 !important;
}
   /* .main-menu > li {
        display: block;
        margin: 0 auto;
        padding: 0.5em 0;
    }*/
	#myCarousel{
		    width: 100% !important;
	}
	.full-size-img{
		 width: 100% !important;
	}
	.navbarloc{
		
		position: absolute;
		bottom: unset !important;
		right:65px !important;
	    top: 21px;
	}
	.btn-club{
		z-index: 10;
		right: 30px;
		position: absolute;
		top: 0px;
	}
	main{
margin-top:45px;
width:100%
}

    .navbar-red {
       
        color: #17203D;
        width: 100% !important;
        background: linear-gradient(to right, #FBD630, #E9A901) !important;
    }
}

/* Show the main menu on mobile when toggled */
@media (max-width: 768px) {
    .navbar-toggler.collapsed + .main-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
		color:#ddd;
    }
}