/* ===================================
    Theme Switcher - Light/Dark Mode
====================================== */

:root {
    /* Light theme (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f7;
    --bg-tertiary: #ededed;
    --bg-footer: #1c1c1c;
    --text-primary: #6f6f6f;
    --text-secondary: #232323;
    --text-heading: #000000;
    --text-link: #6f6f6f;
    --text-link-hover: #ff214f;
    --border-color: #d1d1d1;
    --input-bg: #ffffff;
    --input-border: #d1d1d1;
    --nav-bg: rgba(255, 255, 255, 0.95);
    --nav-text: #232323;
    --nav-link-hover: #ff214f;
    --selection-bg: #dbdbdb;
    --selection-text: #000000;
}

[data-theme="dark"] {
    /* Dark theme */
    --bg-primary: #121212;
    --bg-secondary: #1c1c1c;
    --bg-tertiary: #2a2a2a;
    --bg-footer: #0a0a0a;
    --text-primary: #fffafa;
    --text-secondary: #ededed;
    --text-heading: #ffffff;
    --text-link: #f0f0f0;
    --text-link-hover: #ff214f;
    --border-color: #404040;
    --input-bg: #1c1c1c;
    --input-border: #404040;
    --nav-bg: rgba(18, 18, 18, 0.95);
    --nav-text: #ededed;
    --nav-link-hover: #ff214f;
    --selection-bg: #444242;
    --selection-text: #ffffff;
}

/* Theme Transition - Exclude images, galleries, and interactive elements */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Exclude images and gallery elements from theme color transitions, but allow hover animations */
img,
.justified-gallery,
.justified-gallery *,
.justify-gallery-content,
.justify-gallery-content *,
.lightbox-gallery,
.lightbox-gallery *,
.portfolio-icon,
.image-hover-style-1,
.image-hover-style-3,
.banner-style1,
.banner-style3,
a[data-magnific-popup],
a[data-lightbox],
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"],
a[href$=".webp"],
[class*="mfp-"],
[class*="mfp-"] * {
    transition: none !important;
}

/* Portfolio items - exclude from color transitions but allow hover animations */
.portfolio-img,
.portfolio-grid,
.portfolio-grid *,
.grid-item,
.grid-item figure,
.grid-item figure img,
.project-img-gallery {
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
    -webkit-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
    -moz-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
    -ms-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
    -o-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
}

figure,
figure * {
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
    -webkit-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
    -moz-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
    -ms-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
    -o-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
}

/* Body and Background - Override style.css */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading) !important;
}

/* Paragraphs */
p {
    color: var(--text-primary) !important;
}

/* Dark theme - ensure paragraphs are white */
[data-theme="dark"] p,
[data-theme="dark"] p.alt-font,
[data-theme="dark"] p.font-weight-400,
[data-theme="dark"] .alt-font p,
[data-theme="dark"] p.alt-font.font-weight-400 {
    color: #070606 !important;
}

/* Cookie Consent banner adjustments for dark mode */
[data-theme="dark"] .cc--darkmode,
[data-theme="dark"] .cc--darkmode * {
    color: #070606 !important;
}

