/* Custom Google Map Embed Style */
.custom-map-embed {
    margin-top: 16px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 32px 0 rgba(60, 60, 90, 0.18), 0 1.5px 6px 0 rgba(60, 60, 90, 0.10);
    border: 2px solid #e0e0e0;
    background: linear-gradient(135deg, #f8fafc 60%, #e3e6f3 100%);
    transition: box-shadow 0.3s, border-color 0.3s;
}
.custom-map-embed:hover {
    box-shadow: 0 10px 40px 0 rgba(60, 60, 90, 0.28), 0 2px 8px 0 rgba(60, 60, 90, 0.15);
    border-color: #b3b3e6;
}
.custom-map-embed iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: none;
    filter: grayscale(20%) contrast(1.1) brightness(1.05);
}
/* --- Globalne spremenljivke in ponastavitev (Elegantna Roza/Siva) --- */
:root {
    --primary-accent: #bf69c0; /* Mehka, pudrasta roza/siva */
    --secondary-dark: #3A3A3A; /* Temno siva, skoraj črna */
    --text-color: #555555; /* Standardni tekst */
    --light-text-color: #FAFAFA; /* Svetli tekst za temna ozadja */
    --bg-color-light: #FFFFFF; /* Čista bela podlaga */
    --bg-color-dark: #ffe8f8; /* Svetlo sivo ozadje za sekcije */
    --container-width: 1200px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-color-light);
    color: var(--text-color);
    line-height: 1.7;
    font-weight: 300;
}

a {
    color: var(--primary-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--secondary-dark);
}

ul {
    list-style: none;
}

h1, h2, h3 {
    font-family: 'Lora', serif;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.8rem;
    color: var(--secondary-dark);
}

h1 { font-size: 3.8rem; letter-spacing: -0.5px; }
h2 { font-size: 2.5rem; margin-bottom: 3.5rem; }
h3 { font-size: 1.6rem; font-weight: 400; margin-bottom: 1rem; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

section {
    padding: 7rem 0;
    border-bottom: 1px solid #EDEDED;
}

.dark-bg {
    background-color: var(--bg-color-dark);
}

.center-content {
    text-align: center;
}

.section-pre-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-accent);
    margin-bottom: 0.5rem;
}
.center-content .section-pre-title {
    margin-left: auto;
    margin-right: auto;
}

.dark-bg .section-pre-title {
     color: var(--secondary-dark) !important;
}


/* --- Glava & Navigacija --- */
header {
    background: var(--bg-color-light);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

.logo {
    display: flex;
    align-items: center;
    color: var(--secondary-dark);
    font-family: 'Lora', serif;
    font-size: 1.8rem;
    font-weight: 600;
}

.logo-img {
    height: 70px;
    margin-right: 0.2rem;
    border-radius: 25%;
}
.logo-text {
    font-size: 1.6rem;
}


.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--secondary-dark);
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover {
    border-color: var(--primary-accent);
    color: var(--primary-accent);
}

.nav-cta-btn {
    background-color: var(--primary-accent);
    color: var(--light-text-color) !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 10px;
    border: none !important;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-left: 0.5rem;
    font-weight: 1000 !important;
}

.nav-cta-btn:hover {
    background-color: var(--secondary-dark);
    transform: translateY(-1px);
}


.hamburger-menu {
    display: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--secondary-dark);
}


/* --- Gumbi --- */
.cta-button {
    display: inline-block;
    padding: 0.5rem 2.5rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--primary-accent);
    background: var(--primary-accent);
    color: var(--light-text-color) !important;
    transition: all 0.3s ease;
    border-radius: 10px;
    font-size: 0.95rem;
    margin-top: 1.5rem;
    cursor: pointer;
    text-align: center;
}

.cta-button:hover {
    background: var(--secondary-dark);
    border-color: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* --- Hero Sekcija --- */
#hero {
    padding: 8rem 0 7rem 0;
    background: linear-gradient(180deg, var(--bg-color-light) 0%, var(--bg-color-dark) 100%);
    border-bottom: none;
}

.hero-pre-title {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: none;
    color: #888;
    margin-bottom: 1.5rem;
}

#hero h1 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-size: 4.8rem;
    color: var(--secondary-dark);
}
#hero h1 strong {
    font-style: italic;
    color: var(--primary-accent);
}

.hero-subtext {
    font-size: 1.15rem;
    max-width: 600px;
    margin: 1.5rem auto 0 auto;
    color: var(--text-color);
}


