@import url('https://fonts.cdnfonts.com/css/uk-number-plate');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css');

:root {
	--font-size-desktop: 43px;
	--font-size-mobile: 38px;
	--line-height-desktop: 62px;
	--line-height-mobile: 40px;
	--primary-color: #1754A5;
	--secondary-color: #FFB11E;
}

body {
	font-family: 'Ubuntu', sans-serif;
	color: #020202;
}

.hero {
	background: url('/assets/new-design/images/header-background.jpg') no-repeat center center/cover;
	height: 65vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: white;
}

.primary-color {
	color: var(--primary-color); /* Use primary color */
}

.compare {
	height: 50vh;
}

::placeholder {
	color: #042A2B !important;
	opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
	color: #042A2B !important;
}

.hero h1 {
	max-width: 60%;
}

.compare h1 {
	max-width: 90%;
}

h1 {
	font-size: 50px;
	/*line-height: 57px;*/
	font-weight: bold;
	color: #FFF;
}

	h1 span {
		color: #FFB11E;
	}

h2 {
	font-size: 28px;
	line-height: 40px;
	font-weight: bold;
	color: var(--primary-color);
}

h3 {
	font-size: 22px;
	line-height: 32px;
	font-weight: regular;
	color: #020202;
}

p {
	font-size: 16px;
	line-height: 26px;
}

.btn-warning {
	background-color: var(--secondary-color);
	border-radius: 100px;
	padding: 10px 30px;
	font-size: 18px;
	font-weight: bold;
	color: #020202;
}

.custom-btn-width {
	width: 100%;
	max-width: 300px; /* Matches the width of .reg-box */
}

.custom-logo-height {
	height: 40px; /* Set the desired height */
	width: auto; /* Maintain aspect ratio */

	@media (max-width: 768px) {
		height: 30px;
	}
}

.bg-light {
	background-color: #F0EEEC !important;
}

.reg-box {
	padding: 10px;
	border-radius: 5px;
	max-width: 300px;
	margin: 0 auto;
}

	.reg-box img {
		height: 30px;
	}

	.reg-box input {
		border: none;
		outline: none;
		/*font-size: 18px;*/
		font-family: 'UKNumberPlate', sans-serif;
		font-size: var(--font-size-desktop);
		line-height: var(--line-height-desktop);
		font-weight: normal;
		font-style: normal;
		text-transform: uppercase;
		text-align: center;
		width: 100px;
	}

/* Extra margin for smaller screens */
/* Adjust height for tablets and smaller devices */
@media (max-width: 768px) {
	.btn-warning {
		padding: 12px 25px; /* Reduce padding for small screens */
		font-size: 16px; /* Make font size smaller */
	}

	.reg-box {
		width: 100%;
		max-width: 300px;
		padding: 15px;
	}

	.hero h1 {
		font-size: 30px;
		max-width: 100%;
	}

	.reg-box input {
		font-size: var(--font-size-mobile);
		line-height: var(--line-height-mobile);
	}
}

/* UK-themed input box */
.uk-input-container {
	display: flex;
	/*align-items: center;*/
	background-color: transparent;
	/*border: 2px solid #1754A5;*/
	border-radius: 5px;
	height: 58px;
	/*padding: 5px;*/
}

	.uk-input-container .uk-icon {
		background-color: var(--primary-color); /* Red background for the UK icon */
		color: white; /* White text */
		/*padding: 10px;*/
		padding: 25px 10px 5px 10px;
		border-radius: 5px 0 0 5px; /* Rounded corners on the left side */
		font-weight: bold;
	}

	.uk-input-container input {
		flex: 1; /* Take up remaining space */
		border: none; /* Remove default input border */
		background-color: white; /* Transparent background */
		color: black; /* White text */
		/*padding: 10px;*/
		outline: none; /* Remove focus outline */
		border-radius: 0 5px 5px 0;
	}

		.uk-input-container input::placeholder {
			color: black; /* White placeholder text */
			opacity: 0.7; /* Slightly transparent */
		}

/* Desktop View - Table (Using Flexbox for equal column width) */
.desktop-view {
	display: flex; /* Use Flexbox for the container */
	flex-direction: column; /* Stack rows vertically */
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

	.desktop-view .row {
		display: flex; /* Use Flexbox for rows */
	}

	.desktop-view .cell {
		flex: 1; /* Distribute space equally */
		padding: 8px;
		border: 5px solid white;
		text-align: center; /* Center align text */
	}

	/* First Row Background Color */
	.desktop-view .row:first-child .cell {
		background-color: var(--primary-color);
		color: white;
		font-weight: bold;
	}

	/* Model, Common Fault & Avg. Repair Cost Background Colors for Subsequent Rows */
	.desktop-view .row:not(:first-child) .cell:nth-child(1) {
		background-color: #112D55;
		color: white;
	}

	.desktop-view .row:not(:first-child) .cell:nth-child(2) {
		background-color: #F0EEEC;
	}

	.desktop-view .row:not(:first-child) .cell:nth-child(3) {
		/*background-color: #FFB11E;*/
	}

	/* Yellow Background for 3rd Column or Last Column */
	.desktop-view .row:not(:first-child) .cell:last-child {
		background-color: var(--secondary-color); /* Yellow background */
	}

/* Mobile View - Grid (Ensure equal space for grid items) */
.mobile-view {
	display: none;
}

@media (max-width: 767.98px) {
	.desktop-view {
		display: none;
	}

	.mobile-view {
		display: block;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* Ensure equal space in two columns */
		margin-top: 20px;
	}

	.grid-item {
		padding: 10px;
		text-align: center;
	}

	.grid-container[data-columns="2"] {
		grid-template-columns: repeat(2, 1fr); /* 2 columns */
	}

	.grid-container[data-columns="3"] {
		grid-template-columns: repeat(3, 1fr); /* 3 columns */
	}

	/* Make the "Price" item span 2 columns */
	.grid-item[data-colspan="2"] {
		grid-column: span 2; /* Span 2 columns */
	}

	/* Title Styling */
	.grid-item strong {
		/*color: white;*/
		padding: 5px;
		display: inline-block;
	}

	/* Model and Common Fault Titles */
	.grid-item:nth-child(1),
	.grid-item:nth-child(2),
	.grid-item:nth-child(7),
	.grid-item:nth-child(8),
	.grid-item:nth-child(13),
	.grid-item:nth-child(14) {
		background-color: var(--primary-color); /* Blue color for titles */
		color: white;
	}

	/* Model Names (BMW 3-Series, Ford Mondeo - Diesel, VW Golf) */
	.grid-item:nth-child(3),
	.grid-item:nth-child(9),
	.grid-item:nth-child(15) {
		background-color: #112D55; /* Dark blue color for model names */
		color: white;
	}

	/* Common Faults (i-Drive computer fault, Leaking injector pipe, Electric window motor) */
	.grid-item:nth-child(4),
	.grid-item:nth-child(10),
	.grid-item:nth-child(16) {
		background-color: #F0EEEC; /* Light gray color for common faults */
	}

	/* Avg. Repair Cost Titles and Prices */
	.grid-item:nth-child(5),
	.grid-item:nth-child(6),
	.grid-item:nth-child(11),
	.grid-item:nth-child(12),
	.grid-item:nth-child(17),
	.grid-item:nth-child(18) {
		background-color: var(--secondary-color); /* Orange color for repair costs */
		margin-bottom: 15px; /* Adjust the space between rows */
		text-align: right;
	}
}

.nav-item.active .nav-link {
	color: var(--secondary-color) !important; /* Highlight color */
	font-weight: bold; /* Optional: Add bold text for emphasis */
}

.navbar-toggler {
	color: var(--secondary-color);
	border: var(--secondary-color);
}

.footer {
	background-color: #112D55;
	padding: 40px 0;
}

	.footer h5 {
		font-weight: bold;
		margin-bottom: 15px;
	}

	.footer a {
		color: white;
		text-decoration: none;
	}

		.footer a:hover {
			text-decoration: underline;
		}

	.footer .company-info {
		margin-top: 20px;
		font-size: 0.9em;
	}

	.footer .logo {
		font-size: 24px;
		font-weight: bold;
		color: #000;
	}

	.footer .social-links a {
		font-size: 20px;
		margin-left: 15px;
		color: var(--secondary-color);
	}

		.footer .social-links a:hover {
			color: #ffb11ef2;
		}

.custom-numbered-list {
	list-style-type: none; /* Remove default numbering */
	padding-left: 0; /* Remove default padding */
}

	.custom-numbered-list li {
		counter-increment: custom-counter; /* Create a counter */
		margin-bottom: 10px; /* Space between list items */
		padding-left: 40px; /* Space for the custom number */
		position: relative; /* Required for absolute positioning of the number */
	}

		.custom-numbered-list li::before {
			content: counter(custom-counter); /* Display the counter */
			position: absolute; /* Position the number */
			left: 0; /* Align to the left */
			top: 50%; /* Move to the middle of the line height */
			transform: translateY(-50%); /* Center vertically */
			color: var(--secondary-color); /* Color for the number */
			font-size: 1.5rem; /* Larger size for the number */
			font-weight: bold; /* Bold text */
			margin-right: 10px; /* Space between number and text */
		}

		/* Custom class for larger numbers */
		.custom-numbered-list li.larger-number::before {
			font-size: 3rem; /* Increase the size of the number */
		}

.custom-icon {
	font-size: 1.5rem; /* Adjust the size as needed */
}

.icon-image {
	width: 23px; /* Adjust the size as needed */
	height: 23px; /* Adjust the size as needed */
}

/* Default width for desktop */
.custom-dropdown {
	width: 50%;
	margin: 0 auto; /* Centers the dropdown */
}

/* Override width for mobile */
@media (max-width: 576px) {
	.custom-dropdown {
		width: 75%;
	}
}

.custom-dropdown {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #fff;
	cursor: pointer;
}

.dropdown-selected {
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dropdown-options {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #fff;
	z-index: 1000;
	max-height: 200px;
	overflow-y: auto;
}

	.dropdown-options .dropdown-option {
		padding: 10px;
		display: flex;
		align-items: center;
		gap: 10px;
	}

		.dropdown-options .dropdown-option:hover {
			background-color: #f8f9fa;
		}

.option-image {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.custom-dropdown.active .dropdown-options {
	display: block;
}

thead th:first-child {
	text-align: left;
	background-color: #1754a5; /* Header background color */
	color: white; /* White text */
	border-width: 0;
}

thead th:not(:first-child) {
	background-color: #1754a5; /* Header background color */
	color: white; /* White text */
	border-width: 0;
}

tbody td:first-child {
	background-color: #F4F4F4; /* First column background color */
	text-align: left;
	border-width: 1px;
}

tbody td:not(:first-child) {
	background-color: #DBDFE5; /* Other columns background color */
	border-width: 1px;
}

.table {
	width: 100%;
	margin-top: 20px;
}

	.table th, .table td {
		padding: 10px;
	}

/* Section Headers */
.section-header th {
	background-color: #698cba; /* Dark blue background */
	color: white; /* White text */
	font-weight: bold;
	text-align: left;
}

.table tbody,
.table td,
.table tfoot,
.table th,
.table thead,
.table tr {
	border-color: white;
}

/* Custom CSS for highlighted rows */
.highlight-row td:first-child {
	background-color: #fdfcda; /* First column background color */
}

.highlight-row td:not(:first-child) {
	background-color: #fffb81; /* Other columns background color */
}

.text-right {
	text-align: right !important;
}

.manufacturer-list .card {
	margin-bottom: 20px;
}

.warranty-image {
	float: left;
	width: 20%;
}

.warranty-summary {
	float: left;
	width: 80%;
}
.page-content h1 {
	--bs-text-opacity: 1;
	color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
	margin-bottom: 1.5rem !important;
}