@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
	.custom-border {
		border-image-source: linear-gradient(
			180deg,
			#247f81 0%,
			rgba(36, 127, 129, 0) 65%
		);
		border-image-slice: 1;
	}
}
@font-face {
	font-family: "Manrope";
	src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Spline Sans";
	src: url("../fonts/SplineSans-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Spline Sans Mono";
	src: url("../fonts/SplineSansMono-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Spline Sans Mono Italic";
	src: url("../fonts/SplineSansMono-Italic-VariableFont_wght.ttf")
		format("truetype");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Strait";
	src: url("../fonts/Strait-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

html {
	overflow-x: hidden !important;
}

.navbar {
	background: transparent !important;
}
.collapse {
	visibility: visible !important;
}
.sidebar-wrapper {
	background: #000 !important;
	height: 100% !important;
}
.sidebar-wrapper .sidenav-link {
	color: #ffff !important;
}

.accordion button.collapsed {
	border-radius: 0px;
	border-bottom: 1px solid #8b9091 !important;
}
.accordion .accordion-title {
	font-size: 22px !important;
	padding-left: 0px !important;
}
.accordion .accordion-desc.show {
	visibility: visible !important;
}
.accordion-desc {
	padding-top: 10px !important;
	padding-left: 0px !important;
}
.accordion .accordion-title::after,
.accordion .accordion-title::before {
	right: 0px !important;
}
.accordion-desc.show .accordion {
	border-bottom: 0px;
}

.slick-slide {
	height: auto !important;
}

#yt-slick-carousel .slick-dots li,
.blog-slider .slick-dots li,
.customer-reviews-slider .slick-dots li,
.services-slider .slick-dots li {
	background: #8d8d8d;
	width: 60px;
	height: 4px;
	margin-left: 8px;
	margin-right: 8px;
	cursor: pointer;
}

#yt-slick-carousel .slick-dots .slick-active,
.blog-slider .slick-dots .slick,
.customer-reviews-slider .slick-dots .slick,
.services-slider .slick-dots .slick-active {
	background: #267f7e;
	outline: none;
}
#yt-slick-carousel .slick-dots li button,
.blog-slider .slick-dots li button,
.customer-reviews-slider .slick-dots li button,
.services-slider .slick-dots li button {
	outline: none !important;
	display: none;
}
#yt-slick-carousel .slick-track {
	/* height: 440px; */
}
#top-search-container.border {
	border-color: #257f80 !important;
}

.white-bg-button-design {
	border: 0px;
	position: relative;
	/* width: 230px;
	height: 65px; */
	color: #000;
	background: #fff;
	/* background: url("../img/white-bg-button.png"); */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	/* padding: 10px; */
	/* clip-path: polygon(13% 0, 94% 0, 94% 61%, 82% 100%, 0 98%, 0 40%); */
	/* clip-path: polygon(12% 0, 100% 0, 100% 52%, 88% 100%, 0 100%, 0 45%); */
	clip-path: polygon(10% 0, 100% 0, 100% 58%, 90% 100%, 0 100%, 0 50%);
}

.custom-3d-gradient-button {
	border: 0px;
	background: linear-gradient(180deg, #317f6f 0%, #1b7e8b 100%);
	/* clip-path: polygon(16% 0, 94% 0, 94% 61%, 80% 100%, 0 98%, 0 40%); */
	clip-path: polygon(12% 0, 100% 0, 100% 52%, 88% 100%, 0 100%, 0 45%);
}

.coding-easy-bg {
	background: linear-gradient(
		270deg,
		#317f6f 0%,
		rgba(27, 126, 139, 0.18) 65%,
		rgba(27, 126, 139, 0) 100%
	);
}
.coding-easy-bg .text-div::after {
	content: "";
	width: 200px;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
	top: 50%;
	transform: translateY(-50%);
	margin: 0px 50px;
}
.input-design-3d {
	clip-path: polygon(18% 0, 94% 0, 94% 61%, 78% 100%, 0 98%, 0 40%);
}

#vin-form input {
	max-width: 95%;
}

input::-moz-focus-inner {
	border: 0 !important; /* Remove inner border in Firefox */
}

/* For Firefox when input is focused */
input:focus {
	outline: none !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
}

.input-wrapper-div {
	height: 64px;
	clip-path: polygon(13% 0, 94% 0, 94% 60%, 82% 98%, 0 99%, 0 39%);
	background: #666666;
	display: flex;
	align-items: center;
	padding: 3px;
}

.input-wrapper-div input {
	margin: auto;
	border: 1px solid #e0e0e000;
	clip-path: polygon(17% 0, 94% 0, 94% 60%, 78% 101%, 0 100%, 0 41%);
	border-radius: 0;
	background: black;
	height: 58px;
	/* padding: 0px; */
	max-width: 100% !important;
	width: 100%;
	margin: 0px;
}

input#vin-banner::placeholder {
	text-align: left !important;
}

input::placeholder {
	text-align: left !important;
}
input::-ms-input-placeholder,
input::-ms-input-placeholder,
input::-moz-placeholder,
input::-webkit-input-placeholder {
	text-align: left !important;
}

.new-d-input {
	/* width: 300px; */
	height: 50px;
	--background-color: rgb(0, 0, 0);
	/* --border-color: linear-gradient(to bottom right, red, blue); */
	--border-color: linear-gradient(176deg, #317f6f, #1b7e8b);
	--border-width: 0.1em;
	--edge-size: 1.25em;

	cursor: pointer;
	background: #fff;
	padding: 0.5em 1.5em;
	border: 0px !important;
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-content: center;
	clip-path: polygon(
		var(--edge-size) 0%,
		100% 0,
		100% calc(100% - var(--edge-size)),
		calc(100% - var(--edge-size)) 100%,
		0 100%,
		0% var(--edge-size)
	);
	transition: color 250ms;
}

.new-d-input::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #666666;
	z-index: -2;
}

.new-d-input::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	z-index: -1;
	clip-path: polygon(
		/* top left 1 */ var(--border-width)
			calc(var(--edge-size) + var(--border-width) * 0.5),
		/* top left 2 */ calc(var(--edge-size) + var(--border-width) * 0.5)
			var(--border-width),
		/* top right */ calc(100% - var(--border-width)) var(--border-width),
		/* bottom right - 1 */ calc(100% - var(--border-width))
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)),
		/* bottom right - 2 */
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5))
			calc(100% - var(--border-width)),
		/* bottom left */ calc(var(--border-width)) calc(100% - var(--border-width))
	);
	transition: clip-path 500ms;
}

