/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */
@import url('./font.css');

* {
	margin: 0;
	padding: 0;
}

#banner-homepage-router-style * {
	font-family: "SimplerPro";
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#banner-homepage-router-style {
	direction: rtl;
	font-size: 18px;
	color: black;
	position: relative;
	overflow: hidden;
	height: 595px;
	width: 100%;
	display: grid;
	margin-top: 69px;
	background: white;
}
#banner-homepage-router-style .container::before,
#banner-homepage-router-style .container::after {
	content: none;
}
#banner-homepage-router-style .container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	column-gap: 98px;
	position: relative;
	padding: 0;
	max-width: 1136px;
	max-width: 1370px;
	@media (max-width: 1920px) {
		max-width: 1160px;
	}
	@media (max-width: 1600px) {
		max-width: 1001px;
	}
	@media (max-width: 1200px) {
		max-width: 994px;
	}
	@media (max-width: 992px) {
		max-width: 770px;
		/*justify-content: center;*/
	}
	@media (max-width: 768px) {
		max-width: 326px;
	}
	@media (max-width: 577px) {
		transform: unset
	}
}
#banner-homepage-router-style .сol {
	width: 100%;
}
#banner-homepage-router-style .title {
	text-align: right;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "SimplerPro";
	font-size: 100px;
	font-style: normal;
	font-weight: 900;
	line-height: 82px; /* 82% */
	background: linear-gradient(246deg, #0073FF 8.86%, #6EDCFB 102.06%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 98px;
	margin-bottom: 12px;
	@media (min-width: 1200px) and (max-width: 1600px) {
		margin-top: 100px;
	}
	}
	#banner-homepage-router-style .subtitle {
		color: var(--Bezeq-01, #010636);
		text-align: right;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "SimplerPro";
		font-size: 44px;
		font-style: normal;
		font-weight: 400;
		line-height: 46.224px;
		margin-bottom: 13px;
	}
	#banner-homepage-router-style .banner-btn {
		display: flex;
		height: 64px;
		width: 222px;
		padding: 0 32px;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
		border-radius: 48px;
		background: var(--Bezeq-02--Accessible, #056AE5);
		color: var(--Basics-00, #FFF);
		text-align: right;
		font-feature-settings: 'liga' off, 'clig' off;
		/* Body/22/Semibold */
		font-family: "SimplerPro";
		font-size: 22px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration: none;
		position: relative;
		margin-bottom: 90px;
		transition: .3s;
	}
	#banner-homepage-router-style .banner-btn:hover {
		background: #0457BD;
	}
	#banner-homepage-router-style .banner-btn::after {
		content: "";
        display: inline-block;
		position: absolute;
		left: 31px;
		top: 50%;
		transform: translateY(-50%);
        width: 24px; 
        height: 24px; 
        background-image: url("./img/arrow.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        transition: transform 0.3s ease; 
	}
	#banner-homepage-router-style .note {
		color: var(--Bezeq-01, #010636);
		font-feature-settings: 'liga' off, 'clig' off;
		/* Small letters/14/Regular */
		font-family: "SimplerPro";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		text-align: right;
	}

	#lottie-animation-router-style {
		position: absolute;
		left: 0;
		top: 0;
		width: 2120px;
		height: 1496px;
	}

	@media (max-width: 2200px) {
		#lottie-animation-router-style {
			width: 1800px;
			height: 1275px;
		}

	}

	@media (max-width: 1920px) {
		#banner-homepage-router-style {
			overflow: hidden;
		}
		#banner-homepage-router-style .title {
			margin-bottom: 13px;
		}
		#banner-homepage-router-style .subtitle {
			margin-bottom: 24px;
		}
		#banner-homepage-router-style .banner-btn {
			margin-bottom: 98px;
		}
		#lottie-animation-router-style {
			left: -15%;
			width: 2000px;
			height: 1300px;
		}
	}

	@media (max-width: 1600px) {
		#banner-homepage-router-style .subtitle {
			margin-bottom: 12px;
		}
		#banner-homepage-router-style .banner-btn {
			margin-bottom: 110px;
		}
		#lottie-animation-router-style {
			left: -9%;
			width: 1480px;
			height: 1050px;
		}
	}

	@media (max-width: 1500px) {
		#lottie-animation-router-style {
			left: 40%;
			transform: translateX(-50%);
			width: 1480px;
			/* height: 1480px; */
		}
	}

	@media (max-width: 1200px) {
		#banner-homepage-router-style .title {
			font-size: 68px;
			line-height: 72px;
			margin-top: 94px;
			margin-bottom: 5px;
		}
		#banner-homepage-router-style .subtitle {
			font-size: 34px;
			margin-bottom: 30px;
		}
		#banner-homepage-router-style .banner-btn {
			margin-bottom: 124px;
		}
		#lottie-animation-router-style {
			left: 46%;
			width: 1480px;
			/* height: 1480px; */
		}
	}

	@media (max-width: 992px) {
		#banner-homepage-router-style .title {
			margin-top: 54px;
			margin-bottom: 5px;
		}
		#banner-homepage-router-style .subtitle {
			margin-bottom: 24px;
		}
		#banner-homepage-router-style .banner-btn {
			margin-bottom: 176px;
			width: 200px;
			height: 58px;
			font-size: 20px;
			padding: 0 27px;
		}
		#banner-homepage-router-style .banner-btn::after {
			left: 25px;
		}
		#lottie-animation-router-style {
			left: 39%;
			width: 1250px;
			height: 883px;
		}
	}

	@media (max-width: 768px) {
		#banner-homepage-router-style {
			height: 470px;
		}
		#banner-homepage-router-style::after{
			content: '';
			width: 100%;
			height: 17px;
			position: absolute;
			left: 0;
			bottom: 0;
			background: white;
		}
		#banner-homepage-router-style .title {
			font-size: 48px;
			line-height: 42px;
			margin-top: 26px;
			margin-bottom: 5px;
		}
		#banner-homepage-router-style .subtitle {
			font-size: 20px;
			line-height: 24px;
			margin-bottom: 10px;
		}
		#banner-homepage-router-style .banner-btn {
			font-size: 16px;
			width: 169px;
			height: 41px;
			padding: 0 22px;
			margin-bottom: 238px;
		}
		#banner-homepage-router-style .banner-btn::after {
			left: 16px;	
		}
		#banner-homepage-router-style .note {
			text-align: center;
			position: relative;
			z-index: 1;
		}
		#lottie-animation-router-style {
			left: 32%;
			width: 700px;
			height: 495px;
		}
	}

	@media (max-width: 650px) {
		#lottie-animation-router-style {
			left: 23%;
			width: 700px;
			/* height: 730px; */
		}
	}

	@media (max-width: 420px) {
		#lottie-animation-router-style {
			left: 18%;
			width: 700px;
			height: 450px;
		}
	}