/* --- Storitve --- */
.storitve-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.service-card {
    padding: 2.5rem 1.5rem;
    background: var(--bg-color-light);
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid var(--primary-accent);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.service-card i {
    font-size: 3rem;
    color: var(--primary-accent);
    margin-bottom: 1.2rem;
    display: block;
    transition: color 0.3s ease;
}

.service-card h3 {
    color: var(--secondary-dark);
    font-size: 1.5rem;
}

.service-card p {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 0;
}

/* --- O Nas & Kontakt (Kombinirana sekcija) --- */
#o-nas {
    padding: 6rem 0;
    border-bottom: none;
}
.about-contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-content {
    text-align: left;
}
.about-content h2 {
    text-align: left;
    margin-bottom: 2.5rem;
}
.about-content p {
    margin-bottom: 1.5rem;
    color: #666;
}
.about-content b {
    color: var(--secondary-dark);
}

.contact-info-wrapper {
    position: relative;
}

.placeholder-img {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.contact-card {
    background: var(--bg-color-light);
    padding: 2.5rem;
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    line-height: 2.2;
}

.contact-card h3 {
    color: var(--primary-accent);
    margin-bottom: 1rem;
    font-size: 1.8rem;
    text-align: center;
}
.contact-card h4 {
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--secondary-dark);
    margin-top: 2rem;
}

.contact-card i {
    color: var(--primary-accent);
    width: 20px;
    margin-right: 0.5rem;
}

.contact-card p, .contact-card a {
    font-size: 1rem;
    color: var(--text-color);
}
.contact-card a:hover {
    color: var(--primary-accent);
}

.contact-card .cta-button {
    width: 100%;
    margin-top: 2rem;
}

/* --- Galerija --- */
.galerija-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.galerija-item {
    background-color: var(--bg-color-light);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.galerija-item:hover {
    transform: scale(1.02);
}

.placeholder-img-small {
    height: 250px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.image-caption {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    color: #777;
    text-align: center;
    font-style: italic;
    margin-bottom: 0;
}


/* --- Noga --- */
footer {
    padding: 3rem 0;
    text-align: center;
    font-size: 0.85rem;
    background: var(--secondary-dark);
    color: var(--light-text-color);
}

.social-links {
    margin-bottom: 1rem;
}

.social-links a {
    font-size: 1.6rem;
    margin: 0 1rem;
    color: var(--light-text-color);
}

.social-links a:hover {
    color: var(--primary-accent);
}

footer p {
    margin: 0;
    opacity: 0.8;
}

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

/* --- JS Animacije (Reveal - Nespremenjeno) --- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- Odzivnost (Media Queries) --- */
@media (max-width: 1050px) {
    .storitve-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 992px) {
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.2rem; }

    .about-contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-content {
        text-align: center;
    }
    .about-content h2 {
        text-align: center;
    }

    .storitve-grid {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    h1 { font-size: 2.8rem; }

    #hero h1 { 
        font-size: 2.2rem; /* Zmanjšana vrednost, da se besedilo prilagodi zaslonu */
        line-height: 1.1;  /* Malo stisnemo vrstice za boljši izgled */
        padding: 0 10px;   /* Dodamo nekaj prostora ob straneh */
    }
    
    .logo-text {
        display: none;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        /* DODANO: Nekaj prostora na vrhu, da se izognemo ikoni za zapiranje */
        padding-top: 7rem;
        top: 0;
        right: -100%; 
        width: 75%;
        height: 100vh;
        background: var(--bg-color-light);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.5s ease-in-out;
    }
    
    .nav-links.nav-active {
        right: 0; 
    }

    .nav-links li {
        margin: 0;
    }

    .nav-links a {
        /* POPRAVEK: To ustvari enakomeren vertikalni razmik 0.5rem zgoraj in spodaj */
        padding: 0.5rem 1.5rem;
        font-size: 1.1rem;
        color: var(--secondary-dark);
        border-bottom: none;
    }

    .dropdown-menu a {
        padding: 0.5rem 0; /* Uporabite enak vertikalni padding */
    }

    .nav-links a:hover {
        color: var(--primary-accent);
    }
    .nav-cta-btn {
        margin-left: 0;
    }
    
    .hamburger-menu {
        display: block;
        z-index: 101; 
    }

    #hero {
        padding: 6rem 0;
    }

    .storitve-grid, .galerija-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-card {
        padding: 2rem 1.5rem;
    }
}

