/* page_product-detail-level2.less */

@import "main.less";

.page_product-detail-systems-level2 {

	.service_name2 {
		color         : #445B6D;
		font-family   : "Barlow Semi Condensed";
		font-size     : 42px;
		font-weight   : bold;
		letter-spacing: 0;
		line-height   : 50px;
		text-transform: uppercase;

		@media @small {
			font-size     : 24px;
			letter-spacing: 0.75px;
			line-height   : 31px;
			text-align: center;
		}
	}

	.service_description2 {
		font-family: 'Barlow Condensed';
		font-style: normal;
		font-weight: 400;
		font-size: 32px;
		line-height: 39px;
		color: #445b6d;

		@media @small {
			font-size     : 17px;
			letter-spacing: 0;
			line-height   : 24px;
			text-align: center;
		}
	}

	.section_twocol {
		padding: 60px 0;

		.two_col_container {
			@media @small {
				margin-bottom: 30px;
			}
		}
	}

	.section_advantage {
		margin: 0;
	}

	.section_toile {

		.section_toile_text {
			background : #fff;
			padding    : 60px;
			margin-top : -220px;
			position   : relative;
			z-index    : 1;
			margin-left: -15px;

			@media @small {
				margin : 0;
				padding: 0;
			}
		}

		.top_title {
			position      : relative;
			font-family   : @fonts_barlow;
			font-size     : 22px;
			text-transform: uppercase;
			color         : @color_green;

			@media @small {
				font-size: 18px;
			}

			&:before {
				content     : '';
				border-top  : 1px solid @color_green;
				width       : 120px;
				margin-right: 40px;
			}
		}

		h3 {
			font-family   : @fonts_barlow;
			font-size     : 28px;
			font-weight   : 700;
			text-transform: uppercase;
			color         : @color_green;

			@media @small {
				font-size: 25px;
			}
		}

		.icon_pieces {

			justify-content: center;

			@media @small {
				justify-content: flex-start;
			}

			a {
				display        : inline-block;
				font-family    : @fonts_barlow;
				font-size      : 16px;
				text-transform : uppercase;
				text-decoration: none;
				color          : @color_green;

				span {
					display       : block;
					font-family   : @fonts_barlow;
					font-size     : 16px;
					text-transform: uppercase;
					color         : @color_green;
				}
			}
		}
	}

	.section_advantage_level2 {
		background   : #EAF0F4;
		padding      : 60px 0;
		margin       : 0;
		margin-bottom: 100px;

		h2 {
			font-family   : @fonts_barlow_semi_condensed;
			font-size     : 32px;
			font-weight   : 700;
			color         : @color_green;
			text-transform: uppercase;
		}

		h3 {
			position      : relative;
			text-transform: uppercase;
			font-family   : @fonts_barlow_condensed;
			font-weight   : 400;
			font-size     : 22px;
			color         : @color_green;
			margin-bottom : 10px;
		}

		.advantage_image {
			width: 108px;
			height: 108px;
			margin-bottom: 25px;

			@media @small {
				width: 65px;
				height: 65px;
				margin-bottom: 15px;
			}
		}

		.advantage_name {
			font-family: @fonts_barlow_condensed;
			font-style: normal;
			font-weight: 400;
			font-size: 28px;
			line-height: 32px;
			text-transform: uppercase;
			color: #445b6d;
			margin-bottom: 20px;

			@media @small {
				font-size: 20px;
				line-height: 22px;
				margin-bottom: 15px;
			}
		}

		.advantage_description {
			font-family: 'Roboto';
			font-style: normal;
			font-weight: 400;
			font-size: 16px;
			line-height: 20px;
			color: #000000;

			@media @small {
				font-size: 15px;
			}
		}
	}

	.badge_exclusive {
		padding-bottom: 35px;

		svg {
			width: 188px;
		}
	}

	.section_compatible_custom_products {
		margin-top: 75px;

		@media @small {
			margin-top: 0px;
		}

		h2 {
			font-family   : @fonts_barlow_semi_condensed;
			font-size     : 31px;
			font-weight   : 700;
			color         : @color_green;
			text-transform: uppercase;
			margin-bottom : 35px;

			@media @small {
				font-size: 21px;
				line-height: 25px;
				margin-top: 20px;
			}
		}

		h3 {
			position      : relative;
			text-transform: uppercase;
			font-family   : @fonts_barlow_semi_condensed;
			font-weight   : 700;
			font-size     : 24px;
			color         : @color_green;
			margin-bottom : 10px;

			@media @small {
				font-size: 18px;
			}
		}

		.compatible_custom_name {
			font-family: @fonts_barlow_condensed;
			font-style: normal;
			font-weight: 400;
			font-size: 34px;
			line-height: 32px;
			text-align: center;
			text-transform: uppercase;
			color: #445b6d;

			@media @small {
				font-size: 25px;
				padding-top: 10px;
			}
		}

		.compatible_custom_name_star {
			font-size: 24px;
			vertical-align: text-top;
		}

		.compatible_hub_alert {
			color: #445b6d;
			opacity: 0.5;
			text-transform: uppercase;
			font-size: 16px;
			line-height: 40px;
			font-style: normal;
			font-family: @fonts_barlow_condensed;
		}

		.compatible_custom_name_small {
			font-family: 'Barlow Condensed';
			font-style: normal;
			font-weight: 400;
			font-size: 17px;
			line-height: normal;
			text-align: center;
			text-transform: uppercase;
			color: #445b6d;

			@media @small {
				padding-top: 10px;
			}
		}

		svg {
			width: 100%;
			height: 100%;
			max-height: 32px;
			display: inline-block;
		}

		.col_apple_home {
			border-bottom: 1px solid rgba(68, 91, 109, 0.35);
			margin-bottom: 40px;
			padding-bottom: 33px;

			svg {
				width: 100%;
				height: 100%;
				max-height: 70px;
				display: inline-block;
			}

			@media @small {
				margin-bottom: 0px;
				padding-bottom: 0px;
			}
		}
	}

	.container_product_wrap {
		.d-flex {
			@media @small {
				padding: 0 5px;
			}
		}

		.text.white {
			.product_wrap_title {
				position     : relative;
				font-family  : @fonts_barlow;
				font-weight  : 700;
				font-size    : 20px;
				color        : #fff;
				margin-bottom: 5px;

				@media @small_medium {
					font-size     : 14px;
					font-weight   : bold;
					letter-spacing: 1.27px;
					line-height   : 17px;
				}
			}

			.product_wrap_subtitle {
				font-size    : 1rem;
				margin-bottom: 0;

				@media @small_medium {
					font-size     : 12px;
					font-weight   : bold;
					letter-spacing: 1.27px;
					line-height   : 17px;
					margin-bottom : 0;
				}
			}
		}

		.product_arrow {
			width : 56px;
			height: 56px;

			@media @small {
				width : 26px;
				height: 26px;
			}
		}
	}

	.slider_text {
		position   : absolute;
		z-index    : 2;
		top        : 0;
		left       : 130px;
		right      : 130px;
		display    : flex;
		height     : 100%;
		max-width  : 1280px;
		align-items: center;

		h1 {
			font-family   : @fonts_barlow;
			font-size     : 70px;
			font-weight   : 700;
			color         : #fff;
			text-transform: uppercase;
		}

		p {
			font-size: 24px;
			color    : #fff;
		}

		@media (max-width: 1199.98px) {
			h1 {
				font-size: 52px;
			}

			.badge_exclusive {
				padding-bottom: 25px;

				svg {
					width: 160px;
				}
			}
		}

		@media (max-width: 991.98px) {
			.page_home .slider_text {
				left : 0;
				right: 0;
			}

			h1 {
				font-size: 25px;
			}

			p {
				font-size: 20px;
			}

			.badge_exclusive {
				padding-bottom: 15px;

				svg {
					width: 140px;
				}
			}
		}

		@media (max-width: 767.98px) {
			left : 20px;
			right: 20px;

			h1 {
				font-size: 21px;
			}

			p {
				font-size: 16px;
			}

			.badge_exclusive {
				padding-bottom: 15px;

				svg {
					width: 140px;
				}
			}
		}
	}

	@media @small {
		.slick-slide>img {
			height    : 430px;
			object-fit: cover;

		}
		.address_label {
			padding-bottom: 15px;
		}
		.retailers_title {
			font-size: 24px;
			line-height: 31px;
		}
		.see_more {
			font-size: 15px;
		}
	}

	.retailers_results_wrap {
		background-color: #E0E8EE;
		padding: 0px 0px 60px 0px;

		.retailers_name {
			color: #445b6d;
			font-family: @fonts_barlow;
			font-size: 18px;
			line-height: normal;
			font-weight: bold;
			padding-bottom: 10px;

			@media @small {
				font-size: 18px;
				line-height: normal;
			}
		}
		.retailers_data_wrap {
			 margin-bottom: 0px !important;
		}

		table tr {
			border-color: #b9c5ce;
		}

		table tr td {
			vertical-align: bottom;
		}

		hr {
			border-top: 1px solid #445B6D;
			opacity: 1;
			margin-bottom: 0px;
		}

		@media @small {
			table {
				display:flex;
				flex-direction: column;
			}
			table tr {
				display:flex;
				flex-direction: column;
				border-bottom: 1px solid #b9c5ce;
				padding-bottom: 15px;
				margin-bottom: 15px;
			}
			table tr td {
				display:flex;
				flex-direction: column;
				padding:0;
				border:none;
				text-align: left !important;
			}
			hr {
				border-top: 1px solid #445B6D;
				opacity: 1;
				margin-bottom: 15px;
			}
		}

		h2 {
			font-style: normal;
			font-weight: 500;
			font-size: 27px;
			line-height: 32px;
			color: rgba(35, 39, 42, 0.5);
			text-transform: inherit;
		}

		.global_see_more_wrap {
			@media @small {
				padding-top: 5px;
			}
		}
	}

	.slider_wrap .slick-slide.bglinear {
		&:before {
			background: linear-gradient(0.29deg, rgba(55, 49, 44, 0.5) 6.26%, rgba(55, 49, 44, 0) 99.81%);
		}
	}
}

