/* =========================================
   0. PINGBOX COLOR VARIABLES
   ========================================= */
:root {
  --pb-bg-base: #121112;         /* Main container background (Synced) */
  --pb-bg-dark: #050505;         /* Deepest background for contrast (Synced) */
  --pb-text-main: #ffffff;       /* Primary headings and text */
  --pb-text-muted: #d1d5db;      /* Secondary paragraph text */
  --pb-accent-primary: #5C24C7;  /* Brand purple (for filled buttons/backgrounds) */
  --pb-accent-hover: #62149D;    /* Darker purple for button hovers */
  --pb-accent-text: #B89CE8;     /* Lighter, highly readable purple (Synced) */
  --pb-border-color: #374151;    /* Crisp, visible dark gray for card borders */
}

/* =========================================
   1. GLOBAL SIMPLYBOOK THEME & HEADER OVERRIDES 
   ========================================= */

body, .body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* User's Sticky Header Tweaks */
#header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important; 
    width: 100%;
    background-color: #121112 !important;
}

#header .header-controls {
    align-items: center !important;
}

#header .row {
    align-items: center !important;
    min-height: 70px;
}

#header > div > div > div.col-xs-4.col-md-9 > div > div.nav-wrapper.clearfix.active {
    background-color: #121112 !important;
    top: 95px;/* User added */
    padding: 15px 0 !important;
}

#header .row .col-xs-4 { 
    width: 40px; /* User added */
} 

#header .nav-wrapper #sb_menu .nav li.active a {
    border-bottom-color: var(--pb-text-main);
} 

#header .nav-wrapper #sb_menu .nav li a {
    color: var(--pb-text-main) !important;
}

 @media (min-width: 768px) {
    section#main-buttons, #main #main-buttons {
        background-size: contain;
        background-position: center center;
        background-color: var(--pb-bg-dark);
    }
}

.subscribe-component--btn-bar .btn-bar--row .btn.btn-primary, 
#main #main-buttons .btn.book,
.btn {
    border-radius: 6px;
    animation: none;
    width: auto;
}

#main #main-content #sb_content #content-view .index-data-wrapper .section .section-pd {
    padding: 0;
    background: #121112;
}

#sb-timeline #steps #steps-content #sb_booking_content #details .detail-step .license-links-container a,
.accordion a {
    color: var(--pb-accent-text);
}

/* Hide Unnecessary SimplyBook Elements */
#main #main-buttons .btn.map,
#about-us > div > div.title-main,
#content-view > div > div.map-wrapper {
    display: none !important;
}

.logged-out {
border-radius: 6px;
}

#header .nav-wrapper {
    margin-top: -1px !important;
}

#header .nav-trigger {
    background-color: #62149d !important;
    border-radius: 6px !important;
}

#header .header-controls {
    position: static !important;
}

#header .nav-wrapper.active {
    position: fixed !important;
    top: 95px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9998 !important;
}

/* =========================================
   2. HERO SECTION REPLACEMENT & HEIGHT
   ========================================= */

section#main-buttons,
#main #main-buttons {
    height: 750px !important;
    min-height: 750px !important;
}

#main #main-buttons .company-name { 
    margin-bottom: 5px; 
} 

#main-buttons .wrapper .inner {
    margin-top: 100px; /* podesi vrednost po potrebi */
}

#main-buttons .wrapper .inner .bar { 
    padding: 0;
}

#main-buttons > div > div > div > div.company-name.animated.company-logo-and-name.slideInLeft {
    font-size: 0 !important;
    position: relative !important;
    display: block !important;
    text-align: left;
    line-height: 1.2;
}

/* SERBIAN TRANSLATION APPLIED HERE */
#main-buttons > div > div > div > div.company-name.animated.company-logo-and-name.slideInLeft::before {
    content: "Igraj stoni tenis \A \A Rezerviši svoj prostor \A u par sekundi." !important;
    font-size: clamp(32px, 5vw, 56px) !important;
    font-weight: 800;
    color: var(--pb-text-main);
    white-space: pre !important;
    display: block;
    line-height: 1.2; 
}

#main-buttons > div > div > div > div.company-name.animated.company-logo-and-name.slideInLeft::after {
    content: "bilo kada." !important;
    font-size: clamp(32px, 5vw, 56px) !important;
    font-weight: 800;
    color: var(--pb-accent-text);
    position: absolute !important;
    top: 1.2em; 
    left: 0;
    line-height: 1.2;
    display: block;
}

