* {
    margin: 0;
    padding: 0;
    font-family: "Roboto", "sans-serif";
    box-sizing: border-box;
}

:root {
    --primary-color: #001c99;
    --white-color: #fff;
    --black-color: #000;
    --light-gray-color: #eaeaea;
    --gap: 3rem;
}

/* Animação de scroll */
[data-anime] {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.3s ease;
}

[data-anime="left"] {
    transform: translate3d(-50px, 0, 0);
}

[data-anime="right"] {
    transform: translate3d(50px, 0, 0);
}

[data-anime="top"] {
    transform: translate3d(0, -50px, 0);
    transition-delay: 0.2s;
}

[data-anime="bottom"] {
    transform: translate3d(0, 50px, 0);
}

[data-anime].animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    background-color: #f8f5f2;
}

body h2,
h3 {
    font-family: "Montserrat", "sans-serif";
}

body h1,
h4,
h5,
h6 {
    font-family: "Montserrat", "sans-serif";
}

body p,
span,
a {
    font-family: "Roboto", "sans-serif";
}

body.loaded {
    opacity: 1;
}

h1 {
    font-size: 5rem;
}

h2 {
    font-size: 4rem;
}

h3 {
    font-size: 3.5rem;
}

h4 {
    font-size: 3rem;
}

h5 {
    font-size: 2.5rem;
}

h6 {
    font-size: 2rem;
}

a {
    text-decoration: none;
}

.menu {
    background: linear-gradient(90deg, #eaeaea00, #002fff56);
    position: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;


}

.main-logo {
    height: 5rem;
    width: auto;
    padding: 0;
    margin: 0;
    display: block;
    margin-left: 1rem;
}

.menu-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.menu ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
}

.menu nav ul li a {
    display: flex;
    color: #000;
    font-size: 1.6rem;
    padding: 1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 600;
}

.nav-menu {
    font-family: "Montserrat", "sans-serif" !important;
    display: flex;
    justify-content: space-between;
}

.nav-list {
    display: flex;
    /* gap: 1rem; */
    margin: 0;
    padding: 0;
}

.menu nav ul li a:hover {
    color: var(--black-color);
    background: var(--white-color);
    border-radius: 5px;
    transition: 0.3s;
}

/* Esconde o submenu inicialmente */
/* Estilos para o dropdown */
.dropdown {
    position: relative;
}

.dropdown>a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    background-color: var(--white-color);
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 0.5rem 0;
}

.dropdown:hover .dropdown-menu {
    display: block !important;
}

