/*------------------------------------*\
Theme Name: Tata Motors Passenger Vehicles Mobility Solutions 2025
Description: SquidArt Custom Theme
Author: Squidart
Author URI: http://squidart.co.za
Version: 0.0.1

License URI: ###

/*------------------------------------*\
	DEVMODE

	Responsive
	630 - 767 good
	837 - max good

	svh used for mobile screen height - fix chrome header issue

	Z-index Items
	20 - Nav Dropdown/Mobile Menu Toggle
	10 - Navbar
	8  - Vaps Navbar (Hover)
	5  - Assist App Section - App Screen

\*------------------------------------*/
/* * {
	outline: 1px solid red;
	outline-offset: -1px;
} */

.vertical-100-gaq .button-main {
	display: none;
}
#CookiebotWidget {
	display: none !important;
}

/*------------------------------------*\
	VARIABLES
\*------------------------------------*/
:root {
	/* Colors */
	--blue-light: #3DA4F0;
	--blue-medium: #0081F0;
	--blue-dark: #0A0A67;
	--red-medium: #DA1921;

	--base-light: #FFFFFF;
	--grey-light: #E5E5E5;
	--grey-medium: #6E6E6E;
	--grey-dark: #262626;
	--base-dark: #000000;
	--base-dark-06: #00000099;

	--body-color: var(--base-light);

	--light-bg-color:  var(--base-light);
	--dark-bg-color: var(--grey-dark);
	--light-font-color: var(--base-light);
	--dark-font-color: var(--base-dark);

	--primary-color: var(--blue-medium);
	--primary-hover: var(--blue-dark);	
	--select-color: #AAAAAA;

	--base-font: 16px;
	font-size: var(--base-font);

	/* Special Dimensions */
	--vaps-header-height: 70px;
	--main-header-height: calc(var(--vaps-header-height) + 0px);
	/* --header-nav-height: calc(var(--vaps-header-height) + 0px ); */
	--page-margin: 90px;  /* @calvin why is this 90px? */
	--section-margin: 60px; /* @calvin rfu */
	
	--max-width: calc(1490px + ( 2 * var(--page-margin))); 		/* Base page width 1490 + 20x2 for margins */
	--max-height: 2160px; 	/* max height for hero (based on view height) - 4k display 3840 x 2160 */
	--min-height: calc(100vh - 500px); /* 70 hero + 430 footer */
	
	--col-space: 20px;      /* Spacing for columns */
	--sidebar-width: 485px;
}

/*------------------------------------*\
    Fonts - Google Poppins
\*------------------------------------*/
/* Import Poppins from Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); */

@font-face { /* Poppins-Regular */
	/* font-family: 'Poppins', 'Arial', sans-serif; */
	/* font-family: 'Poppins';
	src: url('../fonts/Poppins/Poppins-Regular.eot');
	src: url('../fonts/Poppins/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Poppins/Poppins-Regular.woff2') format('woff2'),
		url('../fonts/Poppins/Poppins-Regular.woff') format('woff'),
		url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype'),
		url('../fonts/Poppins/Poppins-Regular.svg#Poppins-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-display: swap; */
}

/*------------------------------------*\
	MAIN
\*------------------------------------*/
html {
	scroll-behavior: smooth;
	height: 100vh;
}
body {
	background-color: var(--body-color);
	overscroll-behavior: none;
	overflow-x: hidden;
	margin: 0;
	min-height: 100vh;
	position: relative;

	font-size: var(--base-font);
	color: var(--dark-font-color);
	font-family: 'Poppins', 'Arial', sans-serif;
	font-weight: 300;
	line-height: 1.2;
}
.full-height {
	min-height: var(--min-height);
}

/*------------------------------------*\
	PAGE STRUCTURE
\*------------------------------------*/
/* Header dropdowns */
.drop-down-container.mobile-pre-open,
.drop-down-container {
	display: none;
}
.drop-down-container.open {
	display: block;
}

/* Accordion */
.accordion-section {
	border-top: 3px solid var(--blue-medium);
}
.accordion-section:last-of-type {
	border-bottom: 3px solid var(--blue-medium);
}
.accordion-section-content {
	display: none;
	margin-bottom: 30px;
}
.accordion-section-title-handle .h3 {
	position: relative;
}
.accordion-section-title-handle .h3::after {
		position: absolute;
		right: 0;
		top: -1px;
		/* display: block; */
		content: url(../images/icons/menus/accordion-caret.svg);
		width: 0.8em;
		rotate:	0deg;
}
.accordion-section-title-handle.active .h3::after {
	rotate: 270deg;
	right: 4px;
}

/* covered components */
.whats-covered-ico svg {
	width: 45px;
	height: 30px;
}
.whats-covered-text {
	width: calc(100% - 55px);
	margin-left: 5px;
}
h4.whats-covered-title {
	margin: 0;
	font-weight: 500;
	font-size: 18px;
	display: inline-block;
	color: #000;
	margin-top: 5px;
}
.what-is-covered-item {
	margin: 10px 0;
	min-width: 285px;
}

/* Sidebar */
.content-sidebar {
	width: calc( var(--sidebar-width) + var(--page-margin) );
}
	.content-left {
		width: calc( 100% - ( var(--sidebar-width) + var(--page-margin)) );
	}
	.content-left .pillar {
		margin-right: 0;
	}
	.content-holder {
		margin: auto;
		max-width: var(--max-width);
	}
	.sub-pillar {
		background-color: var(--blue-dark);
		color: var(--base-light);
	}
	.sub-pillar-form {
		padding: 30px;
	}

	.sub-pillar-bot {
		padding: 0px 30px;
	}
	.sub-pillar-top {
		background-color: var(--grey-light);
		color: var(--base-dark);
		padding: 15px 30px;
	}
	.sub-pillar-ico {
		width: 26px;
		height: 26px;
		display: inline-block;
		/* margin: 0px 10px 10px 0; */
		margin: 0px 0.15em 0.15em 0;
	}
	/* .sub-pillar-logo {
		width: 88px;
		height: 37px;
		display: inline-block;
		margin-left: auto;
	} */
	.sub-pillar-number {
		font-size: 37px;
		line-height: 1em;
	}
	.sub-pillar-title {
		font-size: 20px;
		font-weight: 400;
	}
	.sub-pillar-bot {
		background-color: var(--grey-light);
		background-image: url(../images/other/bg-sidebar.jpg?v=2);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		color: var(--base-dark);
		padding-top: 30px;
		height: 235px;
		font-size: 24px;
	}
		.sub-pillar-bot .sub-pillar-bot-title {
			margin-bottom: 10px;
			display: inline-block;
			font-weight: 600;
		}