.header_hero {
	.header_hero_img {
		@media @small_medium {
			min-height: 30vh;
		}

		img {
			object-fit: cover;
		}
	}

	h1 {
		font-size: 100px;

		@media @small_medium {
			display: none;
		}
	}
}

.header_hero_banner {
	background-size    : cover;
	background-position: center;
	min-height         : 40vh;
	margin             : 0;

	.header_hero_text {
		padding: 40px 0;

		.header_hero_title {
			color         : #fff;
			font-size     : 50px;
			font-weight   : bold;
			letter-spacing: 2.8px;
			line-height   : 55px;
			text-align    : center;
			text-transform: uppercase;

			@media @medium {
				font-size     : 50px;
				line-height   : 52px;
				letter-spacing: 1px;
			}

			@media @small {
				font-size     : 23px;
				letter-spacing: 0.44px;
				line-height   : 28px;
			}
		}

		.header_hero_subtitle {
			font-size     : 24px;
			letter-spacing: 0;
			line-height   : 28px;
			text-align    : center;
			color         : #fff;

			@media @small {
				font-size     : 15px;
				letter-spacing: 0;
				line-height   : 21px;
			}
		}
	}
}

.top_slider_container_level2 {
	margin: 110px 0 150px 0;

	@media @medium {
		margin: 80px 0;
	}

	@media @small {
		margin: 40px 0;
	}

	.slider_wrap .slick-dots li button {
		display: none;
	}

	.service_name {
		color         : #445B6D;
		font-family   : "Barlow Semi Condensed";
		font-size     : 42px;
		font-weight   : bold;
		letter-spacing: 0;
		line-height   : 50px;
		text-transform: uppercase;

		@media @small {
			font-size     : 24px;
			letter-spacing: 0.75px;
			line-height   : 31px;
			margin-top: 10px;
		}
	}

	.service_description {
		color         : #000000;
		font-size     : 20px;
		letter-spacing: 0;
		line-height   : 26px;

		@media @small {
			font-size     : 17px;
			letter-spacing: 0;
			line-height   : 24px;
		}
	}

	.img_big_product {
		width     : 100%;
		object-fit: cover;
	}
}

