button.mfp-arrow:hover {
    background-color: #FCC001 !important; /* Zmení sa na žltú pri hoveri */
    transform: translateY(-50%) scale(1.1) !important; /* Mierne sa zväčší */
}

button.mfp-close:hover {
    background-color: #FCC001 !important; /* Zmení sa na žltú pri hoveri */
}

.wpb_image_grid .wpb_image_grid_ul .isotope-item:hover {
    opacity:0.7;
}

#referencie.section {
    background-color: #FCC001;
    color: #ffffff !important; /* Vynútenie bielej farby textu */
    position: relative;
    padding-top: 80px;    /* Viac miesta hore, aby tieň "nedýchal" na text */
    padding-bottom: 80px; /* Viac miesta dole */
    
    /* Vylepšený vnútorný tieň: tmavšie okraje pre lepší kontrast */
    box-shadow: 
        inset 0 45px 50px -25px rgba(0, 0, 0, 0.2), 
        inset 0 -45px 50px -25px rgba(0, 0, 0, 0.2) !important;
}

/* Ak sú referencie v odsekoch  alebo v nadpisoch  */
#referencie.section p, 
#referencie.section h2, 
#referencie.section h3 {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Jemný tieň pod bielym písmom pre lepšiu čitateľnosť */
}

/* 1. OPRAVA LEN PRE MOBILY A TABLETY (do 768px) */
@media (max-width: 768px) {
    /* Oprava pretekania riadkov Visual Composera */
    .vc_row.vc_row-fluid {
        
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


}

/* 2. ELIMINÁCIA TOHO "BESbswy" DUCHA (toto môže byť globálne) */
span[style*="font-size: 300px"] {
    display: none !important;
    visibility: hidden !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   1. ZÁKLADNÉ NASTAVENIA A VRSTVY
   ============================================================ */
#intro, .intro, .backstretch { 
    background: #000 !important; 
}

#intro { 
    overflow: hidden !important; 
    position: relative; 
    height: 100vh; 
}

/* Zabezpečíme, aby pôvodný slider neprekrýval naše animácie */
#intro .images-list {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.navbar { 
    z-index: 9999 !important; 
}

/* ============================================================
   2. FOTKY - MOBIL (POSUN -45% AŽ -65%)
   ============================================================ */
@media (max-width: 768px) {
    #intro .images-list img {
        display: block !important;
        position: absolute;
        top: 0;
        left: 50%; 
        height: 100% !important; 
        min-height: 100vh !important;
        width: auto !important; 
        min-width: 200vw !important; 
        max-width: none !important;
        object-fit: cover !important; 
        opacity: 0;
        animation-duration: 21s !important; 
        animation-iteration-count: infinite !important;
        animation-timing-function: linear !important;
    }

    #intro .images-list img:nth-child(1) { animation-name: slideMobile1; opacity: 1; }
    #intro .images-list img:nth-child(2) { animation-name: slideMobile2; }
    #intro .images-list img:nth-child(3) { animation-name: slideMobile3; }

    @keyframes slideMobile1 {
        0%   { opacity: 1; transform: translateX(-45%); }
        33%  { opacity: 1; transform: translateX(-64.8%); }
        38%  { opacity: 0; transform: translateX(-67.8%); }
        95%  { opacity: 0; transform: translateX(-42%); }
        100% { opacity: 1; transform: translateX(-45%); }
    }
    @keyframes slideMobile2 {
        0%, 33% { opacity: 0; transform: translateX(-42%); }
        38%     { opacity: 1; transform: translateX(-45%); }
        66%     { opacity: 1; transform: translateX(-61.8%); }
        71%     { opacity: 0; transform: translateX(-64.8%); }
        100%    { opacity: 0; transform: translateX(-45%); }
    }
    @keyframes slideMobile3 {
        0%, 66% { opacity: 0; transform: translateX(-27%); }
        71%     { opacity: 1; transform: translateX(-30%); }
        95%     { opacity: 1; transform: translateX(-44.4%); }
        100%    { opacity: 0; transform: translateX(-47.4%); }
    }
}