/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

/* Text */
.h1 {
	margin: 0;
}
.h2 {
	font-size: 52px;
	font-weight: 600;
	line-height: 1em;
	margin: 0;
	letter-spacing: -0.02em;
}
.h3 {
	font-size: 30px;
	font-weight: 500;
	line-height: 1em;
	margin: 24px 0 24px 0;
	letter-spacing: -0.01em;
}
p {
	font-size: 0.9rem;
	/* font-weight: 400; */
}

a {
	all: unset;
	box-sizing: border-box;
}
	a:hover {
		cursor: pointer;
	}
	a:hover, a:active, a:focus {
		outline:0;
	}

ol, ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

strong {
	font-weight: bold;
}
.uppercase {
	text-transform: uppercase;
}

.product .bullet-list {
	font-size: 16px;
}
.bullet-list {
	display: block;
	list-style-type: disc;
	margin-block-start: 0em;
	margin-block-end: 1em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 1rem;
	line-height: 1.5em;
}
.bullet-sublist {
	display: block;
	list-style-type: circle;
	margin-block-start: 0.25em;
	margin-block-end: 0.25em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 1.5rem;
}
/* .number-list {
	display: block;
	list-style-type:decimal;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 1rem;
} */
/* special typography */
.text-primary {
	font-size: 1rem;
	font-weight: 500;
}
.text-secondary {
	font-size: 0.8rem;
	font-weight: 400;
}
.text-accent {
	color: var(--primary-color);
}
.text-bold {
 font-weight: 500;
}
.text-regular {
 font-weight: 500;
}
.text-book {
 font-weight: 300;
}
.text-underline {
 text-decoration: underline;
}
.text-center {
 text-align: center;
}

.breadcrumb-holder {
	font-size: 11px;
	color: var(--grey-medium);
	text-transform: uppercase;
	line-height: 2em;
	word-break: keep-all;
}
.breadcrumb-item::after {
	content: ">";
	display: inline-block;
	margin: 0 10px;
	color: var(--grey-medium);
	word-break: keep-all;
}
.breadcrumb-item:last-of-type {
	color: var(--grey-dark);
}
.breadcrumb-item:last-of-type::after {
	content: "";
	display: none;
}

/* home / thank you*/
.hero-description {
	font-size: clamp(18px, 1.8vw, 27px);
	font-weight: 400;
	background: var(--blue-dark);
	color: var(--base-light);
	display: block;
	width: fit-content;
	padding: 8px 18px;
	letter-spacing: -0.02em;
}
.hero-description:first-of-type {
	background: var(--blue-medium);
}
.main-title {
	font-size: clamp(35px, 4.7vw, 70px);
	line-height: 1.1em;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}
.sub-title {
	font-size: clamp(16px, 1.7vw, 25px);
	font-weight: 400;
	max-width: 600px;
	display: block;
	max-width: 85%;
	margin-top: 0.5em;
	letter-spacing: -0.02em;
}

#hero-container .hero-nav,
#hero-container .hero-legal {
	flex-direction: row;
  justify-content: center;
  gap: 5px 10px;
	padding-top: 20px;
	padding-bottom: 20px;
}
#hero-container .hero-legal {
	  justify-content: right;
}
a.hero-nav-item {
  font-size: clamp(14px, 1.11vw, 18px);
  width: clamp(165px, 17.8vw, 260px);
  font-weight: 500;
  background: var(--blue-medium);
  display: block;
  text-align: center;
  padding: 16px;
	align-content: center;
}

.hero-legal span {
	font-size: 7px;
	display: block;
	margin: auto 0;
	max-width: calc(100% - 61px);
	width: 420px;;
	text-align: right;
}
.hero-legal img {
	width: 51px;
	height: auto;
	display: block;
	margin: 2px 0 auto
}
.home .head-description {
	margin-bottom: 0;
}
.home .product-description {
	margin: 2em 0;
	line-height: 1.3em;
	font-size: 17px;
}
/* Product */
.product-title {
  font-size: clamp(40px, 5.4vw, 78px);
	font-weight: 600;
	display: block;
	width: fit-content;
	padding: 15px 30px;
	background-color: var(--blue-dark);
	color: var(--light-font-color);
	text-transform: uppercase;

	/* test */
  /* box-shadow: 0, 0, 0;
  box-decoration-break: clone;
	display: inline; 
	padding: 0; */
}
.product .product-title {	margin-left: 65px;
}
.landing .product-title {
	background-color: var(--grey-light);
	color: var(--grey-dark);
}
.landing .col-space {
	column-gap: 20px;
	row-gap: 20px;
}
.category-title {
  font-size: clamp(20px, 2.5vw, 35px);
	font-weight: 300;
	display: block;
	width: fit-content;
	padding: 8px 15px;
	background-color: var(--blue-light);

	/* test */
  /* box-shadow: 0, 0, 0;
  box-decoration-break: clone;
	display: inline;
	padding: 0; */
}
.contact .category-title {
	margin-left: clamp(230px, 28.5vw, 410px);
}
.about .category-title {
  margin-left: clamp(168px, 20.5vw, 290px);
}
.content.journey .category-title {
  margin-left: clamp(245px, 31.5vw, 450px);
}
.head-description {
    font-size: 22px;
    line-height: 1.35em;
    letter-spacing: -0.03em;
}
.sub-description {
    font-size: 18px;
    line-height: 1.35em;
    letter-spacing: -0.02em;
}
.product .h3 {
	margin: 30px 0 30px 0;
}
.product .form-title {
	font-size: 30px;
	line-height: 1em;
	margin: 0px;
}