.custom-designed-button {
	border: 0px;
	position: relative;
	/* width: 230px;
	height: 65px; */
	color: #fff;
	background: linear-gradient(180deg, #317f6f 0%, #1b7e8b 100%);
	padding: 10px;
	/* clip-path: polygon(13% 0, 94% 0, 94% 61%, 82% 100%, 0 98%, 0 40%); */
	clip-path: polygon(12% 0, 100% 0, 100% 52%, 88% 100%, 0 100%, 0 45%);
}
.custom-designed-button-2 {
	--border-width: 0.19em;
	--edge-size: 1.25em;
	cursor: pointer;
	background: #000000;
	padding: 0.5em 1.5em;
	border: 0px !important;
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-content: center;
	clip-path: polygon(
		var(--edge-size) 0%,
		100% 0,
		100% calc(100% - var(--edge-size)),
		calc(100% - var(--edge-size)) 100%,
		0 100%,
		0% var(--edge-size)
	);
	transition: color 250ms;
}
.custom-designed-button-2::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #227f834d;
	z-index: -2;
}

.custom-designed-button-2::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000000;
	opacity: 0.4;
	z-index: -1;
	clip-path: polygon(
		/* top left 1 */ var(--border-width)
			calc(var(--edge-size) + var(--border-width) * 0.5),
		/* top left 2 */ calc(var(--edge-size) + var(--border-width) * 0.5)
			var(--border-width),
		/* top right */ calc(100% - var(--border-width)) var(--border-width),
		/* bottom right - 1 */ calc(100% - var(--border-width))
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)),
		/* bottom right - 2 */
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5))
			calc(100% - var(--border-width)),
		/* bottom left */ calc(var(--border-width)) calc(100% - var(--border-width))
	);
	transition: clip-path 500ms;
}

