/*
Theme Name: MajstorNidza Custom Styles
Description: Custom CSS for majstornidza.rs WordPress theme
Version: 1.0.0
Author: HYPESTUDIO

TABLE OF CONTENTS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
01. CSS Variables & Brand Colors
02. Global Typography (Headings)
03. Buttons & Links
04. Icon Boxes
05. Municipality Boxes (opstina-box)
06. Service Items
07. Why Section
08. Municipality Details Section
09. Top Header
10. Navigation Menu - Desktop
11. Navigation Menu - Mobile
12. Contact Section
13. Responsive Styles - Mobile (320px - 767px)
14. Responsive Styles - Tablet (768px - 1024px)
15. Responsive Styles - Desktop (1025px+)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/

/* ========================================================================
   01. CSS VARIABLES & BRAND COLORS
   ======================================================================== */
:root {
    --color-green-primary: #00d084;
    --color-navy-dark: #151B31;
    --color-gray-dark: #32373c;
    --color-white: #ffffff;
    --color-green-hover: #00b872;
}

/* ========================================================================
   02. GLOBAL TYPOGRAPHY (HEADINGS)
   ======================================================================== */

/* HEADING HIERARCHY FIX - Ensure H1 is always larger than H2 across all pages */

/* H1 - Main page heading (largest) */
h1,
h1.elementor-heading-title {
    font-size: 3rem !important; /* 48px - main heading across all pages */
}

/* H2 - Section headings (smaller than H1) */
h2,
h2.elementor-heading-title {
    font-size: 2.5rem !important; /* 40px - section headings */
}

/* Default: Black headings on white sections */
h4, h5, h6 {
    color: #000000 !important;
}

/* White headings for green/dark background sections */
.elementor-section[data-settings*='"background_background"'] h4,
.elementor-section[data-settings*='"background_background"'] h5,
.elementor-section[data-settings*='"background_background"'] h6,
.elementor-background-overlay ~ .elementor-container h4,
.elementor-background-overlay ~ .elementor-container h5,
.elementor-background-overlay ~ .elementor-container h6 {
    color: #ffffff !important;
}

/* Ensure consistent text size across all sections */
.elementor-widget-text-editor {
    font-size: 16px !important;
}

