html.demo-auto-services body{

}

@media (min-width: 1200px) {
		html.demo-auto-services .container:not(.container-bs):not(.container-xl-custom):not(.container-xxl-custom){
				max-width: 1200px;
		}
}

html.demo-auto-services .custom-border-radius-1{
		border-radius: 7px !important;
}

html.demo-auto-services .custom-text-underline-1{
		border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

html.demo-auto-services .custom-btn-border-radius{
		border-radius: var(--border-radius2x);
}

html.demo-auto-services .custom-btn-arrow-effect-1 > svg{
		transition: ease transform 300ms;
}

html.demo-auto-services .custom-btn-arrow-effect-1:hover > svg{
		transform: translate3d(8px, 0, 0);
}

html.demo-auto-services .custom-select-1.custom-select-1-arrow-position:before{
		right: 30px;
}

html.demo-auto-services .custom-svg-1{
		position: absolute;
		left: 0;
		top: -100px;
		width: 640px;
}

html.demo-auto-services .custom-svg-2{
		position: absolute;
		top: 43%;
		left: -260px;
		width: 190px;
		transform: translate3d(0, -50%, 0);
}

html.demo-auto-services .custom-svg-3{
		display: none;
		position: absolute;
		right: 0;
}

@media (min-width: 576px) {
		html.demo-auto-services .custom-svg-3{
				display: block;
				bottom: -80px;
				width: 80px;
		}
}

@media (min-width: 1440px) {
		html.demo-auto-services .custom-svg-3{
				bottom: -150px;
				width: 150px;
		}
}

html.demo-auto-services .custom-bg-color-grey-1{
		background-color: #f4f4f4 !important;
}

html.demo-auto-services .custom-alert-bg-color-1{
		background-color: var(--light) cd6 !important;
}

@media (max-width: 575px) {
		html.demo-auto-services .custom-section-background{
				background-color: var(--light) !important;
		}
}

html.demo-auto-services .custom-section-background .container:before{
		content: '';
		position: absolute;
		top: 50%;
		right: 85%;
		width: 100vw;
		height: calc( 100% + 150px);
		background: var(--light);
		z-index: 0;
		transform: translate3d(0, -50%, 0);
}

@media (max-width: 575px) {
		html.demo-auto-services .custom-section-background .container:before{
				opacity: 0;
		}
}

@media (min-width: 1920px) {
		html.demo-auto-services .custom-background-style-1{
				background-size: cover;
		}
}

@media (max-width: 575px) {
		html.demo-auto-services .custom-background-style-1{
				background-image: none !important;
				background-color: var(--light);
		}
}

@media (min-width: 2050px), (max-width: 991px) {
		html.demo-auto-services .custom-background-size-1{
				background-size: cover !important;
		}
}

@media (min-width: 2050px) {
		html.demo-auto-services .custom-background-size-1{
				background-position: 14vw 50% !important;
		}
}

html.demo-auto-services .custom-svg-background-1{
		position: absolute;
		width: 1000%;
		top: 0;
		left: 50%;
		height: 100.2%;
		transform: translate3d(-50%, 0, 0);
}

@media (max-width: 991px) {
		html.demo-auto-services .custom-svg-background-1{
				left: 77%;
		}
}

@media (max-width: 575px) {
		html.demo-auto-services .custom-svg-background-1{
				left: 82%;
		}
}

@media (max-width: 991px) {
		html.demo-auto-services .custom-remove-mobile-border-left{
				border-left: 0 !important;
		}
}

@media (max-width: 575px) {
		html.demo-auto-services .custom-remove-mobile-xs-border-left{
				border-left: 0 !important;
		}
}

html.demo-auto-services .custom-divider > hr{
		height: 4px !important;
}

@keyframes customLineAnim {
		from {
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
		}
		to {
				stroke-dasharray: 2500;
				stroke-dashoffset: 1600;
		}
}

html.demo-auto-services .customLineAnim{
		animation-name: customLineAnim;
}

@keyframes customLineAnim2 {
		from {
				stroke-dasharray: 2650;
				stroke-dashoffset: 2650;
		}
		to {
				stroke-dasharray: 2650;
				stroke-dashoffset: 0;
		}
}

html.demo-auto-services .customLineAnim2{
		animation-name: customLineAnim2;
}

@keyframes customLineProgressAnim {
		from {
				width: 0;
		}
		to {
				width: 60px;
		}
}

html.demo-auto-services .customLineProgressAnim{
		animation-name: customLineProgressAnim;
}

/*
 * Social Icons
 */
html.demo-auto-services .custom-social-icons-divider > li + li{
		position: relative;
		margin-left: 20px;
}

html.demo-auto-services .custom-social-icons-divider > li + li:before{
		content: '';
		border-left: 1px solid #dadcdd;
		height: 80%;
		position: absolute;
		left: -13px;
		top: 50%;
		transform: translate3d(0, -50%, 0);
}

/*
 * Header
 */
html.demo-auto-services #header .header-container{
		height: 110px;
}