.product .grey-inner {
	background-color: var(--grey-light);
	padding: 30px 40px;
}
.product .download-block {
	min-width: 270px;
}
.product .download-ico {
	width: 16px;
	height: 20px;
	margin-right: 10px;
}
.product .guide-title {
	margin: 0 0 10px 0;
	display: block;
}
.product .guide-download{
	background-color: var(--base-dark);
	color: var(--base-light);
	width: fit-content;
	padding: 9px 14px;
	margin-bottom: 10px;
}
.product .disclaimer-title {
	font-size: 11px;
	margin-top: 0;
}
.product .disclaimer-notice {
	font-size: 9px;
}
.product .disclaimer-legal {
	font-size: 13px;
	margin: var(--section-margin) 0 0;
}

.suggestion-block {
	color: var(--base-light);
	align-content: center;
	text-align: center;
	/* max-width: 325px; */
	padding: 25px 40px;
	font-size: 18px;
	font-weight: 500;
}
.suggestion-block:nth-of-type(1) {
	background-color: var(--blue-dark);
}
.suggestion-block:nth-of-type(2) {
	background-color: var(--blue-medium);
}
.suggestion-block:nth-of-type(3) {
	background-color: var(--blue-light);
}
.suggestion-block img {
	width: 100px;
	height: 100px;
	padding: 10px;
}
.suggestion-img {
	background-image: url(../images/other/bg-suggested.jpg?v=2);
	background-position: 0% 60%;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 25px 40px;
	color: var(--base-light);
	font-size: 26px;
	font-weight: 500;
}
.vertical-100-gaq {
	position: absolute;
	margin: 0;
	width: 100%;
	top: 100%;
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
.vertical-100-gaq .flex-pillar{
	justify-content: flex-end;
}
.warranty-button-holder {
	gap: 20px;
	display: flex;
	flex-wrap: wrap;
}
.warranty-button { 
	background-color: var(--blue-dark);
	color: #fff;
	width: calc(33% - 14px);
	min-width: 165px;
	/* width: 260px; */
	text-align: center;
	font-weight: 500;
	font-size: 17px;
	letter-spacing: -0.02em;
	padding: 0.8em 0.6em;
}
.warranty-button.active, .warranty-button:hover { 
	background-color: var(--blue-medium);
	transition: 0.3s ease-in-out;
}
.warranty-button .span {
	margin: 30px;
}

/*------------------------------------*\
	ICONOGRAPHY
\*------------------------------------*/

/*------------------------------------*\
	STYLED SECTIONS
\*------------------------------------*/
.section-white {
	background-color: var(--base-light);
	color: var(--dark-font-color);
}
.section-black {
	background-color: var(--base-dark);
	color: var(--light-font-color);
}
.section-blue-med {
	background-color: var(--blue-dark);
	color: var(--light-font-color);
}
.section-blue.flex-pillar {
	position: relative;
	background-color: var(--blue-dark);
	color: var(--light-font-color);
	margin-bottom: var(--section-margin);
	background-image: url(/images/other/bg-logo.svg);
	background-repeat: no-repeat;
	background-position: 154%;
	background-size: 60%;
	/* background-size: min(835px, 60vw) auto, contain;; */
	
	min-height: 450px
}
.section-blue::after {
	content: ''; /* Required for pseudo-element to render */
  position: absolute; /* Position relative to parent */
  bottom: 0;
  left: 0;
  width: 100%; /* Match parent width */
  height: 100%; /* Match parent height */
	background-image: url(/images/other/bg-finance.svg);
	background-repeat: repeat;
	background-position: center;
	background-size: 70px 70px;
	z-index: 0;
}
.section-blue .col-lg-3 {
	z-index: 1;
	background-color: var(--blue-dark);
}
.section-event {
	background-color: var(--blue-dark);
	color: var(--light-font-color);
	min-height: calc(100vh - var(--main-header-height) - 56px);
}
.section-underline {
	padding: 10px 0 35px 0;
	background-color: var(--grey-dark);
}
.section-underline hr {
	border: none;
	border-top: 2px solid var(--base-dark);
	margin: 0;
}


#hero-container {
	height: calc( 460px );
	position: relative;
	/* height: calc( 100svh - var(--main-header-height)); */

	/* background-color: #000; */
	color: var(--base-light);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.home #hero-container {
	height: calc( 100vh - var(--main-header-height));
	height: calc( 100svh - var(--main-header-height));
}
.home .section-warranties,
.section-dots {
	background: #dbe5ed;
  background-image: url(/images/other/warrany-bg.svg);
  background-image: url(/images/other/warrany-bg.svg), linear-gradient(90deg, #f8f9ff, #dbe5ed); /* W3C */
	background-size: auto 580px, cover;
	background-repeat: repeat-x, no-repeat;
  background-position: bottom center, top;
}
.home .inner-warranties {
  background-image: url(/images/other/wt-img.png?v=2);
	background-size: min(835px, 50vw) auto, contain;
	background-repeat: no-repeat;
  background-position: bottom right;
}
/* .home .warranties-image {
	max-height: 540px;
	height: 28vw;
} */
.overflow-left .overflow-content {
  /* background-image: url(/images/other/rt-img.jpg?v=2); */
	max-width: calc( var(--max-width) / 2 );
	margin: 0 0 0 auto;
	padding: var(--section-margin) var(--page-margin);
}

.overflow-right .overflow-content {
  /* background-image: url(/images/other/tr-img.jpg?v=2); */
	max-width: calc( var(--max-width) / 2 );
	margin: 0 auto 0 0;
	padding: var(--section-margin) var(--page-margin);
}
.overflow-inner {
	max-width: 280px;
}
#section-tracking {
	background-size: cover;
	min-height: 490px;
	align-content: center;
}