@media (max-width: 768px) {
    #main-buttons > div > div > div > div.company-name.animated.company-logo-and-name.slideInLeft::before,
    #main-buttons > div > div > div > div.company-name.animated.company-logo-and-name.slideInLeft::after {
        font-size: clamp(24px, 7vw, 36px) !important;
    }
}

#main #main-buttons .btn.book {
    opacity: 0;
    animation: fadeInBtn 0.6s ease forwards;
    animation-delay: 1.5s;
}

@keyframes fadeInBtn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#main #main-buttons .btn.book a {
    background-color: #1a1a2e !important;
    border-radius: 8px !important;
    color: white !important;
}

#main #main-buttons .btn.book:hover,
#main #main-buttons .btn.book a:hover {
    background-color: var(--pb-accent-hover) !important;
    transition: background-color 0.2s ease !important;
}

/* =========================================
   3. PINGBOX CUSTOM LAYOUT (HIGH SPECIFICITY)
   ========================================= */

#content-view #about-us .txt .pingbox-container {
  color: var(--pb-text-main); 
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 15px;
  line-height: 1.5;
}

#content-view #about-us .txt .pingbox-container * {
    width: auto !important;
    box-sizing: border-box;
    word-break: normal;
    white-space: normal;
    letter-spacing: normal;
}

#content-view #about-us .txt .pingbox-container .pb-featured-image iframe,
#content-view #about-us .txt .pingbox-container .pb-how-it-works,
#content-view #about-us .txt .pingbox-container .pb-features,
#content-view #about-us .txt .pingbox-container .pb-featured-location,
#content-view #about-us .txt .pingbox-container .pb-pricing-wrapper,
#content-view #about-us .txt .pingbox-container .pb-faq-grid,
#content-view #about-us .txt .pingbox-container .pb-cta-banner {
    width: 100% !important;
}

/* Smooth Scrolling & Typography */
section[id^="pb-"] { scroll-margin-top: 100px !important; }
html { scroll-behavior: smooth !important; }

.pingbox-container h2 { font-size: 28px; font-weight: 700; margin-bottom: 30px; color: var(--pb-text-main); }
.pingbox-container h3 { font-size: 22px; font-weight: 700; margin: 5px 0; color: var(--pb-text-main); }
.pingbox-container h4 { font-size: 16px; font-weight: 600; margin-bottom: 5px; color: var(--pb-text-main); }
.pingbox-container p { margin: 0; color: var(--pb-text-muted); font-size: 14px; } 
.pb-text-center { text-align: center; }
.pb-section { margin-bottom: 60px; }

/* About Section */
.pb-about-section { text-align: left; background: var(--pb-bg-base); padding: 40px; border-radius: 16px; border: 1px solid var(--pb-border-color); }
.pb-about-section h2 { margin-bottom: 20px; color: var(--pb-accent-text); font-size: 24px; text-align: left; }
.pb-about-content p { margin-bottom: 15px; font-size: 15px; line-height: 1.6; }
.pb-about-features { margin: 25px 0; background: var(--pb-bg-dark); padding: 25px; border-radius: 12px; border-left: 4px solid var(--pb-accent-primary); }
.pb-about-features h3 { font-size: 18px; margin-bottom: 15px; color: var(--pb-text-main); }
.pb-about-features ul { list-style: none; padding: 0; margin: 0; }
.pb-about-features li { display: flex !important; flex-direction: row !important; justify-content: flex-start; align-items: flex-start; gap: 15px; margin-bottom: 15px; font-size: 15px; color: var(--pb-text-muted); text-align: left; }
.pb-about-features li i { color: var(--pb-accent-text); margin-top: 4px; flex: 0 0 16px !important; }

/* How it Works */
.pb-how-it-works { display: flex !important; flex-direction: row !important; justify-content: center; align-items: flex-start; gap: 20px; }
.pb-step { flex: 1 1 0%; display: flex !important; flex-direction: column !important; align-items: center; text-align: center; min-width: 150px; }
.pb-step h4 { margin-top: 15px; display: block; }
.pb-icon-box { width: 64px; height: 64px; display: flex !important; justify-content: center; align-items: center; font-size: 26px; color: var(--pb-text-main); flex: 0 0 64px !important; }
.pb-step-num { background: var(--pb-accent-primary); color: var(--pb-text-main); width: 22px; height: 22px; border-radius: 50%; display: flex !important; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; margin-top: -12px; border: 2px solid var(--pb-bg-base); z-index: 2; flex: 0 0 22px !important; padding: 0; }
.pb-step-arrow { color: var(--pb-border-color); font-size: 24px; margin-top: 30px; display: block !important; flex: 0 0 auto !important; }

