:root {
    --primary-orange: #ff6600;
    --secondary-orange: #ff9900;
    --dark-bg: #1a1a2e;
    --light-gray: #f4f4f4;
    --white: #ffffff;
}

.tools-carousel-section {
    width: 100%;
    padding: 20px 0;
    background-color: var(--white);
    border-bottom: 1px solid var(--light-gray);
    overflow: hidden;
    position: relative;
}

/* Título opcional acima do carrossel */
.tools-carousel-section::before {
    content: "Nossas Especialidades";
    display: block;
    text-align: center;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: #464646;
    margin-bottom: 100px;
    margin-top: 130px;
    letter-spacing: 1px;
}


.carousel-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    gap: 50px;
    animation: scroll 30s linear infinite;
}

.tool-item {
    flex: 0 0 auto;
    /* Definimos um tamanho fixo para o 'container' da logo */
    width: 150px; 
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background-color: var(--primary-orange);
    
    /* A técnica de máscara garante que a logo se ajuste ao container */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* 'contain' garante que a logo inteira apareça sem cortes, 
       ajustando-se ao menor lado (altura ou largura) */
    -webkit-mask-size: contain;
    mask-size: contain;
    
    /* Adicionamos um padding interno para que as logos não encostem nas bordas */
    padding: 10px;
    box-sizing: border-box;
}

/* Ocultamos a tag img original pois usaremos o src dela como máscara via CSS ou JS */
/* Para facilitar, você pode definir a máscara diretamente no HTML ou via classe */
.tool-item:hover {
    transform: scale(1.1);
    background-color: var(--secondary-orange); /* Laranja mais claro no hover */
}

/* Animação para o carrossel infinito */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-170px * 6)); /* Ajustar com base no (largura + gap) * número de itens originais */
    }
}

/* Pausar ao passar o mouse */
.carousel-track:hover {
    animation-play-state: paused;
}
.divider1 {
  width: 65%;
  height: 3px;
  background: linear-gradient(#ff9901, #f52400);
  margin: 100px auto 30px; /* 🔑 isso centraliza */
  border-radius: 3px;
}
.contorno{
    color:red;
}
/* Responsividade */
@media (max-width: 768px) {
    .tool-item {
        width: 100px;
        gap: 30px;
    }
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-130px * 6)); }
    }

    


}