.landing-product-frame {
	width: 260px;
	background-color: var(--grey-dark);
	padding: 70px;
}
.landing-product-description {
	background-color: var(--grey-light);
	padding: 40px;
	width: calc(100% - 260px);
}
/*------------------------------------*\
	PAGE SPECIFIC
\*------------------------------------*/
	@media only screen and (min-width: 787px) {
		/* .home #hero-container { background-image: url(../images/hero/bg-hp.jpg?v=2); }

		.product.service #hero-container { background-image: url(../images/hero/bg-sp.jpg?v=2); }
		.product.maintenance #hero-container { background-image: url(../images/hero/bg-mp.jpg?v=2); }

		.product.warranty #hero-container { background-image: url(../images/hero/bg-tw.jpg?v=2); }
		.product.bumper2bumper #hero-container { background-image: url(../images/hero/bg-bb.jpg?v=2); }
		.product.warrantybooster #hero-container { background-image: url(../images/hero/bg-wb.jpg?v=2); }
		
		.product.renewtech #hero-container { background-image: url(../images/hero/bg-rt.jpg?v=2); }
		.product.adcover #hero-container { background-image: url(../images/hero/bg-ac.jpg?v=2); }
		.product.deposit-cover #hero-container { background-image: url(../images/hero/bg-dc.jpg?v=2); }
		.product.tyre-and-rim #hero-container { background-image: url(../images/hero/bg-tr.jpg?v=2); }
		.product.tracking #hero-container { background-image: url(../images/hero/bg-vt.jpg?v=2); }

		.product.balloon #hero-container { background-image: url(../images/hero/bg-bp.jpg?v=2); }
		.product.instalment #hero-container { background-image: url(../images/hero/bg-ia.jpg?v=2); }

		.content.contact #hero-container { background-image: url(../images/hero/bg-cu.jpg?v=2); }
		.content.about #hero-container { background-image: url(../images/hero/bg-au.jpg?v=2); }
		.content.journey #hero-container { background-image: url(../images/hero/bg-fj.jpg?v=2); }
		.content.sitemap #hero-container { background-image: url(../images/hero/bg-sm.jpg?v=2); }

		.landing.service-maintenance #hero-container { background-image: url(../images/hero/bg-hs.jpg?v=2); }
		.landing.warranties #hero-container { background-image: url(../images/hero/bg-hw.jpg?v=2); }
		.landing.vaps #hero-container { background-image: url(../images/hero/bg-hv.jpg?v=2); }
		.landing.finance #hero-container { background-image: url(../images/hero/bg-hf.jpg?v=2); } */

		.home #hero-container { background-image: url(../images/hero/bg-hp.webp?v=2); }

		.product.service #hero-container { background-image: url(../images/hero/bg-sp.webp?v=2); }
		.product.maintenance #hero-container { background-image: url(../images/hero/bg-mp.webp?v=2); }

		.product.warranty #hero-container { background-image: url(../images/hero/bg-tw.webp?v=2); }
		.product.bumper2bumper #hero-container { background-image: url(../images/hero/bg-bb.webp?v=2); }
		.product.warrantybooster #hero-container { background-image: url(../images/hero/bg-wb.webp?v=2); }
		
		.product.renewtech #hero-container { background-image: url(../images/hero/bg-rt.webp?v=2); }
		.product.adcover #hero-container { background-image: url(../images/hero/bg-ac.webp?v=2); }
		.product.deposit-cover #hero-container { background-image: url(../images/hero/bg-dc.webp?v=2); }
		.product.tyre-and-rim #hero-container { background-image: url(../images/hero/bg-tr.webp?v=2); }
		.product.tracking #hero-container { background-image: url(../images/hero/bg-vt.webp?v=2); }

		.product.balloon #hero-container { background-image: url(../images/hero/bg-bp.webp?v=2); }
		.product.instalment #hero-container { background-image: url(../images/hero/bg-ia.webp?v=2); }

		.content.contact #hero-container { background-image: url(../images/hero/bg-cu.webp?v=2); }
		.content.about #hero-container { background-image: url(../images/hero/bg-au.webp?v=2); }
		.content.journey #hero-container { background-image: url(../images/hero/bg-fj.webp?v=2); }
		.content.sitemap #hero-container { background-image: url(../images/hero/bg-sm.webp?v=2); }

		.landing.service-maintenance #hero-container { background-image: url(../images/hero/bg-hs.webp?v=2); }
		.landing.warranties #hero-container { background-image: url(../images/hero/bg-hw.webp?v=2); }
		.landing.vaps #hero-container { background-image: url(../images/hero/bg-hv.webp?v=2); }
		.landing.finance #hero-container { background-image: url(../images/hero/bg-hf.webp?v=2); }

		.text-center-desktop {
			text-align: center;
		}
		.home #hero-container {
			min-height: 580px;
		}
		.home .warranties-icon {
			width: 85px;
			height: 55px;
		}
		.overflow-left {
			background-image: url(/images/other/rt-img.jpg?v=2);
			background-repeat: no-repeat;
			background-size: cover;
			height: 65vw;
			max-height: 630px;
			align-content: end;
		}
		.overflow-right {
			background-image: url(/images/other/tr-img.jpg?v=2);
			background-repeat: no-repeat;
			background-size: cover;
			height: 65vw;
			max-height: 630px;
			align-content: end;
		}
		/* .service #hero-container {
			background-image: url(../images/hero/bg-sp.jpg?v=2);
		} */
		.vertical-center-child-desktop {
			position: absolute;
			margin: 0;
			width: 100%;
			top: 40%;
			-ms-transform: translateY(-40%);
			transform: translateY(-40%);
		}
		.vertical-84-child-desktop {
			position: absolute;
			margin: 0;
			width: 100%;
			top: 86%;
			-ms-transform: translateY(-86%);
			transform: translateY(-86%);
		}
		#section-tracking {
			background-image: url(/images/other/bg-tracking.jpg?v=2);
		}
		.vertical-100-child-desktop {
			position: absolute;
			margin: 0;
			width: 100%;
			top: 100%;
			-ms-transform: translateY(-100%);
			transform: translateY(-100%);
			background-color: var(--base-dark-06);
		}
		.suggestion-block {
			max-width: 325px;
		}
	}
	@media only screen and (min-width: 787px) and (max-height: 790px) {
		.vertical-center-child-desktop {
			top: 30%;
			-ms-transform: translateY(-25%);
			transform: translateY(-25%);
		}
	}
	@media only screen and (max-width: 786px) {
			/* Product Pages */
		.product.service #hero-container { background-image: url(../images/hero/bg-sp-m.webp?v=2); }
		.product.maintenance #hero-container { background-image: url(../images/hero/bg-mp-m.webp?v=2); }
	
		.product.warranty #hero-container { background-image: url(../images/hero/bg-tw-m.webp?v=2); }
		.product.bumper2bumper #hero-container { background-image: url(../images/hero/bg-bb-m.webp?v=2); }
		.product.warrantybooster #hero-container { background-image: url(../images/hero/bg-wb-m.webp?v=2); }
		
		.product.renewtech #hero-container { background-image: url(../images/hero/bg-rt-m.webp?v=2); }
		.product.adcover #hero-container { background-image: url(../images/hero/bg-ac-m.webp?v=2); }
		.product.deposit-cover #hero-container { background-image: url(../images/hero/bg-dc-m.webp?v=2); }
		.product.tyre-and-rim #hero-container { background-image: url(../images/hero/bg-tr-m.webp?v=2); }
		.product.tracking #hero-container { background-image: url(../images/hero/bg-vt-m.webp?v=2); }
	
		.product.balloon #hero-container { background-image: url(../images/hero/bg-bp-m.webp?v=2); }
		.product.instalment #hero-container { background-image: url(../images/hero/bg-ia-m.webp?v=2); }

		.content.about #hero-container { background-image: url(../images/hero/bg-au-m.webp?v=2); }
		.content.contact #hero-container { background-image: url(../images/hero/bg-cu-m.webp?v=2); }
		.content.journey #hero-container { background-image: url(../images/hero/bg-fj-m.webp?v=2); }
		.content.sitemap #hero-container { background-image: url(../images/hero/bg-sm-m.webp?v=2); }

		.landing.service-maintenance #hero-container { background-image: url(../images/hero/bg-hs-m.webp?v=2); }
		.landing.warranties #hero-container { background-image: url(../images/hero/bg-hw-m.webp?v=2); }
		.landing.vaps #hero-container { background-image: url(../images/hero/bg-hv-m.webp?v=2); }
		.landing.finance #hero-container { background-image: url(../images/hero/bg-hf-m.webp?v=2); }

		/* .product.service #hero-container { background-image: url(../images/hero/bg-sp-m.jpg?v=2); }
		.product.maintenance #hero-container { background-image: url(../images/hero/bg-mp-m.jpg?v=2); }
	
		.product.warranty #hero-container { background-image: url(../images/hero/bg-tw-m.jpg?v=2); }
		.product.bumper2bumper #hero-container { background-image: url(../images/hero/bg-bb-m.jpg?v=2); }
		.product.warrantybooster #hero-container { background-image: url(../images/hero/bg-wb-m.jpg?v=2); }
		
		.product.renewtech #hero-container { background-image: url(../images/hero/bg-rt-m.jpg?v=2); }
		.product.adcover #hero-container { background-image: url(../images/hero/bg-ac-m.jpg?v=2); }
		.product.deposit-cover #hero-container { background-image: url(../images/hero/bg-dc-m.jpg?v=2); }
		.product.tyre-and-rim #hero-container { background-image: url(../images/hero/bg-tr-m.jpg?v=2); }
		.product.tracking #hero-container { background-image: url(../images/hero/bg-vt-m.jpg?v=2); }
	
		.product.balloon #hero-container { background-image: url(../images/hero/bg-bp-m.jpg?v=2); }
		.product.instalment #hero-container { background-image: url(../images/hero/bg-ia-m.jpg?v=2); }

		.content.about #hero-container { background-image: url(../images/hero/bg-au-m.jpg?v=2); }
		.content.contact #hero-container { background-image: url(../images/hero/bg-cu-m.jpg?v=2); }
		.content.journey #hero-container { background-image: url(../images/hero/bg-fj-m.jpg?v=2); }
		.content.sitemap #hero-container { background-image: url(../images/hero/bg-sm-m.jpg?v=2); }

		.landing.service-maintenance #hero-container { background-image: url(../images/hero/bg-hs-m.jpg?v=2); }
		.landing.warranties #hero-container { background-image: url(../images/hero/bg-hw-m.jpg?v=2); }
		.landing.vaps #hero-container { background-image: url(../images/hero/bg-hv-m.jpg?v=2); }
		.landing.finance #hero-container { background-image: url(../images/hero/bg-hf-m.jpg?v=2); } */

		.product #hero-container,
		.content #hero-container {
			/* height: calc(690px); */
			height: 100vw;
			min-height: 390px;
		}

		.home #hero-container {
			background-image: url(../images/hero/bg-hp-m.jpg?v=2);
			min-height: 700px;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}
		.warranty-button {
			width: 100%;
			min-width: unset;
		}
		.home .warranties-image {
			max-height: 540px;
			height: 28vw;
		}
		.main-title {
			font-size: clamp(30px, 9vw, 70px);
		}
		.sub-title {
    	font-size: clamp(16px, 4vw, 32px);
		}
		.hero-legal {
			background-color: var(--base-dark-06);
		}
		/* .hero-legal img {
    width: 85px;
		} */
		/* .hero-legal span {
			max-width: calc(100% - 91px);
		} */
		.flex-pillar.inner-warranties {
			padding-top: 0;
			background-size: min(835px, 67vw) auto, contain;
		}
		.home #cosmetic-care {
			background-color: var(--base-dark);
			color: var(--light-font-color);
		}
		.home #deposit-adcover {
			background-color: var(--blue-dark);
			color: var(--light-font-color);
		}
		.overflow-left {
			background-image: url(/images/other/rt-img-m.jpg?v=2);
			background-repeat: no-repeat;
			background-size: cover;
		}
		.overflow-right {
			background-image: url(/images/other/tr-img-m.jpg?v=2);
			background-repeat: no-repeat;
			background-size: cover;
		}
		.section-blue.flex-pillar {
			background-position: bottom var(--section-margin) center;
			background-size: calc(100vw - (2 * var(--page-margin)));
			padding-top: 0px;
			margin-bottom: 0;
		}
		.section-blue::after {
    	height: 72vw;
		}
		.dc-ac-spacer {
			min-height: calc(0.67 * (100vw - (2 * var(--page-margin))));
		}
		#section-tracking {
			background-image: url(/images/other/bg-tracking-m.jpg)
		}
		.vertical-center-child-desktop {
			position: absolute;
			margin: 0;
			width: 100%;
			top: 6%;
			-ms-transform: translateY(-6%);
			transform: translateY(-6%);
		}
		.breadcrumb-holder {
			font-size: clamp(9px, 2.4vw, 18px);
		}
		.home .warranties-icon {
			width: 109px;
			height: 72px;
		}
		

		.product .category-title {
			font-size: clamp(19px, 3.8vw, 29px);
		}

		.product .product-title {
			font-size: clamp(26px, 8.7vw, 65px);
			margin-left: clamp(16px, 4.2vw, 32px);
		}
		.sub-description {
			font-size: clamp(16px, 3.1vw, 24px);
			padding-top: 5px;
		}
		.head-description {
			font-size: clamp(18px, 3.9vw, 30px);
		}
		.product .bullet-list {
			font-size: clamp(16px, 3.1vw, 22px);
		}

		.h2 {
			font-size: clamp(33px, 6.8vw, 52px);
		}

		.h3 {
			font-size: clamp(25px, 5.2vw, 40px);
		}

		.product .guide-title {
			font-size: clamp(25px, 5.2vw, 40px);
		}

		.product .disclaimer-title,
		.product .disclaimer-legal {
			font-size: clamp(12px, 3.1vw, 24px);
		}

		.product .disclaimer-notice {
			font-size: clamp(10px, 2.6vw, 20px);
		}

		.product .form-title {
			font-size: clamp(30px, 6.8vw, 52px);
		}

		.product .sub-pillar-ico {
			width: clamp(24px, 5.2vw, 40px);
			height: clamp(24px, 5.2vw, 40px);
		}

		.product .sub-pillar-number {
			font-size: clamp(30px, 7.7vw, 59px);
		}

		.product .sub-pillar-title {
			font-size: clamp(19px, 4.4vw, 34px);
		}

		.product .sub-pillar-bot,
		.suggestion-img {
			font-size: clamp(20px, 5.2vw, 40px);
		}

		.product .sub-pillar-top {
			padding: 25px 30px;
		}
		.product .sub-pillar-bot,
		.suggestion-img {
			min-height: clamp(300px, 46.9vw, 360px);
		}

		.suggestion-block {
			min-height: clamp(240px, 39.1vw, 300px);
		}

		.suggestion-block img {
			width: clamp(100px, 20.8vw, 160px);
			height: clamp(100px, 20.8vw, 160px);
		}

		.product .download-block {
			min-width: 100%;
		}
		.landing-product-frame {
			width: 100%;
			padding: var(--page-margin);
			max-height: 200px;
		}
		.landing-product-frame img {
			max-height: calc(100%);
		}
		.landing-product-description {
			width: 100%;
		}

	}