/* ============================================================
   3. FOTKY - DESKTOP (ZOOM 1.06)
   ============================================================ */
@media (min-width: 769px) {
    #intro .images-list img {
        display: block !important;
        position: absolute;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 0;
        animation-duration: 21s !important; 
        animation-iteration-count: infinite !important;
        animation-timing-function: linear !important;
    }

    #intro .images-list img:nth-child(1) { animation-name: desktopZoom1; opacity: 1; }
    #intro .images-list img:nth-child(2) { animation-name: desktopZoom2; }
    #intro .images-list img:nth-child(3) { animation-name: desktopZoom3; }

    @keyframes desktopZoom1 {
        0%   { opacity: 1; transform: scale(1.06); } 
        33%  { opacity: 1; transform: scale(1.26); }
        38%  { opacity: 0; transform: scale(1.29); }
        95%  { opacity: 0; transform: scale(1.03); }
        100% { opacity: 1; transform: scale(1.06); }
    }
    @keyframes desktopZoom2 {
        0%, 33% { opacity: 0; transform: scale(1.03); }
        38%     { opacity: 1; transform: scale(1.06); }
        66%     { opacity: 1; transform: scale(1.26); }
        71%     { opacity: 0; transform: scale(1.29); }
        100%    { opacity: 0; transform: scale(1.06); }
    }
    @keyframes desktopZoom3 {
        0%, 66% { opacity: 0; transform: scale(1.03); }
        71%     { opacity: 1; transform: scale(1.06); }
        95%     { opacity: 1; transform: scale(1.21); }
        100%    { opacity: 0; transform: scale(1.24); }
    }
}

/* ============================================================
   4. NOVÉ PNG LOGO - LEN FADE ANIMÁCIA (ŽIADEN POHYB)
   ============================================================ */
.logo-fixed-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100; /* Musí byť nad .images-list (z-index 1) */
    width: 100%;
    text-align: center;
    pointer-events: none;
    animation: logoFadeOnly 21s infinite linear !important;
}

@keyframes logoFadeOnly {
    5%, 28%  { opacity: 1; }
    33%, 38% { opacity: 0; }
    43%, 61% { opacity: 1; }
    66%, 71% { opacity: 0; }
    76%, 90% { opacity: 1; }
    96%, 100%     { opacity: 0; }
}

.main-site-logo {
    display: inline-block !important;
    width: 75% !important;
    max-width: 1100px !important;
    height: auto !important;
    /* Resetujeme akékoľvek dedené animácie, aby logo stálo v strede */
    animation: none !important;
    transform: none !important;
}

/* UPRAVA PRICHODU LIGHTBOXU*/

/* ============================================================
   LIGHTBOX - FIX PRÍCHODU (0.8 -> 1) A ODCHODU
   ============================================================ */

/* 1. POZADIE (Závoj) */
.mfp-bg {
    opacity: 0;
    transition: opacity 0.3s ease-out;
    z-index: 99998 !important;
}
.mfp-bg.mfp-ready {
    opacity: 0.8 !important;
}
.mfp-removing.mfp-bg {
    opacity: 0 !important;
}

/* 2. PRÍCHOD FOTKY (Scale 0.8 -> 1) */
/* Základný stav - schovaná fotka */
.mfp-wrap .mfp-content {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease-out !important;
}