/* Features */
.pb-features { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center; gap: 15px; }
.pb-feature-card { flex: 1 1 160px; background: var(--pb-bg-base); border: 1px solid var(--pb-border-color); padding: 25px 15px; border-radius: 12px; text-align: center; min-width: 140px; max-width: 200px; }
.pb-feature-card i { font-size: 28px; color: var(--pb-accent-text); margin-bottom: 15px; display: block; }
.pb-feature-card p { font-size: 14px; font-weight: 600; color: var(--pb-text-main); line-height: 1.3; }

/* Featured Location & Map (Centered per feedback) */
.pb-featured-location { display: flex !important; flex-direction: row !important; background: var(--pb-bg-base); border: 1px solid var(--pb-border-color); border-radius: 16px; overflow: hidden; }
.pb-featured-image { flex: 1; display: flex; }
.pb-featured-image iframe { width: 100% !important; height: 100% !important; border: none; min-height: 300px; display: block; flex: 1; }
.pb-featured-content { flex: 1.2; padding: 40px; text-align: center !important; }
.pb-tag { color: var(--pb-accent-text); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: inline-block; margin-bottom: 10px; }
.pb-address { margin-bottom: 25px;!important; display: flex !important; justify-content: center; align-items: center; gap: 8px; }
.pb-date-picker { margin-bottom: 25px; !important; margin-top: 30px !important; display: block; }
.pb-date-picker p { font-weight: 600; color: var(--pb-text-main); margin-bottom: 10px; display: block; }
.pb-date-picker p i { color: var(--pb-text-main) !important;  margin-right: 5px; }
.pb-timeslots { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px; align-items: center; justify-content: center !important; }
.pb-timeslots span { background: var(--pb-bg-dark); border: 1px solid var(--pb-accent-primary); color: var(--pb-text-main); padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; display: inline-block; flex: 0 0 auto !important; }
.pb-view-all { color: var(--pb-accent-text); font-size: 13px; font-weight: 600; text-decoration: none; margin-left: 10px; display: inline-block; transition: 0.2s; }
.pb-view-all:hover { color: var(--pb-text-main); }