.dropdown-menu li {
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown-menu a {
    display: block;
    padding: 0.8rem 1.5rem;
    color: var(--black-color);
    transition: all 0.3s ease;
}

.dropdown-menu a:hover {
    display: block;
    background-color: rgba(0, 28, 153, 0.1);
    padding-left: 2rem;

}

/* Faz o select “subir um pouco” em relação aos links */
.language-item select {

    background: #E5E5E5;
    color: var(--black-color);
    border: 1px solid #fff;
    padding: 0.5rem 1rem;
    margin: 2rem;
    font-size: 1.4rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 1rem;
}


.footer {
    background: linear-gradient(90deg, #eaeaea00, #002fff56);
    position: end;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 1rem 1rem;
    color: var(--light-gray-color);
    color: #000
}

.copyright {
    text-align: right;
    padding: 0rem 2rem;
    font-size: 1.6rem;
}

.footer .footer-content {
    display: block;
    /* padding: 2rem 0rem; */
}

.mapa {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
    /* padding: 1rem; */
}

.mapa iframe {
    padding: 0rem;
    width: 30rem;
    height: auto;
}

.mapa p {
    width: auto;
    font-size: 1.6rem;
}

.sobre-background {
    background-image: url('../img/fundo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0rem;
    margin: 0;
    opacity: 0.6;
    height: 20rem;
    z-index: -1;
}

.sobre-nos {
    padding-top: 15rem;
    margin-left: 20rem;
    margin-right: 20rem;
}

.sobre-nos h4,
p {
    text-align: center;
}

/* Estilos do menu hambúrguer */
.hamburger {
    display: none;
    /* Escondido por padrão (desktop) */
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    z-index: 1000;
}

.hamburger-line {
    display: block;
    width: 2rem;
    height: 0.3rem;
    background-color: #000;
    margin: 0.5rem 0;
    transition: all 0.3s ease;
}

/*Rolo de Filme*/

.card-tecnoprom {
    position: relative;
    height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    flex: 0 0 100%;
    width: 100%;
    /* border: 3px solid #555; */
}

.card-tecnoprom p {
    padding-right: 2rem;
    font-size: 3rem;
}

.text-card-tecnoprom {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 2rem;
}

.text-card-tecnoprom h1 {
    font-size: 6rem;
}

.text-card-tecnoprom h4 {
    font-size: 4rem;
}

.text-card-tecnoprom p {
    font-size: 3rem;
}

.text-filme-omron {
    font-family: "Montserrat", "sans-serif";
    font-size: 5rem;
    color: white;
    padding-right: 5rem;
}

.filme-rolo-wrapper {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    padding: 10px;
    /* border: 2px solid #333; */
    background-image: url('../img/fundo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.filme-rolo {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory; /* Adiciona snap obrigatório */
}

.filme-rolo::-webkit-scrollbar {
    display: none;
}

.filme-rolo img {
    justify-content: center;
    align-items: center;
    height: auto;
    max-height: 40rem;
    flex-shrink: 0;
    width: auto;
}

.seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba (0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seta:hover {
    background-color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.seta:active {
    transform: translateY(-50%) scale(0.95);
}

.seta::before {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
}

.seta.esquerda {
    left: 15px;
}

.seta.esquerda::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.seta.direita {
    right: 15px;
}

.seta.direita::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

.seta.disabled {
    opacity: 0.4;
    pointer-events: none;
    /* impede cliques */
    cursor: default;
}

/*Fim Rolo Filme entrada*/

.video-apresentacao {
    width: 100%;
    max-width: 80rem;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 25px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    transition: transform 0.3s, box-shadow 0.3s;
}

.video-apresentacao:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 28, 153, 0.25);
}

.about-with-video__media {
    /* flex: 1; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150%;
    height: auto;
    margin: 4rem;
}


.highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    padding: 4rem 2rem;
    text-align: center;
    justify-items: center;
}

.highlight-card {
    background: #f8f5f2;
    border-radius: 8px;
    padding: 2rem 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: auto;
    /* width: 100%; */
    margin: 0 auto;
}

.highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.highlight-card:hover h3 {
    margin: 2rem;
    color: #003366;
}

.highlight-card:hover p {
    color: #333;
    /* Texto mais escuro no hover */
}

.highlight-card:hover h3,
.highlight-card:hover img {
    transform: scale(1.3);
    transition: transform 0.3s;
}

.highlight-card img {
    width: 60px;
    margin-bottom: 1rem;
}

.highlight-card h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    /* Usa a cor primária definida no :root */
    font-weight: bold;
}

.highlight-card p {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    color: #555;
    /* Cinza suave para contraste */
}

.client-logos h3 {
    color: #003366;
    margin-top: 2rem;
    text-align: center;
}

.carousel {
    overflow: hidden;
    /* Esconde apenas o que está fora da área visível */
    width: 100%;
    margin: 2rem 0;
    background-color: #d8eefe7a;
    padding: 1rem 0;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

.carousel-track {
    display: flex;
    /* gap:2rem; */
    width: max-content;
    animation: scroll 50s linear infinite;
}

.carousel-track img {
    max-width: 100%;
    /* Tamanho máximo dos logos */
    height: 10rem;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    object-fit: contain;
    padding: 2rem;
}

/* .carousel-track img:hover {
    filter: grayscale(0%);
  } */


/* ========================
   3. CLASS GUIA CONTATO
======================== */

.contato-background {
    background-image: url('../img/backgound-contato.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    /* mínimo: 100% da altura da tela */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 0;
    ;

    /* margin-top: 10rem; */

}

.img-pequena {
    width: 1.5rem;
    height: 1.5rem;
}


.contato-header {
    margin-top: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center;

}

.contato-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85);
    /* em vez de 0.7 */
    z-index: -1;
}



.contato {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #000;
}

.contato ul {
    list-style: none;
    padding-left: 0;
}

.card-email-position {
    z-index: 1;
    color: #000;
    display: flex;
    justify-content: center;
    gap: 5rem;
    align-items: center;
    margin: 4rem;

}

.card-email {
    color: #fff;
    border-radius: 20px;
    padding: 3rem 2rem;
    width: 28rem;
    height: 24rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-email h5 {
    font-size: 2.1rem;
}

.color-facebook {
    background: linear-gradient(45deg, #1877F2, #145dbf);

}

.color-instagram {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.color-email {
    background: #AABAFF;

}

.color-linkedin {
    background: linear-gradient(45deg, #0A66C2, #004182);

}

.card-email h3 {
    font-size: 2rem;

}

.botao-email {

    margin-top: 2.5rem;
    display: inline-block;
    /* background-color: #ffffff; */
    color: #fff;
    padding: 12px 12px;
    border-radius: 30px;
    border: #000 solid 1px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;

}

.botao-email:hover {
    background-color: #fff;
    color: #000;
}

.mapa-contato iframe {
    margin: 0rem;
    padding: 0rem;
    width: 100vh;
    height: 40rem;
}

.contato-header {
    font-size: 3rem;
}

.grid-contato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0rem;
    padding: 0;
    margin: 0 auto;
    align-items: start;
    margin: 0 auto;
    font-size: 1.5rem;
    justify-items: center;
    width: auto;
}

.contato-style {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    width: 40rem;
    background-color: #fff;
    padding: 1rem;

}

.contato-flex-mapa {
    display: flex;
    justify-items: center;
    flex-direction: column;
    align-items: center;
}

/* ========================
   3. FIM CLASS CONTATOS
======================== */


/*  */
/* Estilos para a seção hero com imagem de fundo */

.hero-section {
    position: relative;
    height: 50dvh;
    background-image: url('../img/fundo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    background-attachment: fixed;
}

/* Overlay escuro para melhor legibilidade */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.text-card {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 2rem;
}

.text-card h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--white-color);
}

.text-card p {
    font-size: 2rem;
    color: var(--white-color);
}

/* Estilos para o card de conteúdo */
.content-section {
    padding: 3rem 2rem;
    position: relative
}

.content-card-home {
    background-color: var(--white-color);
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.title-about {
    text-align: center;
    margin-bottom: 3rem;
    width: 100%;
    /* Make sure title takes full width of text area */
}

.about-content {
    display: flex;
    gap: 4rem;
    align-items: center;
}

.about-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.text-wrapper {
    width: 100%;
    padding: 2rem 0;
    text-indent: 2em;
}

.about-text p {
    text-align: justify;
    margin-bottom: 2rem;
}

.about-with-video__media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-card {
    background-color: var(--white-color);
    max-width: 100rem;
    margin: 0 auto;
    padding: 4rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: relative;
}

.link-tecnoferrari {
    color: #8B1B2B;
    /* cor vinho escuro (parecido com o logo) */
    text-decoration: none;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
}

.link-tecnoferrari::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0.2rem;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #800000;
    transition: width 0.3s ease;
    transform: rotate(0deg);
    transform-origin: right;
}

.link-tecnoferrari:hover {
    color: #8B1B2B;
    /* tom um pouco mais claro no hover */
}

.link-tecnoferrari:hover::after {
    width: 100%;
    left: 0;
    background: #b30000;
}

.content-card-tecnoferrari {
    background-color: #FFFFFF;
    /* branco */
    border: 2px solid #8B1B2B;
    /* vermelho bordô do logo */
    border-radius: 12px;
    padding: 2rem;
    max-width: 100rem;
    margin: 2rem auto;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
    color: #333333;
    /* texto cinza escuro */
}

.tecnoferrari-list {
    margin: 15px 0;
    padding-left: 20px;
    list-style: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*animação cards imgens tecnoferrari*/
.image-cards-section-tecnoferrari {
    overflow: hidden;
    width: 100%;
    background-color: #f8f8f8;
    /* opcional: fundo cinza claro */
    padding: 2rem 0;
}

.image-cards-container-tecnoferrari {
    display: flex;
    width: max-content;
    animation: scroll 100s linear infinite;
}

.image-card-tecnoferrari {
    flex: 0 0 auto;
    width: 40rem;
    /* ajuste de tamanho da imagem */
    margin-right: 1rem;

}

.image-card-tecnoferrari img {
    width: 100%;
    height: auto;
    display: block;
}

/* Animação do scroll */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


.logo-tecnoferrari,
.logo-hlt,
.logo-arel {
    text-align: center;
}

.link-htl {
    color: #2f1b8b;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
}

.link-htl::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0.2rem;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #2f1b8b;
    transition: width 0.3s ease;
    transform: rotate(0deg);
    transform-origin: right;
}

.link-hlt:hover {
    color: #6342f7;
    /* tom um pouco mais claro no hover */
}

.link-htl:hover::after {
    width: 100%;
    left: 0;
    background: #2f1b8b;
}

/*animação cards imgens hlt*/
.image-cards-section-hlt,
.image-cards-section-arel {
    overflow: hidden;
    width: 100%;
    background-color: #f8f8f8;
    padding: 2rem 0;
}

.image-cards-container-hlt,
.image-cards-container-arel {
    display: flex;
    width: max-content;
    animation: scroll 100s linear infinite;
}

.image-card-hlt {
    flex: 0 0 auto;
    width: 40rem;
    margin-right: 1rem;

}

.image-card-arel {
    flex: 0 0 auto;
    width: 20rem;
    height: 20rem;
    margin-right: 1rem;

}

.image-card-hlt img,
.image-card-arel img {
    width: 100%;
    height: auto;
    display: block;
}

.arel-list {
    margin: 10px 0;
    padding-left: 25px;
    list-style: none;
}

/* Estilos para a seção de cards com imagens */
.image-cards-section {
    padding: 6rem 2rem;
    background-color: #f9f9f9;
}

.image-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.image-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
    min-width: 30rem;
    background: var(--white-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    padding: 1rem;
}

.image-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 28, 153, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.image-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.image-card-content {
    padding: 2rem;
    text-align: center;
}

.image-card-content h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 2.2rem;
}

.image-card-content p {
    color: #666;
    font-size: 1.6rem;
    line-height: 1.5;
}

.video-hlt,
.video-tecnoferrari {
    width: 100%;
    /* ocupa toda a caixa */
    height: auto;
    min-height: 30rem;
    /* altura automática */
    display: block;
    border-radius: 8px;
    /* opcional: bordas arredondadas */
}

.tamanho-video-servico {
    height: 50rem;
}

.video-content-hlt,
.video-content-tecnoferrari {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.video-box-hlt,
.video-box-tecnoferrari {
    flex: 1 1 30rem;
    /* flexível, mínimo 30rem */
    max-width: 50rem;
    /* para não estourar */
    margin: 2rem;
}

.video-box-servico video {
    width: 100%;
    height: auto;
    max-height: 40rem;
    /* altura máxima fixa para todos */
    aspect-ratio: 16/9;
    /* mantém proporção consistente */
    object-fit: contain;
    /* evita cortes */
    display: block;
}

/* 2. Reserve uma altura mínima para o título, evitando caixas com alturas muito diferentes */
.title-video-servico {
    min-height: 3.5rem;
    /* ajuste conforme sua tipografia */
    margin: 0 0 1rem;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    text-align: center;
}

/* 3. Empurre o vídeo para o fim da caixa, alinhando todos na mesma linha horizontal */
.video-box-servico video {
    width: 100%;
    height: auto;
    display: block;
    margin-top: auto;
    object-fit: cover;
}


.title-video-servico,
.title-video-hlt,
.title-video-tecnoferrari {
    text-align: center;
    text-transform: uppercase;
}

.card-parceiro-tecnoferrari {
    background-color: #FFFFFF;
    border: 2px solid #8B1B2B;
    border-radius: 12px;
    padding: 2rem;
    max-width: auto;
    height: 10rem;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
    color: #333333;
    /* texto cinza escuro */
}

.card-parceiro-hlt {
    background-color: #FFFFFF;
    /* branco */
    border: 2px solid #2f1b8b;
    border-radius: 12px;
    padding: 2rem;
    max-width: auto;
    height: 10rem;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
}

.hlt-list {
    margin: 15px 0;
    padding-left: 25px;
    list-style: none;
}

#hlt_commitment {
    background: #f8f9fa;
    padding: 15px;
    margin: 20px 0;
    border-left: 4px solid #2f1b8b;
}

#hlt_commitment_text {
    font-style: italic;
    color: #2c3e50;
}

.content-card-arel {
    background-color: #FFFFFF;
    border: 2px solid #606060;
    border-radius: 12px;
    padding: 2rem;
    max-width: 100rem;
    margin: 2rem auto;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
    color: #333333;
    text-align: center;
}


.link-arel {
    color: #606060;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
}

.link-arel::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0.2rem;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #606060;
    transition: width 0.3s ease;
    transform: rotate(0deg);
    transform-origin: right;
}

.link-arel:hover {
    color: #272727;
    /* tom um pouco mais claro no hover */
}

.link-arel:hover::after {
    width: 100%;
    left: 0;
    background: #606060
}

.card-parceiro-arel {
    background-color: #FFFFFF;
    /* branco */
    border: 2px solid #606060;
    border-radius: 12px;
    padding: 2rem;
    width: 28rem;
    ;
    max-width: auto;
    height: 10rem;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
}

.video-box-arel {
    aspect-ratio: 16 / 9;
    width: 80%;
    max-width: 960px;
    margin: 2rem auto;
    position: relative;
}

.video-arel {
    box-shadow: #606060 0px 0px 20px;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    border: none;
}

.title-video-arel {
    text-align: center;
    text-transform: uppercase;
}

.video-content-arel {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


/* Estilos para os cards de Setores */
.card-parceiro-produtos,
.card-parceiro-servicos,
.card-parceiro-parceiros,
.card-parceiro-paineis,
.card-parceiro-yaskawa {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 1rem;
    max-width: auto;
    /* height: 10rem; */
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
    color: #333333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Cores específicas para cada card */
.card-parceiro-produtos {
    border: 2px solid #1b8b2e;
    /* Verde */
}

.card-parceiro-servicos {
    border: 2px solid #8b5a1b;
    /* Marrom */
}

.card-parceiro-parceiros {
    border: 2px solid #1b5a8b;
    /* Azul */
}

.card-parceiro-paineis {
    border: 2px solid #8b1b5a;
    /* Rosa escuro */
}

.card-parceiro-yaskawa {
    border: 2px solid #1b8b8b;
    /* Azul esverdeado */
}

/* Efeito hover para todos os cards */
.card-parceiro-arel:hover,
.card-parceiro-produtos:hover,
.card-parceiro-servicos:hover,
.card-parceiro-parceiros:hover,
.card-parceiro-paineis:hover,
.card-parceiro-yaskawa:hover,
.card-parceiro-tecnoferrari:hover,
.card-parceiro-hlt:hover {
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* Ajuste para as imagens dentro dos cards */
.card-parceiro-produtos img,
.card-parceiro-servicos img,
.card-parceiro-parceiros img,
.card-parceiro-paineis img,
.card-parceiro-yaskawa img {
    max-height: 8rem;
    width: auto;
    margin-bottom: 1rem;
}

.content-card-hlt {
    background-color: #FFFFFF;
    border: 2px solid #2f1b8b;
    border-radius: 12px;
    padding: 2rem;
    max-width: 100rem;
    margin: 2rem auto;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
    color: #333333;
    text-align: center;
}



.content-card-paineis {
    background-color: #FFFFFF;
    border: 2px solid #1b5a8b;
    border-radius: 12px;
    padding: 3rem;
    max-width: 100rem;
    margin: 2rem auto;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
    color: #333333;
}

.image-cards-section-paineis {
    overflow: hidden;
    width: 100%;
    background-color: #f8f8f8;
    padding: 2rem 0;
}

.image-cards-container-paineis {
    display: flex;
    width: max-content;
    animation: scroll 50s linear infinite;
}

.image-card-paineis {
    flex: 1 1 300px;
    max-width: 400px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-right: 1rem;
}

.image-card-paineis img {
    width: 100%;
    height: auto;
    display: block;
}

.content-card-servicos {
    background-color: #FFFFFF;
    border: 2px solid #1b5a8b;
    /* Marrom */
    border-radius: 12px;
    padding: 3rem;
    max-width: 100rem;
    margin: 2rem auto;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    text-align: center;
    color: #333333;
}

.image-cards-section-servicos {
    overflow: hidden;
    width: 100%;
    background-color: #f8f8f8;
    padding: 4rem 0;
}

.image-cards-container-servicos {
    display: flex;
    width: max-content;
    animation: scroll 30s linear infinite;
}

.image-card-servicos {
    flex: 1 1 300px;
    max-width: 400px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-right: 1rem;
}

.image-card-servicos img {
    width: 100%;
    height: auto;
    display: block;
}

.content-card-pecas {
    display: flex;
    justify-content: center;
    text-align: center;
    height: auto;
}

.content-card-pecas h2 {
    padding: 2rem;
    background-color: #FFFFFF;
    border: 2px solid #2f1b8b;
    border-radius: 12px;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    max-width: auto;
}

.content-card-pecas h5 {
    padding: 2rem;
    background-color: #FFFFFF;
    border: 2px solid #2f1b8b;
    border-radius: 12px;
    box-shadow: 0px 5px 5px 5px rgb(145, 145, 145);
    max-width: 40rem;
}

.content-card-pecas h2:hover,
.content-card-pecas h5:hover {
    background: rgba(0, 28, 153, 0.05);
}

.content-sec-pecas {
    text-align: center;
}

/* From Uiverse.io by ilkhoeri */
.wrapper-pecas {
    min-height: 30rem;
    /* Garante altura total da viewport */
    perspective: 100rem;
    align-items: center;
    justify-content: center;
    /* overflow: hidden; */
}

/*rotação logo peças*/

.inner-pecas {
    --w: 10rem;
    --h: 10rem;
    --translateZ: 20rem;
    --rotateX: -18deg;
    --perspective: 200rem;
    position: absolute;
    width: var(--w);
    height: var(--h);
    top: 25%;
    left: calc(50% - (var(--w) / 2) - 2.5px);
    z-index: 2;
    transform-style: preserve-3d;
    transform: perspective(var(--perspective)) translate(-50%, -50%);
    animation: rotating 25s linear infinite;
}

/* Estilo para o contêiner dos cards */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #d8eefe7a;
    border-radius: 15px;
}

.content-card {
    flex: 1;
    min-width: 30rem;
    background-color: var(--white-color);
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@keyframes rotating {
    from {
        transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0);
    }

    to {
        transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn);
    }
}

.card-pecas {
    background-color: #d8eefe4d;
    border-radius: 15px;
    position: absolute;
    overflow: hidden;
    inset: 0;
    transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
    width: var(--w);
    height: var(--h);
}

.card-pecas img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ===================
   Vídeos Responsivos
   =================== */
.video-content-servico {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.video-box-servico {
    /* cada box ocupa até 1/3 da linha, mas nunca menor que 28rem */
    flex: 1 1 28%;
    max-width: 28%;
    min-width: 28rem;
    box-sizing: border-box;
}

.video-box-servico video {
    width: 100%;
    height: auto;
    max-height: 40rem;
    /* altura máxima fixa para todos */
    aspect-ratio: 16/9;
    /* mantém proporção consistente */
    object-fit: contain;
    /* evita cortes */
    display: block;
}

/*efeito botão solicitar orçamento*/
.cta-button {
    background: linear-gradient(100deg, #00cc44 0%, var(--primary-color) 100%);
    background-size: 200% 200%;
    color: var(--white-color);
    padding: 1.5rem 3rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 28, 153, 0.3);
    transition: all 0.5s ease;
}

.cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 28, 153, 0.4);
    background-position: 100% 100%;
}


.whatsapp-button {
    position: fixed;
    width: 6rem;
    height: 6rem;
    bottom: 2rem;
    left: 2rem;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

.whatsapp-button img {
    width: 3rem;
    height: 3rem;
}

.whatsapp-button:hover {
    transform: scale(1.1);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4);
}

/* Tooltip / Pop-up de texto */
.whatsapp-button::after {
    content: "Fale pelo WhatsApp";
    position: absolute;
    right: 7rem;
    bottom: 1.5rem;
    background: #333;
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Exibir tooltip ao passar o mouse */
.whatsapp-button:hover::after {
    opacity: 1;
}

.social-buttons {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 1000;
}

.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #fff;
    margin-bottom: 1rem;
}

.social-button img {
    width: 3rem;
    height: 3rem;
}

.social-button:hover {
    transform: scale(1.1);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4);
}

.hidden-buttons {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.social-buttons:hover .hidden-buttons {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Cores específicas para cada rede social */
.whatsapp {
    background-color: #25d366;
}

.facebook {
    background-color: #1877f2;
}

.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.linkedin {
    background-color: #0077b5;
}

@media (max-width: 1000px) {

    .hamburger {
        display: block;
        /* Mostra o botão hambúrguer em mobile */

    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: rgb(240, 240, 240);
        flex-direction: column;
        justify-content: flex-start;
        transition: right 0.3s ease;
        z-index: 999;
        gap: 2rem;
        padding: 5rem;
        padding-top: 20rem;

    }

    .nav-menu.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        width: 100%;
        padding: 0;
        gap: 1rem;

    }

    .nav-list li {
        width: 100%;
        text-align: center;
        border: 0.1rem solid #000;
        /* 2px de espessura, branca e sólida */
        border-radius: 1.5rem;
        /* Bordas arredondadas */
    }

    .nav-list li a {
        padding: 1rem 0 !important;
        justify-content: center;
        text-transform: uppercase;

    }

    .language-item {
        margin-top: 2rem;
        text-align: center;
    }

    .language-item select {
        margin: 0 auto !important;
        font-size: 1.6rem !important;
    }

    /* Ajuste para quando o menu está aberto */
    body.menu-open {
        overflow: hidden;
    }

    /* Animação do hambúrguer para X */
    .hamburger.is-active .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.is-active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.is-active .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .menu nav ul li a {
        padding: 1 1rem;
    }

    .menu ul li a {
        display: block;
        padding: 0rem;
        color: #000;
        font-size: 1rem;
        padding: 0;
    }

    .main-logo {
        height: 2rem;
        width: auto;
        padding: 0;
        margin: 0;
        display: block;
    }

    nav ul {
        display: flex;
        justify-content: space-around;
        padding: 0;
        /* list-style: none; */
    }

    .highlight-card{
        width: 100%; 
        margin: 0 auto;
        scroll-snap-align: center;
    }

    
    .card-tecnoprom {
        height: auto;
        min-height: 25rem;
        padding: 2rem 1rem;
        width: 100%;
        scroll-snap-align: center;
    }

    .highlight-card:hover{
        transform: none;
        box-shadow: none;
    }


    .highlight-card,
    .text-card-tecnoprom h1 {
        font-size: 3.2rem;
    }

    .highlight-card,
    .text-card-tecnoprom h4 {
        font-size: 2.2rem;
    }

    .highlight-card,
    .text-card-tecnoprom p,
    .card-tecnoprom p {
        font-size: 1.8rem;
        /* padding-right: 0; */
    }

    .text-filme-omron {
        font-size: 2.2rem;
        padding-right: 1rem;
    }

    .filme-rolo img {
        max-height: 25rem;
    }

    .seta {
        width: 35px;
        height: 35px;
        background: rgba(255, 255, 255, 0.3);
    }


    .seta.esquerda {
        left: 5px;
    }

    .seta.direita {
        right: 5px;
    }


    .language-item select {
        margin-top: 1.2rem;
        /* margin-bottom: 0.5rem;
        margin-right: 0.5rem; */
        /* padding: 0rem 0rem; */
        font-size: 1rem;

    }

    .footer .footer-content {
        display: block;
        /* justify-content: center; */
        /* align-items: center; */
        padding: 0rem 2rem;
    }

    .carousel-track {
        animation: scroll 50s linear infinite;
    }

    /* ========================
        3. CLASS GUIA CONTATO
        ======================== */

    .mapa {
        flex-direction: space-around;
        justify-content: center;
        padding: 0;
        margin-left: 1rem;
    }

    .mapa iframe {
        width: 10rem;
        height: 10rem;
    }


    .mapa p {
        width: auto;
        font-size: 0.9rem;
    }

    .copyright {
        text-align: right;
        padding: 0rem 2rem;
        font-size: 0.8rem;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.8rem;
    }

    h3 {
        font-size: 2.5rem;
    }

    h4 {
        font-size: 2rem;
    }

    h5 {
        font-size: 1.5rem;
    }

    h6 {
        font-size: 1.2rem;
    }

    .contato {
        font-size: 0.8rem;
        /* display: flex;
        flex-direction: column; */
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-bottom: 5rem;
    }

    .contato-header {
        padding-top: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .contato h5 {
        font-size: 2.2rem;
    }

    .contato h6 {
        font-size: 2rem;
    }

    .contato {
        font-size: 1.5rem;
    }

    .contato-background {

        background-position: center;
        width: auto;
        margin: auto;
        /* border: 2px solid #000; */

    }

    .mapa-contato iframe {
        margin: 0rem;
        padding: 2rem;
        width: auto;
        height: 40rem;

    }

    .grid-contato {


        grid-template-columns: 1fr;
        /* quebra para uma coluna */
        height: auto;
        /* ajusta altura se necessário */

        justify-items: center;
        /* alinha horizontalmente */
        padding: 1rem;
    }

    .contato-style {
        border: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        border-radius: 16px;
        width: 100%;

    }

    .card-email-position {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: center;

    }

    /* ========================
    3. CLASS GUIA CONTATO FIM
    ======================== */

    .hero-section {
        height: 70dvh;
    }

    .text-card h1 {
        font-size: 2.5rem;
    }

    .text-card p {
        font-size: 1.5rem;
    }

    .filme-rolo .card-tecnoprom:nth-child(3) img {
        max-height: 20rem;
        max-width: 90%;
        object-fit: contain;
        margin: 0 auto;
    }

    .content-card {
        padding: 2rem;
    }

    .content-card-home {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .video-apresentacao {
        width: 80%;
        height: auto;
        display: block;
        border-radius: 8px;
        box-shadow: 0 0 0 0;

    }

    .content-section {
        padding: 4rem 1rem;
    }

    .image-cards-section {
        padding: 4rem 1rem;
    }

    .image-card {
        flex: 100%;
        max-width: 100%;
    }

    .image-card-content h3 {
        font-size: 2rem;
    }

    .image-card-content p {
        font-size: 1.4rem;
    }

    .dropdown:hover .dropdown-menu {
        display: none !important;
    }

    .video-content-servico,
    .video-content-hlt,
    .video-content-tecnoferrari {
        flex-direction: column;

    }

    .video-servico,
    .video-hlt,
    .video-box-tecnoferrari {
        margin: 0.5rem;
        ;
    }

    .image-cards-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5rem;
    }

    .inner-pecas {
        --translateZ: 15rem;
        --rotateX: -12deg;
    }

    .cta-button {
        padding: 1rem 1.5rem;
        font-size: 1.4rem;
        width: auto;
    }

    .cards-container {
        flex-direction: column;
    }

    .video-content-arel {
        padding: 1rem;
    }

    .about-content {
        flex-direction: column;
        gap: 2rem;
    }

    .about-text {
        width: 100%;
    }

    .about-with-video__media {
        width: 100%;
        margin: 2rem 0;
    }

    .text-wrapper {
        padding: 0;
    }

    .client-logos h3 {
        font-size: 2rem;
    }
}