/* Manjši gumb za povezavo znotraj kartice storitve (na index.html) */
.service-card .cta-button-small {
    padding: 0.5rem 1rem !important; /* Manjše oblazinjenje */
    font-size: 0.8rem;
    margin-top: 1rem;
    border-radius: 6px;
    display: block; /* Da zavzame celotno širino */
}

.cta-button-small {
    /* Uporabi iste lastnosti kot glavni CTA */
    display: inline-block;
    padding: 0.35rem 1.5rem !important; /* Manjši kot glavni gumb */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--primary-accent);
    background: var(--primary-accent);
    color: var(--light-text-color) !important;
    transition: all 0.3s ease;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-top: 1.5rem; /* Odmik od tabele */
    cursor: pointer;
    text-align: center;
}

/* Stanje ob mirovanju: Enake nastavitve kot glavni gumb za konsistentnost */
.cta-button-small:hover {
    background: var(--secondary-dark);
    border-color: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* Dodamo še nastavitve za post-tablično pozicijo, če je gumb znotraj detail-content */
.detail-content .cta-button-small {
    /* Da se gumb ne raztegne čez celotno širino, ostane inline-block */
    display: inline-block;
}

.service-card p {
    min-height: 45px; /* Da so kartice enake višine */
}

/* Stil za H1 na podstrani */
.detail-h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
}
.detail-intro {
    max-width: 700px;
    margin: 0 auto 5rem auto;
    font-size: 1.1rem;
    color: var(--text-color);
    text-align: center;
}

/* Glavni Grid za podrobno storitev (Slika + Besedilo) */
.detail-card-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5rem;
    padding: 2rem 0;
}

/* Sprememba vrstnega reda za drugo kartico (Slika Desno) */
.detail-card-grid.reverse-grid {
    grid-template-areas: "content image";
}
.reverse-grid .detail-image {
    grid-area: image;
}
.reverse-grid .detail-content {
    grid-area: content;
    padding-right: 0;
    padding-left: 1.5rem;
}


.detail-image {
    height: 450px;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border: 3px solid var(--bg-color-dark); /* Rahla obroba */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--light-text-color);
    font-size: 1.2rem;
    font-style: italic;
}

.detail-content {
    padding-left: 1.5rem;
    text-align: justify;
}

.detail-content h2 {
    color: var(--primary-accent);
    font-size: 2rem;
    margin-top: 0;
}
.detail-content p {
    color: var(--text-color);
    margin-bottom: 1rem;
}

/* Ločilo med karticami */
.detail-hr {
    border: none;
    border-top: 1px solid #e9e9e9;
    margin: 1rem auto;
    width: 75%;
}


/* Stili za Cenik Tabele (Elegantna verzija) */
.details-table {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--bg-color-dark); /* Uporaba svetlo roza ozadja */
    border-radius: 4px;
    border-left: 3px solid var(--primary-accent);
}

.details-table h4 {
    font-size: 1.1rem;
    color: var(--secondary-dark);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.details-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    text-align: left;
}
.details-table th, .details-table td {
    padding: 0.8rem 0;
    border-bottom: 1px solid #d0d0d0;
}
.details-table th {
    color: var(--primary-accent);
    font-weight: 600;
}
.details-table td {
    color: var(--secondary-dark);
}
.details-table tr:last-child td {
    border-bottom: none;
}
.details-table td:last-child {
    text-align: right; /* Cena na desni */
    font-weight: 600;
}