/* Anchor Buttons (Arrow wrap fix applied) */
.pb-btn-primary, .pb-btn-white { 
    text-decoration: none; border: none; padding: 12px 24px; border-radius: 8px; 
    font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.2s; 
    display: inline-flex !important; justify-content: center; align-items: center; 
    gap: 8px; white-space: nowrap !important;
}
.pb-btn-primary { background: var(--pb-accent-primary); color: var(--pb-text-main); }
.pb-btn-primary:hover { background: var(--pb-accent-hover); color: var(--pb-text-main); }
.pb-btn-white { background: var(--pb-text-main); color: #262262 !important; }
.pb-btn-white:hover { background: #e5e7eb; color: #262262 !important; }

/* Pricing (Centered per feedback) */
.pb-pricing-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 20px; align-items: stretch; }
.pb-pricing-card { position: relative; background: var(--pb-bg-base); border: 1px solid var(--pb-border-color); border-radius: 12px; padding: 30px; width: 280px; flex: 0 0 280px !important; display: flex !important; flex-direction: column !important; justify-content: center; }
.pb-pricing-card h2 { font-size: 40px; color: var(--pb-accent-text); margin: 10px 0; text-align: center; }
.pb-pricing-info { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center; text-align: center !important; gap: 15px; background: var(--pb-bg-base); border: 1px solid var(--pb-border-color); padding: 15px 25px; border-radius: 12px; flex: 1 1 auto; max-width: 300px; }
.pb-pricing-info i { font-size: 34px; color: var(--pb-accent-text); flex: 0 0 auto !important; }

/* FAQ Accordion */
.pb-faq-grid { display: flex !important; flex-direction: column !important; gap: 15px; text-align: left; }
.pb-faq-item { background: var(--pb-bg-base); border: 1px solid var(--pb-border-color); border-radius: 8px; color: var(--pb-text-main); margin: 0; }
.pb-faq-item summary { padding: 16px 20px; display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; font-weight: 500; font-size: 14px; cursor: pointer; list-style: none; }
.pb-faq-item summary::-webkit-details-marker { display: none; }
.pb-faq-item summary i { color: var(--pb-accent-text); flex: 0 0 auto !important; transition: transform 0.3s ease; margin-left: 10px; }
.pb-faq-item[open] summary i { transform: rotate(180deg); }
.pb-faq-item .pb-faq-answer { display: none !important; padding: 0 20px 16px 20px; color: var(--pb-text-muted); font-size: 14px; border-top: 1px solid var(--pb-border-color); margin-top: 10px; padding-top: 10px; }
.pb-faq-item[open] .pb-faq-answer { display: block !important; }

/* CTA Banner */
.pb-cta-banner { background: linear-gradient(135deg, var(--pb-accent-hover), var(--pb-accent-primary)); border-radius: 16px; padding: 40px; display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; color: var(--pb-text-main); gap: 20px; }
.pb-cta-text h2 { color: var(--pb-text-main); margin-bottom: 5px; text-align: left; }
.pb-cta-text p { color: #e5e7eb; font-size: 16px; }

.pb-cta-banner a {
    display: inline-block;
    background-color: #1a1a2e;
    color: white;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none !important;
}

.pb-cta-banner a:hover {
    background-color: #2d2d4e;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}


/* =========================================
   4. MOBILE RESPONSIVENESS & OVERRIDES 
   ========================================= */

@media (max-width: 768px) {
    section#main-buttons,
    #main #main-buttons {
        height: 500px !important;
        min-height: 500px !important;
    }

    /* Mobile Hero Buttons (Centered per feedback) */
    #main-buttons .wrapper .inner .bar {
        display: flex !important;
        justify-content: center !important;
        width: 100%;
    }
    #main #main-buttons .btn.book,
    #main #main-buttons .btn.book a {
        padding: 10px 24px !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        height: auto !important;
        line-height: normal !important;
    }

    .pb-about-section { padding: 25px; }
    .pb-about-features { padding: 15px; }
  
    /* User's Mobile Arrow Rotation Fix */
    .pb-how-it-works { 
        flex-direction: column !important; 
        align-items: center; 
        gap: 15px; 
    }
    .pb-step-arrow { 
        display: block !important; 
        transform: rotate(90deg); 
        margin-top: 0 !important; 
    }
    
    .pb-featured-location { flex-direction: column !important; }
    .pb-featured-image iframe { min-height: 250px !important; }
    .pb-featured-content { padding: 25px; }
    
    /* Full Width Mobile Pricing (Per feedback) */
.pb-pricing-wrapper { 
        flex-direction: column !important; 
        align-items: stretch !important; /* Forces all cards to be the exact same width */
        gap: 15px !important; 
    }
    
    .pb-pricing-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important; /* Reduces the excessive empty space at the top and bottom */
        flex: auto !important; /* Overrides the desktop height/width locks */
    }

    .pb-pricing-info { 
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important; 
        text-align: center; 
        gap: 10px; 
        flex: auto !important;
    }
  
    .pb-cta-banner { flex-direction: column !important; text-align: center; gap: 25px; padding: 30px 20px; }
    .pb-cta-text h2 { text-align: center; }

    .pb-features {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    .pb-feature-card {
        flex: 0 0 calc(50% - 6px) !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Centralize Native Contact Us */
    #contacts, 
    #contacts .title-main, 
    #contacts .info {
        text-align: center !important;
    }
    #contacts .info ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
    #contacts .info .item_soc-links {
        justify-content: center !important;
        display: flex;
        width: 100%;
    }
}

#main #main-buttons .btn.book a:hover {
    background-color: var(--pb-accent-hover) !important;
    transition: background-color 0.2s ease !important;
}

@media (max-width: 768px) {
    #main #main-buttons .btn.book {
        background-color: transparent !important;
        border-radius: 8px !important;
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    #main-buttons > div > div > div > div.company-name.animated.company-logo-and-name.slideInLeft::before,
    #main-buttons > div > div > div > div.company-name.animated.company-logo-and-name.slideInLeft::after {
        font-size: clamp(20px, 6vw, 28px) !important;
    }

    #main #main-buttons .btn.book {
        background-color: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    #main #main-buttons .btn.book a {
        width: auto !important;
        max-width: 220px !important;
        font-size: 14px !important;
        padding: 12px 24px !important;
    }
}

#main #main-buttons .btn.book a {
    border-radius: 8px !important;
}

#main #main-buttons .btn.book {
    background-color: var(--pb-accent-primary) !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    display: inline-block !important;
}

#main #main-buttons .btn.book a:hover {
    background-color: #4a1a9e !important;
}

