/* Estilos gerais para SVGs */
img[src$=".svg"] {
    filter: brightness(1) saturate(1);
    transition: filter 0.3s ease;
}

/* Estilos para o modo escuro */
.dark img[src$=".svg"] {
    filter: brightness(0.9) saturate(0.9);
}

/* Estilos específicos para cada SVG */
img[src*="hero.svg"] {
    filter: brightness(1.1) saturate(1.2);
}

img[src*="about.svg"] {
    filter: brightness(1.05) saturate(1.1);
}

/* Estilos para os containers das imagens */
.hero-image, .about-image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
    .hero-image {
        height: 500px;
    }
    .about-image {
        height: 400px;
    }
}

/* Efeito hover nas imagens */
.hero-image:hover img, .about-image:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Cores específicas para SVGs */
img[src*="software.svg"] {
    filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(1234%) hue-rotate(202deg) brightness(97%) contrast(101%);
}

img[src*="cabling.svg"] {
    filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(1234%) hue-rotate(270deg) brightness(97%) contrast(101%);
}

img[src*="infrastructure.svg"] {
    filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(1234%) hue-rotate(202deg) brightness(97%) contrast(101%);
}

.dark img[src*="software.svg"] {
    filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(1234%) hue-rotate(202deg) brightness(97%) contrast(101%);
}

.dark img[src*="cabling.svg"] {
    filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(1234%) hue-rotate(270deg) brightness(97%) contrast(101%);
}

.dark img[src*="infrastructure.svg"] {
    filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(1234%) hue-rotate(202deg) brightness(97%) contrast(101%);
}