.banner-shadow-blur {
	width: 1150;
	height: 738;
	background: url("../img/banner-image-shadow-2.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	/* top: 156px;
	left: 678px; */
	/* background: #1ca3c233;
	backdrop-filter: blur(430px); */
}

.services-bg {
	background-repeat: no-repeat !important;
	background-size: cover !important;
}
.code-with-bimmertech-bg {
	background: url("../img/code-with-bimmer-tech-bg.png");
	background-repeat: no-repeat;
	background-size: cover !important;
	background-position: center center;
}
.effortless-bg {
	background: url("../img/grid_bg_image.svg");
	background-repeat: no-repeat;
	background-size: cover !important;
}
.efforless-div-shadow {
	backdrop-filter: blur(4px);
	background: linear-gradient(359deg, #383838 0%, rgba(56, 56, 56, 0) 65%);
}
.effortless-div-wrapper {
	border-style: solid;
	border-image-source: linear-gradient(
		360deg,
		#247f81 0%,
		rgba(36, 127, 129, 0) 100%
	);
	border-image-slice: 1;
}

.efforless-usb-div-shadow {
	backdrop-filter: blur(4px);
	background: linear-gradient(270deg, #383838 0%, rgba(56, 56, 56, 0) 65%);
}
.effortless-usb-div-wrapper {
	border-style: solid;
	border-image-source: linear-gradient(
		270deg,
		#247f81 0%,
		rgba(36, 127, 129, 0) 100%
	);
	border-image-slice: 1;
}
.efforless-cable-div-shadow {
	backdrop-filter: blur(4px);
	background: linear-gradient(90deg, #383838 0%, rgba(56, 56, 56, 0) 65%);
}
.effortless-cable-div-wrapper {
	border-style: solid;
	border-image-source: linear-gradient(
		90deg,
		#247f81 0%,
		rgba(36, 127, 129, 0) 100%
	);
	border-image-slice: 1;
}

.connector-div {
	border-image-source: linear-gradient(
		70.64deg,
		#1eaa8e 37.89%,
		#1c7f8b 65.25%
	);
	border-image-slice: 1;
}

.quick-and-easy-bg {
	background: url("../img/coding_bg_image.svg");
	/* background-repeat: no-repeat; */
	background-size: 100%;
	/* background-position: top; */
}

.text-glow {
	text-shadow: 1px 1px 8px #26797b, 0 0 8px #26797b, 0 0 8px #26797b,
		0 0 8px #26797b;
}

.car-driving-night {
	background: url("../img/car-is-driving-road-night-forest_1.png");
	background-repeat: no-repeat;
	background-size: cover !important;
}

.video-div-wrapper-1 {
	clip-path: polygon(20% 0%, 100% 0, 100% 80%, 80% 100%, 0 100%, 0% 20%);
	border: 3px solid;

	background: linear-gradient(0deg, #dcffff, #dcffff);
	box-shadow: 0px 0px 10px 0px #267778;
}

.video-div-shadow {
	filter: drop-shadow(2px 1px 2px #fff) drop-shadow(-2px -2px 1px #fff)
		drop-shadow(1px 1px 5px #1ca3c1) drop-shadow(-1px -1px 2px #1ca3c1);
}
.cut-div {
	clip-path: polygon(8% 0%, 100% 0, 100% 83%, 91% 100%, 0 100%, 0% 18%);
}
.video-div-shape {
	display: flex;
	justify-content: center;
	align-items: center;
}
.octagon-shape {
	clip-path: polygon(
		30% 0%,
		70% 0%,
		100% 30%,
		100% 70%,
		70% 100%,
		30% 100%,
		0% 70%,
		0% 30%
	);
	background: linear-gradient(180deg, #317f6f 0%, #1b7e8b 100%);
}

.triangle-shape {
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	opacity: 70% !important;
}

.video-wrapper-div p {
	color: #fff;
}
/* drop-shadow(0px 0px 1px #DCFFFF) drop-shadow(1px 0px 0px #FFF) drop-shadow(-1px 1px 1px #DCFFFF) drop-shadow(0px 0px 1px #DCFFFF) drop-shadow(0px -3px 3px #1CA3C1) drop-shadow(-3px 3px 3px #1CA3C1) */

.cut-corner-box {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 52px),
		calc(100% - 52px) 100%,
		0 100%
	);
}
.cut-corner-box-2 {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 53px),
		calc(100% - 53px) 100%,
		0 100%
	);
}

#customer-reviews-section .user-review-stars:before {
	background: linear-gradient(180deg, #317f6f 0%, #1b7e8b 100%) !important;
	content: "★★★★★" !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	font-size: 22px !important;
}

.filter-button-style {
	--border-width: 0.08em;
	--edge-size: 1em;
	cursor: pointer;
	background: #000000;
	color: #fff !important;
	padding: 0.5em 1.5em;
	border: 0px !important;
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-content: center;
	clip-path: polygon(
		var(--edge-size) 0%,
		100% 0,
		100% calc(100% - var(--edge-size)),
		calc(100% - var(--edge-size)) 100%,
		0 100%,
		0% var(--edge-size)
	);
	transition: color 250ms;
}
.filter-button-style::before {
	content: "";
	position: absolute;
	inset: -1px;
	background: #ffffff;
	z-index: -2;
}

.btn-filter.filter-button-style::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000000 !important;
	opacity: 1;
	z-index: -1;
	clip-path: polygon(
		/* top left 1 */ var(--border-width)
			calc(var(--edge-size) + var(--border-width) * 0.5),
		/* top left 2 */ calc(var(--edge-size) + var(--border-width) * 0.5)
			var(--border-width),
		/* top right */ calc(100% - var(--border-width)) var(--border-width),
		/* bottom right - 1 */ calc(100% - var(--border-width))
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)),
		/* bottom right - 2 */
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5))
			calc(100% - var(--border-width)),
		/* bottom left */ calc(var(--border-width)) calc(100% - var(--border-width))
	);
	transition: clip-path 500ms;
}
.active-filter-btn.btn-filter.filter-button-style::after {
	background-color: #fff !important;
}
.active-filter-btn.btn-filter.filter-button-style {
	color: #000 !important;
}
.text span {
	bottom: 52px !important;
}
.sorting .dropdown-menu.show {
	border-radius: 0px !important;
}
.sorting .dropdown-item {
	text-align: left !important;
}
.product-grid .product-wrapper .card {
	background-color: #ffffff33 !important;
	height: inherit !important;
	/* min-height: 379px !important; */
}
.product-card-header {
	height: 88px !important;
}
.product-card-header .icon-wrapper {
	padding: 20px 0px !important;
}
.product-select-btn {
	--border-width: 0.08em;
	--edge-size: 1.05em;
	cursor: pointer;
	background: transparent !important;
	color: #fff !important;
	padding: 0.5em 1.5em;
	border: 0px !important;
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-content: center;
	clip-path: polygon(
		var(--edge-size) 0%,
		100% 0,
		100% calc(100% - var(--edge-size)),
		calc(100% - var(--edge-size)) 100%,
		0 100%,
		0% var(--edge-size)
	);
	transition: color 250ms;
}
.product-select-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	z-index: -2;
}