/* Osnovna postavitev tabele */
.cenik-tabela {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

/* Poravnava glave tabele */
.cenik-tabela th {
    text-align: left;
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    color: var(--primary-color); /* Uporabite vašo primarno barvo */
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Prvi stolpec (Ime storitve) - Poravnano levo */
.cenik-tabela td:nth-child(1), 
.cenik-tabela th:nth-child(1) {
    text-align: left;
    width: 50%; /* Zavzame največ prostora */
}

/* Drugi stolpec (Trajanje) - Poravnano sredinsko */
.cenik-tabela td:nth-child(2), 
.cenik-tabela th:nth-child(2) {
    text-align: center;
    white-space: nowrap; /* Prepreči prelom v novo vrstico */
}

/* Tretji stolpec (Cena) - Poravnano desno */
.cenik-tabela td:nth-child(3), 
.cenik-tabela th:nth-child(3) {
    text-align: right;
    font-weight: 600; /* Poudarjena cena */
    white-space: nowrap;
}

/* Dodaten prostor v vrsticah za boljšo čitljivost */
.cenik-tabela td {
    padding: 12px 5px;
    border-bottom: 1px solid #f9f9f9;
}


/* --- Odzivnost za Podrobne Storitve --- */
@media (max-width: 992px) {
    .detail-card-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .detail-card-grid.reverse-grid {
        grid-template-areas: none; /* Odstrani vrstni red na mobilniku */
    }
    .reverse-grid .detail-content, .reverse-grid .detail-image {
        grid-area: auto;
    }
    .detail-content {
        padding-left: 0;
        padding-right: 0;
    }
    .detail-image {
        height: auto;
        min-height: 220px;
        max-width: 100%;
        aspect-ratio: 4/3;
        width: 100%;
        object-fit: cover;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        margin: 0 auto;
        display: block;
    }
    .detail-content h2 {
        margin-top: 1rem;
    }
    .detail-intro {
        margin-bottom: 3rem;
    }
}

/* Popravek za navigacijo storitev med 901px in 1100px */
@media screen and (max-width: 1100px) and (min-width: 901px) {
    .sticky-service-nav {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        /* Preprečimo, da bi padding znotraj containerja povzročal zamik */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sticky-service-nav ul {
        display: flex;
        /* KLJUČNI POPRAVEK: Poravnamo na začetek, da se leva beseda ne odreže */
        justify-content: flex-start !important; 
        gap: 15px;
        padding: 15px 20px; /* Dodamo stranski odmik tukaj, da prva beseda ne tišči ob rob */
        margin: 0;
        list-style: none;
    }

    .sticky-service-nav ul li {
        flex: 0 0 auto; /* Prepreči krčenje elementov */
    }

    .sticky-service-nav ul li a {
        font-size: 0.9rem;
        padding: 8px 5px;
    }
}

/* --- Sticky Service Navigation for Subpages --- */
.sticky-service-nav {
    position: sticky;
    top: 5.5rem; /* Positions the menu right below the main header (Header height is approx 5rem) */
    background-color: var(--bg-color-light);
    z-index: 90; /* Below main header (100) but above other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 0.8rem 0;
    white-space: nowrap; /* Prevents links from wrapping onto the next line */
    overflow-x: auto; /* Allows horizontal scrolling if the screen is too narrow */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.sticky-service-nav::-webkit-scrollbar {
    display: none;
}

.sticky-service-nav .container {
    /* Ensures content stays within max-width and respects padding */
    padding: 0 1.5rem;
}

.sticky-service-nav ul {
    display: flex; /* Arranges the list items horizontally */
    justify-content: center; /* Centers the links */
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sticky-service-nav a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
}

.sticky-service-nav a:hover {
    color: var(--primary-accent);
    border-color: var(--primary-accent);
}

/* --- Dropdown Nav Menu Styles --- */

/* Parent list item for the dropdown */
.nav-links li.dropdown {
    position: relative; /* Essential for positioning the dropdown content */
}

/* The link that triggers the dropdown */
.nav-links li.dropdown > a {
    /* Optional: Add a small caret icon for visual cue */
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}
.nav-links li.dropdown > a::after {
    content: '\f0d7'; /* Unicode for solid down-arrow (Font Awesome) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7em;
    transition: transform 0.3s ease;
    /* On hover, the arrow will rotate */
}
.nav-links li.dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* The actual dropdown content (the sub-menu) */
.dropdown-menu {
    display: none; /* Hidden by default */
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* Desktop-specific styles */
    position: absolute;
    top: 100%; /* Position right below the main link */
    left: 0;
    min-width: 150px;
    background-color: var(--bg-color-light);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-top: 3px solid var(--primary-accent);
    z-index: 99; /* Ensures it is above other content */
    border-radius: 0 0 4px 4px;
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.8rem 1rem;
    color: var(--text-color);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
}
.dropdown-menu a:hover {
    background-color: var(--bg-color-dark);
    color: var(--secondary-dark);
}
.dropdown-menu li:last-child a {
    border-bottom: none;
}

/* Show the dropdown on hover for desktop */
.nav-links li.dropdown:hover .dropdown-menu {
    display: block;
}

/* Mobile/Tablet Responsiveness (Hamburger Menu Active) */
@media (max-width: 900px) {
    /* When the mobile menu is active */

    .dropdown-menu {
        position: static; /* Stacked below the parent link */
        box-shadow: none;
        border-top: none;
        background-color: transparent;
        border-radius: 0;
        margin-top: -10px; /* Pull it slightly up to align */
        padding-left: 1.5rem; /* Indent the sub-links */
        display: none; /* Initially hidden on mobile */
    }

    .dropdown-menu a {
        padding: 0.5rem 0;
        border: none;
        font-weight: 400; /* Slightly lighter than main links */
        color: var(--text-color);
    }
    .dropdown-menu a:hover {
        background-color: transparent;
        color: var(--primary-accent);
    }

    /* Class controlled by JavaScript for mobile toggle */
    .nav-links.nav-active .dropdown.active .dropdown-menu {
        display: block; /* Show menu when 'active' class is present */
    }
}

/* This applies the margin to all your target headings */
h2[id], h1[id] {
    /* Set this value to be slightly MORE than the height of your sticky nav. 
       If your nav is 50px tall, use 60px for extra padding. 
       Adjust this value based on your actual header height. */
    scroll-margin-top: 170px; 
}

/* Mobile/Tablet Responsiveness (Hamburger Menu Active) */
@media (max-width: 900px) {
    
    /* Pokažemo podmeni takoj, ko je aktivna glavna navigacija (nav-active) */
    .nav-links.nav-active .dropdown-menu {
        display: block; 
    }

    .sticky-service-nav .container {
        /* Set padding to zero on the sides so the list starts exactly at the edge */
        padding: 0; 
    }
    
    .sticky-service-nav ul {
        /* Add the necessary padding directly to the UL to visually separate links from edge */
        padding: 0 1.5rem;
        /* Important: Ensure the list has enough width to scroll if needed */
        justify-content: flex-start; /* Align to left when scrolling is enabled */
    }
}

/* --- Stili za Sezname ugodnosti (Benefit List) --- */

.benefit-list {
    /* Remove default bullet style and margin */
    list-style: none;
    padding-left: 0;
    margin: 1rem 0 1.5rem 0; /* Dodamo malo prostora nad in pod seznamom */
}

.benefit-list li {
    position: relative;
    padding-left: 1.5rem; /* Space for the custom icon */
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.benefit-list li::before {
    /* Uporabimo Font Awesome ikono (Checkmark) */
    font-family: "Font Awesome 5 Free";
    content: "\f00c"; /* Unicode za check-mark */
    font-weight: 900;
    
    /* Pozicioniranje ikone */
    position: absolute;
    left: 0;
    top: 0;
    
    /* Barva in velikost */
    color: var(--primary-accent); /* Uporabi vašo roza barvo */
    font-size: 0.9rem;
}

/* --- Scroll to Top Button (CSS) --- */

#scrollToTopBtn {
    display: none; 
    position: fixed;
    bottom: 25px; 
    right: 25px; 
    z-index: 99; 
    
    /* Sleeker Look: Uporabi rahlo svetlejši dark ton, da ni povsem črna */
    background-color: #585858; /* Malo svetlejša temno siva kot secondary-dark */
    
    color: var(--primary-accent); 
    
    border: none;
    outline: none;
    cursor: pointer;
    
    /* Uporabimo Flexbox za popolno centriranje ikone */
    display: flex; /* Doda flexbox za centriranje vsebine */
    justify-content: center; /* Centriranje horizontalno */
    align-items: center; /* Centriranje vertikalno */
    padding: 0; /* Odstranimo padding, saj zdaj centriramo z flexboxom */
    
    border-radius: 50%; 
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Močnejša senca */
    transition: background-color 0.3s, transform 0.2s, opacity 0.3s;
    opacity: 0.9; /* Rahlo večja opacity */
}

/* Stanje ob hoverju (Sleek Effect) */
#scrollToTopBtn:hover {
    background-color: var(--primary-accent); /* Zamenjamo barvi ob hoverju */
    opacity: 1;
    transform: translateY(-2px) scale(1.05); /* Doda rahlo povečanje */
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

#scrollToTopBtn i {
    font-size: 1.2rem;
    color: var(--primary-accent);
    /* Odstranimo relative pozicioniranje, saj sedaj Flexbox centrira */
    position: static; 
    top: auto; 
    left: auto;
    transition: color 0.3s ease;
}

#scrollToTopBtn:hover i {
    color: var(--light-text-color);
}