.elementor-social-icons-wrapper {
    display: flex;
    gap: 1rem;
}
.elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #222;
    transition: all 0.3s ease;
    fill: white;
}
.elementor-icon svg {
    width: 18px;
    height: 18px;
}
.elementor-social-icon-whatsapp:hover { background-color: #25d366; transform: translateY(-3px); }
.elementor-social-icon-linkedin:hover { background-color: #0077b5; transform: translateY(-3px); }
.elementor-social-icon-instagram:hover { background-color: #e4405f; transform: translateY(-3px); }
.elementor-screen-only { display: none; }

 ::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #111111; }
::-webkit-scrollbar-thumb:hover { background: #FFC107; 
}
/* Desktop Dropdown Animation */
.dropdown-content {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
/* Mobile Dropdown Animation */
#mobile-dropdown-content {
    transition: all 0.4s ease-in-out;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
#mobile-dropdown-content.active {
    max-height: 300px;
    opacity: 1;
    padding-bottom: 1rem;
}

#mobile-menu {
    display: none;
}
#mobile-menu.opacity-100 {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.bg-safety-black {
    background-color: black !important;
}
/* Home Services *//* Home Services Container */
.marquee-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    position: relative; /* Wichtig für sauberes Overflow */
}

.marquee-content {
    display: flex;
    gap: 1rem; /* Abstand zwischen den Cards */
    /* DER MAGISCHE TRICK: Padding simuliert den Gap nach dem letzten Element 
       und macht die Prozentrechnung für den unendlichen Loop pixelgenau! */
    padding-right: 1rem; 
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: max-content;
}

.marquee-item {
    flex-shrink: 0;
}

.service-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    padding: 1.25rem 2rem;
    border-radius: 0.75rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-decoration: none;
    min-width: 280px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.service-card i {
    color: #fbbf24; /* Safety-Yellow */
    width: 24px;
    height: 24px;
}

.service-card span {
    color: #111827;
    font-weight: 800;
}

/* Animationen */
.animate-scroll-left {
    /* 30s für eine flüssige Geschwindigkeit. Kannst du anpassen. */
    animation: scroll-horizontal 30s linear infinite; 
}

.animate-scroll-right {
    /* "reverse" lässt die exakt gleiche Animation einfach rückwärts (nach rechts) laufen! */
    animation: scroll-horizontal 30s linear infinite reverse;
}

@keyframes scroll-horizontal {
    0% { transform: translateX(0); }
    /* Da wir 3 Sets haben (1 Original + 2 Klone), verschieben wir genau um 1 Drittel */
    100% { transform: translateX(calc(-100% / 3)); } 
}

/* Pausieren, wenn der Nutzer mit der Maus drüber fährt (optional) */
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}


.marquee-container {
    overflow: hidden;
    width: 100%;
    display: flex;
}

.marquee-content {
    display: flex;
    gap: 1rem;              /* Abstand zwischen den Boxen */
    padding-right: 1rem;    /* Verhindert Ruckeln beim Loop-Übergang */
    will-change: transform; /* Aktiviert Hardware-Beschleunigung der Grafikkarte */
}

/* Unendlicher Loop nach links */
.animate-scroll-left {
    animation: scroll-left-infinite 40s linear infinite;
}

@keyframes scroll-left-infinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* Unendlicher Loop nach rechts */
.animate-scroll-right {
    animation: scroll-right-infinite 40s linear infinite;
}

@keyframes scroll-right-infinite {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Optionale Pause bei Maus-Hover */
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

@media (max-width: 1200px) {
    .desktop-nav-menu { display: none !important; }
    .mobile-nav-btn { display: flex !important; }
}
@media (min-width: 1201px) {
    #mobile-menu { display: none !important; }
}

@media(max-width: 441px) {
    .flex .items-center > a > div:first-child {
        padding-left: 0px;
        padding-right:0px;
    }
    .flex .items-center > a > span > span:last-child {
        max-width:205px;
        overflow:hidden;
        white-space:nowrap;
    }
}