[data-theme="dark"] .cc--darkmode,
[data-theme="dark"] .cc--darkmode .cc__form,
[data-theme="dark"] .cc--darkmode .cc__content {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .cc--darkmode .cc__header,
[data-theme="dark"] .cc--darkmode .cc__body,
[data-theme="dark"] .cc--darkmode .cc__footer,
[data-theme="dark"] .cc--darkmode button {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .cc--darkmode .cc__btn,
[data-theme="dark"] .cc--darkmode .pm__badge {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .cc--darkmode .cc__link {
    color: var(--text-link) !important;
}

[data-theme="dark"] .cc--darkmode .cc__link:hover {
    color: var(--text-link-hover) !important;
}

html.theme-dark .cm__title,
html.theme-dark #cm__title,
html.theme-dark .pm__title,
html.theme-dark #pm__title,
html.theme-dark .cc__link {
    color: #000000 !important;
}
[data-theme="dark"] .cc--darkmode .pm__section-title,
[data-theme="dark"] .cc--darkmode .pm__section-desc,
[data-theme="dark"] .cc--darkmode .cc__title,
[data-theme="dark"] .cc--darkmode .cc__description,
[data-theme="dark"] .cc--darkmode .pm__title,
[data-theme="dark"] .cc--darkmode .cm__title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .cc--darkmode .pm__section::after {
    opacity: 0.2;
}

[data-theme="dark"] .cc--darkmode button.cc__btn {
    background-color: var(--text-link-hover) !important;
    border-color: var(--text-link-hover) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .cc--darkmode button.cc__btn.cc__btn--secondary {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
/* Links - Override style.css */
a, a:active, a:focus {
    color: var(--text-link) !important;
}

a:hover, a:active {
    color: var(--text-link-hover) !important;
}

/* Text Colors */
.text-white-2, .btn.text-white-2 {
    color: #FFF;
}

.text-black, .btn.text-black {
    color: var(--text-heading);
}

.text-extra-dark-gray, .btn.text-extra-dark-gray {
    color: var(--text-secondary);
}

.text-dark-gray, .btn.text-dark-gray {
    color: var(--text-primary);
}

/* Background Colors */
.bg-white, .background-white {
    background-color: var(--bg-primary) !important;
}

.bg-extra-dark-gray {
    background-color: rgba(0, 0, 0, 0) !important;
}

/* Force transparent background on .bg-extra-dark-gray when used with images - override style.css */
.portfolio-img.bg-extra-dark-gray,
.grid-item .bg-extra-dark-gray.portfolio-img,
.portfolio-grid .bg-extra-dark-gray.portfolio-img,
figure .bg-extra-dark-gray.portfolio-img,
div.bg-extra-dark-gray.portfolio-img {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

/* Portfolio items - transparent backgrounds for crystal clear images */
/* High specificity to override style.css .bg-extra-dark-gray rule */
.portfolio-img,
.portfolio-img.bg-extra-dark-gray,
.grid-item .portfolio-img,
.grid-item .portfolio-img.bg-extra-dark-gray,
.portfolio-grid .portfolio-img,
.portfolio-grid .portfolio-img.bg-extra-dark-gray,
.portfolio-grid .grid-item .portfolio-img,
.portfolio-grid .grid-item .portfolio-img.bg-extra-dark-gray,
.grid-item figure .portfolio-img,
.grid-item figure .portfolio-img.bg-extra-dark-gray,
figure .portfolio-img,
figure .portfolio-img.bg-extra-dark-gray,
div.portfolio-img,
div.portfolio-img.bg-extra-dark-gray,
div.bg-extra-dark-gray.portfolio-img {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    transition: background-color 0s !important;
}

/* Ensure portfolio hover zoom animation works correctly - no overlay, just zoom */
.portfolio-grid .grid-item figure:hover img,
.grid-item figure:hover img,
.portfolio-grid .grid-item figure:hover .project-img-gallery {
    opacity: 1 !important;
    transform: scale(1.1, 1.1) !important;
    -webkit-transform: scale(1.1, 1.1) !important;
    -moz-transform: scale(1.1, 1.1) !important;
    -ms-transform: scale(1.1, 1.1) !important;
    -o-transform: scale(1.1, 1.1) !important;
    transition: all 0.3s ease 0s !important;
    -webkit-transition: all 0.3s ease 0s !important;
    -moz-transition: all 0.3s ease 0s !important;
    -ms-transition: all 0.3s ease 0s !important;
    -o-transition: all 0.3s ease 0s !important;
}

/* Hide figcaption overlay on hover - no cover effect */
.portfolio-grid .grid-item figure:hover figcaption,
.grid-item figure:hover figcaption,
.portfolio-grid .grid-item:hover figcaption,
.grid-item:hover figcaption {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* Keep figcaption hidden at all times */
.portfolio-grid .grid-item figcaption,
.grid-item figcaption {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide all portfolio hover overlay elements - no cover effect */
.portfolio-grid .grid-item .portfolio-hover-main,
.portfolio-grid .grid-item .portfolio-hover-box,
.portfolio-grid .grid-item .portfolio-hover-content,
.grid-item .portfolio-hover-main,
.grid-item .portfolio-hover-box,
.grid-item .portfolio-hover-content,
.portfolio-grid .grid-item:hover .portfolio-hover-main,
.portfolio-grid .grid-item:hover .portfolio-hover-box,
.portfolio-grid .grid-item:hover .portfolio-hover-content,
.grid-item:hover .portfolio-hover-main,
.grid-item:hover .portfolio-hover-box,
.grid-item:hover .portfolio-hover-content {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
}

/* Remove any background overlays on portfolio items */
.portfolio-grid .grid-item figure::before,
.portfolio-grid .grid-item figure::after,
.grid-item figure::before,
.grid-item figure::after,
.portfolio-grid .grid-item::before,
.portfolio-grid .grid-item::after,
.grid-item::before,
.grid-item::after {
    display: none !important;
    content: none !important;
}

/* Ensure portfolio images are not affected by theme filters */
.portfolio-img img,
.grid-item img,
.project-img-gallery {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

/* Make all image containers transparent - crystal clear images */
img,
figure,
figure img,
.portfolio-img,
.portfolio-img img,
.grid-item,
.grid-item figure,
.grid-item figure img,
.grid-item figure .portfolio-img,
.grid-item figure .portfolio-img img,
.project-img-gallery,
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure,
.justified-gallery img,
.gallery-link,
.gallery-link img,
.lightbox-gallery,
.lightbox-gallery img,
.image-hover-style-1,
.image-hover-style-3,
.banner-style1,
.banner-style3 {
    background-color: transparent !important;
    background: transparent !important;
}

/* Specific override for the exact HTML structure: .grid-item figure .portfolio-img.bg-extra-dark-gray */
.grid-item figure .portfolio-img.bg-extra-dark-gray,
.grid-item figure div.portfolio-img.bg-extra-dark-gray,
.grid-item figure .portfolio-img.bg-extra-dark-gray img {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

/* Ensure justified gallery items are transparent */
.justified-gallery > .entry-visible {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override any background color classes on image containers - maximum specificity */
.portfolio-img.bg-white,
.portfolio-img.bg-black,
.portfolio-img.bg-extra-dark-gray,
.portfolio-img.bg-dark-gray,
.portfolio-img.bg-light-gray,
.portfolio-img.bg-medium-light-gray,
.portfolio-grid .portfolio-img.bg-white,
.portfolio-grid .portfolio-img.bg-black,
.portfolio-grid .portfolio-img.bg-extra-dark-gray,
.portfolio-grid .grid-item .portfolio-img.bg-white,
.portfolio-grid .grid-item .portfolio-img.bg-black,
.portfolio-grid .grid-item .portfolio-img.bg-extra-dark-gray,
.grid-item .bg-white,
.grid-item .bg-black,
.grid-item .bg-extra-dark-gray,
.grid-item .bg-dark-gray,
.grid-item .bg-light-gray,
.grid-item figure .bg-white,
.grid-item figure .bg-black,
.grid-item figure .bg-extra-dark-gray,
.grid-item figure .portfolio-img.bg-white,
.grid-item figure .portfolio-img.bg-black,
.grid-item figure .portfolio-img.bg-extra-dark-gray,
figure .bg-white,
figure .bg-black,
figure .bg-extra-dark-gray,
figure .portfolio-img.bg-white,
figure .portfolio-img.bg-black,
figure .portfolio-img.bg-extra-dark-gray,
div.bg-extra-dark-gray.portfolio-img,
div.portfolio-img.bg-extra-dark-gray {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

.bg-light-gray {
    background-color: var(--bg-secondary) !important;
}

.bg-medium-light-gray {
    background-color: var(--bg-tertiary) !important;
}

/* Navigation */
.navbar {
    background-color: var(--nav-bg) !important;
}

.navbar .navbar-nav .nav-link,
.navbar .navbar-nav li a {
    color: var(--nav-text) !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav li a:hover {
    color: var(--nav-link-hover) !important;
}

.navbar .navbar-nav .active > a {
    color: var(--nav-link-hover) !important;
}

.navbar .navbar-toggler {
    border-color: var(--border-color);
}

.navbar .navbar-toggler .icon-bar {
    background-color: var(--nav-text);
}

/* Hamburger menu and navigation colors are handled in media queries below */

/* Inputs */
input, textarea, select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

input:focus, textarea:focus {
    border-color: var(--text-link-hover) !important;
    background-color: var(--input-bg);
    color: var(--text-primary);
}

input::placeholder, textarea::placeholder {
    color: var(--text-primary);
    opacity: 0.6;
}

/* Selection */
::selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
}

::-moz-selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
}

/* Footer */
.footer-strip-dark {
    background-color: var(--bg-footer) !important;
}

footer {
    background-color: var(--bg-footer) !important;
}

footer a {
    color: var(--text-primary);
}

footer a:hover {
    color: var(--text-link-hover);
}

/* Border */
.border-color-medium-dark-gray {
    border-color: var(--border-color) !important;
}

/* Cards and Sections */
section {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Blockquotes */
blockquote {
    border-left-color: var(--border-color);
    color: var(--text-primary);
}

blockquote footer {
    color: var(--text-primary);
    opacity: 0.7;
}

/* Tables */
table {
    color: var(--text-primary);
}

table th,
table td {
    border-color: var(--border-color);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.dropdown-menu > li > a {
    color: var(--text-primary);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--bg-secondary);
    color: var(--text-link-hover);
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--bg-primary);
    color: var(--text-link-hover);
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    border: 2px solid var(--text-link-hover);
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    position: fixed;
}

body {
    position: relative;
}

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 8px;
    padding: 0;
    text-decoration: none !important;
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
    overflow: visible;
}

.theme-toggle:hover {
    background-color: var(--bg-secondary);
    border-color: var(--text-link-hover);
    color: var(--text-link-hover);
    transform: scale(1.1);
}

.theme-toggle:focus {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    border-color: var(--text-link-hover);
    box-shadow: 0 0 0 3px rgba(255, 33, 79, 0.2);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--text-primary);
    pointer-events: none;
    font-size: 20px;
    line-height: 1;
}

.theme-toggle .theme-icon-light {
    display: none !important;
    opacity: 0;
}

.theme-toggle .theme-icon-dark {
    display: inline-flex !important;
    opacity: 1;
}

[data-theme="dark"] .theme-toggle .theme-icon-light {
    display: inline-flex !important;
    opacity: 1;
}

[data-theme="dark"] .theme-toggle .theme-icon-dark {
    display: none !important;
    opacity: 0;
}

.theme-toggle:hover .theme-icon-light,
.theme-toggle:hover .theme-icon-dark,
.theme-toggle:focus .theme-icon-light,
.theme-toggle:focus .theme-icon-dark {
    color: var(--text-link-hover);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
        margin-left: 4px;
        z-index: 1000 !important;
        position: relative !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(255, 33, 79, 0.2);
        touch-action: manipulation;
    }
    
    .theme-toggle .theme-icon-light,
    .theme-toggle .theme-icon-dark {
        font-size: 18px !important;
        visibility: visible !important;
        color: var(--text-primary) !important;
    }
    
    /* Ensure icons are properly displayed on tablet */
    .theme-toggle .theme-icon-dark {
        display: inline-flex !important;
        opacity: 1 !important;
    }
    
    .theme-toggle .theme-icon-light {
        display: none !important;
        opacity: 0 !important;
    }
    
    [data-theme="dark"] .theme-toggle .theme-icon-light {
        display: inline-flex !important;
        opacity: 1 !important;
    }
    
    [data-theme="dark"] .theme-toggle .theme-icon-dark {
        display: none !important;
        opacity: 0 !important;
    }
    
    /* ============================================
       TABLET NAVIGATION - LIGHT THEME
       ============================================ */
    
    /* Hamburger menu icon - Light theme: DARK */
    :not([data-theme="dark"]) nav.navbar.white-link .mobile-toggle span,
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-toggler .icon-bar,
    :not([data-theme="dark"]) .white-link .mobile-toggle span,
    :not([data-theme="dark"]) .white-link .navbar-toggler .icon-bar {
        background: #232323 !important;
        background-color: #232323 !important;
    }
    
    /* Menu text - Light theme: DARK */
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) nav.navbar.bootsnav.white-link .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) .white-link .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) .white-link .accordion-menu ul.nav li a,
    :not([data-theme="dark"]) .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) .accordion-menu ul.nav li a,
    :not([data-theme="dark"]) nav.navbar .navbar-collapse ul.nav li a {
        color: var(--text-heading) !important;
    }
    
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) nav.navbar.bootsnav.white-link .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) .white-link .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) .white-link .accordion-menu ul.nav li a:hover,
    :not([data-theme="dark"]) .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) .accordion-menu ul.nav li a:hover,
    :not([data-theme="dark"]) nav.navbar .navbar-collapse ul.nav li a:hover {
        color: var(--text-link-hover) !important;
    }
    
    /* ============================================
       TABLET NAVIGATION - DARK THEME
       ============================================ */
    
    /* Hamburger menu icon - Dark theme: WHITE */
    [data-theme="dark"] nav.navbar.white-link .mobile-toggle span,
    [data-theme="dark"] nav.navbar.white-link .navbar-toggler .icon-bar,
    [data-theme="dark"] .white-link .mobile-toggle span,
    [data-theme="dark"] .white-link .navbar-toggler .icon-bar {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
    
    /* Menu text - Dark theme: WHITE */
    [data-theme="dark"] .navbar-collapse ul.nav li a,
    [data-theme="dark"] .accordion-menu ul.nav li a,
    [data-theme="dark"] nav.navbar .navbar-collapse ul.nav li a {
        color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .navbar-collapse ul.nav li a:hover,
    [data-theme="dark"] .accordion-menu ul.nav li a:hover,
    [data-theme="dark"] nav.navbar .navbar-collapse ul.nav li a:hover {
        color: var(--text-link-hover) !important;
    }
}

/* Mobile-specific fixes for theme toggle */
@media (max-width: 767px) {
    /* Ensure the container with theme toggle is visible */
    .d-flex.align-items-center {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    
    .theme-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        z-index: 1001 !important;
        position: relative !important;
        pointer-events: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        -webkit-tap-highlight-color: rgba(255, 33, 79, 0.3);
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
        flex-shrink: 0 !important;
    }
    
    .theme-toggle:active {
        transform: scale(0.9) !important;
        background-color: var(--bg-secondary) !important;
    }
    
    .theme-toggle:focus {
        outline: 3px solid var(--text-link-hover) !important;
        outline-offset: 2px !important;
    }
    
    .theme-toggle {
        overflow: visible !important;
    }
    
    .theme-toggle .theme-icon-light,
    .theme-toggle .theme-icon-dark {
        font-size: 20px !important;
        pointer-events: none !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--text-primary) !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Ensure correct icon is visible based on theme - Light theme shows moon icon */
    .theme-toggle .theme-icon-dark {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: var(--text-primary) !important;
    }
    
    .theme-toggle .theme-icon-light {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Dark theme shows sun icon */
    [data-theme="dark"] .theme-toggle .theme-icon-light {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .theme-toggle .theme-icon-dark {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Ensure theme toggle is not hidden by navigation */
    .nav-header-container .d-flex.align-items-center {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1000 !important;
    }
    
    /* ============================================
       MOBILE NAVIGATION - LIGHT THEME
       ============================================ */
    
    /* Hamburger menu icon - Light theme: BLACK */
    :not([data-theme="dark"]) nav.navbar.white-link .mobile-toggle span,
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-toggler .icon-bar,
    :not([data-theme="dark"]) nav.navbar.bootsnav.white-link .mobile-toggle span,
    :not([data-theme="dark"]) nav.navbar.bootsnav.white-link .navbar-toggler .icon-bar,
    :not([data-theme="dark"]) .white-link .mobile-toggle span,
    :not([data-theme="dark"]) .white-link .navbar-toggler .icon-bar {
        background: #000000 !important;
        background-color: #000000 !important;
    }
    
    /* Menu background - Light theme: WHITE */
    :not([data-theme="dark"]) .navbar-collapse,
    :not([data-theme="dark"]) .navbar-collapse.show,
    :not([data-theme="dark"]) .accordion-menu {
        background-color: #ffffff !important;
        border-color: var(--border-color) !important;
    }
    
    /* Menu text - Light theme: BLACK */
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) nav.navbar.bootsnav.white-link .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) nav.navbar.white-link .accordion-menu ul.nav li a,
    :not([data-theme="dark"]) .white-link .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) .white-link .accordion-menu ul.nav li a,
    :not([data-theme="dark"]) .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) .accordion-menu ul.nav li a,
    :not([data-theme="dark"]) nav.navbar .navbar-collapse ul.nav li a,
    :not([data-theme="dark"]) nav.navbar.bootsnav .navbar-collapse ul.nav li a {
        color: #ffffff !important;
        border-color: var(--border-color) !important;
    }
    
    /* Menu hover - Light theme */
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) nav.navbar.bootsnav.white-link .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) nav.navbar.white-link .accordion-menu ul.nav li a:hover,
    :not([data-theme="dark"]) .white-link .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) .white-link .navbar-collapse ul.nav li a:focus,
    :not([data-theme="dark"]) .white-link .accordion-menu ul.nav li a:hover,
    :not([data-theme="dark"]) .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) .navbar-collapse ul.nav li a:focus,
    :not([data-theme="dark"]) .accordion-menu ul.nav li a:hover,
    :not([data-theme="dark"]) nav.navbar .navbar-collapse ul.nav li a:hover,
    :not([data-theme="dark"]) nav.navbar.bootsnav .navbar-collapse ul.nav li a:hover {
        color: var(--text-link-hover) !important;
        background-color: var(--bg-secondary) !important;
    }
    
    /* Menu active - Light theme */
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-collapse ul.nav li.active > a,
    :not([data-theme="dark"]) nav.navbar.bootsnav.white-link .navbar-collapse ul.nav li.active > a,
    :not([data-theme="dark"]) .white-link .navbar-collapse ul.nav li.active > a,
    :not([data-theme="dark"]) .white-link .accordion-menu ul.nav li.active > a,
    :not([data-theme="dark"]) .navbar-collapse ul.nav li.active > a,
    :not([data-theme="dark"]) .accordion-menu ul.nav li.active > a,
    :not([data-theme="dark"]) nav.navbar .navbar-collapse ul.nav li.active > a {
        color: var(--text-link-hover) !important;
    }
    
    /* Dropdown menu - Light theme */
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-collapse .dropdown-menu li a,
    :not([data-theme="dark"]) .white-link .navbar-collapse .dropdown-menu li a,
    :not([data-theme="dark"]) .white-link .accordion-menu .dropdown-menu li a,
    :not([data-theme="dark"]) .navbar-collapse .dropdown-menu li a,
    :not([data-theme="dark"]) .accordion-menu .dropdown-menu li a {
        color: #000000 !important;
    }
    
    :not([data-theme="dark"]) nav.navbar.white-link .navbar-collapse .dropdown-menu li a:hover,
    :not([data-theme="dark"]) .white-link .navbar-collapse .dropdown-menu li a:hover,
    :not([data-theme="dark"]) .white-link .accordion-menu .dropdown-menu li a:hover,
    :not([data-theme="dark"]) .navbar-collapse .dropdown-menu li a:hover,
    :not([data-theme="dark"]) .accordion-menu .dropdown-menu li a:hover {
        color: var(--text-link-hover) !important;
        background-color: var(--bg-secondary) !important;
    }
    
    /* ============================================
       MOBILE NAVIGATION - DARK THEME
       ============================================ */
    
    /* Hamburger menu icon - Dark theme: WHITE */
    [data-theme="dark"] nav.navbar.white-link .mobile-toggle span,
    [data-theme="dark"] nav.navbar.white-link .navbar-toggler .icon-bar,
    [data-theme="dark"] nav.navbar.bootsnav.white-link .mobile-toggle span,
    [data-theme="dark"] nav.navbar.bootsnav.white-link .navbar-toggler .icon-bar,
    [data-theme="dark"] .white-link .mobile-toggle span,
    [data-theme="dark"] .white-link .navbar-toggler .icon-bar {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
    
    /* Menu background - Dark theme: DARK */
    [data-theme="dark"] .navbar-collapse,
    [data-theme="dark"] .navbar-collapse.show,
    [data-theme="dark"] .accordion-menu {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    /* Menu text - Dark theme: WHITE */
    [data-theme="dark"] nav.navbar.white-link .navbar-collapse ul.nav li a,
    [data-theme="dark"] nav.navbar.bootsnav.white-link .navbar-collapse ul.nav li a,
    [data-theme="dark"] nav.navbar.white-link .accordion-menu ul.nav li a,
    [data-theme="dark"] .white-link .navbar-collapse ul.nav li a,
    [data-theme="dark"] .white-link .accordion-menu ul.nav li a,
    [data-theme="dark"] .navbar-collapse ul.nav li a,
    [data-theme="dark"] .accordion-menu ul.nav li a,
    [data-theme="dark"] nav.navbar .navbar-collapse ul.nav li a,
    [data-theme="dark"] nav.navbar.bootsnav .navbar-collapse ul.nav li a {
        color: #ffffff !important;
        border-color: var(--border-color) !important;
    }
    
    /* Menu hover - Dark theme */
    [data-theme="dark"] nav.navbar.white-link .navbar-collapse ul.nav li a:hover,
    [data-theme="dark"] nav.navbar.bootsnav.white-link .navbar-collapse ul.nav li a:hover,
    [data-theme="dark"] nav.navbar.white-link .accordion-menu ul.nav li a:hover,
    [data-theme="dark"] .white-link .navbar-collapse ul.nav li a:hover,
    [data-theme="dark"] .white-link .navbar-collapse ul.nav li a:focus,
    [data-theme="dark"] .white-link .accordion-menu ul.nav li a:hover,
    [data-theme="dark"] .navbar-collapse ul.nav li a:hover,
    [data-theme="dark"] .navbar-collapse ul.nav li a:focus,
    [data-theme="dark"] .accordion-menu ul.nav li a:hover,
    [data-theme="dark"] nav.navbar .navbar-collapse ul.nav li a:hover,
    [data-theme="dark"] nav.navbar.bootsnav .navbar-collapse ul.nav li a:hover {
        color: var(--text-link-hover) !important;
        background-color: var(--bg-secondary) !important;
    }
    
    /* Menu active - Dark theme */
    [data-theme="dark"] nav.navbar.white-link .navbar-collapse ul.nav li.active > a,
    [data-theme="dark"] nav.navbar.bootsnav.white-link .navbar-collapse ul.nav li.active > a,
    [data-theme="dark"] .white-link .navbar-collapse ul.nav li.active > a,
    [data-theme="dark"] .white-link .accordion-menu ul.nav li.active > a,
    [data-theme="dark"] .navbar-collapse ul.nav li.active > a,
    [data-theme="dark"] .accordion-menu ul.nav li.active > a,
    [data-theme="dark"] nav.navbar .navbar-collapse ul.nav li.active > a {
        color: var(--text-link-hover) !important;
    }
    
    /* Dropdown menu - Dark theme */
    [data-theme="dark"] nav.navbar.white-link .navbar-collapse .dropdown-menu li a,
    [data-theme="dark"] .white-link .navbar-collapse .dropdown-menu li a,
    [data-theme="dark"] .white-link .accordion-menu .dropdown-menu li a,
    [data-theme="dark"] .navbar-collapse .dropdown-menu li a,
    [data-theme="dark"] .accordion-menu .dropdown-menu li a {
        color: #ffffff !important;
    }
    
    [data-theme="dark"] nav.navbar.white-link .navbar-collapse .dropdown-menu li a:hover,
    [data-theme="dark"] .white-link .navbar-collapse .dropdown-menu li a:hover,
    [data-theme="dark"] .white-link .accordion-menu .dropdown-menu li a:hover,
    [data-theme="dark"] .navbar-collapse .dropdown-menu li a:hover,
    [data-theme="dark"] .accordion-menu .dropdown-menu li a:hover {
        color: var(--text-link-hover) !important;
        background-color: var(--bg-secondary) !important;
    }
}

/* Smooth theme transition */
html {
    transition: background-color 0.3s ease;
}

/* Override specific dark mode elements that need special handling */
[data-theme="dark"] .bg-white-opacity {
    background-color: rgba(18, 18, 18, 0.85) !important;
}

[data-theme="dark"] .bg-black-opacity {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] .bg-black-opacity-light {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Maintain contrast for important elements */
[data-theme="dark"] .text-white-2 {
    color: #FFF !important;
}

/* Logo adjustments */
[data-theme="dark"] .logo img {
    filter: brightness(1.1);
}

/* Cover Background - Dark Theme Support */
.cover-background {
    position: relative;
}

/* Only apply dark filter to background images, not gallery images */
[data-theme="dark"] .cover-background:not(.justified-gallery):not(.lightbox-gallery):not(.gallery) {
    filter: brightness(0.7);
}

[data-theme="dark"] .cover-background:not(.justified-gallery):not(.lightbox-gallery):not(.gallery)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
    pointer-events: none;
}

/* Ensure images inside galleries are not darkened */
[data-theme="dark"] .justified-gallery img,
[data-theme="dark"] .lightbox-gallery img,
[data-theme="dark"] .gallery img,
[data-theme="dark"] .justify-gallery-content img,
[data-theme="dark"] img[data-magnific-popup],
[data-theme="dark"] a[data-magnific-popup] img,
[data-theme="dark"] a[data-lightbox] img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure gallery links and images are clickable */
.justified-gallery a,
.justify-gallery-content a,
.lightbox-gallery a,
a[data-magnific-popup],
a[data-lightbox],
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"],
a[href$=".webp"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 10;
}

/* Ensure hover effects work on gallery images */
.justified-gallery a:hover,
.justify-gallery-content:hover,
.lightbox-gallery a:hover,
a[data-magnific-popup]:hover,
a[data-lightbox]:hover {
    opacity: 1 !important;
    transform: none !important;
}

/* Ensure magnific popup works correctly */
.mfp-wrap,
.mfp-container,
.mfp-content,
.mfp-image-holder,
.mfp-figure {
    pointer-events: auto !important;
    z-index: 1043 !important;
}

.mfp-bg {
    pointer-events: auto !important;
    z-index: 1042 !important;
}

/* Ensure gallery hover icons are visible and functional */
.justify-hover-icon,
.justify-hover-icon .ti-zoom-in,
.portfolio-icon,
.blog-hover-icon {
    pointer-events: none !important;
    z-index: 11 !important;
}

.justify-hover-icon {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    top: 0 !important;
    left: 0 !important;
    text-align: center !important;
    opacity: 0 !important;
    z-index: 11 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.justify-hover-icon .ti-zoom-in {
    transition: transform 0.3s ease !important;
}

.portfolio-icon,
.blog-hover-icon {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Ensure hover states work - show overlay and icon on hover */
.justify-gallery-content:hover .justify-hover-icon,
.justified-gallery > a:hover .justify-hover-icon,
.justified-gallery > div:hover .justify-hover-icon,
.lightbox-gallery a:hover .justify-hover-icon,
a[data-magnific-popup]:hover .justify-hover-icon,
.gallery-link:hover .justify-hover-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

.justify-gallery-content:hover .justify-hover-icon .ti-zoom-in,
.lightbox-gallery a:hover .justify-hover-icon .ti-zoom-in,
a[data-magnific-popup]:hover .justify-hover-icon .ti-zoom-in {
    transform: translateY(-50%) !important;
}

/* Ensure all images are visible and clickable */
.justified-gallery,
.lightbox-gallery,
.gallery {
    position: relative;
    z-index: 1;
}
.justified-gallery > div,
.justified-gallery > figure {
    position: absolute !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure images inside gallery items can have negative margins for centering */
.justified-gallery > a > img,
.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    padding: 0 !important;
    border: none !important;
    max-width: none !important;
}
.justified-gallery img,
.lightbox-gallery img,
.gallery img,
img[data-magnific-popup],
a[data-magnific-popup] img {
    display: block !important;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure gallery links are clickable */
.gallery-link,
.justify-gallery-content {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    display: block;
}

.gallery-link:hover,
.justify-gallery-content:hover {
    cursor: pointer !important;
}
/* Ensure justify-gallery-content inside absolute positioned items doesn't interfere */
.justified-gallery > a > .justify-gallery-content,
.justified-gallery > div > .justify-gallery-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
/* Ensure hover icon is always visible when needed */
.justify-hover-icon i.ti-zoom-in,
.justify-hover-icon .ti-zoom-in {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-size: 24px !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    line-height: 24px !important;
    margin: 0 auto !important;
}

/* Show magnifier icon on hover */
.justify-gallery-content:hover .justify-hover-icon i.ti-zoom-in,
.justify-gallery-content:hover .justify-hover-icon .ti-zoom-in,
.justified-gallery > a:hover .justify-hover-icon i.ti-zoom-in,
.justified-gallery > a:hover .justify-hover-icon .ti-zoom-in,
.justified-gallery > div:hover .justify-hover-icon i.ti-zoom-in,
.justified-gallery > div:hover .justify-hover-icon .ti-zoom-in,
.lightbox-gallery a:hover .justify-hover-icon i.ti-zoom-in,
.lightbox-gallery a:hover .justify-hover-icon .ti-zoom-in,
a[data-magnific-popup]:hover .justify-hover-icon i.ti-zoom-in,
a[data-magnific-popup]:hover .justify-hover-icon .ti-zoom-in {
    transform: translateY(-50%) !important;
}
/* Content inside cover-background */
.cover-background > *,
.cover-background .container,
.cover-background .row,
.cover-background [class*="col-"] {
    position: relative;
    z-index: 2;
}

[data-theme="dark"] .cover-background h1,
[data-theme="dark"] .cover-background h2,
[data-theme="dark"] .cover-background h3,
[data-theme="dark"] .cover-background h4,
[data-theme="dark"] .cover-background h5,
[data-theme="dark"] .cover-background h6 {
    color: var(--text-heading);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .cover-background p,
[data-theme="dark"] .cover-background span,
[data-theme="dark"] .cover-background div,
[data-theme="dark"] .cover-background li {
    color: var(--text-primary);
}

[data-theme="dark"] .cover-background .text-white-2,
[data-theme="dark"] .cover-background .w-text,
[data-theme="dark"] .cover-background .white-text {
    color: #ffffff !important;
}

[data-theme="dark"] .cover-background a {
    color: var(--text-link);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .cover-background a:hover {
    color: var(--text-link-hover);
}

[data-theme="dark"] .cover-background .btn {
    background-color: rgba(255, 33, 79, 0.9);
    border-color: var(--text-link-hover);
    color: #ffffff;
    text-shadow: none;
}

[data-theme="dark"] .cover-background .btn:hover {
    background-color: var(--text-link-hover);
    color: #ffffff;
}

/* ===================================
    Keyboard Navigation & Focus Styles
====================================== */

/* Global focus styles for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Links focus styles */
a:focus-visible {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    color: var(--text-link-hover);
    text-decoration: underline;
}

/* Buttons focus styles */
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 33, 79, 0.2);
}

/* Input focus styles */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    border-color: var(--text-link-hover);
}

/* Navigation links focus */
.navbar-nav a:focus-visible,
.navbar-nav .nav-link:focus-visible {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    color: var(--text-link-hover);
    background-color: var(--bg-secondary);
    border-radius: 4px;
}

/* Language flags focus */
a[href^="/en"]:focus-visible,
a[href^="/de"]:focus-visible {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    border-radius: 4px;
    display: inline-block;
}

a[href^="/en"]:focus-visible img,
a[href^="/de"]:focus-visible img {
    opacity: 0.9;
}

/* Logo focus */
.logo:focus-visible {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Footer links focus */
footer a:focus-visible {
    outline: 3px solid var(--text-link-hover);
    outline-offset: 2px;
    color: var(--text-link-hover);
    text-decoration: underline;
}

/* Remove focus styles for mouse users (but keep for keyboard) */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure focus is visible in both themes */
:focus-visible {
    outline-color: var(--text-link-hover);
}

/* Main content focus */
#main-content:focus {
    outline: none;
}

/* Ensure proper tab order */
a, button, input, textarea, select, [tabindex] {
    position: relative;
}

/* High contrast focus for better visibility */
@media (prefers-contrast: high) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible {
        outline-width: 4px;
        outline-offset: 3px;
    }
}

/* ===================================
    Mobile Responsive Styles for Gallery
====================================== */

/* Tablet and below - adjust gallery hover effects */
@media (max-width: 991px) {
    /* Ensure gallery items are touchable */
    .justified-gallery > a,
    .justified-gallery > div,
    .justified-gallery > figure,
    .justify-gallery-content,
    .gallery-link {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }
    
    /* Slightly larger touch target on mobile */
    .justify-hover-icon {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Ensure icon is visible on touch devices */
    .justify-hover-icon i.ti-zoom-in,
    .justify-hover-icon .ti-zoom-in {
        font-size: 28px !important;
    }
}

/* Mobile devices - optimize for touch */
@media (max-width: 767px) {
    /* Gallery hover icon adjustments for mobile */
    .justify-hover-icon {
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Larger icon on mobile for better visibility */
    .justify-hover-icon i.ti-zoom-in,
    .justify-hover-icon .ti-zoom-in {
        font-size: 32px !important;
        line-height: 32px !important;
    }
    
    /* Ensure gallery images are properly sized on mobile */
    .justified-gallery > a > img,
    .justified-gallery > div > img,
    .justified-gallery > figure > img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Improve touch interaction on mobile */
    .justified-gallery > a,
    .justified-gallery > div,
    .justify-gallery-content,
    .gallery-link {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }
    
    /* Show hover icon on touch/active state for mobile */
    .justified-gallery > a:active .justify-hover-icon,
    .justified-gallery > div:active .justify-hover-icon,
    .justify-gallery-content:active .justify-hover-icon,
    .gallery-link:active .justify-hover-icon {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .justified-gallery > a:active .justify-hover-icon i.ti-zoom-in,
    .justified-gallery > a:active .justify-hover-icon .ti-zoom-in,
    .justified-gallery > div:active .justify-hover-icon i.ti-zoom-in,
    .justified-gallery > div:active .justify-hover-icon .ti-zoom-in,
    .justify-gallery-content:active .justify-hover-icon i.ti-zoom-in,
    .justify-gallery-content:active .justify-hover-icon .ti-zoom-in,
    .gallery-link:active .justify-hover-icon i.ti-zoom-in,
    .gallery-link:active .justify-hover-icon .ti-zoom-in {
        transform: translateY(-50%) !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .justify-hover-icon i.ti-zoom-in,
    .justify-hover-icon .ti-zoom-in {
        font-size: 28px !important;
        line-height: 28px !important;
    }
    
    .justify-hover-icon {
        background: rgba(0, 0, 0, 0.4) !important;
    }
}