/*------------------------------------*\
	MISC
\*------------------------------------*/
/* buttons */
.button-main, .button-hollow {
	height: fit-content;
	width: fit-content;
	display: flex;
	font-size: 16px;
	position: relative;
	padding: 0.8em 0;
}
.button-main > span, .button-hollow > span {
	/* font-size: 16px; */
	font-weight: 600;
	margin: auto 30px;
	padding-right: 1em;
}
.button-main { 
	background-color: var(--primary-color);
	color: #fff;
}
.button-main > span::after {
	content: url(../images/icons/menus/button-caret.svg);
	position: absolute;
	right: 30px;
	width: 0.5em;
	top: 0.95em;
}
.button-hollow {
	border:3px solid var(--primary-color);
	color: #000;
}
a.hero-nav-item:hover,
.button-main:hover {
	background-color: var(--blue-dark);
	transition: 0.3s ease-in-out;
}

.button-float-lg .button-main {
	margin: 0 0 0 auto;
}
/* selected content*/ 
::selection {
	background: var(--select-color);
	color: var(--light-font-color);
	text-shadow:none;
}
::-webkit-selection {
	background: var(--select-color);
	color: var(--light-font-color);
	text-shadow:none;
}
::-moz-selection {
	background: var(--select-color);
	color: var(--light-font-color);
	text-shadow:none;
}

