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

// Banner style
.banner-home{
	border-radius: 50px;
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
	&__all-shape{
		.left-tower{
			position: absolute;
			left: -30px;
			bottom: 0;
			@media(max-width: 1780px){
				display: none;
			}

			img{
				width: 100%;
				height: auto;
			}
		}
	}
	&__content{
		h1{
			color: var(--rr-common-white);
			font-family: var(--rr-ff-heading);
			font-size: var(--rr-fs-h1);
			font-weight: var(--rr-fw-bold);
			line-height: var(--rr-lh-h1);

			
			@media #{$xl} {
				font-size: 65px;
				line-height:70px;
			}
			@media #{$lg} {
				font-size: 58px;
				line-height:78px;
			  }
			  @media #{$md} {
				font-size: 48px;
				line-height:60px;
			  }
			  @media #{$sm} {
				font-size: 40px;
				line-height: 52px;
			  }
			  @media #{$xs} {
				font-size: 30px;
				line-height: 42px;
			  }
			  @media #{$xxs} {
				font-size: 27px;
				line-height: 37px;
			  }
		}

		.description{

			p{
				max-width: 624px;
				color: var(--rr-text-body);
				font-family: var(--rr-ff-body);
				font-weight: var(--rr-fw-regular);
				line-height: var(--rr-lh-h6);
				font-size: 20px;
				margin-bottom: 0;
			}
		}
	}

	&__btn__wrapper{
		row-gap: 20px;

	& .banner-video-button{
			align-items: center;
            gap: 30px;
			height: 50px;
			width: 50px;
			background: #d8ab5a;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			padding-top: 6px;
			padding-left: 2px;
			margin-left: 30px;
			margin-right: 10px;
		}

	}

	.video-text{
		color: var(--rr-common-white);
		font-weight: var(--rr-fw-sbold);
		font-size: var(--rr-fs-h6);
		line-height: var(--rr-lh-h6);
		display: flex;
		justify-content: center;
		align-items: center;
		font-style: normal;
		transition: .3s;
		&:hover{
			color: var(--rr-theme-primary);
		}
	}
	&__shape{
		max-width: 645px;
		
		@media #{$sm, $xs} {
			top: 420px;
		}
		@media #{$xs} {
			top: 350px;
		}
		@media #{$xxs} {
			top: 245px;
		}
		@media #{$mxm} {
			top: 165px;
		}
		@media #{$mxs} {
			top: 100px;
		}
		
		.ball-shape{
			position: absolute;
			bottom: -530px;

			@media(max-width: 895px){
				bottom: -360px;
			}
		}
		.man-img{
			position: absolute;
			bottom: -375px;
			left: -30px;
			z-index: 1;

			@media(max-width: 895px){
				bottom: -270px;
			}
		
		}
		.right-tower{
			position: absolute;
			right: -100px;
			top: -160px;
			transform: rotate(3deg);

			@media(max-width: 895px){
				right: -120px;
				top: -215px;
			}
		}
	}

	& .padding-space{
		padding: 235px 70px 194px 0px;

		@media #{$xl} {
			padding: 200px 0px 194px 0px;
		}
		@media #{$lg} {
			padding: 130px 0px 194px 0px;
		}
		@media #{$md} {
			padding: 120px 0px 105px 0px;
		}
		@media #{$sm, $xs} {
			padding: 135px 0px 685px 0px;
		}
		@media #{$xs} {
			padding: 75px 0px 515px 0px;
		}
		@media #{$mxm} {
			padding: 50px 0px 435px 0px;
		}
		@media #{$mxs} {
			padding: 50px 0px 370px 0px;
		}

	}
}
.banner-wrap{
	max-width: 1830px;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	border-radius: 50px;
	@media(max-width: 1820px){
		border-radius: 0;
	}
	
}