[data-swift-text] {
    --swift-text-width: 150ch !important;
}

div[data-swift-poster="no-text"]::before {
  background-image: none;
}

/* Reduce font weight */
.megamenu .nav-link {
    font-weight: normal !important;
}

.megamenu .nav-link strong {
    font-weight: 600 !important; /* or 500 for even lighter */
}

/* Increase line spacing */
.megamenu .nav-link {
    line-height: 1.3 !important; /* increase from current tight spacing */
    padding-top: 0.375rem !important; /* adds more vertical space */
    padding-bottom: 0.375rem !important;
}

/* Make top-level nav links black (Home, Producten, Fixaflex) */
.nav-wrapper > nav > .nav-item > .nav-link {
    color: #000 !important;
}

/* Make second-level nav links blue (Flexibels, Toepassing, etc. - the bold headers) */
.nav-wrapper .megamenu-col > .nav-link.pb-1.mb-1 {
    color: inherit; /* Let theme handle these - they have <strong> tags */
}

/* Lowest level links (Silicone, EPDM, etc.) - target by NOT having <strong> inside */
.nav-wrapper .megamenu-col .nav-link:not(:has(strong)) {
    color: #000 !important;
}

/* Dropdown items (Over ons, Catalogus, Contact, etc.) - black */
.nav-wrapper .dropdown-item {
    color: #000 !important;
}

.feather-instagram {
    stroke: #ffffff; 
 }
/* ============================================
   UNIVERSAL FLY-IN ANIMATION SYSTEM - CSS
   ============================================ */

/* Base animation classes - hidden by default */
.flyin-left,
.flyin-right,
.flyin-up,
.flyin-down,
.flyin-bounce,
.flyin-zoom,
.flyin-rotate {
    opacity: 0;
}

/* Active animation states */
.flyin-left.animate {
    animation: flyInLeft 1s ease-out forwards;
}

.flyin-right.animate {
    animation: flyInRight 1s ease-out forwards;
}

.flyin-up.animate {
    animation: flyInUp 1s ease-out forwards;
}

.flyin-down.animate {
    animation: flyInDown 1s ease-out forwards;
}

.flyin-bounce.animate {
    animation: flyBounce 1.5s ease-out forwards;
}

.flyin-zoom.animate {
    animation: flyZoom 1s ease-out forwards;
}

.flyin-rotate.animate {
    animation: flyRotate 1.2s ease-out forwards;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes flyInLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes flyInRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes flyInUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes flyInDown {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes flyBounce {
    0% {
        transform: translateY(100px) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateY(-10px) scale(1.05);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes flyZoom {
    0% {
        transform: scale(0) rotateZ(180deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }
}

@keyframes flyRotate {
    0% {
        transform: translateY(-30px) rotateZ(90deg) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotateZ(0deg) scale(1);
        opacity: 1;
    }
}

/* ============================================
   DELAY VARIATIONS
   ============================================ */

.delay-100 { 
    animation-delay: 0.1s; 
}

.delay-200 { 
    animation-delay: 0.2s; 
}

.delay-300 { 
    animation-delay: 0.3s; 
}

.delay-400 { 
    animation-delay: 0.4s; 
}

.delay-500 { 
    animation-delay: 0.5s; 
}

.delay-600 { 
    animation-delay: 0.6s; 
}

.delay-700 { 
    animation-delay: 0.7s; 
}

.delay-800 { 
    animation-delay: 0.8s; 
}

.delay-900 { 
    animation-delay: 0.9s; 
}

.delay-1000 { 
    animation-delay: 1s; 
}

/* ============================================
   OPTIONAL: ALTERNATIVE DISTANCES
   ============================================ */

/* For more dramatic fly-in effects from further away */
@keyframes flyInLeftFar {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes flyInRightFar {
    0% {
        transform: translateX(200px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes flyInUpFar {
    0% {
        transform: translateY(150px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Optional classes for dramatic effects */
.flyin-left-far.animate {
    animation: flyInLeftFar 1.2s ease-out forwards;
}

.flyin-right-far.animate {
    animation: flyInRightFar 1.2s ease-out forwards;
}

.flyin-up-far.animate {
    animation: flyInUpFar 1.2s ease-out forwards;
}

/* ============================================
   SPEED VARIATIONS
   ============================================ */

/* Fast animations */
.flyin-fast.animate {
    animation-duration: 0.6s !important;
}

/* Slow animations */
.flyin-slow.animate {
    animation-duration: 1.8s !important;
}

/* Extra slow animations */
.flyin-slower.animate {
    animation-duration: 2.5s !important;
}

/* ============================================
   EASING VARIATIONS
   ============================================ */

.flyin-ease-in.animate {
    animation-timing-function: ease-in !important;
}

.flyin-ease-out.animate {
    animation-timing-function: ease-out !important;
}

.flyin-ease-in-out.animate {
    animation-timing-function: ease-in-out !important;
}

.flyin-bounce-timing.animate {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}