#mobileMenu nav a,
.card:hover .more-info,
.text-primary,
.text-yellow,
h1,
h2,
h3,
h4,
input,
textarea {
    color: var(--main-color)
}

h2,
nav a {
    font-weight: 300
}

.hero:before,
nav a:after {
    content: '';
    position: absolute;
    left: 0
}

input,
nav a:hover:after,
textarea {
    width: 100%;
    opacity: 1
}

.pill,
.row {
    display: flex
}

@font-face {
    font-family: 'TT Hoves Regular';
    src: local('TT Hoves Regular'), local('TT-Hoves-Regular'), url('../fonts/TTHoves-Regular.woff2') format('woff2'), url('../fonts/TTHoves-Regular.woff') format('woff'), url('../fonts/TTHoves-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'TT Hoves Light';
    src: local('TT Hoves Light'), local('TT-Hoves-Light'), url('../fonts/TTHoves-Light.woff2') format('woff2'), url('../fonts/TTHoves-Light.woff') format('woff'), url('../fonts/TTHoves-Light.ttf') format('truetype');
    font-style: normal
}

:root {
    --main-color: #f4ee78;
    --bg-black: #000000;
    --bg-darkgrey: #0f0f0f;
    --bg-grey: #1b1b1d;
    --text-color: #f0f0ff99;
    --dark-color: #0a0c0d;
    --gray-color: #323234
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%
}

.cookie-bar {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-color: #d3d3d333;
    background-color: #000000a8
}

.mask-gradient {
    mask-image: linear-gradient(black 80%, transparent)
}

.bg-darkgrey {
    background-color: #0f0f0f80 !important
}

body {
    background-color: var(--bg-black);
    color: var(--text-color)
}

h2 {
    font-family: 'TT Hoves Light', sans-serif;
    font-size: 48px
}

p {
    font-family: 'TT Hoves Regular', sans-serif;
    text-wrap: balance
}

svg.mask-gradient.absolute.w-full {
    height: auto;
    width: 100vw;
    object-fit: cover;
    position: fixed
}

input,
textarea,
select {
    background: #343639;
    border-color: #353739;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 5, .9) 0 1px 3px 0 inset, rgba(255, 255, 255, .1) 0 -1px 0 0 inset;
    caret-color: var(--main-color)
}

.pill {
    font-size: 16px !important;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    height: min-content;
    justify-content: center;
    overflow: hidden;
    padding: 2px 15px;
    position: relative;
    width: fit-content;
    backdrop-filter: blur(8px);
    background-color: rgb(27 27 29);
    border-radius: 99999px;
    box-shadow: rgba(255, 255, 255, .05) 0 1px 0 0 inset;
    margin-bottom: 10px
}

.serv-text,
.serv-title {
    font-size: 15px !important
}

.pill.phone {
    padding: 4px 15px;
    background: 0 0
}

.pill.phone:hover {
    background-color: var(--main-color) !important
}

.pill.phone:hover span,
.pill.phone:hover svg {
    color: #000 !important
}

.grecaptcha-badge {
    visibility: hidden
}

nav a {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px !important
}

nav a:after {
    background-color: #f3ee89;
    opacity: 0;
    width: 0;
    height: 1px;
    bottom: -4px;
    -webkit-transition: opacity .4s, width .4s;
    -moz-transition: opacity .4s, width .4s;
    -ms-transition: opacity .4s, width .4s;
    -o-transition: opacity .4s, width .4s;
    transition: opacity .4s, width .4s;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden
}

header.scrolled {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px)
}

.iso {
    stroke: var(--main-color);
    stroke-linejoin: round;
    fill: none;
    stroke-width: 2
}

.dark-bg {
    background-color: #00000063
}

#mobileMenu {
    height: 100vh;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, .6) !important;
    box-shadow: rgba(255, 255, 255, .1) 0 1px 0 0
}

.hero {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.06)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")
}

