:root {
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-page-bg: #121212;
    --color-section-bg: #1E1E1E;
    --color-header-text: #E0E0E0;
    --color-gold-accent: #DEC99D;
    --color-button-primary: #C8A64D;
    --color-button-primary-hover: #B8966A;
    --color-accent: #C8A64D;
    --color-light-gray: #E5E5E5;
    --color-text-muted: #B0B0B0;
}

.text-black { color: var(--color-black); }
.bg-black { background-color: var(--color-black); } 
.text-white { color: var(--color-white); }
.bg-white { background-color: var(--color-white); }
.text-page-bg { color: var(--color-page-bg); }
.bg-page-bg { background-color: var(--color-page-bg); }
.text-section-bg { color: var(--color-section-bg); }
.bg-section-bg { background-color: var(--color-section-bg); }
.text-header { color: var(--color-header-text); }
.text-gold { color: var(--color-gold-accent); }
.bg-gold { background-color: var(--color-gold-accent); }
.text-button-primary { color: var(--color-button-primary); }
.bg-button-primary { background-color: var(--color-button-primary); }
.text-muted { color: var(--color-text-muted); }

.text-justify {
    text-align: justify;
    text-justify: inter-word;
}

.font-oswald {
    font-family: 'Oswald', sans-serif;
}
.font-roboto {
    font-family: 'Roboto', sans-serif;
}

/* Efekt scale-in dla zdjęć, menu i grafik - wychodzenie ze środka */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Efekt fade-in z mgły dla tekstów i nagłówków */
.fade-in {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(3px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out, filter 0.7s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Style dla ikon w menu głównym */
.header-icons a:hover i {
    color: var(--color-gold-accent) !important;
    transition: color 0.3s ease;
}


/* Style dla linków w menu */
.desktop-menu-link {
    position: relative;
    transition: all 0.3s ease;
    color: var(--color-header-text);
    padding: 0.5rem 1rem;
    border-radius: 0;
    background: transparent;
}

.desktop-menu-link:hover {
    color: var(--color-gold-accent) !important;
}


/* Style dla linków interaktywnych */
.interactive-link {
    color: var(--color-gold-accent);
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

.interactive-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-gold-accent);
    transition: width 0.3s ease;
}

.interactive-link:hover {
    color: #D4B85A;
}

.interactive-link:hover::after {
    width: 100%;
}


/* Style dla header */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-section-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #374151;
}

/* Style dla menu mobilnego */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 16rem;
    height: 100vh;
    background-color: var(--color-page-bg);
    transition: all 0.5s ease;
    z-index: 10000;
    visibility: hidden;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    padding: 1.5rem;
}

/* Responsive classes dla menu */
@media (max-width: 1023px) {
    .mobile-menu-container {
        display: block !important;
    }
    .desktop-menu-container {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .mobile-menu-container {
        display: none !important;
    }
    .desktop-menu-container {
        display: flex !important;
    }
}

.mobile-menu.active {
    right: 0;
    visibility: visible;
    transform: translateX(0);
}

.menu-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Style dla przycisku zamykania menu */
.mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.mobile-menu-close:hover {
    color: var(--color-gold-accent);
}

/* Style dla ikon menu mobilnego */
#mobile-menu-button {
    transition: transform 0.5s ease;
}

#mobile-menu-button.active {
    transform: translateX(100%);
}

/* Style dla linków w menu mobilnym */
#mobile-menu a[href="index.html"],
#mobile-menu a[href="oferta.html"],
#mobile-menu a[href^="oferta.html#"],
#mobile-menu a[href="kontakt.html"] {
    position: relative;
    transition: all 0.1s ease;
    padding: 0.5rem 0;
}

#mobile-menu a[href="index.html"]:hover,
#mobile-menu a[href="oferta.html"]:hover,
#mobile-menu a[href^="oferta.html#"]:hover,
#mobile-menu a[href="kontakt.html"]:hover {
    opacity: 0;
    transform: scale(0.95);
}

/* Style dla efektu zanikania ikon */
.fade-link {
    transition: all 0.3s ease;
}

.fade-link:hover {
    opacity: 0;
    transform: scale(0.95);
}

/* Style dla przycisku scroll to top */
#scroll-to-top {
    transition: all 0.3s ease;
}

#scroll-to-top:hover {
    transform: translateY(-2px);
}


/* Style dla fade-link */
.fade-link {
    transition: all 0.3s ease;
}

.fade-link:hover {
    transform: scale(1.1);
}

/* Style dla hero section */
.hero-content {
    z-index: 10;
}

.hero-image-container {
    position: relative;
    overflow: hidden;
}

.hero-image {
    transition: transform 0.5s ease;
}

.hero-image-container:hover .hero-image {
    transform: scale(1.05);
}