/* regular */
.m-banner-widget {
	--title-fs: 40px;
	--title-lh: 1.3;
	--title-color: #000;
	--text-color: #000;
	--text-bold: 700;
	--text-uppercase: uppercase;

	width: 100%;
	position:relative;
	padding: 50px 0; 
	overflow:hidden;
	align-content: center;
	min-height: 250px;
}

.m-banner-container { 
	max-width: calc( var(--content-width) + 40px ); 
	margin:0 auto; 
	padding:0 20px; 
}

.m-banner-content {
	position: relative;
	width:41%; 
	opacity: 0;
    transform: translateY(80px);
    animation: fadeInTop 1.2s ease forwards;
}

/* Banner image covers the right part of the container (full-height) */
.m-banner-image { 
	position:absolute; 
	top:0; 
	left:0; 
	width: 100%; 
	height: 100%;
	background-size:cover; 
	background-position:center left;
	pointer-events: none;
}

.m-banner-headline {
    font-size: var(--title-fs);
    font-weight: var(--text-bold);
    text-transform: var(--text-uppercase);
    line-height: var(--title-lh);
	color: var(--title-color);
	margin-bottom: 30px;
}
.m-banner-desc { 
	margin:0 0 30px; 
	color: var(--text-color);
}
.m-banner-actions { 
	display:flex; 
	align-items:center; 
	gap:20px; 
	flex-wrap: wrap;
}
	
.m-banner-hotline { 
	color: var(--title-color); 
	font-weight:600; 
}
.m-banner-hotline a { 
	background-image: linear-gradient(to bottom, var(--e-global-color-primary), var(--e-global-color-secondary));
    color: transparent;
	background-clip: text;
}

@media only screen and (min-width: 768px) {
	.m-banner-widget {
		min-height: 600px;
	}
}
@media only screen and (max-width: 1024px) {
	.m-banner-widget {
		--title-fs: 32px;
	}
	.m-banner-content { 
		width:60%; 
	}
}
@media only screen and (max-width: 767px) {
	.m-banner-widget {
		--title-fs: 28px;
	}
	.m-banner-content { 
		width:100%; 
	}
}

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