#main #main-buttons .btn.book a {
    background-color: #62149d !important;
    border-radius: 8px !important;
    color: white !important;
    width: auto !important;
    max-width: 220px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    display: inline-block !important;
}
/* =========================================
   5. MISC NATIVE SIMPLYBOOK OVERRIDES
   ========================================= */

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected, #sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper #sb-time-classes-container .inner .provider-container .provider-col .provider-item a, #sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper #sb_time_flexible_container .hour-line .sb_time_flexible_hour_container .time-slot .cell, #sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper #sb_time_slots_container .slot a, #sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper #sb_time_slots_weekly_container .data-col .time-container .time-slot .cell, .classes-modal .sb-cell, .datepicker.datepicker-inline td, .datepicker.datepicker-inline td.active.first-day, .datepicker.datepicker-inline td.active.last-day, .datepicker.datepicker-inline td.active.single-day, .datepicker.dropdown-menu td, .datepicker.dropdown-menu td.active.first-day, .datepicker.dropdown-menu td.active.last-day, .datepicker.dropdown-menu td.active.single-day, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active{
    border-radius: 6px;
}

#footer a {
    color: var(--pb-accent-text) !important;
}

#sb-timeline #steps #steps-content #sb_booking_content #details .detail-step .license-links-container a {
    color: var(--pb-text-main) !important;
}

#main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content .step-content .item .excerpt-info .btn-bar .btn { 
    border-radius: 6px;
}

/* Social Icon Section */
.pb-social-section {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; 
}

.pb-social-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px; 
  height: 50px; 
  color: var(--pb-text-main); 
  border: 2px solid var(--pb-text-main); 
  background: transparent; 
  text-decoration: none;
  transition: all 0.3s ease;
}

.pb-social-icon svg {
  width: 24px;
  height: 24px;
}

.pb-social-icon:hover {
  background-color: var(--pb-text-main);
  color: var(--pb-bg-base); 
}

/* Layout Structural Tweaks */
#content-view > div > div.index-data-wrapper > div{
    flex-direction: column!important;
}
.col-sm-8{
    width: 100%;
}
.col-sm-4{
    align-items: center;
    width: 100%;
}
#contacts > div > div.info > ul > li > div.links > div > div > a.btn.btn--action.fb > span > svg > path{
    fill: var(--pb-text-main);
}
.btn-bar__social-links .btn--action .icon{
    background: var(--pb-accent-primary);
    color: white; /* User added */
} 
#contacts > div{
  justify-items: center; /* User added */
}

/* #contacts .section-pd::after {
    content: "Radno Vreme\A Svaki dan: 09:00 – 23:00\A";
    display: block;
    white-space: pre;
    margin-top: 20px;
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
} */

#contacts .section-pd::before {
    content: "";
    display: block;
    border-top: 1px solid #374151;
    margin-bottom: 15px;
}

.pb-cta-banner a:hover {
    background-color: #0d0d1a !important;
    color: white !important;
    box-shadow: none !important;
}

#booking-result-view .back-to-services {
    color: var(--pb-accent-text) !important;
}

.btn-bar__social-links .btn--action .icon {
    background: var(--pb-text-main) !important;
}

.btn-bar__social-links .btn--action .icon {
    background: transparent !important;
    color: var(--pb-accent-primary) !important;
}

.btn-bar__social-links .btn--action .icon {
    background: #ffffff !important;
    border: 2px solid var(--pb-accent-primary) !important;
    border-radius: 8px !important;
    color: var(--pb-accent-primary) !important;
}

.btn-bar__social-links .btn--action .icon svg path {
    fill: var(--pb-accent-primary) !important;
}

#sb_booking_company_time {
    display: none !important;
}

/* =========================================
   6. HAMBURGER TO "X" MENU TOGGLE (BACKGROUND IMAGE FIX)
   ========================================= */

/* Swap the background image to a white SVG 'X' when active */
#header .nav-trigger.active,
#header .header-controls:has(.nav-wrapper.active) .nav-trigger {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
    background-size: 24px !important; /* Adjust size so it looks natural */
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Cleanup: Ensure no stray pseudo-elements or icons from previous attempts interfere */
#header .nav-trigger i,
#header .nav-trigger::after {
    display: none !important;
}
/* =========================================
   7. HERO FIXES FOR FOLD & IPAD MINI
   ========================================= */
@media (max-width: 1024px) {
    #main-buttons .wrapper .inner {
        align-self: flex-start !important;
        margin-top: 120px !important;
    }
}