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

.text-yellow{
    color: #eab946;
}

h2,h1,h3,h4,
nav a {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

header.scrolled nav{
    display: none;
}

header.scrolled hr{
    display:none
}

.logo{
    width:60px;
    margin-left:-3px;
}

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

.hero-page h1{
    letter-spacing: -1.88px;
}


.hero-page {
    height: 50vh;
}

.hero-page .iso{
    top: -91vh;

}

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


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

.pill,
.row {
    display: flex;
}

.bg-lightgrey{
    background-color: #f0efed !important;
}

:root {
    --main-color: #0B031F;
    --bg-black: #f2f2f2;
    --bg-darkgrey: #F7F7F4;
    --bg-grey: #cacad7;
    --text-color: #0B031F;
    --dark-color: #F7F7F4;
    --gray-color: #F7F7F4;
    /* NY Variables */
    --yellow: #F4B615;
    --wine: #514C5D;
    --light-grey: #F0EFED;
}

.text-wine{
    color: var(--wine);
}

.wine-bg{
    background-color: var(--wine);
}

.bg-lightgray{
    background-color: var(--light-grey);
}

.text-justify{
    hyphens: none;
}

* {
    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: #F7F7F4 !important;
}

body {
    color: var(--text-color);
}

h1,nav a{
    font-family: 'Inter', sans-serif;
}

h2 {
    font-family: 'Inter', sans-serif;
    font-size: 40px;
}

p {
    font-family: 'Inter', sans-serif;
    text-wrap: balance;
}

span.copyright {
    font-size: 14px;
    vertical-align: top;
    font-weight: 200;
}

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

.hero-img{
    height: 500px!important;
    width: auto!important;
}

.arrow-sep{
 margin-right: 1220px;
}

.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);
    font-weight: 500;
    border-radius: 99999px;
    box-shadow: rgba(48, 48, 48, 0.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 {max-width: 79px;}

nav a {
    font-size: 16px !important;
}

.hero-logo {
    top: -97px;
    left: 32%;
    position: relative;
}

@media only screen and (max-width: 768px){

    .hero-logo {
        left: 36% !important;
        top: -180px;
        position: absolute;
        max-width: 534px;
        width: 534px;
    }
}


header.scrolled {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(5px);
        --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    
}

.dark-bg {
    background-color: #1c1c1c63;
}

#mobileMenu {
    height: 100vh;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: #050505 0 1px 0 0;
}


.border-yellow {
    border-color: #2C156A;
}

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

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

.svg-container {
    padding: 10px;
}

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

.serv-text {
    color: #060606;
}

.card {
    border: none;
    background-color: #f2f2f2;
    top: -5px;
    position: relative;
    /*box-shadow: #8b8b8b 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: 4rem 0;
    color: #000000;
}

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

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

.logo-brand {
    background-color: #d0d0d0;
}



.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 .question svg {
    stroke: var(--wine)
}

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

.answer:hover .toggle-icon{
    color: var(--wine) !important;
}

.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 #f4f4f4;
}

@media only screen and (max-width: 1030px) {
    .module-landing {
      display: none;
    }
  }

  @media (max-width: 1030px) {
    .responsive-center {
      text-align: center !important;
      align-items: center !important;
      justify-content: center !important;
      padding-left: 0 !important; /* Para anular cualquier padding lateral */
    }
  }
 
@media (max-width: 1024px) {
   
    .brand-identity {
      text-align: center !important;
      align-items: center !important;
      justify-content: center !important;
    }
  
    .custom-software {
      text-align: center !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: column-reverse !important; /* Reverse order */
    }

    .title-center{
        text-align: center !important;
        align-items: center !important;
    }
  }

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

    svg.mask-gradient.absolute.w-full{
        height: 100vh !important; }

}


.grid-what-we-do > div{
    border-top: 1px solid black;
}

#contact input, #contact textarea, #contact select{
    background-color: transparent;
    color: white;
    border-bottom:1px solid white;
}


#contact input::placeholder, #contact textarea, #contact select {
    color: rgb(255, 255, 255);
    opacity: 1; /* Para que el color se vea claramente */
}

#contact input::placeholder, 
#contact textarea::placeholder {
  color: rgb(255, 255, 255);
}

.contact-form input::placeholder, 
.contact-form select {
  color: var(--wine) !important;
}

/* Aplica el color a las opciones */
.contact-form select option {
  color: var(--wine) !important;
}

/* Placeholder en textarea también con color --wine */
.contact-form textarea::placeholder {
    color: var(--wine) !important;
  }

/* Opcional: para asegurarte de que el select y las opciones hereden el color correctamente */
.contact-form select {
  background-color: transparent;
  border-bottom: 1px solid black !important;
  color: var(--wine) !important; /* Asegúrate de que el texto del select también use var(--wine) */
}

.contact-form input, .contact-form textarea, .contact-form select{
    border-bottom: 1px solid black !important;
    color: black !important;
}

.carousel-row {
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
  }
  
  .carousel-track {
    display: flex;
    animation: scroll 10s linear infinite;
  }
  
  .carousel-row.reverse .carousel-track {
    animation-direction: reverse;
  }
  
  .carousel-track img {
    width: 100px;
    height: auto;
    margin: 0 10px;
  }
  
  /* Animación infinita */
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }