.footer-linki{
    text-decoration: none;
    color:white;
 }

 .no-decoration{
    text-decoration: none;
    color: black;
 }

 .no-underline{
    text-decoration: none;
 }

.cursor{
    cursor: pointer;
}
.white-shadow{
    -webkit-box-shadow: 0px 0px 65px rgba(255, 255, 255, 0.8);
            box-shadow: 0px 0px 65px rgba(255, 255, 255, 0.8);
    border-radius: 8px; /* Optional: Add rounded corners */
}
 /* povezave jezik */

 .aktualna-stran{
    text-decoration: none;
    color: black;
    font-weight: bold;
    padding: 5px;
 }

  .druga-stran{
    text-decoration: none;
    color: black;
    padding: 5px;
 }


/* velikosti napisov prva stran */

.naslovi-home-de{
    font-size: 3.2vw;
}

.napis-xellbox {
    font-family: 'Orbitron', sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.napis-xellbox-header {
    font-family: 'Orbitron', sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-size: 1.2rem;
}

.napis-xellbox-header-logo {
    font-family: 'Orbitron', sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-size: 1.8rem;
    margin: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#9b9b9b), to(#888888));
    background: linear-gradient(180deg, #9b9b9b, #888888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.applications-headings{
    font-size: 3.7vw;
}

.applications-headings-cz{
    font-size: 2.9vw;
}


.sirina-header{
    margin: 0 10%;
    padding: 0;
}


/* .custom-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    height: 240px;
}


.custom-card {
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-preferred-size: 15%;
        flex-basis: 15%; 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
}


.card-selected {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%; 
    -webkit-transition: -webkit-flex-basis 0.3s ease;
    transition: -webkit-flex-basis 0.3s ease;
    transition: flex-basis 0.3s ease;
    transition: flex-basis 0.3s ease, -webkit-flex-basis 0.3s ease, -ms-flex-preferred-size 0.3s ease;
    transition: flex-basis 0.3s ease, -ms-flex-preferred-size 0.3s ease;
}


.card-narrow {
    -ms-flex-preferred-size: 10%;
        flex-basis: 10%;
    -webkit-transition: -webkit-flex-basis 0.3s ease;
    transition: -webkit-flex-basis 0.3s ease;
    transition: flex-basis 0.3s ease;
    transition: flex-basis 0.3s ease, -webkit-flex-basis 0.3s ease, -ms-flex-preferred-size 0.3s ease;
    transition: flex-basis 0.3s ease, -ms-flex-preferred-size 0.3s ease;
}

.card-narrow .card-img-top{
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
            background-color: rgb(0, 0, 0);
}

.card-selected .card-img-top{
            background-color: rgb(0, 0, 0);
}


.custom-card img {
    width: 100%;
    height: 100%;
       -o-object-fit: contain;
          object-fit: contain;
       
    border-radius: 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.custom-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 12px;
    text-transform: uppercase;

    
    padding: 10px;
    color: white;

}

.custom-card-title-open{
    position: absolute;
    bottom: 0;
    left: 12px;
    padding-left: 10px;
    font-size: 2.2vw;
    text-transform: uppercase;
    font-weight: bolder;
    color: white;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.36);
    
}
 */

 /* --- CONTAINER & LAYOUT --- */

/* --- SECTION WRAPPER --- */
.products-wrapper {
    position: relative;
    overflow: hidden; 
    padding: 60px 0;
    background: #fcfcfc; /* Very subtle off-white background */
    margin-top: 1rem;
}



@-webkit-keyframes flashGlow {
    0% {
        /* Start: Faint solid grey, no glow */
        color: rgba(0, 0, 0, 0.2); 
        text-shadow: 0 0 0 rgba(0, 64, 115, 0);
    }
    50% {
        /* Peak: Solid Brand Blue + Blue Glow around it */
        color: rgba(0, 64, 115, 1);
        text-shadow: 0 0 10px rgba(0, 64, 115, 0.6);
        
    }
    100% {
        /* End: Return to faint solid grey */
        color: rgba(0, 0, 0, 0.2);
        text-shadow: 0 0 0 rgba(0, 64, 115, 0);
    }
}



@keyframes flashGlow {
    0% {
        /* Start: Faint solid grey, no glow */
        color: rgba(0, 0, 0, 0.2); 
        text-shadow: 0 0 0 rgba(0, 64, 115, 0);
    }
    50% {
        /* Peak: Solid Brand Blue + Blue Glow around it */
        color: rgba(0, 64, 115, 1);
        text-shadow: 0 0 10px rgba(0, 64, 115, 0.6);
        
    }
    100% {
        /* End: Return to faint solid grey */
        color: rgba(0, 0, 0, 0.2);
        text-shadow: 0 0 0 rgba(0, 64, 115, 0);
    }
}

.bg-watermark {
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    
    /* Typography */
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 15vw;
    line-height: 1;
    white-space: nowrap;
    
    /* Interaction */
    z-index: 0;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    /* Base Style: NO STROKE, just faint Solid Color */
    -webkit-text-stroke: 0; /* Remove outline */
    color: rgba(0, 0, 0, 0.2); /* Initial faint state */

    /* Animation:
       1.5s duration
       ease-in-out (smoother glow)
       1s delay
       1 iteration
    */
    -webkit-animation: flashGlow 1.5s ease-in-out 1s 1 normal;
            animation: flashGlow 1.5s ease-in-out 1s 1 normal;
}


.custom-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px; /* Adds breathing room between cards */
    height: 350px; /* Taller height for better proportions */
    margin-bottom: 20px;
    padding: 10px; /* Space for shadows */
}

/* --- CARD BASE --- */
.custom-card {
    position: relative;
    cursor: pointer;
    background: #ffffff; /* Clean White Background */
    border-radius: 16px; /* Modern Rounded Corners */
    overflow: hidden;
    
    /* Flex Animation Logic */
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; /* Default Size */
    -webkit-transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth 'Apple-like' easing */
    
    /* Elegant Shadow */
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- STATES: SELECTED VS NARROW --- */

/* The Active Card */
.card-selected {
    -webkit-box-flex: 3.5;
        -ms-flex: 3.5;
            flex: 3.5; /* Expands much wider */
    -webkit-box-shadow: 0 20px 40px rgba(0, 64, 115, 0.15);
            box-shadow: 0 20px 40px rgba(0, 64, 115, 0.15); /* Blue glow */
    border-bottom: 5px solid #cc051c; /* Red Accent Line at bottom */
}

/* The Inactive Cards */
.card-narrow {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-filter: grayscale(100%) opacity(0.9);
            filter: grayscale(100%) opacity(0.9); /* Grayscale to push focus to active */
}

.custom-card:hover {
    -webkit-filter: grayscale(0%) opacity(1);
            filter: grayscale(0%) opacity(1); /* Bring color back on hover */
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px); /* Subtle lift */
}

/* --- IMAGE STYLING --- */
.custom-card img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain; /* Keeps entire product visible */
    padding: 40px; /* Padding so product doesn't touch edges */
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

/* Zoom effect on Active Image */
.card-selected img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    padding: 20px; /* Image gets larger */
}