html.demo-auto-services #header .header-nav-main nav > ul > li.dropdown .dropdown-menu{
		border-radius: 5px !important;
}

html.demo-auto-services #header .header-nav-features .header-nav-feature.px-4 .header-nav-features-dropdown.show{
		right: calc( 100% - 30px) !important;
}

html.demo-auto-services .custom-left-border-1{
		position: relative;
}

html.demo-auto-services .custom-left-border-1:before{
		content: '';
		position: absolute;
		top: 50%;
		left: -22px;
		height: 60%;
		border-left: 1px solid var(--grey-500);
		transform: translate3d(0, -50%, 0);
}

/*
* Icon Style
*/
html.demo-auto-services .custom-icon-style-1{
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 95px;
		height: 95px;
}

html.demo-auto-services .custom-icon-style-1:before{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 2px solid var(--grey-500);
		border-radius: 7px;
		transform: rotate(45deg);
		z-index: 0;
		transition: ease background 300ms;
}

html.demo-auto-services .custom-icon-style-1 svg{
		position: relative;
		z-index: 1;
}

html.demo-auto-services .custom-icon-box-style-1 h3{
		transition: ease color 300ms;
}

/*
* Thumb Info
*/
html.demo-auto-services .custom-thumb-info-style-1 .thumb-info-wrapper{
		border-radius: 25px !important;
		border: 5px solid transparent !important;
		transition: ease border 300ms;
}

html.demo-auto-services .custom-thumb-info-style-1 h3{
		transition: ease color 300ms;
}

html.demo-auto-services .custom-img-thumbnail-style-1.img-thumbnail.img-thumbnail-hover-icon:before{
		border-radius: 0 !important;
}

/*
* Testimonial
*/
html.demo-auto-services .custom-testimonial-style-1 blockquote{
		padding: 5px 20px !important;
}

html.demo-auto-services .custom-testimonial-style-1 blockquote p{

}

html.demo-auto-services .custom-testimonial-style-1.testimonial-with-quotes blockquote:before{
		content: "\f10d";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		font-size: 20px;
}

@media (min-width: 1200px) {
		html.demo-auto-services .custom-carousel-box-shadow-1{
				position: relative;
		}
		html.demo-auto-services .custom-carousel-box-shadow-1:before{
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 65%;
				height: 0px;
				box-shadow: 0 0 40px 120px rgba(0, 0, 0, 0.07);
				transform: translate3d(-50%, -50%, 0);
				z-index: 0;
		}
}

/*
* Accordion
*/
html.demo-auto-services .custom-accordion-style-1 > .card{
		border: 1px solid transparent !important;
		transition: ease border-color 300ms;
}

html.demo-auto-services .custom-accordion-style-1 > .card .card-header a{
		position: relative;
		padding: 23px 30px;
		background-color: #f4f4f4;
		transition: ease background-color 300ms, ease color 300ms;
}

html.demo-auto-services .custom-accordion-style-1 > .card .card-header a:after{
		content: '+';
		position: absolute;
		top: 50%;
		right: 25px;
		font-size: inherit;
		font-weight: inherit;
		transform: translate3d(0, -50%, 0) rotate(45deg);
		transform-origin: 50% 50%;
		transition: ease transform 300ms;
}

html.demo-auto-services .custom-accordion-style-1 > .card .card-header a.collapsed:after{
		transform: translate3d(0, -50%, 0) rotate(0deg);
}

html.demo-auto-services .custom-accordion-style-1 > .card .card-header + .collapse.show, html.demo-auto-services .custom-accordion-style-1 > .card .card-header + .collapsing{
		border: 1px solid var(--grey-500);
		border-top: 0;
}

html.demo-auto-services .custom-accordion-style-1 > .card + .card{
		margin-top: 17px;
}

/*
* Services Detail
*/
html.demo-auto-services .custom-nav-list-effect-1 > li > a{
		position: relative;
		transition: ease padding 300ms, ease color 300ms;
}

html.demo-auto-services .custom-nav-list-effect-1 > li > a:before{
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 0;
		height: 0;
		border-top: 4px solid var(--grey-500);
		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, -50%, 0);
		transition: ease opacity 300ms, ease width 300ms;
}

