/*------------------------------------*\
	#Slider
\*------------------------------------*/

.slider {
	padding-top   : 0;
	padding-bottom: 0;

	.slide {
		padding-top: 0;
		height     : 650px;
		display    : flex;
		align-items: center;

		.slide-content {
			display        : flex;
			justify-content: center;
			flex-direction : column;

			@media #{$maxTablet} {
				align-items: center;
			}

			.slide-subheadline {
				font-family   : var(--global--font-body);
				font-weight   : 700;
				font-size     : 16px;
				line-height   : 1;
				color         : var(--global--color-gray);
				margin-bottom : 20px;
				text-transform: capitalize;

				@media #{$maxTablet} {
					text-align : center;
					line-height: 1.5;
				}
			}

			.slide-headline {
				font-family   : var(--global--font-heading);
				font-weight   : 700;
				font-size     : 75px;
				line-height   : 75px;
				color         : var(--global--color-white);
				margin-bottom : 24px;
				text-transform: capitalize;

				@media #{$noteBook} {
					font-size  : 60px;
					line-height: 1.3;
				}

				@media #{$maxSmall} {
					font-size  : 32px;
					line-height: 1.4;
				}

				@media #{$maxTablet} {
					text-align: center;
				}
			}

			.slide-desc {
				font-family  : var(--global--font-body);
				font-weight  : 700;
				font-size    : 18px;
				line-height  : 29px;
				color        : var(--global--color-gray);
				margin-bottom: 41px;

				@media #{$maxTablet} {
					text-align: center;
				}
			}

			.slide-action {
				margin-bottom: 0px;
				display      : flex;
				align-items  : center;

				@media #{$maxSmall} {
					display       : flex;
					flex-direction: column;
					align-items   : center;
				}

				.btn {
					justify-content: space-between;
					border-radius  : 4px;
					padding        : 30px;
					box-shadow     : 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
					font-family    : var(--global--font-body);
					font-size      : 15px;
					font-weight    : 700;
					display        : inline-flex;
					width          : 200px;
					height         : 65px;
					margin-right   : 30px;

					&:last-child {
						margin-right: 0;
					}

					@media #{$maxSmall} {
						width        : 190px;
						height       : 50px;
						margin-right : 0;
						margin-bottom: 20px;

						&:last-child {
							margin-bottom: 0;
						}
					}

					i {
						font-size   : 12px;
						margin-right: 0;
					}
				}
			}

			.slide-list {
				margin-right: 40px;

				@media #{$maxSmall} {
					display        : flex;
					flex-wrap      : wrap;
					align-items    : center;
					justify-content: center;
					margin-right   : 0;
				}

				.icon {
					margin-right: 35px;
					display     : inline-block;

					&:last-child {
						margin-right: 0;
					}

					@media #{$maxSmall} {
						margin-right : 0;
						margin       : 0 15px;
						margin-bottom: 15px;

						&:last-child {
							margin-right: 15px;
						}
					}

					&:hover {
						i {
							transform: translateY(-10px);
						}
					}

					i {
						display        : flex;
						justify-content: center;
						align-items    : center;
						transition     : 0.3s ease-in-out;

						&::before {
							margin-left: 0;
							font-size  : 67px;
							color      : var(--global--color-white);
						}
					}
				}
			}
		}

		.slider-panel-holder {
			display        : flex;
			flex-direction : column;
			flex-grow      : 1;
			justify-content: center;

			@media #{$maxTablet} {
				align-items: center;
			}

			.slider-panel {
				background-color: var(--global--color-white);
				position        : relative;
				padding         : 40px;
				display         : flex;
				flex-direction  : column;
				align-items     : center;
				text-align      : center;
				box-shadow      : 0px 5px 83px 0px rgba(40, 40, 40, 0.08);
				border-radius   : 8px;
				max-width       : 270px;

				@media #{$maxSmall} {
					padding: 30px;
				}

				@media #{$noteBook} {
					padding: 20px;
				}

				&::before {
					content         : '';
					position        : absolute;
					top             : 0;
					left            : 50%;
					transform       : translateX(-50%);
					height          : 4px;
					width           : calc(100% - 80px);
					background-color: var(--global--color-primary);

					@media #{$maxSmall} {
						width: calc(100% - 60px);
					}

					@media #{$noteBook} {
						width: calc(100% - 40px);
					}
				}

				.panel-icon {
					margin-bottom: 23px;

					&:before {
						font-size  : 75px;
						margin-left: 0;
						color      : var(--global--color-heading);
					}
				}

				.panel-title {
					font-size     : 19px;
					line-height   : 29px;
					color         : var(--global--color-secondary);
					text-transform: capitalize;
					margin-bottom : 10px;
				}

				.panel-desc {
					font-size    : 15px;
					line-height  : 25px;
					margin-bottom: 17px;
				}

				a {
					display         : inline-flex;
					justify-content : center;
					align-items     : center;
					width           : 32px;
					height          : 32px;
					background-color: var(--global--color-primary);
					border-radius   : 50%;
					color           : var(--global--color-white);
					transition      : 0.3s ease-in-out;

					&:hover {
						transform: translateX(10px);
					}
				}
			}
		}
	}

	.carousel-navs {
		.owl-nav {
			@media #{$maxTablet} {
				display: none;
			}

			span {
				font-size: 0;
			}

			.owl-next:before,
			.owl-prev:before {
				color      : rgba(255, 255, 255, 0.5);
				font-family: "carousel" !important;
				font-size  : 44px;
				transition : 0.3s ease-in-out;
			}

			.owl-prev:before {
				content: "\e990";
			}

			.owl-next:before {
				content: "\e991";
			}

			.owl-next,
			.owl-prev {
				position : absolute;
				top      : 50%;
				transform: translateY(-50%);

				&:hover {
					&::before {
						color: white;
					}
				}
			}

			.owl-next {
				right: 30px;
			}

			.owl-prev {
				margin-right: 0;
				left        : 30px;
			}
		}
	}

	&.slider-1 {
		.slide {
			@media #{$maxTablet} {
				height        : auto;
				padding-top   : 70px;
				padding-bottom: 110px;
			}

			.slide-content {
				@media #{$maxTablet} {
					margin-bottom: 50px;
				}

				.slide-list {
					@media #{$maxSmall} {
						margin-bottom: 25px;
					}
				}
			}
		}
	}

	&.slider-2 {
		.carousel-dots {
			@media #{$minLarge} {
				display       : flex;
				flex-direction: column;
			}

			.owl-dots {
				@media #{$minLarge} {
					padding-right  : var(--bs-gutter-x, .75rem);
					padding-left   : var(--bs-gutter-x, .75rem);
					margin-right   : auto;
					margin-left    : auto;
					position       : relative;
					max-width      : 960px;
					bottom         : auto;
					order          : -1;
					justify-content: flex-start;
					transform      : translateY(80px);
					margin-top     : -6px;
				}

				@media #{$minXlarge} {
					max-width: 1140px;
				}
			}
		}
	}

	&.slider-3 {
		.slide-content {
			.slide-headline {
				margin-bottom: 34px;
			}

			.slide-list {
				margin-right : 0;
				margin-bottom: 32px;

				li {
					&::before {
						@media #{$maxSmall} {
							margin-right: 10px;
							flex-shrink : 0;
						}
					}
				}
			}

			.slide-action {
				@media #{$maxTablet} {
					justify-content: center;
				}

				.btn {
					&:first-child {
						margin-right: 40px;

						@media #{$maxSmall} {
							margin-right: 0;
						}

						&:hover {
							i {
								color: var(--global--color-white);
							}
						}

						i {
							color     : var(--global--color-heading);
							transition: 0.3s ease-in-out;
						}
					}
				}

				.btn-video {
					&:hover {
						span {
							color: var(--global--color-heading);
						}

						i {
							background-color: var(--global--color-heading);
							color           : var(--global--color-white);
						}
					}

					i {
						width       : 65px;
						height      : 65px;
						margin-right: 30px;
					}

					span {
						transition    : 0.3s ease-in-out;
						font-family   : var(--global--font-body);
						font-size     : 15px;
						font-weight   : 700;
						color         : var(--global--color-white);
						text-transform: capitalize;
					}
				}
			}
		}
	}
}