.product-select-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #317f6f 0%, #1b7e8b 100%) !important;
	opacity: 1;
	z-index: -1;
	clip-path: polygon(
		/* top left 1 */ var(--border-width)
			calc(var(--edge-size) + var(--border-width) * 0.5),
		/* top left 2 */ calc(var(--edge-size) + var(--border-width) * 0.5)
			var(--border-width),
		/* top right */ calc(100% - var(--border-width)) var(--border-width),
		/* bottom right - 1 */ calc(100% - var(--border-width))
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)),
		/* bottom right - 2 */
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5))
			calc(100% - var(--border-width)),
		/* bottom left */ calc(var(--border-width)) calc(100% - var(--border-width))
	);
	transition: clip-path 500ms;
}

.product-remove-btn {
	--border-width: 0.08em;
	--edge-size: 1.05em;
	cursor: pointer;
	background: transparent !important;
	color: #fff !important;
	padding: 0.5em 1.5em;
	border: 0px !important;
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-content: center;
	clip-path: polygon(
		var(--edge-size) 0%,
		100% 0,
		100% calc(100% - var(--edge-size)),
		calc(100% - var(--edge-size)) 100%,
		0 100%,
		0% var(--edge-size)
	);
	transition: color 250ms;
}
.product-remove-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #317f6f 0%, #1b7e8b 100%);
	z-index: -2;
}

