.mainpage-slider{
	border-radius: var(--radius);
}

.banner{
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
    flex-direction: row;
    align-items: center;
	min-height: -webkit-fill-available;
}

.banner.show{}

.banner-wrapper{
	flex-direction: row;
}
.banner-wrapper > div {

}
.banner .banner-text{
	padding: 2rem 0 2rem 3rem;	
    z-index: 10;
	text-align: left;
	width: 40%;
}
.banner .banner-text h2, .banner .banner-text h3{
	margin-bottom: 2rem;
}
.banner .banner-text h2{
	font-weight: 600;
	font-size: 3rem;	
}
.banner .banner-text h2 span{
	font-size: 2.75rem;	
}
.banner .banner-text h3{
	font-weight: 600;
	font-size: 2.5rem;	
}
.banner .banner-text a{
	font-weight: 500;
	padding: 0.75rem 2rem;
}
.banner .banner-text a:hover{
	cursor: pointer;
}
.banner .banner-image{
	padding: 0 3rem 0 0;
	width: 60%;
	text-align: right;
}

.banner-image img{
    max-width: 100%;
    max-height: 600px;
    position: relative;
    width: auto;
    height: auto;
	position: relative;
	transition: transform var(--duration) ease;
}

.banner:hover .banner-image img{
	transform: translateY(-1.5rem);
}

.banner .banner-bg{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
	opacity: .5;
}

.swiper-pagination-bullet{
	border-radius: 0;
	width: 2rem;
	height: 3px;
	background: var(--white);
	opacity: .5;
}
.swiper-pagination-bullet-active {
    opacity: 1;
}

.bc-1 .banner-text h2{
	color: var(--black);
}
.bc-1 .btn{
	color: var(--white);
	background-color: var(--red);
	border-color: var(--red);	
}				
.bc-1 .btn:hover{
	background-color: var(--blue);
	border-color: var(--blue);	
}

.bc-2 .banner-text h2, .bc-3 .banner-text h2, .bc-4 .banner-text h2{
	color: var(--white);
}
.bc-2 .btn, .bc-3 .btn, .bc-4 .btn{
	color: var(--red);
	background-color: var(--white);	
	border-color: var(--white);	
}
.bc-2 .btn:hover, .bc-3 .btn:hover, .bc-4 .btn:hover{
	background-color: var(--yellow) !important;	
	border-color: var(--yellow) !important;		
}


.swiper-button-prev, .swiper-button-next{
	color: var(--white);
}

.banner.full .banner-wrapper{
	flex-direction: column-reverse;
}
.banner.full .banner-wrapper > div{
	
}

.banner.full .banner-text{

}
.banner.full .banner-image{
	width: 80%;
}
@media (max-width: 1399px) {  
	.banner .banner-text h2{
		font-size: 2.5rem;	
	}
	.banner .banner-text h2 span{
		font-size: 2.25rem;	
	}
	.banner .banner-text h3{
		font-size: 2rem;	
	}
}
@media (max-width: 1199px) {  
	.banner .banner-wrapper{
		flex-direction: column;
		height: 100%;
	}
	.banner.full .banner-wrapper {
		height: auto;
	}
	.banner.full .banner-text {
		text-align: center;
	}
	.banner.full .banner-image {
		width: 100%;
		height: auto;
	}
	.banner .banner-wrapper > div{
		width: 100%;
		height: 50%;
		position: relative;
	}
	.banner .banner-text h2, .banner .banner-text h3{
		margin-bottom: 1.5rem;
	}
	.banner .banner-text {
		padding: 2rem 3rem;
	}
	.banner .banner-image{
		padding: 0 3rem;
		text-align: center;
	} 
	.banner .banner-image img{
		max-width: 85%;
	} 	
}
@media (max-width: 991px) {  
	
   
}
@media (max-width: 767px) {  
	.banner.full .banner-wrapper{
		flex-direction: column;
	}
    .banner .banner-text{
        order: 1;
		padding: 1rem 3rem;
		text-align: center;
		flex-shrink: 0;
	}
	.banner .banner-text > a{
		display: inline-block;
	}
	.banner .banner-image{
		position: relative;
        order: 0;
		padding: 1rem 3rem;
		flex-grow: 1;
        display: block;
	}
	.banner .banner-image img{
		object-fit: contain;
        max-height: 100%;
        max-width: calc(100% - 4rem);
	}
	.banner.swiper-slide-active .banner-image img{

	}	
}
@media (max-width: 575px) {
	.mainpage-slider{
		height: auto !important;
	}
	.banner .banner-wrapper > div {
        height: auto;
    }
    .swiper-button-prev, .swiper-button-next{
        display: none;
    }
    .banner .banner-text {
        padding: 1rem 2rem;
    }
	.banner .banner-text h2{
        font-size: 1.5rem;	
    }
	.banner .banner-image{
		padding: 1rem 1rem;
		aspect-ratio: 1/1;
	} 
	.banner .banner-image img{
		max-width: 100%;
	}
	.banner.full .banner-image{
		aspect-ratio: unset;
	}
}