.hero {
	padding-bottom: 0;

	.hero-content {
		padding-top   : 185px;
		padding-bottom: 26px;

		@media #{$maxTablet} {
			text-align : center;
			padding-top: 120px;
		}

		.hero-subtitle {
			font-family  : var(--global--font-body);
			color        : var(--global--color-gray);
			font-size    : 16px;
			line-height  : 1;
			font-weight  : 700;
			margin-bottom: 15px;

			@media #{$maxTablet} {
				line-height: 1.5;
			}
		}

		.hero-title {
			font-family   : var(--global--font-heading);
			color         : var(--global--color-white);
			font-weight   : 500;
			font-size     : 40px;
			line-height   : 55px;
			margin-bottom : 19px;
			text-transform: capitalize;

			@media (min-width:992px) and (max-width:1199px) {
				font-size: 35px;
				;
				line-height: 1.4;
			}

			@media #{$maxSmall} {
				font-size  : 32px;
				line-height: 1.4;
			}
		}

		.hero-desc {
			font-family  : var(--global--font-body);
			color        : var(--global--color-gray);
			font-size    : 16px;
			font-weight  : 400;
			line-height  : 27px;
			margin-bottom: 31px;
		}

		.hero-action {
			margin-bottom: 105px;

			@media #{$maxSmall} {
				display       : flex;
				flex-direction: column;
				align-items   : center;
				margin-bottom : 70px;
			}

			.btn {
				font-family : var(--global--font-body);
				font-size   : 15px;
				font-weight : 700;
				display     : inline-flex;
				width       : 210px;
				height      : 60px;
				margin-right: 30px;

				@media #{$maxSmall} {
					margin-right : 0;
					margin-bottom: 15px;
					height       : 50px;
					width        : 210px;
				}

				@media (min-width:992px) and (max-width:1250px) {
					width        : 170px;
					margin-bottom: 15px;
				}

				&:last-child {
					margin-right: 0;
				}

				&.btn--white {
					box-shadow: 2.121px 2.121px 3px rgba(3, 21, 50, 0.05);
				}
			}
		}

		.breadcrumb {
			@media #{$maxTablet} {
				justify-content: center;
			}

			.breadcrumb-item+.breadcrumb-item {
				padding-left: 0;
				display     : flex;
				align-items : center;

				a {
					font-size  : 14px;
					line-height: 1;
				}
			}

			>li+li:before {
				font-family: "Font Awesome 5 Free";
				font-weight: 700;
				font-size  : 10px;
				padding    : 0 10px;
				color      : var(--global--color-white);
				content    : "\f054";
			}
		}
	}

	.hero-panel-holder {
		display        : flex;
		justify-content: flex-end;

		@media #{$maxTablet} {
			justify-content: center;
			margin-bottom  : 30px;
		}

		.hero-panel {
			background-color: var(--global--color-white);
			border-radius   : 8px 0 8px 8px;
			padding         : 26px 40px 39px;
			max-width       : 290px;

			.panel-content {
				display       : flex;
				flex-direction: column;

				@media #{$maxTablet} {
					align-items: center;
				}

				i {
					color        : #51668a;
					margin-bottom: 12px;
					display      : inline-block;

					&::before {
						margin-left: 0;
						font-size  : 49px;
					}
				}

				h5 {
					font-family   : var(--global--font-heading);
					font-weight   : 500;
					font-size     : 19px;
					line-height   : 28px;
					color         : var(--global--color-heading);
					margin-bottom : 14px;
					text-transform: capitalize;
				}

				p {
					font-family  : var(--global--font-body);
					font-weight  : 400;
					font-size    : 14px;
					line-height  : 24px;
					color        : var(--global--color-body);
					margin-bottom: 21px;
				}

				.btn {
					width              : 155px;
					height             : 42px;
					border-radius      : 8px 8px 0 8px;
					border             : 2px solid;
					transition-property: background, color, border-color;
					border-color       : #687596;

					&::before {
						background-color: var(--global--color-secondary);
						width           : calc(100% + 4px);
						height          : calc(100% + 4px);
						top             : -2px;
						left            : -2px;
					}

					&:hover {
						border-color: #213360;
					}
				}
			}

			&.hero-panel-dark {
				background-color: #435ba1;

				.panel-content {

					i,
					h5,
					p {
						color: var(--global--color-white);
					}

					.btn {
						background-color   : transparent;
						color              : var(--global--color-white);
						border-color       : #7284b9;
						border             : 2px solid;
						transition-property: background, color, border-color;

						&::before {
							background-color: var(--global--color-primary);
							width           : calc(100% + 4px);
							height          : calc(100% + 4px);
							top             : -2px;
							left            : -2px;
						}

						&:hover {
							border-color: var(--global--color-primary);
							color       : var(--global--color-white);
						}
					}
				}
			}
		}

		.phone-card {
			display         : flex;
			background-color: #435ba1;
			padding         : 35px 40px 31px;
			border-radius   : 0 32px 0 0;
			max-width       : 470px;

			@media #{$minLarge} {
				transform: translateY(80px);
			}

			@media #{$maxSmall} {
				flex-direction: column;
				align-items   : center;
				text-align    : center;
			}

			.card-icon {
				flex-shrink : 0;
				margin-right: 30px;

				@media #{$maxSmall} {
					margin-right: 0;
				}

				i {
					&::before {
						display    : flex;
						transform  : translateY(-4px);
						font-size  : 50px;
						margin-left: 0;
						color      : var(--global--color-white);
					}
				}
			}

			.card-content {
				h5 {
					font-weight   : 500;
					font-size     : 19px;
					line-height   : 28px;
					color         : var(--global--color-white);
					text-transform: capitalize;
					margin-bottom : 16px;
				}

				p {
					font-size    : 14px;
					color        : var(--global--color-gray);
					line-height  : 24px;
					margin-bottom: 15px;
				}

				a {
					display    : flex;
					align-items: center;
					transition : 0.3s ease-in-out;
					color      : var(--global--color-white);

					@media #{$maxTablet} {
						justify-content: center;
					}

					span {
						transition : 0.3s ease-in-out;
						font-family: var(--global--font-heading);
						font-weight: 400;
						font-size  : 24px;
					}

					i {
						margin-bottom: 4px;
						transition   : 0.3s ease-in-out;
						font-size    : 19px;
						margin-right : 15px;
					}
				}
			}
		}

		&.hero-panel-holder-2 {
			display        : flex;
			flex-direction : column;
			flex-grow      : 1;
			justify-content: flex-end;
			align-items    : flex-end;

			@media #{$maxTablet} {
				align-items: center;
			}
		}
	}

	.hero-rating {
		display    : flex;
		align-items: center;

		.num {
			font-family : var(--global--font-heading);
			font-weight : 500;
			font-size   : 37px;
			line-height : 22px;
			color       : var(--global--color-white);
			margin-right: 18px;
		}

		.rating-body {
			p {
				font-family  : var(--global--font-body);
				font-weight  : 400;
				font-size    : 13px;
				line-height  : 23px;
				color        : var(--global--color-gray);
				margin-bottom: 0;

				a {
					font-family   : var(--global--font-body);
					font-weight   : 700;
					font-size     : 14px;
					line-height   : 23px;
					color         : var(--global--color-secondary);
					text-transform: capitalize;
				}
			}
		}
	}
}