.product-remove-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff !important;
	opacity: 1;
	z-index: -1;
	clip-path: polygon(
		/* top left 1 */ var(--border-width)
			calc(var(--edge-size) + var(--border-width) * 0.5),
		/* top left 2 */ calc(var(--edge-size) + var(--border-width) * 0.5)
			var(--border-width),
		/* top right */ calc(100% - var(--border-width)) var(--border-width),
		/* bottom right - 1 */ calc(100% - var(--border-width))
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)),
		/* bottom right - 2 */
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5))
			calc(100% - var(--border-width)),
		/* bottom left */ calc(var(--border-width)) calc(100% - var(--border-width))
	);
	transition: clip-path 500ms;
}

.button-background-color-1::after {
	background: #212121 !important;
}

.button-background-color-2::after {
	background: #000 !important;
}

.cut-corner-product-modal-div {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 35px),
		calc(100% - 35px) 100%,
		0 100%
	);
}

#productModal .product-video iframe {
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.product-grid .row {
	margin: 0px !important;
	width: 100% !important;
}

.cart-products .product-icon {
	min-height: 38px !important;
}

.product-wrapper .product-icon.noVin,
.product-icon {
	background: #267778 !important;
	height: 38px !important;
	width: 38px !important;
}

.add-to-cart-button {
	--border-width: 0.08em;
	--edge-size: 1.05em;
	cursor: pointer;
	background: transparent !important;
	color: #fff !important;
	padding: 0.5em 1.5em;
	border: 0px !important;
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-content: center;
	clip-path: polygon(
		var(--edge-size) 0%,
		100% 0,
		100% calc(100% - var(--edge-size)),
		calc(100% - var(--edge-size)) 100%,
		0 100%,
		0% var(--edge-size)
	);
	transition: color 250ms;
}
.add-to-cart-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	z-index: -2;
}

.add-to-cart-button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #317f6f 0%, #1b7e8b 100%) !important;
	opacity: 1;
	z-index: -1;
	clip-path: polygon(
		/* top left 1 */ var(--border-width)
			calc(var(--edge-size) + var(--border-width) * 0.5),
		/* top left 2 */ calc(var(--edge-size) + var(--border-width) * 0.5)
			var(--border-width),
		/* top right */ calc(100% - var(--border-width)) var(--border-width),
		/* bottom right - 1 */ calc(100% - var(--border-width))
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)),
		/* bottom right - 2 */
			calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5))
			calc(100% - var(--border-width)),
		/* bottom left */ calc(var(--border-width)) calc(100% - var(--border-width))
	);
	transition: clip-path 500ms;
}

/* Media Queries */

@media only screen and (max-width: 520px) {
	.product-grid {
		grid-template-columns: repeat(1, 1fr) !important;
		grid-gap: 11px;
	}
}
@media only screen and (max-width: 767px) {
	.car-driving-night {
		background: transparent !important;
	}
	.accordion .accordion-title {
		font-size: 18px !important;
		line-height: 24px !important;
		/* letter-spacing: 0.14px;
        padding: 10px 20px;
        padding-right: 48px; */
	}
	.effortless-usb-div-wrapper {
		border-style: solid;
		border-image-source: linear-gradient(
			180deg,
			#247f81 0%,
			rgba(36, 127, 129, 0) 100%
		);
		border-image-slice: 1;
	}
	.effortless-cable-div-wrapper {
		border-style: solid;
		border-image-source: linear-gradient(
			180deg,
			#247f81 0%,
			rgba(36, 127, 129, 0) 100%
		);
		border-image-slice: 1;
	}
	.efforless-usb-div-shadow {
		backdrop-filter: blur(4px);
		background: linear-gradient(180deg, #383838 0%, rgba(56, 56, 56, 0) 65%);
	}
	.efforless-cable-div-shadow {
		backdrop-filter: blur(4px);
		background: linear-gradient(180deg, #383838 0%, rgba(56, 56, 56, 0) 65%);
	}
}

@media (min-width: 769px) {
	#yt-slick-carousel .slick-track {
		height: 270px;
	}
	.lg-text-glow {
		text-shadow: 1px 1px 8px #26797b, 0 0 8px #26797b, 0 0 8px #26797b,
			0 0 8px #26797b;
	}
}

@media (min-width: 1920px) {
	#yt-slick-carousel .slick-track {
		height: 470px;
	}
}