.slider_container {
	width         : 100%;
	padding       : 4px;
	overflow      : auto;
	white-space   : nowrap;
	padding-bottom: 50px;

	&::-webkit-scrollbar {
		height       : 6px;
		width        : thin;
		border-radius: 5px;
		margin       : 0 100px;
	}

	/* Track */
	&::-webkit-scrollbar-track {
		background   : #D6E0E8;
		width        : 84px !important;
		border-radius: 5px;
	}

	/* Handle */
	&::-webkit-scrollbar-thumb {
		background   : #A8B5C0;
		width        : 84px !important;
		border-radius: 5px;
	}

	/* Handle on hover */
	&::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

	.compatible_slide {
		width       : 445px;
		display     : inline-block;
		margin-right: 50px;

		.compatible_product_name {
			font-size     : 22px;
			font-weight   : bold;
			letter-spacing: 2px;
			line-height   : 26px;
			margin        : 0;
		}

		a {
			text-decoration: none;
		}
	}
}

.popover {
	min-width       : 450px;
	padding         : 10px 0;
	border-radius   : 0;
	background-color: #EAF0F4;

	@media @small {
		min-width: 100%;
	}

	.popover-arrow {
		&:before {
			border-color       : 1px solid rgba(0, 0, 0, .2);
			border-top-color   : transparent !important;
			border-bottom-color: transparent !important;
		}

		&:after {
			border-color       : #EAF0F4;
			border-top-color   : transparent !important;
			border-bottom-color: transparent !important;
		}
	}

	.popover-header {
		background: transparent;
		border    : none;

		.tip_header {
			font-size     : 30px;
			font-weight   : bold;
			letter-spacing: 0.47px;
			line-height   : 36px;
			margin        : 0;

			.tip_title {
				vertical-align: middle;
				text-transform: uppercase;
			}
		}

		.tip_close_icon_container {
			text-align: right;

			.tip_close_icon {
				text-align: right;
			}
		}
	}

	.tip_content {
		color         : #000000;
		font-family   : 'Roboto';
		font-size     : 16px;
		letter-spacing: 0;
		line-height   : 20px;
		vertical-align: middle;

		a {
			color         : #445B6D;
			font-size     : 16px;
			letter-spacing: 0;
			line-height   : 21px;
		}
	}

	.tip_icon {
		img {
			width: 22px;
		}
	}

	.tip_close_icon {
		display: block;
		cursor : pointer;

		img {
			width: 34px;
		}
	}
}

.top_footer_link {
	margin-top: 50px;
}

.me-2 {
	width: 100%;
}


.compatible_wrap {
	@media @small {
		margin-top: -55px;
	}
}