.elementor-widget-text-editor p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.elementor-widget-text-editor ul li {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* List spacing - Extra spacing BEFORE each numbered heading (except first) */
.elementor-widget-text-editor h3:not(:first-of-type),
.elementor-widget-text-editor h4:not(:first-of-type),
.elementor-widget-text-editor h5:not(:first-of-type) {
    margin-top: 25px !important;
    padding-top: 0 !important;
}

/* Keep normal spacing after headings */
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5 {
    margin-bottom: 15px !important;
}

/* Normal spacing for paragraphs */
.elementor-widget-text-editor p {
    margin-bottom: 10px !important;
}

/* ========================================================================
   03. BUTTONS & LINKS
   ======================================================================== */

/* ===== REMOVE UNDERLINES FROM ALL BUTTONS ===== */
.elementor-button,
.elementor-button-link,
.elementor-button a,
a.elementor-button,
a.elementor-button-link,
.elementor-widget-button a,
.elementor-widget-button .elementor-button,
.elementor-button-content-wrapper,
button a,
.wp-element-button,
.elementor-button-text {
    text-decoration: none !important;
}

/* Remove underlines on hover */
.elementor-button:hover,
.elementor-button-link:hover,
.elementor-button a:hover,
a.elementor-button:hover,
a.elementor-button-link:hover,
.elementor-widget-button a:hover,
.elementor-widget-button .elementor-button:hover {
    text-decoration: none !important;
}

/* Ensure button wrapper links have no underline */
.elementor-widget-button a[href] {
    text-decoration: none !important;
}

/* Green buttons specifically (like "Detalji" and "Pozovite Odmah") */
a[href*="tel:"],
a[href*="kontakt"],
a.elementor-button[style*="background"],
.elementor-button[style*="background"] {
    text-decoration: none !important;
}

/* Target the specific green buttons */
.elementor-button-wrapper a,
.elementor-button-wrapper .elementor-button {
    text-decoration: none !important;
}

/* Remove underline from icon links */
.elementor-button-icon {
    text-decoration: none !important;
}

/* Fix for any nested links in buttons */
.elementor-button * {
    text-decoration: none !important;
}

/* Ensure no underline on focus/active states */
.elementor-button:focus,
.elementor-button:active,
.elementor-button-link:focus,
.elementor-button-link:active {
    text-decoration: none !important;
}

/* Global link style override for buttons only */
a.elementor-button,
a.elementor-button-link {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Fix for WordPress default button styles */
.wp-block-button__link,
.wp-element-button {
    text-decoration: none !important;
}

/* ===== TEXT EDITOR WIDGET LINKS (Keep underlines for regular text links) ===== */
.elementor-widget-text-editor a:not(.elementor-button) {
    text-decoration: underline;
}

.elementor-widget-text-editor a.elementor-button {
    text-decoration: none !important;
}

/* ===== BUTTON STYLES & COLORS ===== */

/* DEFAULT: All buttons - Dark gray solid (for white backgrounds) */
a.elementor-button.elementor-button-link {
    /*background-color: #32373c !important;
    color: #fff !important;
    border: 2px solid #32373c !important; */
}

a.elementor-button.elementor-button-link:hover {
    /*
    background-color: #23282d !important;
    border-color: #23282d !important;
    */
}

/* All black buttons (non-phone, non-contact) set to 280px width */
a.elementor-button.elementor-button-link:not([href^="tel:"]):not([href*="kontakt"]) {
    width: 14.7rem !important; /*17.5*/ /* 280px = 17.5rem */
    max-width: 100% !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Green buttons (Pozovite & Kontakt) - ALWAYS */
a.elementor-button[href^="tel:"],
a.elementor-button[href*="kontakt"] {
    background-color: #00d084 !important;
    color: #fff !important;
    border: 2px solid #00d084 !important;
    width: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

a.elementor-button[href^="tel:"]:hover,
a.elementor-button[href*="kontakt"]:hover {
    background-color: #00b872 !important;
    border-color: #00b872 !important;
}

/* Buttons on DARK backgrounds - White FILLED by default */
section[style*="background-image"] a.elementor-button.elementor-button-link:not([href^="tel:"]):not([href*="kontakt"]),
.has-background-overlay a.elementor-button.elementor-button-link:not([href^="tel:"]):not([href*="kontakt"]),
.elementor-section[data-settings*="background"] a.elementor-button.elementor-button-link:not([href^="tel:"]):not([href*="kontakt"]) {
    /* background-color: #fff !important;
    color: #0c0d0e !important;
    border: 2px solid #fff !important; */
}

/* Hover: Outlined white */
section[style*="background-image"] a.elementor-button.elementor-button-link:not([href^="tel:"]):not([href*="kontakt"]):hover,
.has-background-overlay a.elementor-button.elementor-button-link:not([href^="tel:"]):not([href*="kontakt"]):hover,
.elementor-section[data-settings*="background"] a.elementor-button.elementor-button-link:not([href^="tel:"]):not([href*="kontakt"]):hover {
    /* background-color: transparent !important;
    color: #fff !important;
    border-color: #fff !important; */
}

/* ========================================================================
   04. ICON BOXES
   ======================================================================== */

/* Remove underlines from icon box title links */
.elementor-icon-box-title a,
.elementor-icon-box-title a:hover,
.elementor-icon-box-title a:focus,
.elementor-icon-box-title a:visited {
    text-decoration: none !important;
}

/* Hide list styling in "Šta Radimo?" section (elements 4f817c5, 1f203dc, 6d4ecb3) */
[data-id="4f817c5"] ul,
[data-id="1f203dc"] ul,
[data-id="6d4ecb3"] ul,
.elementor-element-4f817c5 ul,
.elementor-element-1f203dc ul,
.elementor-element-6d4ecb3 ul {
    list-style-type: none !important;
    list-style: none !important;
    list-style-position: outside !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

[data-id="4f817c5"] ul li,
[data-id="1f203dc"] ul li,
[data-id="6d4ecb3"] ul li,
.elementor-element-4f817c5 ul li,
.elementor-element-1f203dc ul li,
.elementor-element-6d4ecb3 ul li {
    list-style-type: none !important;
    list-style: none !important;
    list-style-position: outside !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background-image: none !important;
}

[data-id="4f817c5"] ul li::before,
[data-id="1f203dc"] ul li::before,
[data-id="6d4ecb3"] ul li::before,
[data-id="4f817c5"] ul li::after,
[data-id="1f203dc"] ul li::after,
[data-id="6d4ecb3"] ul li::after,
.elementor-element-4f817c5 ul li::before,
.elementor-element-1f203dc ul li::before,
.elementor-element-6d4ecb3 ul li::before,
.elementor-element-4f817c5 ul li::after,
.elementor-element-1f203dc ul li::after,
.elementor-element-6d4ecb3 ul li::after {
    content: none !important;
    display: none !important;
}

/* Hide list styling in "Za Kogo Je Ova Usluga?" section (elements 1fbe89e, bf1eb5d, e14be53) */
[data-id="1fbe89e"] ul,
[data-id="bf1eb5d"] ul,
[data-id="e14be53"] ul,
.elementor-element-1fbe89e ul,
.elementor-element-bf1eb5d ul,
.elementor-element-e14be53 ul {
    list-style-type: none !important;
    list-style: none !important;
    list-style-position: outside !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

[data-id="1fbe89e"] ul li,
[data-id="bf1eb5d"] ul li,
[data-id="e14be53"] ul li,
.elementor-element-1fbe89e ul li,
.elementor-element-bf1eb5d ul li,
.elementor-element-e14be53 ul li {
    list-style-type: none !important;
    list-style: none !important;
    list-style-position: outside !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background-image: none !important;
}

[data-id="1fbe89e"] ul li::before,
[data-id="bf1eb5d"] ul li::before,
[data-id="e14be53"] ul li::before,
[data-id="1fbe89e"] ul li::after,
[data-id="bf1eb5d"] ul li::after,
[data-id="e14be53"] ul li::after,
.elementor-element-1fbe89e ul li::before,
.elementor-element-bf1eb5d ul li::before,
.elementor-element-e14be53 ul li::before,
.elementor-element-1fbe89e ul li::after,
.elementor-element-bf1eb5d ul li::after,
.elementor-element-e14be53 ul li::after {
    content: none !important;
    display: none !important;
}

/* Remove underlines from icon box wrapper links */
.elementor-icon-box-wrapper a,
.elementor-icon-box-content a {
    text-decoration: none !important;
}

/* Specific targeting for service boxes */
.elementor-widget-icon-box a,
.elementor-widget-icon-box .elementor-icon-box-title a {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Remove underlines on all states */
.elementor-widget-icon-box a:hover,
.elementor-widget-icon-box a:focus,
.elementor-widget-icon-box a:active {
    text-decoration: none !important;
}

/* Additional specificity for icon box links */
.elementor-icon-box-title > a {
    text-decoration: none !important;
}

/* Tipovi Brava - Left align descriptions */
.elementor-1516 .elementor-icon-box-description,
.elementor-2076 .elementor-icon-box-description,
.elementor-911 .elementor-icon-box-description,
.elementor-2222 .elementor-icon-box-description,
.elementor-1349 .elementor-icon-box-description {
    text-align: left;
}

/* Optional: Add subtle hover effect to entire icon box */
.elementor-widget-icon-box:has(.opstina-box):hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

/* ========================================================================
   05. MUNICIPALITY BOXES (OPSTINA-BOX)
   ======================================================================== */

/* Icon box container adjustments */
.elementor-widget-icon-box .opstina-box {
    text-align: left !important;
    padding: 15px !important;
}

/* Municipality title (h6) */
.opstina-naslov {
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: #32373c !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Info paragraphs */
.opstina-info {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #666 !important;
}

.opstina-info:last-child {
    margin-bottom: 0 !important;
}

.opstina-info strong {
    color: #32373c !important;
    font-weight: 600 !important;
}

/* Link paragraph - GREEN BUTTONS */
.opstina-link {
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
}

.opstina-link a {
    display: inline-block !important;
    background-color: #00d084 !important;
    color: #fff !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    border: 2px solid #00d084 !important;
    transition: all 0.3s ease !important;
    width: auto !important;
}

.opstina-link a:hover {
    background-color: #00b872 !important;
    border-color: #00b872 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .opstina-naslov {
        font-size: 1em !important;
    }

    .opstina-link a {
        font-size: 0.85em !important;
        padding: 8px 18px !important;
    }

    .opstina-info {
        font-size: 13px !important;
    }
}

/* ========================================================================
   06. SERVICE ITEMS
   ======================================================================== */

.service-item {
    margin-bottom: 30px !important;
    padding-bottom: 25px !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.service-item:last-of-type {
    border-bottom: none !important;
}

.service-item h4 {
    margin-bottom: 12px !important;
    margin-top: 0 !important;
    font-size: 1.3em !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.service-intro {
    margin: 8px 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #fff !important;
}

.service-intro strong {
    color: #fff !important;
}

.service-item ul {
    margin: 12px 0 !important;
    padding-left: 25px !important;
}

.service-item ul li {
    margin-bottom: 6px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #fff !important;
}

.service-price {
    margin: 15px 0 !important;
    font-size: 16px !important;
    color: #fff !important;
}

.service-price strong {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Service Link Button with spacing */
.service-link {
    margin: 20px 0 15px 0 !important;
    padding: 0 !important;
}

.service-link a {
    display: inline-block !important;
    background-color: #fff !important;
    color: #0c0d0e !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    border: 2px solid #fff !important;
    transition: all 0.3s ease !important;
    width: auto !important;
}

.service-link a:hover {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Service Footer */
.service-footer {
    margin-top: 40px !important;
    padding: 25px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    text-align: center !important;
}

.service-footer h4 {
    margin-bottom: 12px !important;
    font-size: 1.4em !important;
    color: #fff !important;
}

.service-footer p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #fff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .service-item h4 {
        font-size: 1.1em !important;
    }

    .service-link a {
        font-size: 0.9em !important;
        padding: 10px 20px !important;
    }
}

/* ========================================================================
   07. WHY SECTION
   ======================================================================== */

.why-section {
    margin: 20px 0 !important;
}

.why-item {
    margin-bottom: 35px !important;
    padding-bottom: 30px !important;
    border-bottom: 2px solid #e0e0e0 !important;
}

.why-item:last-child {
    border-bottom: none !important;
}

.why-item h4 {
    font-size: 1.3em !important;
    font-weight: 700 !important;
    color: #32373c !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.4 !important;
}

.why-item p {
    margin: 10px 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

.why-item p strong {
    color: #000 !important;
    font-weight: 600 !important;
}

.why-highlight {
    background-color: #f0f0f0 !important;
    padding: 12px 15px !important;
    border-radius: 4px !important;
    margin: 15px 0 !important;
    font-weight: 600 !important;
    color: #32373c !important;
}

.why-item ul {
    margin: 12px 0 !important;
    padding-left: 25px !important;
}

.why-item ul li {
    margin-bottom: 8px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* Nested lists */
.why-item ul ul {
    margin-top: 8px !important;
    padding-left: 20px !important;
}

.why-item ul ul li {
    margin-bottom: 5px !important;
    font-size: 15px !important;
}

/* Area titles (for section 4) */
.area-title {
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    color: #32373c !important;
}

.area-title strong {
    color: #32373c !important;
    font-weight: 700 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .why-item h4 {
        font-size: 1.1em !important;
    }

    .why-item p,
    .why-item ul li {
        font-size: 15px !important;
    }
}

/* ========================================================================
   08. MUNICIPALITY DETAILS SECTION
   ======================================================================== */

.municipality-details-section {
    margin: 30px 0 !important;
}

.section-main-title {
    font-size: 1.5em !important;
    font-weight: 700 !important;
    color: #32373c !important;
    margin: 0 0 25px 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

.municipality-detail-item {
    margin-bottom: 30px !important;
    padding: 20px !important;
    background-color: #f9f9f9 !important;
    border-radius: 8px !important;
    border-left: 4px solid #00d084 !important;
}

.municipality-detail-item h4 {
    font-size: 1.3em !important;
    font-weight: 700 !important;
    color: #32373c !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.4 !important;
}

.municipality-detail-item p {
    margin: 10px 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

.municipality-detail-item p strong {
    color: #000 !important;
    font-weight: 600 !important;
}

.municipality-detail-item ul {
    margin: 12px 0 20px 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.municipality-detail-item ul li {
    margin-bottom: 8px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    padding-left: 0 !important;
}

/* Municipality link button - GREEN with proper spacing */
.municipality-link {
    margin: 25px 0 10px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.municipality-link a {
    display: inline-block !important;
    background-color: #00d084 !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    border: 2px solid #00d084 !important;
    transition: all 0.3s ease !important;
    width: auto !important;
}

.municipality-link a:hover {
    background-color: #00b872 !important;
    border-color: #00b872 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 208, 132, 0.3) !important;
}

/* Override any default link styling in this section */
.municipality-detail-item a:not(.municipality-link a) {
    display: inline-block !important;
    background-color: #00d084 !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    border: 2px solid #00d084 !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

.municipality-detail-item a:not(.municipality-link a):hover {
    background-color: #00b872 !important;
    border-color: #00b872 !important;
}

/* Coming soon section */
.municipality-coming-soon {
    margin-top: 40px !important;
    padding: 25px !important;
    background-color: #fff3cd !important;
    border-radius: 8px !important;
    border-left: 4px solid #ffc107 !important;
}

.municipality-coming-soon h4 {
    font-size: 1.3em !important;
    font-weight: 700 !important;
    color: #32373c !important;
    margin: 0 0 12px 0 !important;
}

.municipality-coming-soon p {
    margin: 10px 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

.municipality-coming-soon ul {
    margin: 12px 0 !important;
    padding-left: 25px !important;
}

.municipality-coming-soon ul li {
    margin-bottom: 6px !important;
    font-size: 16px !important;
    color: #333 !important;
}

.contact-prompt {
    margin-top: 20px !important;
    padding: 15px !important;
    background-color: #fff !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-size: 17px !important;
}

.contact-prompt strong {
    color: #00d084 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .section-main-title {
        font-size: 1.2em !important;
    }

    .municipality-detail-item h4 {
        font-size: 1.1em !important;
    }

    .municipality-link a,
    .municipality-detail-item a:not(.municipality-link a) {
        font-size: 0.9em !important;
        padding: 10px 20px !important;
    }
}

/* ========================================================================
   09. TOP HEADER
   ======================================================================== */

/* Top header bar positioning */
.elementor-element-5d2ed465 {
    z-index: 1 !important;
    position: relative !important;
}

/* Force white color on ALL elements in top header */
.elementor-element-5d2ed465 .elementor-icon-box-wrapper *,
.elementor-element-5d2ed465 .elementor-icon-list-item *,
.elementor-element-5d2ed465 a,
.elementor-element-5d2ed465 a span,
.elementor-element-5d2ed465 a i,
.elementor-element-5d2ed465 a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* Subtle hover effect - slightly brighter */
.elementor-element-5d2ed465 .elementor-icon-box-wrapper:hover,
.elementor-element-5d2ed465 .elementor-icon-list-item:hover,
.elementor-element-5d2ed465 a:hover {
    opacity: 0.8 !important;
}

/* Keep everything white on hover */
.elementor-element-5d2ed465 .elementor-icon-box-wrapper:hover *,
.elementor-element-5d2ed465 .elementor-icon-list-item:hover *,
.elementor-element-5d2ed465 a:hover span,
.elementor-element-5d2ed465 a:hover i,
.elementor-element-5d2ed465 a:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Icon specific fixes */
.elementor-element-5d2ed465 .elementor-icon,
.elementor-element-5d2ed465 .elementor-icon:hover {
    color: #ffffff !important;
}

/* Social icons specific */
.elementor-element-5d2ed465 .elementor-icon-list-item:hover .elementor-icon-list-icon,
.elementor-element-5d2ed465 .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: #ffffff !important;
}

/* SVG icons */
.elementor-element-5d2ed465 svg,
.elementor-element-5d2ed465 svg:hover {
    fill: #ffffff !important;
}

/* Icon box titles */
.elementor-element-5d2ed465 .elementor-icon-box-title,
.elementor-element-5d2ed465 .elementor-icon-box-title:hover,
.elementor-element-5d2ed465 .elementor-icon-box-title:hover span {
    color: #ffffff !important;
}

/* ========================================================================
   10. NAVIGATION MENU - DESKTOP
   ======================================================================== */

/* All old ElementsKit menu CSS removed - now using HFE Nav Menu widget */

/* ========================================================================
   10B. NAVIGATION MENU - NEW STYLE (Header Footer Elementor)
   ======================================================================== */

/* Desktop and Tablet menu - white text (768px+) */
@media (min-width: 768px) {
    /* Main menu items - white text - EXACT ELEMENTOR SPECIFICITY */
    .elementor-94 .elementor-element.elementor-element-970fc99 .menu-item a.hfe-menu-item,
    .elementor-element-970fc99 .hfe-nav-menu ul.hfe-nav-menu > li > a.hfe-menu-item,
    .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul#menu-1-970fc99 > li > a,
    .hfe-nav-menu__layout-horizontal .hfe-nav-menu li.parent a.hfe-menu-item,
    .hfe-nav-menu ul.hfe-nav-menu > li > a,
    nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li a.hfe-menu-item,
    .hfe-nav-menu .hfe-menu-item {
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .elementor-94 .elementor-element.elementor-element-970fc99 .menu-item a.hfe-menu-item:hover,
    .elementor-element-970fc99 .hfe-nav-menu ul.hfe-nav-menu > li > a.hfe-menu-item:hover,
    .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul#menu-1-970fc99 > li > a:hover,
    .hfe-nav-menu__layout-horizontal .hfe-nav-menu li.parent a.hfe-menu-item:hover,
    .hfe-nav-menu ul.hfe-nav-menu > li > a:hover,
    nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li a.hfe-menu-item:hover,
    .hfe-nav-menu .hfe-menu-item:hover {
        color: #00d084 !important;
    }

    /* Dropdown arrow - white */
    .hfe-menu-toggle.sub-arrow i,
    .hfe-menu-toggle.sub-arrow .fa {
        color: #ffffff !important;
    }

    /* Hamburger menu icon - white on mobile/tablet */
    .elementor-element-970fc99 .hfe-nav-menu__toggle svg,
    .elementor-element-970fc99 .hfe-nav-menu__toggle svg path,
    .elementor-element-970fc99 .hfe-nav-menu-icon svg,
    .elementor-element-970fc99 .hfe-nav-menu-icon svg path,
    .hfe-nav-menu__toggle svg,
    .hfe-nav-menu__toggle svg path,
    .hfe-nav-menu-icon svg,
    .hfe-nav-menu-icon svg path,
    .hfe-nav-menu__toggle .e-font-icon-svg,
    .hfe-nav-menu__toggle .e-font-icon-svg path {
        fill: #ffffff !important;
        color: #ffffff !important;
        stroke: #ffffff !important;
    }
}

/* Mobile and tablet - hamburger icon white and position left */
@media (max-width: 1280px) {
    .elementor-element-970fc99 .hfe-nav-menu__toggle,
    .hfe-nav-menu__toggle {
        color: #ffffff !important;
    }

    .elementor-element-970fc99 .hfe-nav-menu__toggle svg,
    .elementor-element-970fc99 .hfe-nav-menu__toggle svg path,
    .hfe-nav-menu__toggle svg,
    .hfe-nav-menu__toggle svg path {
        fill: #ffffff !important;
        color: #ffffff !important;
        stroke: #ffffff !important;
    }

    /* Move hamburger icon to the left */
    .elementor-element-970fc99 .hfe-nav-menu,
    .hfe-nav-menu {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .elementor-element-970fc99 .hfe-nav-menu__toggle {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Show mobile menu when active - target the menu-is-active class */
    .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal.menu-is-active,
    .hfe-nav-menu__breakpoint-tablet .hfe-active-menu + nav.hfe-nav-menu__layout-horizontal,
    nav.hfe-nav-menu__layout-horizontal.menu-is-active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        font-size: 16px !important;
        position: relative !important;
        z-index: 9999 !important;
    }

    /* Override Elementor's white background on mobile menu */
    .elementor-94 .elementor-element.elementor-element-970fc99 nav.hfe-dropdown,
    .elementor-94 .elementor-element.elementor-element-970fc99 nav.hfe-dropdown .menu-item a.hfe-menu-item,
    .elementor-94 .elementor-element.elementor-element-970fc99 nav.hfe-dropdown .menu-item a.hfe-sub-menu-item {
        background-color: transparent !important;
    }

    /* Set proper background for the entire mobile menu nav */
    .elementor-94 .elementor-element-970fc99 nav.hfe-dropdown.menu-is-active {
        background-color: #151B31 !important;
    }

    /* Mobile menu items styling when menu is active */
    nav.menu-is-active ul.hfe-nav-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        font-size: 16px !important;
    }

    nav.menu-is-active ul.hfe-nav-menu li {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 16px !important;
    }

    nav.menu-is-active ul.hfe-nav-menu li a.hfe-menu-item,
    nav.menu-is-active ul.hfe-nav-menu li a.hfe-sub-menu-item,
    nav.menu-is-active .hfe-has-submenu-container a {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #ffffff !important;
        font-size: 16px !important;
    }

    /* Ensure mobile menu items have white text */
    @media (max-width: 767px) {
        nav.menu-is-active ul.hfe-nav-menu li a.hfe-menu-item,
        nav.menu-is-active ul.hfe-nav-menu li a.hfe-sub-menu-item,
        nav.menu-is-active .hfe-has-submenu-container a,
        .hfe-nav-menu__breakpoint-mobile ul.hfe-nav-menu li a {
            color: #ffffff !important;
        }
    }

    /* Fix mobile menu item height - MORE SPECIFIC */
    .elementor-element-970fc99 .hfe-nav-menu li.menu-item a.hfe-menu-item,
    .elementor-element-970fc99 .hfe-nav-menu .hfe-has-submenu-container,
    .elementor-element-970fc99 .hfe-nav-menu .hfe-has-submenu-container a,
    .hfe-nav-menu li a.hfe-menu-item,
    .hfe-nav-menu .hfe-has-submenu-container {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: 55px !important;
        height: 55px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    .elementor-element-970fc99 .hfe-nav-menu .menu-item,
    .hfe-nav-menu .menu-item {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 55px !important;
        height: 55px !important;
    }

    .elementor-element-970fc99 .hfe-nav-menu .parent-has-child,
    .hfe-nav-menu .parent-has-child {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 55px !important;
        height: 55px !important;
    }

    /* Remove extra spacing from dropdown parent items */
    .elementor-element-970fc99 .hfe-nav-menu li.hfe-has-submenu,
    .hfe-nav-menu li.hfe-has-submenu {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Very specific - fix only the container height */
    .elementor-94 .elementor-element-970fc99 .hfe-has-submenu-container {
        min-height: 55px !important;
        height: 55px !important;
        max-height: 55px !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        margin: 0 !important;
    }

    /* Remove border lines between menu items */
    .elementor-element-970fc99 .hfe-nav-menu li.menu-item,
    .hfe-nav-menu li.menu-item {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
    }

    .elementor-element-970fc99 .hfe-nav-menu li.menu-item a.hfe-menu-item,
    .elementor-element-970fc99 .hfe-nav-menu .hfe-has-submenu-container,
    .hfe-nav-menu li.menu-item a.hfe-menu-item {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
    }

    /* JavaScript-controlled submenu toggle */
    .hfe-nav-menu li.submenu-open > .sub-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .hfe-nav-menu li:not(.submenu-open) > .sub-menu {
        display: none !important;
    }

    /* Mobile submenu styling - dark background, white text */
    .hfe-nav-menu .sub-menu {
        background-color: #1a2138 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .hfe-nav-menu .sub-menu li {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .hfe-nav-menu .sub-menu .hfe-sub-menu-item,
    .hfe-nav-menu .sub-menu li a {
        color: #ffffff !important;
        background-color: transparent !important;
        padding: 12px 20px 12px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        border: none !important;
        min-height: 45px !important;
    }

    .hfe-nav-menu .sub-menu .hfe-sub-menu-item:hover,
    .hfe-nav-menu .sub-menu li a:hover {
        background-color: rgba(0, 208, 132, 0.1) !important;
        color: #00d084 !important;
        padding-left: 25px !important;
    }

    /* Submenu icons on mobile - green color with Font Awesome */
    .hfe-nav-menu .sub-menu li a::before {
        content: '' !important;
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        margin-right: 12px !important;
        color: #00d084 !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    /* Specific icons for Usluge submenu */
    #menu-item-7596 a::before { content: "\f0b1" !important; } /* Brave Kompletna - briefcase */
    #menu-item-4463 a::before { content: "\f084" !important; } /* Hitno Otvaranje - key */
    #menu-item-4464 a::before { content: "\f023" !important; } /* Instalacija - lock */
    #menu-item-4468 a::before { content: "\f0ad" !important; } /* Servis - wrench */
    #menu-item-4471 a::before { content: "\f021" !important; } /* Zamena - sync */
    #menu-item-4465 a::before { content: "\f0a1" !important; } /* Interfonske - bell */
    #menu-item-4467 a::before { content: "\f0c9" !important; } /* Popravka Roletni - bars */
    #menu-item-4469 a::before { content: "\f015" !important; } /* Servis PVC - home */
    #menu-item-4466 a::before { content: "\f11b" !important; } /* Kodiranje - gamepad */
    #menu-item-8888 a::before { content: "\f084" !important; } /* Narezivanje Ključeva - key */
    #menu-item-8886 a::before { content: "\f2c2" !important; } /* Narezivanje tagova - id-card */
    #menu-item-8887 a::before { content: "\f2e7" !important; } /* Oštrenje Noževa - utensils */

    /* Icons for Bravar Beograd submenu - universal rule for all locations */
    #menu-item-169 .sub-menu li a::before { content: "\f3c5" !important; } /* map marker for all Bravar locations */
}

/* ========================================================================
   10C. DESKTOP SUBMENU STYLING (1281px+)
   ======================================================================== */
@media (min-width: 1281px) {
    /* Dropdown container styling */
    .hfe-nav-menu .sub-menu {
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        border-radius: 8px !important;
        padding: 12px 0 !important;
        min-width: 240px !important;
    }

    /* Dropdown menu items - dark text on white background */
    .hfe-nav-menu .sub-menu .hfe-sub-menu-item {
        color: #333333 !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .hfe-nav-menu .sub-menu .hfe-sub-menu-item:hover {
        background-color: #f8f9fa !important;
        color: #00d084 !important;
        padding-left: 20px !important;
    }

    /* Dropdown list items - add space and styling */
    .hfe-nav-menu .sub-menu li {
        margin: 4px 8px !important;
        border-radius: 6px !important;
        transition: all 0.2s ease !important;
    }

    /* ===== DROPDOWN ICONS ===== */
    .elementor-94 .elementor-element-970fc99 .sub-menu li a.hfe-sub-menu-item,
    .hfe-nav-menu .sub-menu li a.hfe-sub-menu-item,
    .hfe-nav-menu ul.sub-menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .elementor-94 .elementor-element-970fc99 .sub-menu li a.hfe-sub-menu-item::before,
    .hfe-nav-menu .sub-menu li a.hfe-sub-menu-item::before,
    .hfe-nav-menu ul.sub-menu li a::before {
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        margin-right: 10px !important;
        color: #00d084 !important;
        font-size: 14px !important;
        display: inline-block !important;
        width: 20px !important;
        min-width: 20px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    /* Specific icons for Usluge submenu - MORE SPECIFIC */
    #menu-item-7596.menu-item a::before,
    li#menu-item-7596 a.hfe-sub-menu-item::before { content: "\f0b1" !important; } /* Brave Kompletna - briefcase */

    #menu-item-4463.menu-item a::before,
    li#menu-item-4463 a.hfe-sub-menu-item::before { content: "\f084" !important; } /* Hitno Otvaranje - key icon */

    #menu-item-4464.menu-item a::before,
    li#menu-item-4464 a.hfe-sub-menu-item::before { content: "\f023" !important; } /* Instalacija - lock icon */

    #menu-item-4468.menu-item a::before,
    li#menu-item-4468 a.hfe-sub-menu-item::before { content: "\f0ad" !important; } /* Servis - wrench icon */

    #menu-item-4471.menu-item a::before,
    li#menu-item-4471 a.hfe-sub-menu-item::before { content: "\f021" !important; } /* Zamena - sync icon */

    #menu-item-4465.menu-item a::before,
    li#menu-item-4465 a.hfe-sub-menu-item::before { content: "\f0a1" !important; } /* Interfonske - bell icon */

    #menu-item-4467.menu-item a::before,
    li#menu-item-4467 a.hfe-sub-menu-item::before { content: "\f0c9" !important; } /* Popravka Roletni - bars icon */

    #menu-item-4469.menu-item a::before,
    li#menu-item-4469 a.hfe-sub-menu-item::before { content: "\f015" !important; } /* Servis PVC - home icon */

    #menu-item-4466.menu-item a::before,
    li#menu-item-4466 a.hfe-sub-menu-item::before { content: "\f11b" !important; } /* Kodiranje - gamepad icon */

    #menu-item-8888.menu-item a::before,
    li#menu-item-8888 a.hfe-sub-menu-item::before { content: "\f084" !important; } /* Narezivanje Ključeva - key icon */

    #menu-item-8886.menu-item a::before,
    li#menu-item-8886 a.hfe-sub-menu-item::before { content: "\f2c2" !important; } /* Narezivanje tagova - id-card icon */

    #menu-item-8887.menu-item a::before,
    li#menu-item-8887 a.hfe-sub-menu-item::before { content: "\f2e7" !important; } /* Oštrenje Noževa - utensils icon */

    /* Icons for Bravar Beograd submenu - universal rule for all locations */
    #menu-item-169.menu-item .sub-menu li a::before,
    li#menu-item-169 .sub-menu li a.hfe-sub-menu-item::before { content: "\f3c5" !important; } /* map marker for all Bravar locations */

    /* Current page/active menu item - green background */
    .hfe-nav-menu .sub-menu .current-menu-item > a {
        background-color: rgba(0, 208, 132, 0.1) !important;
        color: #00d084 !important;
        font-weight: 600 !important;
    }
}

/* ========================================================================
   11. NAVIGATION MENU - MOBILE
   ======================================================================== */

/* COMMENTED OUT - ElementsKit mobile menu styles */
/*
@media (max-width: 767px) {
    /* Mobile menu items - white text */
    .elementskit-menu-container .elementskit-navbar-nav > li > a {
        color: #ffffff !important;
    }

    /* Dropdown arrow white */
    .elementskit-menu-container .elementskit-submenu-indicator {
        color: #ffffff !important;
    }

    /* Mobile menu background - keep dark */
    .elementskit-menu-offcanvas-elements {
        background-color: #151B31 !important;
    }

    /* Submenu container - dark background */
    .elementskit-menu-container .elementskit-dropdown {
        background-color: #1a2138 !important;
    }

    /* Submenu items - white text on dark background */
    .elementskit-menu-container .elementskit-dropdown > li > a {
        color: #ffffff !important;
        background-color: transparent !important;
    }

    /* Submenu hover - green text */
    .elementskit-menu-container .elementskit-dropdown > li > a:hover {
        color: #00d084 !important;
        background-color: rgba(0, 208, 132, 0.1) !important;
    }

    /* Main menu hover - green */
    .elementskit-menu-container .elementskit-navbar-nav > li > a:hover {
        color: #00d084 !important;
    }
}
*/

/* ========================================================================
   12. CONTACT SECTION
   ======================================================================== */

/* Contact section parent column - Override ALL text to white */
.elementor-element-5a7fd227,
.elementor-element-5a7fd227 * {
    color: #ffffff !important;
}

/* Contact section headings - h2, h5 */
.elementor-element-5a7fd227 h2,
.elementor-element-5a7fd227 h5,
.elementor-element-5a7fd227 .elementor-heading-title,
.elementor-element-751e0693 .elementor-heading-title,
.elementor-element-1e7530da .elementor-heading-title,
.elementor-element-24b1a912 .elementor-heading-title,
.elementor-element-2d1ec9a3 .elementor-heading-title,
.elementor-element-f8277f3 .elementor-heading-title,
.elementor-element-72b05d9 .elementor-heading-title {
    color: #ffffff !important;
}

/* Contact section paragraphs */
.elementor-element-5a7fd227 p,
.elementor-element-7d801c2b p {
    color: #ffffff !important;
}

/* Contact section icon list text */
.elementor-element-5a7fd227 .elementor-icon-list-text,
.elementor-element-63064f49 .elementor-icon-list-text,
.elementor-element-7c50e6b3 .elementor-icon-list-text,
.elementor-element-40883326 .elementor-icon-list-text,
.elementor-element-125d649 .elementor-icon-list-text {
    color: #ffffff !important;
}

/* Contact section icons - Make green */
.elementor-element-5a7fd227 svg,
.elementor-element-5a7fd227 svg path,
.elementor-element-5a7fd227 i,
.elementor-element-63064f49 .elementor-icon-list-icon svg,
.elementor-element-63064f49 .elementor-icon-list-icon svg path,
.elementor-element-7c50e6b3 .elementor-icon-list-icon svg,
.elementor-element-7c50e6b3 .elementor-icon-list-icon svg path,
.elementor-element-40883326 .elementor-icon-list-icon svg,
.elementor-element-40883326 .elementor-icon-list-icon svg path,
.elementor-element-125d649 .elementor-icon-list-icon svg,
.elementor-element-125d649 .elementor-icon-list-icon svg path,
.elementor-element-125d649 .elementor-icon-list-icon i {
    fill: #00d084 !important;
    color: #00d084 !important;
}

/* ========================================================================
   13. RESPONSIVE STYLES - MOBILE & TABLET - TOP HEADER HIDING
   ======================================================================== */

/* Hide top green header on mobile and tablet (up to 1280px) */
@media (max-width: 1280px) {
    .elementor-element-5d2ed465 {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

/* ========================================================================
   13. RESPONSIVE STYLES - MOBILE (320px - 767px)
   ======================================================================== */

@media (max-width: 767px) {
    /* ===== FAQ ACCORDION - Mobile text wrapping fix [UPDATED v2] ===== */

    /* Accordion container */
    .elementskit-accordion,
    div.elementskit-accordion {
        width: 100% !important;
        overflow: visible !important;
    }

    /* Accordion card */
    .elementskit-card,
    div.elementskit-card {
        margin-bottom: 8px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Accordion card header */
    .elementskit-card-header,
    div.elementskit-card-header {
        padding: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Accordion toggler link - NUCLEAR OPTION - Most specific selectors */
    .elementskit-accordion .elementskit-card .elementskit-card-header .ekit-accordion--toggler,
    .elementskit-accordion .elementskit-card .elementskit-card-header .ekit-accordion--toggler.collapsed,
    .elementskit-accordion .elementskit-card .elementskit-card-header .ekit-accordion--btn-link,
    .elementskit-accordion .elementskit-card .elementskit-card-header a.ekit-accordion--toggler,
    .elementskit-accordion .elementskit-card .elementskit-card-header a.elementskit-btn-link {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-box-align: center !important; 
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
        padding: 16px 8px !important;
        gap: 10px !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Accordion title - Most specific */
    .elementskit-accordion .elementskit-card .ekit-accordion--toggler .ekit-accordion-title,
    .elementskit-accordion .elementskit-card .elementskit-btn-link .ekit-accordion-title,
    .elementskit-accordion .elementskit-card span.ekit-accordion-title,
    span.ekit-accordion-title {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 1 auto !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 80% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        hyphens: auto !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        font-size: 15px !important;
        padding-right: 10px !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Icon group - ULTRA SPECIFIC - CANNOT be overridden */
    .elementskit-accordion .elementskit-card .ekit-accordion--toggler .ekit_accordion_icon_group,
    .elementskit-accordion .elementskit-card .elementskit-btn-link .ekit_accordion_icon_group,
    .elementskit-accordion .elementskit-card div.ekit_accordion_icon_group,
    div.ekit_accordion_icon_group {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 30px !important;
        flex: 0 0 30px !important;
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Individual icons - Control visibility based on state */
    .elementskit-accordion .ekit_accordion_normal_icon,
    .ekit_accordion_icon_group .ekit_accordion_normal_icon {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
    }

    /* Hide active (up) icon on collapsed items */
    .elementskit-accordion .ekit_accordion_active_icon,
    .ekit_accordion_icon_group .ekit_accordion_active_icon {
        display: none !important;
    }

    /* Show active icon only when accordion is open */
    .elementskit-accordion .elementskit-card.active .ekit_accordion_active_icon {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
    }

    /* Hide normal icon when accordion is open */
    .elementskit-accordion .elementskit-card.active .ekit_accordion_normal_icon {
        display: none !important;
    }

    /* Icon elements themselves */
    .elementskit-accordion .ekit_accordion_icon_group i,
    .ekit_accordion_icon_group i {
        font-size: 14px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Accordion content padding */
    .elementskit-accordion .ekit-accordion--content {
        padding: 12px 12px 16px 12px !important;
    }
}

/* ========================================================================
   14. RESPONSIVE STYLES - TABLET (768px - 1024px)
   ======================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablet-specific adjustments can be added here if needed */
}

/* ========================================================================
   15. RESPONSIVE STYLES - DESKTOP (1025px+)
   ======================================================================== */

@media (min-width: 1025px) {
    /* Desktop-specific adjustments can be added here if needed */
}


.e-con.e-grid>.e-con-inner {
  
    padding-left: 10px;
}

/* .elementor-element-3363dea0 .elementor-icon-list--layout-inline{
    float: right;

} */

/* ========================================================================
   16. HEADER BUTTONS FIX - Side by side layout - COMMENTED OUT
   ======================================================================== */

/* Make buttons display horizontally in columns with .header-buttons-horizontal class */
/*
.header-buttons-horizontal > .elementor-widget-wrap,
.header-buttons-horizontal > .elementor-column-wrap > .elementor-widget-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
*/

/* Button widgets should not take full width */
/*
.header-buttons-horizontal .elementor-widget-button {
    width: auto !important;
    flex: 0 0 auto !important;
}
*/

/* Responsive: Stack buttons on mobile */
/*
@media (max-width: 767px) {
    .header-buttons-horizontal > .elementor-widget-wrap,
    .header-buttons-horizontal > .elementor-column-wrap > .elementor-widget-wrap {
        flex-direction: column !important;
    }

    .header-buttons-horizontal .elementor-widget-button {
        width: 100% !important;
    }
}
*/

/* ========================================================================
   17. MOBILE TOUCH EVENT FIX - CRITICAL FOR REAL DEVICES
   ======================================================================== */

/**
 * FIX #1: Chat widget was the problem - now hidden on mobile
 * No header fixes needed since chat widget is hidden
 */

/**
 * FIX #2: Elementor background overlays blocking ALL touch events on mobile
 *
 * Problem: Elementor adds .elementor-background-overlay divs with position:absolute
 * that cover entire sections but don't have pointer-events:none, so they block
 * all clicks and touches on real mobile devices (but not Chrome DevTools emulation)
 *
 * Solution: Make overlays non-interactive so touches pass through to content below
 */
.elementor-background-overlay {
    pointer-events: none !important;
}

/**
 * Mobile touch optimization - lightweight version
 * Chat widget is now hidden on mobile, so we only need basic fixes
 */
@media (max-width: 1280px) {
    /* Ensure touch events work on clickable elements */
    a,
    button,
    input,
    select,
    textarea,
    .elementor-button,
    .hfe-menu-item,
    .hfe-sub-menu-item,
    .hfe-nav-menu__toggle {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 208, 132, 0.2) !important;
    }
}

/**
 * Ensure all clickable elements explicitly allow touch events
 * This is critical for mobile Safari and Chrome on real devices
 */
a,
button,
input,
select,
textarea,
.elementor-button,
.hfe-menu-item,
.hfe-sub-menu-item,
.hfe-nav-menu__toggle,
.elementor-icon-list-item,
.elementor-icon-box-wrapper {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 208, 132, 0.2) !important;
}

/**
 * Mobile-specific touch optimization - REMOVED
 * Chat widget is now hidden on mobile, so these aggressive fixes are not needed
 */

/* ========================================================================
   17. MOBILE TOUCH EVENT FIX - Ensure proper touch handling
   ======================================================================== */

/* Global mobile touch event optimization */
@media (max-width: 767px) {
    /* Ensure body and html don't block touch events */
    html, body {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Ensure all clickable elements are touch-enabled */
    a, button, input, select, textarea,
    .elementor-button,
    .hfe-menu-item,
    .elementor-icon-box-wrapper,
    .opstina-link a,
    .municipality-link a {
        touch-action: manipulation !important;
        cursor: pointer !important;
    }

    /* Ensure menu items are fully touchable */
    .hfe-nav-menu li,
    .hfe-nav-menu li a,
    .hfe-nav-menu .hfe-menu-item,
    .hfe-nav-menu .hfe-sub-menu-item {
        touch-action: manipulation !important;
        pointer-events: auto !important;
        position: relative !important;
    }

    /* Ensure footer links are touchable */
    footer a,
    footer button,
    footer .elementor-icon-list-item,
    footer .elementor-button {
        touch-action: manipulation !important;
        pointer-events: auto !important;
    }

    /* Prevent any overlays from blocking touch events */
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-widget {
        pointer-events: auto !important;
    }

    /* Ensure chat widget doesn't block touch events when minimized */
    #majstornidza-chat-widget {
        pointer-events: auto !important;
    }

    /* Fix for Elementor mobile menu toggle */
    .hfe-nav-menu__toggle,
    .hfe-nav-menu-icon {
        touch-action: manipulation !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    }
}

/* Tablet touch optimization */
@media (min-width: 768px) and (max-width: 1280px) {
    html, body {
        touch-action: manipulation !important;
    }

    a, button, .hfe-menu-item {
        touch-action: manipulation !important;
    }
}

/* ========================================================================
   18. PAGE TITLE SECTION FIX - Hide page-header across all pages
   ======================================================================== */

/**
 * Hide the .page-header section that appears between header and content
 * This fixes the layout issue where "Brave - Kompletna Usluga" or other page titles
 * were showing in a white section on mobile devices (especially iPhone SE)
 *
 * The page title is redundant as Elementor handles page titles separately
 *
 * On desktop, this element is pushed above viewport with negative positioning,
 * but on mobile (iPhone SE) it's visible at y=43px and takes 144px height
 */
.page-header,
div.page-header,
.entry-header,
header.entry-header,
.page .entry-header,
.single .entry-header,
article .entry-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Also hide the entry-title inside page-header to be extra safe */
.page-header .entry-title,
.entry-header .entry-title {
    display: none !important;
}

.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 10px 10px;
}

.e-con.e-grid>.e-con-inner {
    padding-left: 10px 0px;
}

#left-area ul.elementor-icon-list-items, .elementor .elementor-element ul.elementor-icon-list-items, .elementor-edit-area .elementor-element ul.elementor-icon-list-items {
    padding: 0 10px 0 0;
}

#content > div.page-content > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-51746df5.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > section > div > div.elementor-column.elementor-col-33.elementor-inner-column.elementor-element.elementor-element-177675ae.animated.fadeInRight > div > div > div > div.elementor-icon-box-content > h4{
    color: #ffffff !important;
}