/* --- TYPOGRAPHY --- */

/* Title on Inactive Cards (Hidden or Subtle) */
.custom-card-title {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c757d;
   
    letter-spacing: 1px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
}

/* Title on Active Card (Bold & Professional) */
.custom-card-title-open {
    position: absolute;
    bottom: 20px;
    left: 30px;
    font-family: 'Orbitron', sans-serif; /* Your Brand Font */
    font-size: 1.5rem;
    font-weight: 900;
    color: #004073; /* Corporate Blue */
    
    line-height: 1;
    z-index: 2;
    background: rgba(255,255,255,0.9); /* Legibility backing */
    padding: 5px 10px;
    border-radius: 4px;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.applications-title-txt{
    font-size: 2.9vw;
}


    
    .display-section {
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f4f7f9));
        background: linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%);
        padding-top: 5rem;
        position: relative;
        overflow: hidden;
    }

    /* Floating Image Animation */


    .modern-prod-img {
        
        width: auto;
        max-width: 100%;
        -webkit-filter: drop-shadow(0 25px 35px rgba(0,0,0,0.15));
                filter: drop-shadow(0 25px 35px rgba(0,0,0,0.15));
  
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    /* Typography */
    .prod-badge {
        font-family: 'Inter', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 2px;
        color: #cc051c; /* Red Accent */
        text-transform: uppercase;
        margin-bottom: 10px;
        display: block;
    }

    .prod-title {
        font-family: 'Orbitron', sans-serif;
        font-weight: 900;
        color: #004073; /* Blue Main */
        font-size: 3.5rem;
        line-height: 1;
        margin-bottom: 1.5rem;
    }

    .prod-desc {
        font-size: 1.1rem;
        color: #555;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        max-width: 90%;
    }

    /* Tech Spec Grid Cards */
    .spec-card {
        background: white;
        border-left: 4px solid #004073; /* Blue Border */
        padding: 15px 20px;
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.05);
                box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        height: 100%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
    }
    
    .spec-card:hover {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
        border-left-color: #cc051c; /* Turns red on hover */
    }

    .spec-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #888;
        font-weight: 600;
        letter-spacing: 1px;
        margin-bottom: 5px;
        display: block;
    }

    .spec-value {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: #222;
        margin: 0;
    }

    /* Action Buttons */
    .btn-modern-primary {
        background-color: #004073;
        color: white;
        border: none;
        padding: 15px 35px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 4px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    .btn-modern-primary:hover {
        background-color: #cc051c;
        color: white;
        -webkit-transform: translateY(-2px);
                transform: translateY(-2px);
        -webkit-box-shadow: 0 10px 20px rgba(204, 5, 28, 0.3);
                box-shadow: 0 10px 20px rgba(204, 5, 28, 0.3);
    }

    .btn-modern-outline {
        background: transparent;
        color: #004073;
        border: 2px solid #004073;
        padding: 13px 35px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 4px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .btn-modern-outline:hover {
        background: #004073;
        color: white;
    }
    
    /* Background Decoration */
    .bg-deco-text {
        position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        font-family: 'Orbitron', sans-serif;
        font-size: 10rem;
        font-weight: 900;
        color: rgba(0,0,0,0.1);
        rotate: 27DEG;
        z-index: 0;
        pointer-events: none;
        white-space: nowrap;
    }


/* --- MOBILE / TABLET STYLES (Below 992px) --- */
@media (max-width: 991px) {
    
    .custom-row {
        /* Enable Wrapping for Grid Layout */
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        
        height: auto; /* Remove fixed height */
        gap: 10px;    /* Gap between cards */
        margin: 0;
    }

    .custom-card {
        /* FORCE 2 PER ROW (50% minus half the gap) */
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 5px);
            flex: 0 0 calc(50% - 5px);
        
        height: 180px; /* Fixed height for consistency */
        margin: 0;
        border-radius: 8px;
        
        /* Disable the width animation on mobile */
        -webkit-transition: border-color 0.3s ease, opacity 0.3s ease;
        transition: border-color 0.3s ease, opacity 0.3s ease;
    }

    /* --- ACTIVE STATE (Selected) --- */
    .card-selected {
        /* Ensure it STAYS 50% width (No resizing) */
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 5px);
            flex: 0 0 calc(50% - 5px);

        /* Visual Selection Indicators */
       
        border-bottom: 6px solid #cc051c; /* Thick Red Bottom Line */
        background-color: #ffffff;
        
        /* Make it fully visible */
        opacity: 1;
        -webkit-filter: grayscale(0);
                filter: grayscale(0);
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    /* --- INACTIVE STATE (Not Selected) --- */
    .card-narrow {
        /* Ensure it STAYS 50% width */
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 5px);
            flex: 0 0 calc(50% - 5px);
            
        /* Fade it out to highlight the selected one */
        opacity: 0.5;
        border: 1px solid #f0f0f0;
        -webkit-filter: grayscale(1);
                filter: grayscale(1);
    }

    /* --- CONTENT TWEAKS FOR SMALL BOXES --- */
    
    .custom-card img {
        padding: 15px; /* Adjust padding for small box */
    }

    /* Adjust the Active Title Size */
    .custom-card-title-open {
        font-size: 0.8rem; /* Smaller font */
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        background: rgba(255,255,255,0.9);
        padding: 5px;
        border-radius: 0 0 8px 8px;
    }

    .bg-watermark{
        top: 4%;
        font-size: 13vw;

    }
    

}