.hero:before {
    background: linear-gradient(180deg, rgba(14, 15, 17, 0) 0, #000 100%);
    top: 0;
    width: 100%;
    height: 100vh
}

.border-yellow {
    border-color: var(--main-color)
}

.bg-yellow {
    background-color: var(--main-color)
}

.bg-gray {
    background-color: var(--bg-grey)
}

.svg-container {
    background-color: #0000054d;
    border-radius: 8px;
    box-shadow: rgba(9, 9, 15, .9) 0 1px 3px 0 inset, rgba(148, 152, 158, .2) 0 -1px 0 0 inset;
    padding: 10px
}

.card.relative:hover .shadow {
    opacity: 1
}

.serv-text {
    color: #a1a1a1
}

.card {
    border: none;
    background-color: #101015;
    top: -5px;
    position: relative;
    box-shadow: rgba(255, 255, 255, .05) 0 1px 0 0 inset
}

.more-info {
    transition: gap .3s
}

.more-info svg {
    transition: margin-left .3s
}

.card:hover .more-info svg,
.more-info:hover svg {
    left: 7px;
    position: relative
}

.w-\[30rem\] {
    width: 30rem
}

.hero-parallax-container {
    overflow: hidden;
    position: relative
}

.product-card {
    width: 30rem;
    margin: 1rem;
    transition: transform .3s
}

.product-card:hover {
    transform: translateY(-20px)
}

.row {
    justify-content: center
}

.header {
    text-align: center;
    margin: 2rem 0;
    color: #000
}

.leading-tight {
    line-height: 1.2 !important
}

#clients p {
    text-wrap: unset !important
}

.logo-brand {
    background-color: #eae473
}

.ducati {
    padding: 3.7rem
}

.peugeot,
.quantum {
    padding: 4rem
}

.total,
.vw {
    padding: 3.5rem
}

.toyota {
    padding: 3rem
}

.sony {
    padding: 2rem
}

.subway {
    padding: 1.7rem
}

.wyndham {
    padding: 1.5rem
}

.question:hover .toggle-icon svg {
    stroke: white
}

.answer,
.shadow-faq {
    transition: opacity .2s ease-in-out, height .2s ease-in-out
}

.shadow-faq {
    z-index: -1 !important
}

.card p,
body.cookies p,
body.privacy p,
body.terms p {
    text-wrap: unset
}

footer {
    border-top: 1px solid #1a1a1a
}

@media only screen and (max-width:991px) {
    span.toggle-icon.text-white {
        min-width: 23px
    }

    .marquee {
        animation: scroll-left 20s linear infinite!important; /* Movimiento lento hacia la izquierda */
      }

    svg.mask-gradient.absolute.w-full {
        height: 100vh !important;
        width: auto;
        object-fit: cover;
        position: fixed
    }

    body.portfolio .thumbnail {
        min-height: unset !important
    }

    .wa__btn_popup {
        right: 10px !important;
        bottom: 10px !important
    }

    .ducati,
    .peugeot,
    .quantum,
    .total,
    .vw {
        padding: 1.7rem !important
    }

    .sony,
    .subway {
        padding: 15px !important
    }

    .wyndham {
        padding: .8rem !important
    }

    .toyota {
        padding: 1rem !important
    }

    .product.h-80.w-\[30rem\].relative.flex-shrink-0 {
        height: 160px;
        width: 240px;
        object-fit: cover !important
    }

    img.rounded-md.absolute.border-yellow {
        height: 160px !important;
        width: auto !important
    }
}

@keyframes scroll-left {
    0% {
      transform: translateX(100%); /* Empieza fuera del contenedor por la derecha */
    }
    100% {
      transform: translateX(-100%); /* Termina completamente fuera del contenedor por la izquierda */
    }
  }
  
  .relative {
    overflow: hidden; /* Oculta el contenido fuera del área visible */
  }
  
  .marquee {
    display: flex; /* Alinea los textos en fila */
    white-space: nowrap; /* Evita saltos de línea */
    animation: scroll-left 34s linear infinite; /* Movimiento lento hacia la izquierda */
  }
  
  .marquee span {
    font-size: 14px;
    flex-shrink: 0; /* Mantiene el tamaño del texto sin redimensionarlo */
    padding-right: 10px; /* Espacio opcional entre textos */
  }
  
  
body.portfolio .thumbnail {
    min-height: 275px
}