@use '../../utils' as *;
/*----------------------------------------*/
/*  9.1 banner Style 1
/*----------------------------------------*/

// Banner style
.banner {
	position: relative;
	z-index: 1;

	&__shape {
		position: absolute;
		z-index: -1;
		top: -150px;
		left: -232.5px;
	}
	
	&__space {
		padding: 150px 0 80px;

		@media #{$md, $sm, $xs} {
			padding: 140px 0 75px;
		}
	}
	
	.container {
		z-index: 1;
		position: relative;
	}

	&__media {
		overflow: hidden;
		@include border-radius(40px);

		@media #{$sm, $xs} {
			@include border-radius(20px);
			height: 300px;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	&__content {

		h1 {
			max-width: 935px;
			margin-left: auto;
			margin-right: auto;
			font-style: normal;
			font-weight: 600;
			font-size: 88px;
			line-height: 100px;
			text-align: center;

			@media #{$lg} {
				font-size: 65px;
				line-height:75px;
			}
			@media #{$md} {
				font-size: 55px;
				line-height:65px;
			}
			@media #{$sm} {
				font-size: 45px;
				line-height:55px;
			}
			@media #{$xs} {
				font-size: 35px;
				line-height:45px;
			}
		}
	}
}