html.demo-auto-services .custom-nav-list-effect-1 > li.active > a, html.demo-auto-services .custom-nav-list-effect-1 > li.open > a, html.demo-auto-services .custom-nav-list-effect-1 > li:hover > a{
		padding-left: 45px;
		font-weight: 700;
}

html.demo-auto-services .custom-nav-list-effect-1 > li.active > a:before, html.demo-auto-services .custom-nav-list-effect-1 > li.open > a:before, html.demo-auto-services .custom-nav-list-effect-1 > li:hover > a:before{
		width: 30px;
		opacity: 1;
		visibility: visible;
}

html.demo-auto-services .custom-feature-box-justify-center{
		justify-content: center;
}

html.demo-auto-services .custom-feature-box-justify-center .feature-box-icon, html.demo-auto-services .custom-feature-box-justify-center .feature-box-info{
		flex: 0 0 auto;
}

/*
* Contact
*/
html.demo-auto-services .custom-form-style-1 .form-control{
		border: 0;
		background: #f4f4f4;
		border-radius: 35px;
		height: auto;
		padding: 20px 25px;
}

/*
* Datepicker
*/
html.demo-auto-services .datepicker{
		padding: 10px;
		margin: 0 auto;
		line-height: 1.1em;
}

html.demo-auto-services .datepicker.datepicker-inline{
		line-height: 1.7em;
		width: 100%;
}

html.demo-auto-services .datepicker table{
		width: 100%;
}

html.demo-auto-services .datepicker table tr td{
		border-radius: 0;
}

html.demo-auto-services .datepicker table thead tr th{
		cursor: pointer;
		font-size: 12.8px;
		font-size: 0.8rem;
		text-align: center;
		font-weight: normal;
}

html.demo-auto-services .datepicker table thead tr th.prev{
		content: '\f0d9';
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
}

html.demo-auto-services .datepicker table thead tr th.next{
		content: '\f0da';
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
}

html.demo-auto-services .datepicker table thead tr th:hover{
		color: var(--light);
}

html.demo-auto-services .datepicker table thead tr:last-child th{
		font-weight: 600;
}

html.demo-auto-services .datepicker table thead tr:last-child th:hover{
		color: var(--grey-500);
}

html.demo-auto-services .datepicker table td{
		text-align: center;
		font-size: 12px;
		font-size: 0.75rem;
}

html.demo-auto-services .datepicker table td.day{
		transition: background-color .1s ease-in .1s, color .1s ease-in .1s;
		cursor: pointer;
}

/*
* Footer
*/
html.demo-auto-services #footer{
		background: #333333;
}

html.demo-auto-services #footer a:not(.btn):not(.no-footer-css), html.demo-auto-services #footer li, html.demo-auto-services #footer span, html.demo-auto-services #footer p{
		color: #888888;
}

html.demo-auto-services .custom-list-style-1 > li{
		margin-bottom: 0;
		padding-top: 10px;
		padding-bottom: 10px;
}

html.demo-auto-services .custom-list-style-1 > li + li{
		border-top: 1px solid #46474a;
}

html.demo-auto-services .custom-list-style-1 > li:first-child{
		padding-top: 0;
}

html.demo-auto-services .custom-list-style-1 > li:last-child{
		padding-bottom: 0;
}

/* Skin */
/*
* Icon Style
*/
html.demo-auto-services .custom-icon-style-1:before{
		border-color: var(--primary);
}

html.demo-auto-services .custom-icon-box-style-1:hover .custom-icon-style-1:before{
		background: var(--primary);
}

html.demo-auto-services .custom-icon-box-style-1:hover .custom-icon-style-1 svg path{
		fill: var(--primary-inverse) !important;
}

html.demo-auto-services .custom-icon-box-style-1:hover h3{
		color: var(--primary) !important;
}

/*
* Thumb Info
*/
html.demo-auto-services .custom-thumb-info-style-1:hover .thumb-info-wrapper{
		border-color: var(--primary) !important;
}

html.demo-auto-services .custom-thumb-info-style-1:hover h3{
		color: var(--primary) !important;
}

/*
* Testimonial
*/
html.demo-auto-services .custom-testimonial-style-1.testimonial-with-quotes blockquote:before{
		color: var(--primary);
}

/*
* Accordion
*/
html.demo-auto-services .custom-accordion-style-1 > .card .card-header a:not(.collapsed){
		background-color: var(--primary);
		color: var(--primary-inverse) !important;
}

html.demo-auto-services .custom-accordion-style-1 > .card:hover .card-header a.collapsed{
		color: var(--primary) !important;
}

/*
* Services Detail - Nav List
*/
html.demo-auto-services .custom-nav-list-effect-1 > li > a:before{
		border-top-color: var(--primary);
}

