.banner {
	height: 600px;
	background-image: url('/assets/images/back.png');
	background-repeat: no-repeat;
	background-position: center left;
	padding: 0 !important;

	@media (max-width: 576px) {
		background-position: center 260px;
		background-size: 100%;
	}

	.banner-wrapper {
		position: relative;
		direction: rtl;

		.banner-content {
			text-align: center;
			float: right;
			margin-top: 150px;
			margin-right: 60px;

			@media (max-width: 576px) {
				margin: 0;
			}
		}

		.banner-title {
			font-size: 40px;
			color: #455464;
			font-weight: bold;

			@media (max-width: 576px) {
				font-size: 22px;
			}
		}

		.banner-sub {
			font-size: 25px;
			color: #455464;
			margin-top: 35px;
			line-height: 39px;

			@media (max-width: 576px) {
				font-size: 18px;
				line-height: 27px;
			}
		}

		.banner-service {
			width: 190px;
			height: 50px;
			margin-top: 60px;
			box-shadow: 0px 4px 10px rgba(230, 110, 0, 0.2);
			border-radius: 7px !important;
			padding-top: 13px;

			&.btn-secondary {
				animation: pulsing 1.2s ease infinite;
			}

			@-webkit-keyframes pulsing {
				0% {
					-webkit-box-shadow: 0 0 0 0 rgba(0, 15, 230, 0.4);
				}
				70% {
					-webkit-box-shadow: 0 0 0 10px rgba(0, 17, 252, 0);
				}
				100% {
					-webkit-box-shadow: 0 0 0 0 rgba(38, 0, 255, 0);
				}
			}
			@keyframes pulsing {
				0% {
					-moz-box-shadow: 0 0 0 0 rgba(0, 15, 230, 0.4);
					box-shadow: 0 0 0 0 rgba(0, 15, 230, 0.4);
				}
				70% {
					-moz-box-shadow: 0 0 0 10px rgba(0, 17, 252, 0);
					box-shadow: 0 0 0 10px rgba(0, 17, 252, 0);
				}
				100% {
					-moz-box-shadow: 0 0 0 0 rgba(0, 17, 252, 0);
					box-shadow: 0 0 0 0 rgba(0, 17, 252, 0);
				}
			}

			@media (max-width: 576px) {
				margin-top: 25px;
			}
		}

		.banner-arrow {
			position: absolute;
			background-image: url('/assets/images/arrow.png');
			background-repeat: no-repeat;
			height: 95px;
			width: 235px;
			top: 100px;
			left: 45%;
			margin-left: -120px;

			@media (max-width: 1400px) {
				display: none;
			}
		}
	}
}

.banner-button {
	background: rgba(255, 158, 13, 0.2);
	border-radius: 16px;
	text-align: center;
	outline: 0;
	border: none;
	padding: 5px 9px;
	margin-bottom: 20px;

	&:hover {
		background: rgba(255, 158, 13, 0.3);
	}

	span {
		font-size: 10px;
		color: #455464;
		padding: 0 3px;
	}
	strong {
		font-size: 13px;
		color: #455464;
		padding: 0 10px;
		font-weight: 400;
	}
}