/******************************************/
/** General                              **/
/******************************************/

:root {
   --primary: #dc0f11;
	--secondary: #2f4858;
	--alternative: #f0a319;
	--whatsapp: #25D366;
	--black: #000000;
	--dark: #0f1113;
   --gray: #464646;
   --light-gray: #a7a7a7;
	--light: #f2f2f2;
   --white: #ffffff;
}

*, *::before, *::after {box-sizing: border-box;}

html, body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   overflow-x: hidden;
	position: relative;
	color: var(--black);
	background-color: var(--white);
	font-family: 'Heebo', sans-serif;
}

a:hover {text-decoration: none;}



/******************************************/
/** Utilities and Helpers                **/
/******************************************/

.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-alternative {background-color: var(--alternative) !important;}
.bg-whatsapp {background-color: var(--whatsapp) !important;}
.bg-dark {background-color: var(--dark) !important;}
.bg-gray {background-color: var(--gray) !important;}
.bg-light {background-color: var(--light) !important;}

.text-primary {color: var(--primary) !important;}
.text-gray {color: var(--gray) !important;}
.text-light-gray {color: var(--light-gray) !important;}

.hover\:text-primary:hover {color: var(--primary) !important;}

.border-primary {border-color: var(--primary) !important;}

.fs-7 {font-size: .9rem;}

.w-fit {width: fit-content;}
.h-fit {height: fit-content;}

.transition-03 {
	transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}



/******************************************/
/** Components                           **/
/******************************************/

/* Buttons */

.button {padding: 10px 20px;}

.button-sm {padding: .225rem 1rem .375rem 1rem;}

/* Sizes */

.size-md {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
}

/* Aside fixed items */

.aside-fixed {
	right: 5%;
	bottom: 5%;
}

.back-top {
	opacity: 0;
   transform: translateY(120%);
}

.back-top.show {
	opacity: 1;
	transform: translateY(0);
}

/* Banner */

#banner {height: 300px;}

#banner.stock {height: 400px;}

#banner > .overlay {
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,.6) 50%, rgba(255,255,255,0) 150%);
}



/******************************************/
/** Navbar                               **/
/******************************************/

nav#desktop {
	z-index: 1000;
	border-color: #ffffff45 !important;
}



/******************************************/
/** Home                                 **/
/******************************************/

#hero {height: 97vh;}

#hero > img {object-position: center 70%;}

#hero > .overlay {
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,.6) 35%, rgba(255,255,255,0) 100%);
}

#hero h1 {font-size: 3.5rem;}



/******************************************/
/** Search                               **/
/******************************************/

#tabsNav {transform: translateY(-100%);}

.btn-tab {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: rgb(242,242,242);
	background: linear-gradient(0deg, rgb(234, 234, 234) 0%, rgb(255, 255, 255) 50%);
}

.btn-tab.active {background: var(--white);}

.btn-tab-submit {padding: .375rem .75rem;}

#searchForm .form-group,
#searchForm button {width: calc(16% - 10px);}

#categoriesForm img {height: 35px;}



/******************************************/
/** Trucks                               **/
/******************************************/

.truck-card:hover {
	border-radius: 1rem;
	box-shadow: 0 1rem 3rem rgba(33, 37, 41, 0.336) !important;
}

/* Item view */

.prev-title {
	width: 40px;
	height: 7px;
	margin-top: 10px;
}

.custom-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 3px;
}

.custom-list li::before {
	left: 0;
	top: 45%;
	content: '';
	width: 17px;
	height: 3px;
	position: absolute;
	border-radius: 50px;
	background-color: var(--primary);
}

/* Gallery */

.splide__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#thumbnail-carousel .splide__slide {
	opacity: 0.5;
	overflow: hidden;
	border-radius: 1rem;
}

#thumbnail-carousel .splide__slide.is-active {opacity: 1;}

#thumbnail-carousel .splide__track--nav > .splide__list > .splide__slide.is-active {
	border: none;
	border: 2px solid var(--primary);
}

.splide__arrows .splide__arrow {background-color: var(--primary);}

.splide__arrows .splide__arrow svg {
	width: .8rem;
	height: .8rem;
	fill: var(--white);
}

#thumbnail-carousel .splide__track--nav > .splide__list > .splide__slide {border: none;}



/******************************************/
/** Contactos                            **/
/******************************************/

.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
	box-shadow: none;
	border-color: var(--primary);
	background-color: var(--white);
}

::placeholder {
	opacity: 1;
	color: var(--light-gray) !important;
}

::-ms-input-placeholder {
	color: var(--light-gray) !important;
}

.form-check-input {
	min-width: 1em !important;
	min-height: 1em !important;
}

.form-check-input:checked {
	border-color: var(--primary) !important;
	background-color: var(--primary) !important;
}

.form-check-input:focus {
	box-shadow: none;
	border-color: var(--primary) !important;
}