/* Stav Ready - keď sa lightbox otvorí */
.mfp-ready.mfp-wrap .mfp-content {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* 3. ODCHOD FOTKY (Odlet späť na 0.8) */
.mfp-removing.mfp-wrap .mfp-content {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.3s ease-in !important;
}

/* 4. FIX LOGA A SCROLLU (Nezmenené, overené) */
html.mfp-helper .logo-fixed-container,
body.mfp-zoom-out-cur .logo-fixed-container {
    display: none !important;
}

html.mfp-helper, body.mfp-zoom-out-cur {
    overflow: visible !important;
    position: relative !important;
    height: auto !important;
}

.mfp-wrap { z-index: 99999 !important; }

/* --- OPRAVENÝ PRECHOD PRE GALÉRIU --- */

/* Plynulá zmena rozmerov pozadia (aby to neskákalo pri zmene pomeru strán) */
.mfp-container {
    transition: all 0.4s ease-in-out !important;
}

/* Animácia prechodu - pridáme efekt "prelínačky" */
.mfp-figure {
    animation: mfpFadeIn 0.4s ease-out;
}

@keyframes mfpFadeIn {
    0% { opacity: 0; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* Fix pre plynulosť samotného obrázka */
.mfp-img {
    transition: opacity 0.3s ease-in-out !important;
}
/* --- JEMNÁ OPRAVA DEFORMÁCIE --- */

/* Necháme Isotope určiť rozmery, my len povieme fotke, nech sa oreže */
#realizacie .portfolio-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* OREŽE namiesto natiahnutia */
    object-position: center center !important;
    display: block !important;
}

.portfolio-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* OREŽE namiesto natiahnutia */
    object-position: center center !important;
    display: block !important;
}

/* Zabezpečíme, aby overlay nezavadzal klikaniu */
#realizacie .portfolio-item .href, 
#realizacie .portfolio-item .href a {
    z-index: 50 !important;
}

/* --- RESPONZÍVNE MINIATÚRY V DETAILE PROJEKTU --- */

/* 1. Oprava kontajnera, aby sa nerozťahoval cez celú šírku */
.wpb_gallery_slides.wpb_image_grid {
    width: 100% !important;
    display: block !important;
}

/* 1. Nastavenie kontajnera na flexibilnú mriežku */
#portfolio-details .wpb_image_grid_ul, .wpb_image_grid_ul {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 -5px !important; /* Záporný margin vyrovná padding prvkov */
    width: auto !important;
}

/* 2. Jednotlivé položky (štvorce) */
#portfolio-details .wpb_image_grid_ul li.isotope-item, .wpb_image_grid_ul li.isotope-item {
    width: calc(25% - 10px) !important; 
    margin: 5px !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
}

/* 3. Samotné obrázky vnútri */
#portfolio-details .wpb_image_grid_ul li.isotope-item img, .wpb_image_grid_ul li.isotope-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Vnúti štvorcový tvar */
    object-fit: cover !important;
    border-radius: 8px !important; /* Voliteľné: zaoblenie rohov, o ktorom sme písali */
    display: block !important;
}

/* 4. RESPONZÍVNOSŤ PRE MOBIL (2 stĺpce) */
@media (max-width: 767px) {
    #portfolio-details .wpb_image_grid_ul li.isotope-item , .wpb_image_grid_ul li.isotope-item {
        width: calc(50% - 10px) !important;
    }
}

/* Zacielenie na Scriptless Social Sharing ikony */
.single-portfolio .scriptlesssocialsharing__buttons a.button {
    background: transparent !important; /* Odstráni farebné pozadie tlačidiel */
    box-shadow: none !important;        /* Odstráni prípadné tiene */
    border: none !important;            /* Odstráni okraje */
    padding: 0 !important;              /* Zruší vnútorné odsadenie */
    margin-right: 15px !important;      /* Medzera medzi ikonami */
    display: inline-flex !important;
    align-items: center;
}

.single-portfolio .scriptlesssocialsharing__buttons a.button svg {
    /* Tu nastavíme tú žltú farbu, ktorú atribút currentcolor prevezme */
    color: #FCC001 !important; 
    fill: #FCC001 !important;
    width: 25px !important; 
    height: 25px !important;
}

/* Skrytie textu (napr. "Share on Facebook"), aby zostali len čisté ikony */
.single-portfolio .scriptlesssocialsharing__buttons a.button .screen-reader-text {
    display: none !important;
}

.fa-ul p {
    padding-top:10px;
}