.banner_btn .btn_anim {
	border: none ;
	background-blend-mode: overlay;
	border-radius: 28px ;
	padding: 15px 30px;
	Font-family: Gotham;  
}

.banner_btn .button-file i::before {
	content: '' ;
	position: absolute ;
	left: 50% ;
	top: 50% ;
	width: 400px ;
	height: 400px ;
	transform: translate(-50%, -50%) rotate(0deg) ;
	animation: animationButton 2s ease-in-out infinite;
}

/* Main button container styling */
.banner_btn {
	display: flex;
	border: 1.5px solid transparent; /* Transparent base border */
	border-radius: 50px;
	padding: 3px;
	position: relative;
	overflow: hidden;
}

/* Inner button styling */
.banner_btn .button.secondary_btn {
	background: transparent;
	color: #fff;
	z-index: 1;
	border-radius: 50px;
}
.banner_btn .btn_anim {
	font-family: Gotham Book;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 20px;
	text-transform: capitalize;
}
/* typo */
.banner_btn .hero-banner {
	padding: 249px 0px 202px 0px;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
}
.banner_btn .hero-banner.active:before {
	background-color: rgba(0,0,0,0.5);
	z-index: 4;
}
{% if module.style.enable_overlay %}
.banner_btn .hero-banner:before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: linear-gradient(to right,rgba(0,0,0,0.7),rgba(0,0,0,0.2));
	z-index: 1;
}
{% endif %}
.banner_btn .content_box .banner_heading {
	margin-bottom: 25px;
	font-family: Gotham Book;
}
.banner_btn .content_box {
	max-width: 600px;
	position: relative;
	z-index: 3;
}

.banner_btn .content_box p, h1{
	margin: 0px;
}
.banner_btn .tagline {
	font-family: 'Gotham Light';
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 51px;
	letter-spacing: -0.02em;
	color: #FFFFFF;
}
.banner_btn .content_box .banner_heading,
.banner_btn .content_box p.tagline {
	line-height: 51px;
}
{% if module.section_background.background_type =='bg_video' %}
.banner_btn .banner_content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
}
{% endif %}

.banner_btn .banner_content_inner:before {
	content: "";
	width: 0px;
	position: absolute;
	left: 0px;
	height: calc(100% - 6px);
	border: 1px solid;
	border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 0.01%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
	border-image-slice: 1;
	box-sizing: border-box;
	bottom: 0;
	z-index: 1;
}
.banner_btn .hero-banner {
	position: relative;   
}

.banner_btn .banner_content_inner {
	max-width: 810px;
	margin-left: 72px;
	padding-left: 28px;
	position: relative;
	overflow: hidden;
}
.banner_btn video {
	width: 100%;
}


.button_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}



@media (max-width: 768px){
	.banner_btn .banner_heading span {
		font-weight: 700;
		font-family: Gotham;
	}
	.banner_btn .hero-banner {
		padding: 290px 0px 48px 0px;
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.banner_btn .banner_content_inner {
		margin-left: 0px;
		padding-left: 16px;
	}
	.banner_btn .banner_content_inner:before {
		height: 100%;
		border-image-source: linear-gradient(180deg, rgba(121, 117, 116, 1) 0%, rgba(121, 117, 116, 1) 0.01%, rgba(121, 117, 116, 1) 50%, rgba(255, 255, 255, 0) 100%);
	}
	.banner_btn .hero-banner:after {
		content: "";
		background: linear-gradient(179.38deg, rgba(0, 17, 25, 0) 42.19%, #001119 99.47%),linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		/*         z-index: 1; */
	}
	.banner_btn .banner_content.content-wrapper {
		position: relative;
		z-index: 1;
	}
	.banner_btn .btn_anim {
		padding: 10px 24px;
		font-size: 12px;
		line-height: 20px;
		font-family: 'Gotham';
	}
}


.banner_btn .button-file {
	position: relative ;
	overflow:hidden ;
	color: #fff ;
	z-index: 0 ;
	padding: 5px;
	display: inline-block;
}

.banner_btn .button-file i {
	content: '' ;
	position: absolute ;
	z-index: -1 ;
	inset: 0 ;
	border-radius: 40px ;
	padding: 2px ; /* the thickness of the border */
	/* the below will do the magic */
	-webkit-mask: 
		linear-gradient(#fff 0 0) content-box, /* this will cover only the content area (no padding) */ 
		linear-gradient(#fff 0 0) ; /* this will cover all the area */
	-webkit-mask-composite: xor ; /* needed for old browsers until the below is more supported */
	mask-composite: exclude ; /* this will exclude the first layer from the second so only the padding area will be kept visible */
}


@keyframes animationButton{
	0% {
		transform: translate(-50%, -50%) rotate(0deg) ;
	}
	25% {
		transform: translate(-50%, -50%) rotate(90deg);
	}
	50% {
		transform: translate(-50%, -50%) rotate(180deg) ;
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg) ;
	}
}