html.demo-auto-services .custom-nav-list-effect-1 > li.active > a, html.demo-auto-services .custom-nav-list-effect-1 > li.open > a, html.demo-auto-services .custom-nav-list-effect-1 > li:hover > a{
		color: var(--primary) !important;
}

/*
* Datepicker
*/
html.demo-auto-services .datepicker thead tr:first-child th:hover, html.demo-auto-services .datepicker tfoot tr th:hover, html.demo-auto-services .datepicker table tr td span:hover{
		background: var(--primary);
}

html.demo-auto-services .datepicker .datepicker-switch:hover, html.demo-auto-services .datepicker .prev:hover, html.demo-auto-services .datepicker .next:hover{
		background: var(--primary);
}

html.demo-auto-services .datepicker table thead tr:last-child th:hover{
		color: var(--primary);
}

html.demo-auto-services .datepicker table tbody tr td.day:hover{
		background: var(--primary);
}

html.demo-auto-services .datepicker table tbody tr td.day.active{
		background: var(--primary-300);
}


/* ── Overrides del demo (migrados de custom.css del molde) ── */

/* ── Páginas de módulos: fondo unificado con el catálogo (#f4f6f9) ──
   Las vistas de faqs/services son compartidas entre demos → el fondo se
   resuelve acá, scopeado. Selector :has() = hook por contenido de página. */
html.demo-auto-services body:has(.faq-content) {
    background-color: #f4f6f9;
}
html.demo-auto-services body:has(.faq-content) .faq-item {
    background-color: #fff;
    border-radius: 8px;
}
html.demo-auto-services section.section:has(.service-card) {
    background-color: #f4f6f9 !important;
}

/* ── Coherencia de botones: UN solo lenguaje (el del molde) ──
   Todo .btn del demo hereda el radio del skin (--border-radius2x = 8px).
   Unifica: custom-btn-border-radius (molde) · btn-modern (default ~4px) ·
   rounded-0 (vistas compartidas dark-first) — 4 lenguajes → 1. */
html.demo-auto-services .btn,
html.demo-auto-services .btn.rounded-0 {
    border-radius: var(--border-radius2x, 8px) !important;
}

/* FAQs: chips btn-outline-success (verde, fuera de paleta) → alineados al primary */
html.demo-auto-services .btn-outline-success {
    color: var(--primary);
    border-color: var(--primary);
    background-color: transparent;
}
html.demo-auto-services .btn-outline-success:hover,
html.demo-auto-services .btn-outline-success:focus,
html.demo-auto-services .btn-outline-success.active {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

/* ── FAQs: buscador alineado al lenguaje del demo + sugerencias SOBRE el contenido ── */
html.demo-auto-services .faq-search-input,
html.demo-auto-services .faq-search-container input[type="text"] {
    border-radius: var(--border-radius2x, 8px) !important;
}
html.demo-auto-services .faq-search-container,
html.demo-auto-services .search-box-wrapper {
    position: relative;
    z-index: 60; /* por encima de las cards de categorías que vienen después en el DOM */
}
html.demo-auto-services .search-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1050;
    border-radius: var(--border-radius2x, 8px);
    box-shadow: 0 12px 28px rgba(16, 19, 23, 0.16);
    overflow: hidden;
}

/* ── Testimonios (about): quote deliberado en rojo racing — reemplaza el
      “ de 80px absoluto del theme que quedaba como glifo roto/cortado ── */
html.demo-auto-services .custom-testimonial-style-1 blockquote:before {
    content: "\f10d"; /* fa-quote-left */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    color: var(--primary);
    position: static;
    display: block !important;
    margin: 0 0 10px;
    line-height: 1;
}
html.demo-auto-services .custom-testimonial-style-1 blockquote:after {
    content: none !important;
}
html.demo-auto-services .custom-testimonial-style-1 blockquote {
    padding: 0 6px;
}

/* ── Carrusel de testimonios: cards de igual altura (flex en el stage de owl) ── */
html.demo-auto-services .custom-carousel-box-shadow-1 .owl-stage {
    display: flex;
}
html.demo-auto-services .custom-carousel-box-shadow-1 .owl-item > div {
    display: flex;
    height: 100%;
    width: 100%;
}
html.demo-auto-services .custom-carousel-box-shadow-1 .card {
    width: 100%;
    display: flex;
    flex-direction: column;
}
html.demo-auto-services .custom-carousel-box-shadow-1 .card-body {
    display: flex;
    flex-grow: 1;
}
html.demo-auto-services .custom-carousel-box-shadow-1 .custom-testimonial-style-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}