/* input fields */
input:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	outline:0;
}


/*------------------------------------*\
	STOP EDITING HERE
 *------------------------------------*
	IMAGES
\*------------------------------------*/
/* img:not(.overflow) { */
img {
	max-width:100%;
	vertical-align:bottom;
}


/*------------------------------------*\
	GLOBAL
\*------------------------------------*/
/* global box-sizing */
*,
*::after,
*::before {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	font-smooth: always;
	/* @Calvin */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*------------------------------------*\
	RESPONSIVE
\*------------------------------------*/
.pillar, .flex-pillar {
	padding: var(--section-margin) var(--page-margin);
	max-width: var(--max-width);
	margin: auto;
}
.flex, .flex-pillar {
	display: flex;
	flex-wrap: wrap;
}
.pillar-border {
	margin: auto;
	border-bottom: 2px solid var(--base-dark) !important;
	width: calc( 100vw - (var(--page-margin)) * 2);
	max-width: calc( var(--max-width) - (var(--page-margin)) * 2);
}
.padding-top-0 {
	padding-top: 0;
}
.padding-bottom-0 {
	padding-bottom: 0;
}
.padding-top-half {
	padding-top: calc(var(--section-margin)/2);
}
.padding-bottom-half {
	padding-bottom: calc(var(--section-margin)/2);
}

.sub-pillar {
	margin: 0 var(--page-margin) var(--section-margin) 0;
	padding: 0;
}
.section-accordian .pillar {
	padding: 0 30px var(--section-margin) var(--page-margin);
}
.suggestion-pillar {
	padding: 0 var(--page-margin) var(--section-margin);
}

.section-inner .pillar {
	padding: 0rem var(--page-margin);
}
.flex-break {
	flex-basis: 100%;
	height: 0;
}
.flex-pillar:has(.breadcrumb-holder) {
	padding: calc(var(--section-margin)*0.66) var(--page-margin) calc(var(--section-margin)*0.33);
}


/* Page Margin Adjustment */
@media only screen and (max-width: 1280px) {
	:root {
		--sidebar-width: 435px;
		--page-margin: 60px;
	}
}
/* Page Margin Adjustment */
@media only screen and (max-width: 1100px) {
	:root {
		--page-margin: 40px;
		--sidebar-width: 385px;
	}
}

/* Small Breakpoint and Down */
@media only screen and (max-width: 999px) {
	.section-accordian .pillar,
	.sub-pillar {
		margin: 0;
    padding: 0 var(--page-margin) var(--section-margin);
	}
	.product .grey-inner {
		background-color: var(--grey-light);
		padding: var(--section-margin) var(--page-margin);
		margin: 0 calc( 0px - var(--page-margin));
	}
	.suggestion-pillar {
		padding: 0;
	}
	.suggestion-block {
		min-width: 50%;
	}

	.content-sidebar { width: 100%; }
	.content-left { width: 100%; }
	.sub-pillar-form,
	.sub-pillar-top,
	/* .sub-pillar-mid, */
	.sub-pillar-bot {
		border-radius: 0;
		/* padding: 22px var(--page-margin); */
		padding: var(--section-margin) var(--page-margin);
	}
	.sub-pillar { padding: 0; }
	/* Hero / Menus */
	.drop-down-container.mobile-pre-open {
		display: block;
	}
	a.hero-nav-item {
		font-size: 14px;
		width: calc(50vw - var(--page-margin) - 15px);
	}
}

@media only screen and (max-width: 786px) {
	/*------------------------------------*\
		VARIABLES
	\*------------------------------------*/
	:root {
		/* Special Dimensions */
		--page-margin: 30px;
		--section-margin: 60px;
	}
	/*------------------------------------*\
		TYPOGRAPHY
	\*------------------------------------*/

	/*------------------------------------*\
		PAGE SPECIFIC
	\*------------------------------------*/

	/*------------------------------------*\
		ICONOGRAPHY
	\*------------------------------------*/

	/*------------------------------------*\
		PAGE STRUCTURE
	\*------------------------------------*/
	/* buttons */
	.button-main, .button-hollow {
		font-size: clamp(18px, 3.9vw, 30px);
	}
	/*------------------------------------*\
		Compatibility - Browsers that don't support webp
	\*------------------------------------*/
	.no-webp .home #hero-container { background-image: url(../images/hero/bg-hp-m.jpg?v=2); }
}

@media screen and (max-width: 480px) {
	:root {
		--section-margin: 40px;
	}
	a.hero-nav-item {
		font-size: 13px;
		padding: 13px 10px;
	}
}


/*------------------------------------*\
	COLUMNS
\*------------------------------------*/
.col-space {
	column-gap: var(--col-space);
}
.row-space {
	row-gap: var(--section-margin);
}
/* 12 Column Structure Large */
.col-lg-0 {flex-grow: 1}
.col-lg-1 {flex:8.333333333333333%;}
.col-lg-2 {flex:16.66666666666667%;}
.col-lg-3 {flex:25%;}
.col-lg-4 {flex:33.33333333333333%;}
.col-lg-5 {flex:41.66666666666667%;}
.col-lg-6 {flex:50%;}
.col-lg-7 {flex:58.33333333333333%;}
.col-lg-8 {flex:66.66666666666667%;}
.col-lg-9 {flex:75%;}
.col-lg-10 {flex:83.33333333333333%;}
.col-lg-11 {flex:91.66666666666667%;}
.col-lg-12 {flex:100%;}

.col-space .col-lg-1 {flex: calc(8.333333333333333% - var(--col-space));}
.col-space .col-lg-2 {flex: calc(16.66666666666667% - var(--col-space));}
.col-space .col-lg-3 {flex: calc(25% - var(--col-space));}
.col-space .col-lg-4 {flex: calc(33.33333333333333% - var(--col-space));}
.col-space .col-lg-5 {flex: calc(41.66666666666667% - var(--col-space));}
.col-space .col-lg-6 {flex: calc(50% - var(--col-space));}
.col-space .col-lg-7 {flex: calc(58.33333333333333% - var(--col-space));}
.col-space .col-lg-8 {flex: calc(66.66666666666667% - var(--col-space));}
.col-space .col-lg-9 {flex: calc(75% - var(--col-space));}
.col-space .col-lg-10 {flex: calc(83.33333333333333% - var(--col-space));}
.col-space .col-lg-11 {flex: calc(91.66666666666667% - var(--col-space));}
.col-space .col-lg-12 {flex: calc(100% - var(--col-space));}

body .lg-hide {display:none;}
body .lg-show {display:unset;}
body .sp-show {display:none;}
body .sp-hide {display:unset;}
body .md-show {display:none;}
body .md-hide {display:unset;}
body .sm-show {display:none;}
body .sm-hide {display:unset;}
	

/* 12 Column Structure Medium */
@media only screen and (max-width:1280px) {
	.col-md-1 {flex:8.333333333333333%;}
	.col-md-2 {flex:16.66666666666667%;}
	.col-md-3 {flex:25%;}
	.col-md-4 {flex:33.33333333333333%;}
	.col-md-5 {flex:41.66666666666667%;}
	.col-md-6 {flex:50%;}
	.col-md-7 {flex:58.33333333333333%;}
	.col-md-8 {flex:66.66666666666667%;}
	.col-md-9 {flex:75%;}
	.col-md-10 {flex:83.33333333333333%;}
	.col-md-11 {flex:91.66666666666667%;}
	.col-md-12 {flex:100%;}

	.col-space .col-md-1 {flex: calc(8.333333333333333% - var(--col-space));}
	.col-space .col-md-2 {flex: calc(16.66666666666667% - var(--col-space));}
	.col-space .col-md-3 {flex: calc(25% - var(--col-space));}
	.col-space .col-md-4 {flex: calc(33.33333333333333% - var(--col-space));}
	.col-space .col-md-5 {flex: calc(41.66666666666667% - var(--col-space));}
	.col-space .col-md-6 {flex: calc(50% - var(--col-space));}
	.col-space .col-md-7 {flex: calc(58.33333333333333% - var(--col-space));}
	.col-space .col-md-8 {flex: calc(66.66666666666667% - var(--col-space));}
	.col-space .col-md-9 {flex: calc(75% - var(--col-space));}
	.col-space .col-md-10 {flex: calc(83.33333333333333% - var(--col-space));}
	.col-space .col-md-11 {flex: calc(91.66666666666667% - var(--col-space));}
	.col-space .col-md-12 {flex: calc(100% - var(--col-space));}
	
	body .md-hide {display:none;}
	body .md-show {display:unset;}
}
/* Special Breakpoint and Down */
@media only screen and (max-width: 999px) {
	body .sp-hide {display:none;}
	body .sp-show {display:unset;}
}
@media only screen and (max-width: 880px) {
	.home .sp-hide {display:none;}
	.home .sp-show {display:unset;}
}
/* 12 Column Structure Small */
@media only screen and (max-width: 786px) {
	.col-sm-1 {flex:8.333333333333333%;}
	.col-sm-2 {flex:16.66666666666667%;}
	.col-sm-3 {flex:25%;}
	.col-sm-4 {flex:33.33333333333333%;}
	.col-sm-5 {flex:41.66666666666667%;}
	.col-sm-6 {flex:50%;}
	.col-sm-7 {flex:58.33333333333333%;}
	.col-sm-8 {flex:66.66666666666667%;}
	.col-sm-9 {flex:75%;}
	.col-sm-10 {flex:83.33333333333333%;}
	.col-sm-11 {flex:91.66666666666667%;}
	.col-sm-12 {flex:100%;}

	.col-space .col-sm-1 {flex: calc(8.333333333333333% - var(--col-space));}
	.col-space .col-sm-2 {flex: calc(16.66666666666667% - var(--col-space));}
	.col-space .col-sm-3 {flex: calc(25% - var(--col-space));}
	.col-space .col-sm-4 {flex: calc(33.33333333333333% - var(--col-space));}
	.col-space .col-sm-5 {flex: calc(41.66666666666667% - var(--col-space));}
	.col-space .col-sm-6 {flex: calc(50% - var(--col-space));}
	.col-space .col-sm-7 {flex: calc(58.33333333333333% - var(--col-space));}
	.col-space .col-sm-8 {flex: calc(66.66666666666667% - var(--col-space));}
	.col-space .col-sm-9 {flex: calc(75% - var(--col-space));}
	.col-space .col-sm-10 {flex: calc(83.33333333333333% - var(--col-space));}
	.col-space .col-sm-11 {flex: calc(91.66666666666667% - var(--col-space));}
	.col-space .col-sm-12 {flex: calc(100% - var(--col-space));}
		
	body .sm-hide {display:none;}
	body .sm-show {display:unset;}
}

@media only screen and (max-width: 480px) {
	.col-xs-1 {flex:8.333333333333333%;}
	.col-xs-2 {flex:16.66666666666667%;}
	.col-xs-3 {flex:25%;}
	.col-xs-4 {flex:33.33333333333333%;}
	.col-xs-5 {flex:41.66666666666667%;}
	.col-xs-6 {flex:50%;}
	.col-xs-7 {flex:58.33333333333333%;}
	.col-xs-8 {flex:66.66666666666667%;}
	.col-xs-9 {flex:75%;}
	.col-xs-10 {flex:83.33333333333333%;}
	.col-xs-11 {flex:91.66666666666667%;}
	.col-xs-12 {flex:100%;}

	.col-space .col-xs-1 {flex: calc(8.333333333333333% - var(--col-space));}
	.col-space .col-xs-2 {flex: calc(16.66666666666667% - var(--col-space));}
	.col-space .col-xs-3 {flex: calc(25% - var(--col-space));}
	.col-space .col-xs-4 {flex: calc(33.33333333333333% - var(--col-space));}
	.col-space .col-xs-5 {flex: calc(41.66666666666667% - var(--col-space));}
	.col-space .col-xs-6 {flex: calc(50% - var(--col-space));}
	.col-space .col-xs-7 {flex: calc(58.33333333333333% - var(--col-space));}
	.col-space .col-xs-8 {flex: calc(66.66666666666667% - var(--col-space));}
	.col-space .col-xs-9 {flex: calc(75% - var(--col-space));}
	.col-space .col-xs-10 {flex: calc(83.33333333333333% - var(--col-space));}
	.col-space .col-xs-11 {flex: calc(91.66666666666667% - var(--col-space));}
	.col-space .col-xs-12 {flex: calc(100% - var(--col-space));}
		
	body .xs-hide {display:none;}
	body .xs-show {display:unset;}
}