/* =========================================================
   EASY24 – CLEAN CSS (header + hero)
   - Inter kot osnovni font
   - Premium header (80px)
   - Hero z desnimi trakovi (+ vertikalni dark-yellow), CTA + search
========================================================= */

/* Base font & headings */
html, body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--font-color, #0f2a68);
}
h1,.h1{font-weight:800;}
h2,.h2{font-weight:800;}
h3,.h3{font-weight:700;}

/* Theme tokens */
:root{
  --e24-blue:        #0A345A;            /* prej #0f2a68; */
  --e24-blue-2:      #12306f;
  --e24-blue-3:      #27457a;
  --e24-blue-light:  #2A4DAE;   /* svetlejši modri trak */
  --e24-yellow:      #FFD600;
  --e24-yellow-light:#FFD84D;   /* svetlejši rumeni trak */
  --e24-yellow-dark: #F4C400;   /* temno rumena = vertikalni pas + header ribbon */
  --e24-white:       #fff;
  --e24-text:        #cfe0ff;
  --e24-radius:      14px;
  --e24-dy-width:    260px;     /* širina vertikalnega temno-rumenega pasu */
}

/* ===========================
   HEADER (premium, 80px)
=========================== */
.e24-header.v-mock{
  position: sticky; top:0; z-index:100;
  background: var(--e24-blue); color: var(--e24-white);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.e24-header.v-mock .header-inner{
  height: 80px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 10px; position:relative;
}

/* Brand */
.e24-header .brand{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff; font-weight:900;
}
.e24-header .brand .mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; background:#1b3870; border-radius:10px;
}
.e24-header .brand .text{ font-size:22px; letter-spacing:.3px; }

/* Center nav */
.e24-header .nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:26px; }
.e24-header .nav a{
  color: var(--e24-text); text-decoration:none;
  font-weight:800; font-size:16.5px; letter-spacing:.3px;
  padding:12px 10px; border-radius:10px; transition:.18s;
}
.e24-header .nav a:hover{ color:#fff; background:var(--e24-blue-2); }
.e24-header .nav a.active{ color:#fff; background:var(--e24-blue-2); position:relative; }
.e24-header .nav a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-12px;
  height:4px; background:var(--e24-yellow); border-radius:2px;
}

/* Right ribbon (rumen klin) + actions */
.e24-header .actions{
  display:flex; align-items:center; gap:14px; padding-left:20px; position:relative; isolation:isolate;
}
.e24-header .actions::before{
  content:""; position:absolute; z-index:-1; inset:-20px -24px -20px -72px;
  background:var(--e24-yellow-dark);
  clip-path:polygon(28% 0,100% 0,100% 100%,0 100%);
  border-radius:0 0 0 14px;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.06);
}

/* Cart icon */
.e24-header .icon-btn{
  width:44px; height:44px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; color:#0b1d4d; background:#f6f7fb; transition:.18s;
  font-weight:800;
}
.e24-header .icon-btn:hover{ filter:brightness(.98); }

/* Language switcher */
.e24-header .lang-switch{ position:relative; }
.e24-header .lang-btn{
  display:inline-flex; align-items:center; gap:8px; height:44px;
  padding:0 12px; border-radius:14px; border:0; background:#f6f7fb; color:#0b1d4d;
  font-weight:800; cursor:pointer;
}
.e24-header .lang-btn .flag{ width:22px; height:15px; object-fit:cover; border-radius:2px; }
.e24-header .lang-switch .dropdown-menu{ min-width:200px; border-radius:14px; padding:8px; }
.e24-header .dropdown-item{ display:flex; align-items:center; gap:8px; border-radius:10px; }
.e24-header .dropdown-item:hover{ background:#eef1f7; }
.e24-header .dropdown-item .flag{ width:18px; height:12px; }

/* Ribbon buttons */
.e24-header .btn{
  display:inline-flex; align-items:center; justify-content:center; height:44px;
  padding:0 18px; border-radius:999px; text-decoration:none; font-weight:900; letter-spacing:.2px;
}
.e24-header .btn-provider--blue{
  background:linear-gradient(135deg,#3B82F6 0%, #2563EB 100%);
  color:#fff; border:0; box-shadow:0 6px 14px rgba(37,99,235,.28);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.e24-header .btn-provider--blue:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(37,99,235,.35); }
.e24-header .btn-login{
  background:#0e2b63; color:#fff; border:2px solid rgba(255,255,255,.28);
}
.e24-header .btn-login:hover{ background:#0b2453; }

/* Mobile */
.e24-header .hamburger{
  border:0; background:transparent; width:46px; height:46px; border-radius:12px;
  display:none; align-items:center; justify-content:center;
}
.e24-header .hamburger span{ display:block; width:26px; height:3px; background:#fff; margin:4px 0; border-radius:2px; }
.e24-header .hamburger.open span:nth-child(2){ opacity:0; }
.e24-header .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.e24-header .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.e24-header .mobile-drawer{
  position:fixed; left:0; right:0; top:80px; background:var(--e24-blue);
  transform:translateY(-120%); transition:.25s; z-index:99;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.e24-header .mobile-drawer.open{ transform:translateY(0); }
.e24-header .mobile-drawer nav{ padding:12px; }
.e24-header .mobile-drawer nav a{
  display:block; padding:12px; color:#fff; text-decoration:none; font-weight:800; border-radius:12px;
}
.e24-header .mobile-drawer nav a:hover{ background:var(--e24-blue-2); }
.e24-header .mobile-drawer .drawer-lang{ display:flex; align-items:center; gap:8px; padding:8px 12px; color:#fff; text-decoration:none; border-radius:10px; }
.e24-header .mobile-drawer .drawer-lang .flag{ width:18px; height:12px; }

@media (max-width: 991.98px){
  .e24-header .nav{ display:none !important; }
  .e24-header .hamburger{ display:flex; }
  .e24-header .actions::before{ inset:-18px -14px -18px -42px; }
}

/* ===========================
   HERO (right stripes + vertical dark yellow)
=========================== */
.easy24-hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    linear-gradient(135deg, rgba(11,29,77,0.88) 0%, rgba(18,48,111,0.88) 100%),
    radial-gradient(60% 80% at 90% 10%, rgba(255,214,0,0.22) 0%, rgba(255,214,0,0) 55%) var(--e24-blue);
  /* compact height */
  padding: 56px 0 0;
}

/* vertical dark-yellow – prilepljen čisto na desni rob, od vrha do dna */


/* Grid spacing */
.easy24-hero .hero-row{ row-gap:18px; }

/* Left copy */
.easy24-hero .hero-left{ max-width:540px; }
.easy24-hero .hero-title{
  font-size:48px; font-weight:800; line-height:1.2; letter-spacing:-.4px;
  margin:0 0 14px; color:#fff;
}
.easy24-hero .hero-sub{
  font-size:10px;
  font-weight:400; /* ali: font-weight: normal; */
  line-height:1.55;
  color:#cfe0ff;
  margin-bottom:22px;
}

/* CTA buttons */
.easy24-hero .hero-buttons{ display:flex; gap:12px; }
.easy24-hero .hero-buttons .btn{
  padding:12px 22px; font-weight:700; border-radius:8px; font-size:15px; transition:.25s;
  min-width:200px;
}
.easy24-hero .hero-buttons .btn-primary{
  background:#3B82F6; border:2px solid #3B82F6; color:#fff;
}
.easy24-hero .hero-buttons .btn-primary:hover{ background:#2563EB; border-color:#2563EB; }
.easy24-hero .hero-buttons .btn-secondary{
  background:var(--e24-yellow); border:2px solid var(--e24-yellow); color:var(--e24-blue);
}
.easy24-hero .hero-buttons .btn-secondary:hover{ background:#e6c100; }

/* Search */
.easy24-hero .hero-search{
  margin-top:28px; width:420px; max-width:100%;
  display:flex; align-items:center; gap:8px;
  padding:6px 6px 6px 14px; border-radius:12px; background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.15); position:relative;
}
.easy24-hero .hero-search .form-control{
  flex:1; height:46px; font-size:15px; padding:0 12px;
  border:2px solid #E6ECF7; border-radius:8px; outline:none; color:var(--e24-blue); background:#fff;
}
.easy24-hero .hero-search .form-control::placeholder{ color:#94A3C7; }
.easy24-hero .hero-search .btn-search{
  width:46px; height:46px; border:0; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--e24-blue-2); color:#fff; transition:background .2s ease;
}
.easy24-hero .hero-search .btn-search:hover{ background:#2563EB; }

/* Right side: image + diagonal stripes */
.easy24-hero .hero-right{
  position:relative; display:flex; justify-content:flex-end; align-items:flex-end;
  z-index: 5; /* desni blok nad ozadjem */
}

/* Diagonale (nad vertikalnim pasom, pod sliko) */
.easy24-hero .bg-stripes{
  position:absolute; inset:0; z-index:2; pointer-events:none;
}
.easy24-hero .bg-stripes .stripe{
  position:absolute; width:420px; height:160%;
  bottom:-90px; border-radius:6px; transform: rotate(35deg);
}
/* svetlo modri pod žensko */
.easy24-hero .bg-stripes .stripe-blue{
  right: 390px; background: var(--e24-blue-light); z-index:2;
}
/* svetlo rumeni pod moškim */
.easy24-hero .bg-stripes .stripe-yellow{
  right: 218px; background: var(--e24-yellow-light); z-index:3;
}

/* Image (vedno v ospredju in ob spodnjem robu) */
.easy24-hero .hero-people{
  position:relative; z-index:5; display:block;
  max-height:420px; height:auto; margin-bottom:-4px;
}

/* Responsive */
@media (max-width:1199.98px){
  .easy24-hero .hero-title{ font-size:44px; }
}
@media (max-width:991.98px){
  .easy24-hero{ padding:64px 0 0; text-align:center; }
  .easy24-hero .hero-right{ justify-content:center; }
  .easy24-hero .hero-title{ font-size:36px; }
  .easy24-hero .bg-stripes{ display:none; }
  .easy24-hero .hero-people{ max-height:380px; margin-bottom:-3px; }
}
@media (max-width:575.98px){
  .easy24-hero .hero-title{ font-size:32px; }
}

/* Novi enotni gumb "Find a service" */
.easy24-hero .btn-find-service {
    padding: 12px 26px;
    font-size: 16px;
    font-weight: 700;
    background: var(--e24-yellow);
    border: 2px solid var(--e24-yellow);
    color: var(--e24-blue);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease-in-out;
}
.easy24-hero .btn-find-service:hover {
    background: #e6c100;
    border-color: #e6c100;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Odstrani prazen prostor za drugi gumb */
.easy24-hero .hero-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 0;
}

/* Črno ozadje za ikono košarice */
.e24-header .icon-btn { width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:#000; color:#fff; transition:.2s; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.e24-header .icon-btn:hover { background:#111; transform:translateY(-1px); }

/* Črno ozadje za gumb izbire jezika */
.e24-header .lang-btn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-radius:12px; border:0; background:#000; color:#fff; font-weight:700; cursor:pointer; transition:.2s; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.e24-header .lang-btn:hover{ background:#111; }

/* Košarica - enak slog kot Login gumb */
.e24-header .icon-btn{ background:#0e2b63; color:#fff; border:2px solid rgba(255,255,255,.28); font-weight:700; transition:.25s; }
.e24-header .icon-btn:hover{ background:#0b2453; transform:translateY(-1px); }

/* Gumb za izbiro jezika - enak slog kot Login gumb */
.e24-header .lang-btn{ border:2px solid rgba(255,255,255,.28); background:#0e2b63; color:#fff; }
.e24-header .lang-btn:hover{ background:#0b2453; transform:translateY(-1px); }

/* Košarica - povečana različica login gumba */
.e24-header .icon-btn{ width:52px; height:52px; border-radius:14px; font-size:20px; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.e24-header .icon-btn:hover{ background:#0b2453; transform:translateY(-2px); }

/* ŠIROK GUMB ZA KOŠARICO */
.e24-header .icon-btn{ width:100px; height:44px; border-radius:12px; gap:8px; font-size:16px; box-shadow:0 4px 12px rgba(0,0,0,.25); padding:0 12px; }
.e24-header .icon-btn i,.e24-header .icon-btn svg{ font-size:22px; width:22px; height:22px; }
.e24-header .icon-btn:hover{ background:#0b2453; transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.3); }

/* Premik slike v hero bannerju bolj proti levi */
.easy24-hero .hero-people{ position:relative; z-index:5; display:block; max-height:480px; height:auto; margin-bottom:-5px; transform:translateX(-90px); }

/* Find a Service gumb (enotno) */
.easy24-hero .btn-primary{ background:#FFD600; color:#0f2a68; border:2px solid #FFD600; border-radius:12px; padding:12px 26px; font-weight:800; font-size:16px; letter-spacing:.3px; min-width:260px; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.15); transition:.25s; }
.easy24-hero .btn-primary:hover{ background:#e6c100; border-color:#e6c100; transform:translateY(-1px); }

/* Search – enaka širina kot gumb */
.easy24-hero .hero-search{ margin-top:16px; width:260px; max-width:100%; display:flex; align-items:center; gap:8px; padding:6px; border-radius:12px; background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.15); }
.easy24-hero .hero-search .form-control{ flex:1; height:46px; padding:0 14px; border:2px solid #E6ECF7; border-radius:8px; font-size:15px; color:#0f2a68; outline:none; background:#fff; }
.easy24-hero .hero-search .form-control:focus{ border-color:#2563EB; }
.easy24-hero .hero-search .form-control::placeholder{ color:#94A3C7; }
.easy24-hero .hero-search .btn-search{ width:46px; height:46px; border:0; border-radius:10px; background:#12306F; color:#fff; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.easy24-hero .hero-search .btn-search:hover{ background:#2563EB; }

/* === HERO CTA & SEARCH – ENAKO DOLGA === */
.easy24-hero{ --cta-width: 640px; }
.easy24-hero .hero-buttons{ width: var(--cta-width); }
.easy24-hero .hero-buttons .btn-primary{ width:100%; border-radius:12px; }
.easy24-hero .hero-search{ width: var(--cta-width); max-width:100%; margin-top:16px; background:#fff; border:2px solid #E6ECF7; border-radius:12px; padding:6px; display:flex; align-items:center; gap:8px; box-shadow:0 6px 22px rgba(0,0,0,.12); transition: box-shadow .2s, border-color .2s; box-sizing:border-box; }
.easy24-hero .hero-search:focus-within{ border-color:#2563EB; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.easy24-hero .hero-search .form-control{ flex:1; height:52px; border:0; outline:0; background:#F8FAFF; border-radius:10px; padding:0 14px; font-size:16px; color:#0f2a68; }
.easy24-hero .hero-search .form-control::placeholder{ color:#8EA2CA; }
.easy24-hero .hero-search .btn-search{ width:52px; height:52px; border:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:#12306F; color:#fff; box-shadow:0 6px 16px rgba(18,48,111,.28); transition: transform .12s ease, filter .12s ease; }
.easy24-hero .hero-search .btn-search:hover{ transform:translateY(-1px); filter:brightness(1.05); }

@media (max-width: 768px){ .easy24-hero{ --cta-width:100%; } }

/* Razširitve CTA/search (različne širine) – ohranjene */
.easy24-hero .hero-buttons{ width: 360px; margin-bottom:16px; }
.easy24-hero .hero-buttons .btn-primary{ width:100%; height:56px; font-size:18px; }
.easy24-hero .hero-search{ width:360px; border:2px solid #E6ECF7; border-radius:10px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.1); }
.easy24-hero .hero-search:focus-within{ border-color:#2563EB; box-shadow:0 8px 24px rgba(37,99,235,.15); }
.easy24-hero .hero-search .form-control{ height:52px; }
.easy24-hero .hero-search .btn-search{ width:56px; height:52px; }
@media (max-width:768px){ .easy24-hero .hero-buttons, .easy24-hero .hero-search{ width:100%; } }

.easy24-hero .hero-buttons{ width:420px; margin-bottom:18px; }
.easy24-hero .hero-buttons .btn-primary{ width:100%; height:60px; font-size:20px; border-radius:12px; }
.easy24-hero .hero-search{ width:420px; border:2px solid #E6ECF7; border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.15); }
.easy24-hero .hero-search:focus-within{ border-color:#2563EB; box-shadow:0 10px 24px rgba(37,99,235,.2); }
.easy24-hero .hero-search .form-control{ height:58px; padding:0 16px; font-size:18px; }
.easy24-hero .hero-search .btn-search{ width:60px; height:58px; font-size:22px; }
@media (max-width:768px){ .easy24-hero .hero-buttons, .easy24-hero .hero-search{ width:100%; } }

/* How It Works – card nad kategorijami */
.how-it-works{ padding:24px 0 8px; }
.how-it-works .howit-img{ display:block; max-width:1200px; width:100%; height:auto; margin:0 auto; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); }
@media (min-width:1600px){ .how-it-works .howit-img{ max-width:1320px; } }
@media (max-width:768px){ .how-it-works{ padding:16px 0 4px; } }

/* Popravek poravnave svetlo rumenega traku */
.hero-section .yellow-bg, .hero-section .yellow-strip{ position:relative; left:-180px; transition:.3s; }
@media (max-width:992px){ .hero-section .yellow-bg, .hero-section .yellow-strip{ left:-110px; } }



/* Poravnave levega bloka */
.easy24-hero .hero-left{ margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; max-width:1160px; }
.easy24-hero .hero-buttons, .easy24-hero .hero-search{ margin-left:0; margin-right:0; }
.easy24-hero .hero-title, .easy24-hero .hero-sub{ margin-left:0; }

/* ===========================
   FOOTER (CLEAN)
   - okrogle značke, temno modra podlaga (#0e2b63)
   - ikona bela (SVG fill)
   - hover: rumena (#CCAC00)
=========================== */
.footer-section{
  --footer-navy: #0e2b63;   /* poravnaj z dizajnom footra (Login gumb) */
  --footer-hover: #EEA525;
}

.footer-section .copyright{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.footer-section .copyright .footer-logo img{
  max-height:34px; width:auto; display:block;
}
.footer-section .copyright p{
  margin:0; color:#6f82b1; font-weight:600;
}

/* SOCIAL ICONS – ena, čista različica */
.footer-section .footer-social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:20px;
  padding-bottom:20px;
}

.footer-section .footer-social .social-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  background: var(--footer-navy);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  transition: background .2s ease, transform .15s ease;
  text-decoration:none;
}

.footer-section .footer-social .social-icon:hover{
  background: var(--footer-hover);
  transform: translateY(-2px);
}

.footer-section .footer-social .social-svg{
  width:24px;
  height:24px;
  display:block;
  fill:#fff;   /* bela ikona */
}

.footer-section .footer-social .social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition: transform .18s ease;
}

.footer-section .footer-social .social-icon img{
  width:28px;                 /* 24–32px po želji */
  height:28px;
  display:block;
  object-fit:contain;
  /* Če so izvorne ikone barvne, jih naredimo bele na dark footerju */
  filter: brightness(0) invert(1);
  transition: filter .22s ease, transform .18s ease;
}


/* === EASY24 FIX: Gumb + Search širina + Ikona === */

/* 1) Večja širina gumba "Find a service" */
.easy24-hero .btn-find-service {
    width: 300px !important;          /* prej cca 260px */
    max-width: 100%;
    padding: 14px 28px !important;
    font-size: 18px !important;
    font-weight: 800;
}

/* 2) Večja širina iskalnega polja */
.easy24-hero .hero-search {
    width: 500px !important;          /* prej cca 420px */
    max-width: 100%;
    margin-top: 18px;
}

/* 3) Ikona v search gumbu – popravimo prikaz */
.easy24-hero .hero-search .btn-search {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--e24-blue-2);
    color: #fff;
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* 3.1 Ikona naj bo vedno vidna */
.easy24-hero .hero-search .btn-search i.iconsax,
.easy24-hero .hero-search .btn-search svg {
    font-size: 22px !important;
    color: #fff !important;
    display: inline-block;
    line-height: 1;
}

/* === EASY24: CTA & SEARCH širina + vidnost ikone ==================== */

/* Enoten nadzor širine */
.easy24-hero { --cta-width: 720px; }           /* bilo 640; zdaj širše in bolj premium */
@media (max-width: 991.98px){ .easy24-hero{ --cta-width: 100%; } }

/* Gumb "Find a service" – širši, bolj opazen */
.easy24-hero .btn-find-service{
  width: var(--cta-width) !important;
  max-width: 100%;
  height: 56px !important;
  padding: 0 28px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
}

/* Search – enaka širina kot gumb, višji input */
.easy24-hero .hero-search{
  width: var(--cta-width) !important;
  max-width: 100%;
  margin-top: 16px !important;
  border-radius: 12px !important;
  padding: 6px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.easy24-hero .hero-search .input-group{ width:100%; }
.easy24-hero .hero-search .form-control{
  height: 56px !important;
  font-size: 16px !important;
  padding: 0 16px !important;
}

/* Search button + ikona – vedno vidna */
.easy24-hero .hero-search .btn-search{
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  display: inline-flex; align-items:center; justify-content:center;
  background: var(--e24-blue-2) !important; color:#fff !important;
  border: 0 !important; padding: 0 !important;
}
.easy24-hero .hero-search .btn-search i.iconsax,
.easy24-hero .hero-search .btn-search svg{
  display:inline-block !important;
  line-height:1 !important;
  font-size:22px !important;
  color:#fff !important;
}

/* === EASY24: FIX search + CTA širina ===================== */

/* 1) Tukaj nastaviš širino za oba elementa naenkrat */
.easy24-hero {
    --cta-width: 560px; /* <<< TU SPREMINJAŠ ŠIRINO GUMBA + SEARCHA */
}

/* 2) Gumb "Find a service" – poravnamo na isto širino */
.easy24-hero .btn-find-service {
    width: var(--cta-width) !important;
    max-width: 100%;
    height: 56px !important;
    font-size: 18px !important;
    font-weight: 800;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 3) Search polje – enaka širina kot gumb */
.easy24-hero .hero-search {
    width: var(--cta-width) !important;
    max-width: 100%;
    margin-top: 16px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 4) Input group – naredimo eno celoto */
.easy24-hero .hero-search .input-group {
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid #E6ECF7;
    border-radius: 12px;
    overflow: hidden; /* prepreči, da input prekriva gumb */
    background: #fff;
}

/* 5) Input polje – zavzame le razpoložljiv prostor, ne prekriva gumba */
.easy24-hero .hero-search .form-control {
    flex: 1 1 auto;
    height: 56px !important;
    padding: 0 16px !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    background: #fff !important;
    min-width: 0; /* ključni fix, da se input ne preliva čez gumb */
}

/* 6) Gumb za search – ikona vedno vidna */
.easy24-hero .hero-search .btn-search {
    width: 56px !important;
    height: 56px !important;
    border: none !important;
    border-left: 1px solid #E6ECF7 !important;
    background: var(--e24-blue-2) !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-shrink: 0; /* prepreči stiskanje gumba */
}

/* 7) Ikona – centrirana in vedno vidna */
.easy24-hero .hero-search .btn-search i.iconsax {
    display: inline-block !important;
    line-height: 1 !important;
    font-size: 22px !important;
    color: #fff !important;
}


/* === EASY24: enaka širina + fix za input-group ===================== */
.easy24-hero.hero-fix .btn-find-service{
  width: var(--cta-width) !important;
  max-width: 100%;
  height: 56px !important;
  font-size: 18px !important;
  font-weight: 800;
  border-radius: 12px !important;
  display: inline-flex; align-items: center; justify-content: center;
}

.easy24-hero.hero-fix .hero-search{
  width: var(--cta-width) !important;
  max-width: 100%;
  margin-top: 16px !important;
  padding: 0 !important;
  background: transparent !important;
}

.easy24-hero.hero-fix .hero-search .input-group{
  display: flex; align-items: center; width: 100%;
  border: 2px solid #E6ECF7; border-radius: 12px;
  overflow: hidden; background: #fff;
}

.easy24-hero.hero-fix .hero-search .form-control{
  flex: 1 1 auto; min-width: 0;                 /* ključni del */
  height: 56px !important; padding: 0 16px !important;
  border: 0 !important; border-radius: 0 !important;
  background: #fff !important; box-shadow: none !important;
}

.easy24-hero.hero-fix .hero-search .btn-search{
  flex: 0 0 56px !important; width: 56px !important; height: 56px !important;
  border: 0 !important; border-left: 1px solid #E6ECF7 !important;
  border-radius: 0 !important;
  background: var(--e24-blue-2) !important; color:#fff !important;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
}

.easy24-hero.hero-fix .hero-search .btn-search i.iconsax{
  display: inline-block !important; line-height: 1 !important;
  font-size: 22px !important; color: #fff !important;
}

/* Mobile: vedno čez celotno širino */
@media (max-width: 768px){
  .easy24-hero.hero-fix{ --cta-width: 100% !important; }
}

/* === EASY24: HERO CTA + SEARCH FIX ========================== */

/* 1) Nastavi širino obeh elementov */
.easy24-hero.hero-fix {
    --cta-width: 560px; /* << tukaj spremeniš širino po želji */
}

/* 2) Gumb "Find a service" */
.easy24-hero.hero-fix .btn-find-service {
    width: var(--cta-width) !important;
    max-width: 100%;
    height: 56px !important;
    font-size: 18px !important;
    font-weight: 700;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3) Search polje – celotna širina */
.easy24-hero.hero-fix .hero-search {
    width: var(--cta-width) !important;
    max-width: 100%;
    margin-top: 16px;
}

/* 4) Input group – pravilna poravnava inputa in gumba */
.easy24-hero.hero-fix .hero-search .input-group {
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid #E6ECF7;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* 5) Input polje – zavzame preostalo širino */
.easy24-hero.hero-fix .hero-search .form-control {
    flex: 1 1 auto; /* ključni fix */
    min-width: 0;   /* prepreči prekrivanje gumba */
    height: 56px !important;
    padding: 0 16px;
    border: none !important;
    border-radius: 0;
    font-size: 16px;
    background: #fff;
    box-shadow: none;
}

/* 6) Gumb z ikono */
.easy24-hero.hero-fix .hero-search .btn-search {
    flex: 0 0 56px !important; /* fiksna širina gumba */
    width: 56px !important;
    height: 56px !important;
    border: none;
    border-left: 1px solid #E6ECF7;
    border-radius: 0;
    background: var(--e24-blue-2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* 7) Ikona – vedno vidna in centrirana */
.easy24-hero.hero-fix .hero-search .btn-search i.iconsax {
    display: inline-block;
    line-height: 1;
    font-size: 22px;
    color: #fff;
}

/* 8) Mobilna poravnava */
@media (max-width: 768px) {
    .easy24-hero.hero-fix {
        --cta-width: 100%;
    }
}

/* === EASY24: Search fix (en okvir, brez prekrivanja) === */
.easy24-hero .hero-search{
  width: var(--search-width, 520px);   /* po želji */
  max-width: 100%;
  margin-top: 16px;
}

.easy24-hero .hero-search .input-group{
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;

  /* enoten okvir */
  border: 2px solid #E6ECF7;
  border-radius: 12px;
  background: #fff;

  /* odreži notranje zaobljene robove inputa/gumba */
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* input naj NIMA lastnih robov/radiusa/senc */
.easy24-hero .hero-search .form-control{
  flex: 1 1 auto;
  min-width: 0;                      /* ključ: da ne prekriva gumba */
  height: 56px;
  padding: 0 16px;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  appearance: none;
  -webkit-appearance: none;
  background-clip: padding-box;
}

.easy24-hero .hero-search .form-control::placeholder{
  color: #8EA2CA;
}

/* gumb z ikono – fiksna širina, brez radiusa, lep delimiter levo */
.easy24-hero .hero-search .btn-search{
  flex: 0 0 var(--search-btn-size, 56px);
  width: var(--search-btn-size, 56px);
  height: 56px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #E6ECF7 !important;
  border-radius: 0 !important;

  background: var(--e24-blue-2) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.easy24-hero .hero-search .btn-search i,
.easy24-hero .hero-search .btn-search svg{
  display: inline-block;
  line-height: 1;
  font-size: 22px;
  color: #fff;
}

/* če tema v input-group doda pseudo-elemente ali radius na otroke */
.easy24-hero .hero-search .input-group > *{
  border-radius: 0 !important;
}
.easy24-hero .hero-search .input-group::before,
.easy24-hero .hero-search .input-group::after{ display:none !important; }

/* === EASY24: HERO SEARCH – HARD FIX ==================== */

/* 0) Hero search kot kontejner */
.easy24-hero .hero-search{
  position: relative !important;
  width: var(--search-width, 520px) !important;
  max-width: 100% !important;
  margin-top: 16px !important;
}

/* 1) Enoten okvir (input-group) */
.easy24-hero .hero-search .input-group{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;

  border: 2px solid #E6ECF7 !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;

  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}

/* 2) Input – brez robov, radiusa in senc; naj se NE preliva */
.easy24-hero .hero-search .form-control{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 56px !important;
  padding: 0 16px !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  background: #fff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-clip: padding-box !important;
}
.easy24-hero .hero-search .form-control::placeholder{ color:#8EA2CA !important; }

/* 3) Gumb z ikono – fiksna širina, ločilna črta levo */
.easy24-hero .hero-search .btn-search{
  flex: 0 0 var(--search-btn-size, 56px) !important;
  width: var(--search-btn-size, 56px) !important;
  height: 56px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #E6ECF7 !important;
  border-radius: 0 !important;

  background: var(--e24-blue-2) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.easy24-hero .hero-search .btn-search i,
.easy24-hero .hero-search .btn-search svg{
  font-size: 22px !important;
  line-height: 1 !important;
  color: #fff !important;
  display: inline-block !important;
}

/* 4) Odreži morebitne radius-e, ki jih tema tlači otrokom */
.easy24-hero .hero-search .input-group > *{
  border-radius: 0 !important;
}

/* 5) AUTOCOMPLETE – naj bo spodaj, skrit po defaultu (ne trak čez input) */
.easy24-hero #searchResults{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important; right: 0 !important;
  display: none !important;                 /* skrito, dokler ni rezultatov */
  background: #fff !important;
  border: 1px solid #E6ECF7 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
  max-height: 50vh !important;
  overflow: auto !important;
  z-index: 20 !important;
}
/* Ko tvoj JS doda .open ali .show, naj se prikaže */
.easy24-hero #searchResults.open,
.easy24-hero #searchResults.show{ display: block !important; }

/* 6) (neobvezno) Poravnaj širino gumba “Find a service” ločeno od searcha */
.easy24-hero .btn-find-service{
  width: var(--cta-btn-width, 520px) !important;
  max-width: 100% !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* === EASY24: poravnava širine CTA & search + ikona === */

/* Nastavi enotno širino (po želji) */
.easy24-hero{ --search-width: 520px; --search-btn-size: 56px; }

/* Gumb "Find a service" naj bo enak searchu */
.easy24-hero .btn-find-service{
  width: var(--search-width) !important;
  max-width: 100% !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* Ikona v gumbu – naj se prikaže vedno */
.easy24-hero .hero-search .btn-search i.iconsax{
  display: inline-block !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #fff !important;
}
/* Če raje uporabljaš SVG fallback */
.easy24-hero .hero-search .btn-search svg{
  display: inline-block;
  width: 22px; height: 22px;
}

/* === EASY24: FINAL FIX za CTA + SEARCH + IKONA === */

/* Enotna širina gumba in searcha */
.easy24-hero {
  --search-width: 520px;
  --search-btn-size: 56px;
}

.easy24-hero .btn-find-service {
  width: var(--search-width) !important;
  max-width: 100% !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  padding: 0 !important;
}

/* Search container */
.easy24-hero .hero-search {
  width: var(--search-width) !important;
  max-width: 100%;
  margin-top: 16px !important;
}

/* Input group enoten okvir */
.easy24-hero .hero-search .input-group {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  border: 2px solid #E6ECF7;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

/* Input polje */
.easy24-hero .hero-search .form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  font-size: 16px;
}
.easy24-hero .hero-search .form-control::placeholder {
  color: #8EA2CA;
}

/* Search gumb */
.easy24-hero .hero-search .btn-search {
  flex: 0 0 var(--search-btn-size);
  width: var(--search-btn-size);
  height: var(--search-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: 1px solid #E6ECF7;
  background: var(--e24-blue-2);
  color: #fff;
  padding: 0;
  cursor: pointer;
}

/* SVG ikona */
.easy24-hero .hero-search .btn-search svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  display: inline-block;
}


/* === EASY24: poravnaj CTA na isto širino kot search === */
.easy24-hero.hero-fix { --cta-width: 560px; } /* lahko spremeniš po želji */

.easy24-hero.hero-fix .hero-buttons{
  width: var(--cta-width) !important;
  max-width: 100% !important;
}

.easy24-hero.hero-fix .btn-find-service{
  width: 100% !important;                 /* zasede celotno .hero-buttons */
  height: 56px !important;
  box-sizing: border-box !important;      /* border/padding šteje v širino */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  border: 2px solid var(--e24-yellow) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

.easy24-hero.hero-fix .hero-search{
  width: var(--cta-width) !important;     /* search ostane enake širine */
  max-width: 100% !important;
}

.easy24-hero.hero-fix .hero-search .input-group{
  width: 100% !important;
  box-sizing: border-box !important;
}
/* === EASY24: Search dropdown – pokaži ga, ko ni prazen === */
.easy24-hero .hero-search { position: relative; }

.easy24-hero #searchResults{
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 20;

  /* izgled */
  background: #fff;
  border: 1px solid #E6ECF7;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  max-height: 50vh;
  overflow: auto;

  /* default: skrit, a brez !important */
  display: none;
}

/* Ko JS napolni rezultate (element NI prazen), ga pokažemo.  */
.easy24-hero #searchResults:not(:empty){
  display: block;
}

/* === AUTOCOMPLETE DROPDOWN === */
.easy24-hero .hero-search { position: relative; width: var(--cta-width, 560px); }
.easy24-hero .autocomplete-results{
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid #E6ECF7; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  max-height: 50vh; overflow: auto; display: none;
}
.easy24-hero .autocomplete-results.show{ display: block; }
.easy24-hero .autocomplete-results ul{ list-style: none; margin: 0; padding: 6px; }
.easy24-hero .autocomplete-results li{
  padding: 10px 12px; border-radius: 8px; cursor: pointer; color:#0f2a68;
}
.easy24-hero .autocomplete-results li:hover,
.easy24-hero .autocomplete-results li.active{ background: #F4F7FF; }

/* CTA gumb naj bo enako dolg kot search */
.easy24-hero.hero-fix .hero-buttons{ width: var(--cta-width, 560px); }
.easy24-hero.hero-fix .btn-find-service{
  width: 100% !important; height: 56px !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; padding: 0 24px; box-sizing: border-box;
  font-weight: 800;
}

/* === STICKY / FIXED HEADER === */
:root{ --hdrH: 80px; }
#site-header, .e24-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 4000; transform: translateY(0) !important; opacity: 1 !important;
}
body{ padding-top: var(--hdrH); }
/* nikoli ne skrivaj headerja z .hide itd. */
#site-header.hide, #site-header.inactive,
.e24-header.hide, .e24-header.inactive{ transform: none !important; opacity: 1 !important; }

/* === HERO LAYOUT FIX (desni vizuali ostanejo desno) === */

/* prisilimo normalen vrstni red kolumn */
.easy24-hero .hero-row{ 
  display:flex; flex-wrap:wrap; flex-direction: row !important;
}

/* sloji: levi content vedno nad dekorjem */
.easy24-hero .hero-left{ position:relative; z-index: 5; }

/* desni blok: naj drži vse dekorje znotraj svojega stolpca */
.easy24-hero .hero-right{
  position: relative;
  display: flex; justify-content: flex-end; align-items: flex-end;
  min-height: clamp(340px, 44vw, 560px);
  overflow: hidden;                 /* KLJUČNO: nič ne štrli v levo polovico */
  z-index: 3;
}

/* dekorativne črte naj bodo za sliko in ujete v .hero-right */
.easy24-hero .bg-stripes{
  position:absolute; inset:0; z-index: 1; pointer-events:none; overflow:hidden;
}
.easy24-hero .bg-stripes .stripe{ position:absolute; border-radius: 18px; }

/* modra diagonala – pomakni jo v desni del stolpca */
.easy24-hero .bg-stripes .stripe-blue{
  right: 32%; top: -18%;
  width: 38vw; max-width: 680px; height: 120%;
  transform: skewX(-18deg);
  background: #2A4DAE;
}

/* rumeni “romb” – začni z desne, ne z leve */
.easy24-hero .bg-stripes .stripe-yellow{
  right: -8%; top: 6%;
  width: clamp(360px, 46vw, 860px); height: 80%;
  background: #FFD84D;
  clip-path: polygon(12% 0,100% 0,100% 100%,0 100%);
}

/* vertikalni rumeni pas – bliže desnemu robu */
.easy24-hero .bg-stripes .stripe-yellow-vertical{
  right: 6%; bottom: -8%;
  width: clamp(14px, 1.6vw, 24px); height: 42%;
  background: #FFD84D;
}

/* slika nad diagonalami, a še vedno ujeta v stolpec */
.easy24-hero .hero-people{
  position: relative; z-index: 2; display:block;
  width: clamp(320px, 34vw, 560px); height: auto;
  margin: 0; bottom: -1px;
}

/* header je fixed => dodaj malo več prostora na vrhu strani */
:root{ --hdrH: 92px; }           /* če imaš višji header, tu prilagodi */
body{ padding-top: var(--hdrH) !important; }

/* za vsak slučaj: nikoli ne obrni vrstnega reda na mobile */
@media (max-width: 991.98px){
  .easy24-hero .hero-right{ justify-content:center; }
  .easy24-hero .bg-stripes{ display:none; }  /* na mobile skrij dekor */
}

/* === HERO: spacing proti sticky headerju (odmik zgoraj) === */
.easy24-hero.hero-fix{
  /* višina headerja + še malo zraka; --hdrH nastavim v JS */
  padding-top: calc(var(--hdrH, 64px) + 2vh) !important;
  padding-bottom: 4vh;     /* odmik do spodnjega roba heroja */
}

/* === HERO RIGHT: vse zaklenjeno znotraj desnega stolpca === */
.easy24-hero .hero-right{
  position: relative !important;
  min-height: clamp(420px, 48vw, 680px) !important;  /* prilagodljiva višina */
  overflow: hidden !important;                       /* nič ne štrli v levo */
  z-index: 3;
}

/* dekor sloj */
.easy24-hero .hero-right .bg-stripes{
  position:absolute !important;
  inset: 0 !important;
  z-index:1;
  pointer-events:none;
}

/* skupne lastnosti “trakov” */
.easy24-hero .hero-right .stripe{ position:absolute; border-radius:18px; }

/* — MODRA DIAGONALA (desno–sredina) — */
.easy24-hero .hero-right .stripe-blue{
  /* pozicija v % znotraj hero-right */
  right: 42%;                /* ~kjer se začne “rez” v diagonalo */
  top: -12%;
  width: 42%;                /* širina glede na stolpec */
  height: 125%;
  transform: skewX(-18deg);
  background:#2A4DAE;
}

/* — RUMENI “ROMB” — */
.easy24-hero .hero-right .stripe-yellow{
  right: -6%;
  top: 5%;
  width: 58%;
  height: 88%;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  background:#FFD84D;
}

/* — NAVPIČNI RUMEN TRAK — */
.easy24-hero .hero-right .stripe-yellow-vertical{
  right: 5%;
  bottom: -8%;
  width: clamp(12px, 1.8vw, 22px);
  height: 38%;
  background:#FFD84D;
}

/* — SLIKA — vedno spodaj desno, brez zamika — */
.easy24-hero .hero-people{
  position:absolute !important;
  right: 0 !important;
  bottom: -1px !important;                /* -1px: krije sub-pixel črto */
  width: clamp(320px, 34vw, 560px) !important;
  height:auto !important;
  transform:none !important;
  margin:0 !important;
  z-index:2;
}


/* === TABLET / MOBILE === */
@media (max-width: 991.98px){
  .easy24-hero.hero-fix{ padding-top: calc(var(--hdrH, 64px) + 1.5vh) !important; }
  .easy24-hero .hero-right{ min-height: clamp(360px, 56vw, 560px) !important; }
  .easy24-hero .hero-right .stripe-blue{ right: 46%; width: 46%; height: 118%; }
  .easy24-hero .hero-right .stripe-yellow{ right: -8%; width: 64%; height: 84%; }
}

@media (max-width: 768px){
  .easy24-hero .hero-right{
    min-height: 44vh !important;
  }
  /* na mobilnih ohranimo fotko, stripe lahko skrijemo za čistost */
  .easy24-hero .hero-right .bg-stripes{ display:none; }
  .easy24-hero .hero-people{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin: 2vh auto 0 !important;
    width: clamp(220px, 58vw, 340px) !important;
  }
}

/* === HERO: full-bleed vizuali desno, brez vrzeli zgoraj/spodaj ================ */

/* brez spodnjega paddiga na sekciji */
.easy24-hero.hero-fix{
  padding-bottom: 0 !important;
}

/* desni stolpec naj bo visoko dovolj, da fotka lahko zapolni višino */
.easy24-hero .hero-right{
  position: relative !important;
  min-height: clamp(460px, 55vw, 760px) !important; /* večje kot prej */
  overflow: hidden !important;
  margin-top: 0 !important;
  z-index: 3;
}

/* stripe čez cel stolpec – do roba zgoraj/spodaj */
.easy24-hero .hero-right .bg-stripes{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 1;
}
.easy24-hero .hero-right .stripe{ position:absolute; border-radius:18px; }

/* modra diagonala – večja, da zagotovo “zajame” robove */
.easy24-hero .bg-stripes .stripe-blue{
  right: 38% !important;
  top: -12% !important;           /* rahlo čez vrh, da je vizual na 0 */
  height: 124% !important;        /* rahlo čez dno, da je vizual na 0 */
  width: 44% !important;
  transform: skewX(-18deg);
  background:#2A4DAE;
}

/* rumeni poligon – prav tako malo čez, da ni vrzeli */
.easy24-hero .bg-stripes .stripe-yellow{
  right: -6% !important;
  top: -2% !important;            /* čez vrh */
  height: 104% !important;        /* čez dno */
  width: 58% !important;
  clip-path: polygon(15% 0,100% 0,100% 100%,0 100%);
  background:#FFD84D;
}

/* navpični rumeni trak */
.easy24-hero .bg-stripes .stripe-yellow-vertical{
  right: 5% !important;
  bottom: -2% !important;         /* čez dno */
  height: 36% !important;
  width: 1.4% !important;
  background:#FFD84D;
}

/* FOTKA – spet velika, prilepljena na spodnji/desni rob brez vrzeli */
.easy24-hero .hero-people{
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;           /* 0px od spodnjega roba */
  top: auto !important;
  height: 100% !important;        /* zapolni višino hero-right */
  width: auto !important;         /* naj se širi po razmerju */
  max-width: none !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 2;
}

/* večja fotka na zelo širokih ekranih */
@media (min-width: 1400px){
  .easy24-hero .hero-right{ min-height: clamp(520px, 52vw, 820px) !important; }
}

/* mobilno: čist layout */
@media (max-width: 991.98px){
  .easy24-hero .hero-right .bg-stripes{ display:none !important; }
  .easy24-hero .hero-right{
    min-height: 42vh !important;
  }
  .easy24-hero .hero-people{
    position: relative !important;
    height: auto !important;
    width: clamp(200px, 60vw, 360px) !important;
    margin: 8px auto 0 !important;
  }
}

/* === HERO TOP SPACING FIX === */
.easy24-hero.hero-fix {
  /* minimalen odmik med menijem in hero vsebino */
  padding-top: calc(var(--hdrH, 70px) + 10px) !important;
}

/* prilagoditev za manjše zaslone */
@media (max-width: 991.98px) {
  .easy24-hero.hero-fix {
    padding-top: calc(var(--hdrH, 60px) + 6px) !important;
  }
}

/* === HERO TOP SPACING FIX === */
.easy24-hero.hero-fix {
  padding-top: calc(var(--hdrH, 70px) + 5px) !important;
  margin-top: 0 !important;
}

/* Zmanjšaj padding za manjše ekrane */
@media (max-width: 991.98px) {
  .easy24-hero.hero-fix {
    padding-top: calc(var(--hdrH, 60px) + 2px) !important;
  }
}
/* ===== TOP GAP KILLER – paste at the very end ===== */

/* 1) Ena resnica za višino headerja */
:root { --hdrH: 80px; }           /* po želji 80–92px, a samo ENKRAT! */
body  { padding-top: var(--hdrH) !important; }

/* 2) Ugasni privzeti 56px padding od hero sekcije */
.easy24-hero { padding-top: 0 !important; }

/* 3) Minimalen odmik heroja pod sticky menijem */
.easy24-hero.hero-fix { 
  padding-top: calc(var(--hdrH) + 8px) !important;  /* ~8px zraka */
  padding-bottom: 0 !important;                     /* brez praznine spodaj */
  margin-top: 0 !important;
}

/* 4) Ni skritih paddingov/marginov iz grida/containera */
.container-fluid-xl { padding-top: 0 !important; }
.easy24-hero .row { margin-top: 0 !important; }
.easy24-hero [class*="col-"] { padding-top: 0 !important; }

/* 5) Tudi naslov naj ne dviguje bloka */
.easy24-hero .hero-title { margin-top: 0 !important; }

:root{
  --hdrH: 80px;        /* višina tvojega sticky headerja */
}

.easy24-hero.hero-gap{
  /* ročnik za urejanje razmaka NA VRHU heroja */
  --hero-top-gap: 8px; /* <- : to spreminjaš ti */

  /* dejanski odmik: višina headerja + tvoj dodatni gap */
  padding-top: calc(var(--hdrH) + var(--hero-top-gap)) !important;
}

/* === HERO COMPACT FIX (ciljano, brez stranskih učinkov) === */
section.easy24-hero.hero-fix{
  /* prilagodi po želji */
  --hero-top-gap: 8px;
  --hero-bottom-gap: 0px;
  --hero-right-min: clamp(340px, 36vw, 560px);

  padding-top: calc(var(--hdrH, 80px) + var(--hero-top-gap)) !important;
  padding-bottom: var(--hero-bottom-gap) !important;
  margin-bottom: 0 !important;
}

/* desni stolpec naj ne sili hero previsoko */
section.easy24-hero.hero-fix .hero-right{
  position: relative !important;
  min-height: var(--hero-right-min) !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}

/* fotko prilepimo na dno heroja */
section.easy24-hero.hero-fix .hero-people{
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: clamp(320px, 34vw, 560px) !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* trakovi ostanejo zadaj */
section.easy24-hero.hero-fix .hero-right .bg-stripes{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* odstrani morebitne dodatne vertikalne razmake v levi koloni */
section.easy24-hero.hero-fix .hero-buttons,
section.easy24-hero.hero-fix .hero-search{
  margin-bottom: 0 !important;
}

/* === FINAL HERO GAP FIX === */

/* Nastavitev zgornjega in spodnjega razmika hero bannerja */
section.easy24-hero.hero-fix {
    /* Tukaj spreminjaš samo ti */
    --hero-top-gap: 0px;      /* Odmik med menijem in hero bannerjem */
    --hero-bottom-gap: 0px;   /* Odmik med hero bannerjem in naslednjo sekcijo */

    /* Uporaba spremenljivk */
    margin-top: 0 !important;
    padding-top: calc(var(--hdrH, 80px) + var(--hero-top-gap)) !important;
    padding-bottom: var(--hero-bottom-gap) !important;
}

/* === HERO GAP – KONČNI RESET & KONTROLA (NAJBOLJ NA KONCU CSS) === */

/* 1) Vse kar daje padding-top v hero – izklopimo */
.easy24-hero,
.easy24-hero.hero-fix,
.easy24-hero > .container-fluid-xl,
.easy24-hero .hero-row {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2) Header ostane fixed – to naj ostane */
:root { --hdrH: 80px; }
body { padding-top: var(--hdrH) !important; }

/* 3) Tvoja kontrola razmikov – spreminjaj samo ti spodaj */
:root {
  --hero-top-gap: 0px;      /* ↑ razmak med menijem in hero vsebino */
  --hero-bottom-gap: 0px;   /* ↓ razmak med hero in naslednjo sekcijo */
}

/* 4) Uporabi razmaka samo kot margin na levi vsebini (nič paddinga na sekciji) */
.easy24-hero .hero-left {
  margin-top: var(--hero-top-gap) !important;
}
.easy24-hero.hero-fix {
  margin-bottom: var(--hero-bottom-gap) !important;
  padding-bottom: 0 !important; /* prepreči dvojno seštevanje */
}

/* (ostalo naj ostane, slika naj ostane prilepljena spodaj desno) */
.easy24-hero .hero-right { align-items: flex-end !important; }
.easy24-hero .hero-people  { position: absolute !important; right: 0 !important; bottom: 0 !important; }

/*
   ========================================================================
   REKONSTRUKCIJA HERO BANNERJA
   ========================================================================
*/

/* Omogočite, da se vsi elementi znotraj hero bannerja pozicionirajo relativno */
.easy24-hero {
    position: relative;
    overflow: hidden; /* Preprečuje, da bi elementi, ki so izven okvirja, bili vidni */
}

/* Postavite sliko s pomočjo absolutnega pozicioniranja */
.easy24-hero .hero-people {
    position: absolute;
    right: 0;           /* Postavite sliko na skrajno desno */
    bottom: -50px;      /* Eksperimentirajte s to vrednostjo, da dosežete želeno višino. */
    width: 60%;         /* Prilagodite širino slike, če je potrebno */
    z-index: 1;         /* Zagotovite, da bo slika nad trakovi */
}

/* Postavite poševne in navpične trakove */
.easy24-hero .bg-stripes {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* Centrirajte trakove vertikalno */
    z-index: 0;
}
.easy24-hero .stripe-blue { /* Primer za moder trak */
    width: 250px;
    height: 100%;
    background-color: var(--e24-blue-light);
    transform: skewX(-20deg);
}


/*
   ========================================================================
   POPRAVEK HERO BANNERJA
   ========================================================================
*/

/* Zagotovi, da se razmik med menijem in hero vsebino ter med hero sekcijo in naslednjim delom strani pravilno določi z uporabo CSS spremenljivk. */
:root {
  --hero-top-gap: -30px;      /* Zmanjšajte to vrednost za dvig hero bannerja */
  --hero-bottom-gap: 0px;   /* Zmanjšajte to vrednost za zmanjšanje razmika pod hero sekcijo */
  --hdrH: 80px;             /* Višina fiksnega headerja */
}

/* Poskrbi, da ima telo pravilen padding-top, ki preprečuje prekrivanje s fiksnim headerjem. */
body { padding-top: var(--hdrH) !important; }

/* Popravi razmike na hero bannerju, da ne bo dodatnega paddinga in marginov. */
.easy24-hero.hero-fix {
    padding-top: calc(var(--hdrH, 80px) + var(--hero-top-gap)) !important;
    padding-bottom: var(--hero-bottom-gap) !important;
    margin-top: 0 !important;
}

/* Ponastavi razmike, ki bi jih lahko določale druge CSS klase. */
.easy24-hero,
.easy24-hero.hero-fix,
.easy24-hero > .container-fluid-xl,
.easy24-hero .hero-row {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/*
   ========================================================================
   REKONSTRUKCIJA HERO BANNERJA - DESNA STRAN
   ========================================================================
*/

/* Omogočite, da se vsi elementi znotraj hero bannerja pozicionirajo relativno */
.easy24-hero {
    position: relative;
    overflow: hidden; /* Preprečuje, da bi elementi, ki so izven okvirja, bili vidni */
}

/* Premakni levi del in search polje višje */
.hero-left {
    margin-top: -30px;
    padding-left: 20px; /* Dodajte razmik na levi strani */
}

/* Premakni search polje višje */
.hero-search {
    margin-top: 0 !important;
    padding-top: 20px; /* Razmik med besedilom in search poljem */
}

/* Postavite sliko s pomočjo absolutnega pozicioniranja */
.easy24-hero .hero-people {
    position: absolute;
    right: 0;           /* Postavite sliko na skrajno desno */
    bottom: -100px;      /* Premakne sliko nižje */
    width: 45%;         /* Zmanjšaj širino slike za boljšo postavitev */
    z-index: 1;         /* Zagotovite, da bo slika nad trakovi */
}

/* Postavite poševne in navpične trakove */
.easy24-hero .bg-stripes {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* Centrirajte trakove vertikalno */
    z-index: 0;
}
.easy24-hero .stripe-blue { /* Primer za moder trak */
    width: 250px;
    height: 100%;
    background-color: var(--e24-blue-light);
    transform: skewX(-20deg);
}


/* === EASY24: HEADER FONT = MATCH LOGO === */

/* Celoten header uporablja isto pisavo kot logo */
.e24-header,
.e24-header .nav a,
.e24-header .btn,
.e24-header .lang-btn,
.e24-header .dropdown-menu,
.e24-header .search-box input,
.easy24-hero .btn,
.easy24-hero .hero-search .form-control {
    font-family: inherit !important;
}



/* === EASY24: BLACK TITLES FOR SPECIFIC SECTIONS === */

/* 1) Sekcija: FixitCustomer, Provider, Servicemen & Admin app */
.application-section h2 {
    color: #000000 !important;
}

/* 2) Sekcija: Earn more and deliver your service worldwide */
.section-wrap h2 {
    color: #000000 !important;
}

/* === EASY24: COPYRIGHT TEXT = WHITE + NORMAL WEIGHT === */
.footer-section .copyright p,
.footer-section .copyright p a {
  color: #ffffff !important;
  font-weight: 400 !important; /* normalna teža */
}

/* === EASY24: "Special Services Just For You" → črno === */
.service-list-section .title h2 {
  color: #000000 !important;
}

/* === EASY24: Border za "Become a Provider" v headerju (URL target) === */
.e24-header a[href*="become-provider"] {
  border: 2px solid #f5b301;        /* brand rumena obroba */
  border-radius: 999px;              /* pill oblika */
  padding: 8px 16px;                 /* malo “zračnosti” okrog gumba */
  line-height: 1;                    /* kompakten */
}

.e24-header a[href*="become-provider"]:hover {
  background: rgba(245,179,1,0.08);  /* nežen hover */
}

.e24-header a[href*="become-provider"]:focus-visible {
  outline: 3px solid rgba(245,179,1,0.35); /* dostopnost */
  outline-offset: 2px;
}

/* === BECOME A PROVIDER – PURPLE VARIANTA === */
.btn-provider--purple{
  background:#5E2CA5 !important;
  color:#fff !important;
  border:2px solid #4c1d95 !important;
  font-weight:700; font-size:15px; padding:10px 24px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:all .25s ease-in-out; position:relative; z-index:5;
}
.btn-provider--purple:hover,
.e24-header .btn-provider--orange:hover{
  background:#7433B5 !important;
  border-color:#3b0764 !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  transform:translateY(-1px);
}

/* =========================
   HERO BANNER – MOBILE FIX
   ========================= */
/* ===== MOBILE ONLY (≤ 991px) ===== */
@media (max-width: 991.98px){

  /* Hero: skrij desni vizual (slika + trakovi) */
  .easy24-hero .hero-right,
  .easy24-hero .hero-people,
  .easy24-hero .bg-stripes,
  .easy24-hero .stripe,
  .easy24-hero .stripe-blue,
  .easy24-hero .stripe-yellow,
  .easy24-hero .stripe-yellow-vertical {
    display: none !important;
  }

  /* Hero levo naj zasede celo širino */
  .easy24-hero .col-lg-6.col-md-7.col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Mobilni razmiki hero-ja */
  .easy24-hero {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Header: skrij CTA gumbe; pusti burger meni / logo */
  .e24-header .actions,
  .e24-header .btn,
  .e24-header .btn-login,
  .e24-header .btn-provider--blue {
    display: none !important;
  }

  /* Pokaži hamburger meni na mobilnih */
  .e24-header .hamburger {
    display: flex !important;
  }

  /* Če je header fixed, ohrani odmik vsebine */
  body {
    padding-top: var(--hdrH, 80px);
  }
}

<style>

/* HOW IT WORKS – clean + aligned with categories */
.howitworks .hiw-head{ text-align:left; margin:0 0 16px; }
.howitworks .hiw-title{ margin:0; font-weight:800; color:#000; }
.howitworks .hiw-hr{ display:block; width:72px; height:3px; background:#1e1b4b; margin:8px 0 18px; }

/* image left-aligned, follows container padding just like categories */
.howitworks .hiw-media{ display:flex; justify-content:flex-start; }
.howitworks .hiw-image{
  display:block; width:min(560px, 100%); height:auto;
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* mobile: center image like categories do */
@media (max-width: 991.98px){
  .howitworks .hiw-head{ text-align:center; }
  .howitworks .hiw-hr{ margin-left:auto; margin-right:auto; }
  .howitworks .hiw-media{ justify-content:center; }
  .howitworks .hiw-image{ width:min(420px, 85%); }
}

/* HOW IT WORKS – zanesljiv razmik (namesto margin) */
section.howitworks{
  /* prepreči margin-collapsing (nova BFC) */
  display: flow-root;           /* ali overflow: hidden; */

  /* želena razmika – 50% manj kot prej */
  padding-top: 10px !important;  /* prej 10px */
  padding-bottom: -10px !important; /* prej 40px */

  /* pospravi morebitne stare margine */
  margin-top: 10 !important;
  margin-bottom: 0 !important;
}

/* Razmik med Become a Provider in social ikonami */
.footer-section .footer-social {
    margin-top: 44px !important;  /* doda presledek */
}

/* === MENU FONT = MATCH LOGO TEXT === */

/* Enaka pisava in slog kot logotip */
.e24-header .nav a,
.e24-header .btn,
.e24-header .lang-btn,
.e24-header .icon-btn {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-weight: 900 !important;          /* enako kot logo = bolj bold */
    font-size: 17px !important;           /* malo večje za ostrino */
    letter-spacing: 0.25px !important;    /* enaka razdalja kot logo */
    color: #ffffff !important;           /* bele črke, bolj kontrastne */
    -webkit-font-smoothing: antialiased; /* lepša ostrina na Mac/Chrome */
    -moz-osx-font-smoothing: grayscale;  /* lepša ostrina na Firefox/Mac */
    text-rendering: geometricPrecision;  /* najbolj ostra upodobitev */
}

/* Aktivna povezava = ostrejša in bolj vidna */
.e24-header .nav a.active {
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* Hover efekt: bele črke še bolj kontrastne */
.e24-header .nav a:hover {
    color: #ffffff !important;
    filter: brightness(115%);
}

/* Logo tekst in meni zdaj izgledajo enako */
.e24-header .brand .text {
    font-weight: 900 !important;
    font-size: 17px !important;
    letter-spacing: 0.25px !important;
    color: #ffffff !important;
}

/* === HEADER HEIGHT + MENU SPACING (+20%) === */
.e24-header .header-inner {
    height: 96px !important; /* prej 80px → +20% */
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
    transition: height 0.25s ease;
}

/* Navigacijski linki – več vertikalnega prostora */
.e24-header .nav ul {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 28px;
}

.e24-header .nav a {
    padding: 18px 10px !important; /* prej 12px → več prostora */
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: 800;
}

/* Desni rumen trak v headerju – prilagodi višino */
.e24-header .actions {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    isolation: isolate;
}

.e24-header .actions::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -20px -24px -20px -200px;
    background: #EEA525;
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
    border-radius: 0 0 0 14px;

    /* 🔹 Višina rumenega traku je vedno enaka višini headerja */
    top: 0;
    bottom: 0;
    height: 100%;
}

/* Burger meni za mobile – višji za uskladitev */
.e24-header .hamburger {
    height: 58px !important;
    width: 58px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dinamični logo v headerju */
.e24-header .brand .site-logo{
  max-height: 64px;  /* prilagodi po želji glede na višino headerja */
  width: auto;
  display: block;
  object-fit: contain;
}

/* HERO: poravnaj levo z kategorijami */
.easy24-hero .hero-container .hero-row{
  margin-left: 0 !important;            /* nevtralizira -gutter na .row */
}


/* varno za mobilne – vrni default padding */
@media (max-width: 991.98px){
  .easy24-hero .hero-container .hero-row{
    margin-left: -0.75rem !important;   /* bootstrap default */
  }
  .easy24-hero .hero-container .hero-row > .col-lg-6:first-child{
    padding-left: 0.75rem !important;   /* bootstrap default */
  }
}

/* === FORCE HIDE rumenega pasu na heroju === */
section.easy24-hero.hero-fix::after{
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  clip-path: none !important;
  border: 0 !important;
}

/* če tema doda še notranje rumene “stripe” elemente */
section.easy24-hero.hero-fix .bg-stripes [class*="stripe-yellow"],
section.easy24-hero.hero-fix [class*="stripe-yellow"]{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ===== EASY24 MOBILE KILL-SWITCH (put this at the very end) ===== */
@media (max-width: 991.98px){
  html body section.easy24-hero.hero-fix::after,

  body .easy24-hero .hero-right .stripe-yellow-vertical,
  body .easy24-hero .bg-stripes .stripe-yellow-vertical,
  body .hero-section .yellow-bg,
  body .hero-section .yellow-strip{
    content:none !important;
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    opacity:0 !important;
    background:transparent !important;
    clip-path:none !important;
  }
  :root{ --e24-dy-width: 0 !important; }
}

<style>
/* ===== MOBILNI HEADER + MENU (KONČNA ČISTA VERZIJA) ===== */

<style>
/* SAMO MOBILNO: skrij beli pas NAD modrim logotipnim pasom + povečaj logo */
@media (max-width: 991.98px){
  /* tipične “bele vrstice” v headerjih tem – NAD glavnim pasom */
  header#site-header .subheader,
  header#site-header .sub-header,
  header#site-header .preheader,
  header#site-header .below-topbar,
  header#site-header .second-row,
  header#site-header .strip,
  header#site-header .breadcrumb,
  header#site-header .breadcrumbs,
  header#site-header .announcement,
  header#site-header .announcement-bar,
  header#site-header .contact-strip,
  header#site-header .separator {
    display: none !important;
  }
</style>

/* 1) Skrij vse stare/odvečne mobilne elemente na malih zaslonih (tvoja točka #1) */
@media (max-width: 991.98px){
  /* če tema izriše kakšno “mini top” pasico, ikone ali 3 črtice desno – skrij */
  #site-header .topbar,
  #site-header .right-icons,
  #site-header .mobile-icons,
  #site-header .mobile-hamburger,
  #site-header .header-actions {
    display: none !important;
  }
}

/* 2) Privzete mere za naš novi mobilni header */
@media (max-width: 991.98px){
  :root{
    --m-topbar-h: 56px;   /* višina modre vrstice z LOGOTIPOM */
    --m-menubar-h: 44px;  /* višina bele vrstice z napisom "Menu" + burger gumbom */
    --m-drawer-w: 82vw;   /* širina desnega drsnika */
  }

  /* Na mobilnih NE skrivamo celega #site-header (da ne porušimo drugih zadev),
     skrijemo samo njegov interni LOGO, da ostane zgoraj izključno naš večji logo. */
  #site-header .brand-logo,
  #site-header img[alt*="easy24service"],
  #site-header a[aria-label*="easy24service"] img {
    display: none !important;
  }

  /* ===== MODRA VRSTICA (SAMO LOGO) — tvoja točka #2 ===== */
  .m-topbar{
    position: sticky; top: 0; z-index: 5000;
    display:flex; justify-content:center; align-items:center;
    height: var(--m-topbar-h);
    background:#0e2b63; border-bottom:1px solid rgba(0,0,0,.08);
    padding: 8px 12px;
  }
  .m-topbar .m-logo img{
    height: 44px !important; max-height: 44px !important; width: auto !important;
    display:block !important;
  }

  /* ===== BELA VRSTICA (naslov "Menu" + burger gumb) ===== */
  .m-menubar{
    position: sticky; top: var(--m-topbar-h); z-index: 4999;
    background:#fff; border-bottom:1px solid rgba(0,0,0,.08);
  }
  .m-menubar-inner{
    display:flex; align-items:center; justify-content:space-between;
    height: var(--m-menubar-h);
    padding: 8px 14px 6px;
  }
  .m-menubar-title{
    font-weight:700; color:#0e2b63; font-size:16px; line-height:1;
    cursor:pointer; user-select:none;
  }
  .m-menu-btn{
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer; user-select:none;
  }
  .m-menu-btn svg rect{ fill:#0e2b63; transition:transform .25s, opacity .2s; }

  /* ===== OVERLAY + DESNI DRAWER (popravljeno, da je VSE vidno / scrolla) ===== */
  .m-overlay{
    position: fixed; left:0;
    top: calc(var(--m-topbar-h) + var(--m-menubar-h));
    bottom: 0; right: var(--m-drawer-w);
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none; transition: opacity .25s;
    z-index: 4997;
  }

  .m-drawer{
    position: fixed; right: 0;
    top: calc(var(--m-topbar-h) + var(--m-menubar-h));
    width: var(--m-drawer-w); max-width: 360px;

    /* Kritično: uporabi 100dvh (nova enota, pravilneje čez mobilne brskalnike) */
    height: calc(100dvh - (var(--m-topbar-h) + var(--m-menubar-h)));

    background:#fff; box-shadow:-6px 0 22px rgba(0,0,0,.16);
    transform: translateX(100%); transition: transform .25s;
    z-index: 4998;

    /* Da se vsa vsebina vidi in scrolla, če je daljša od zaslona */
    overflow: auto; -webkit-overflow-scrolling: touch;

    /* Da je “Categories” vedno lepo viden na vrhu */
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* ===== VSEBINA ZNOTRAJ DRAWERJA ===== */
  .m-nav{
    padding: 12px 14px 0 !important;
    display: flex; flex-direction: column; gap: 10px; font-size: 16px;
  }
  .m-nav > *{ margin: 0 !important; }
  .m-nav a{ text-decoration: none; color: #111; padding: 10px 0 !important; }
  .m-nav a:hover{ color:#0e2b63; }
  .m-nav a:first-child{ padding-top: 12px !important; }
  .m-nav hr{ height:1px; border:0; background:#eee; margin: 10px 0 !important; }
  .m-nav > hr:first-child{ display:none !important; margin:0 !important; }

  .m-btn{ display:inline-block; padding:10px 12px; border-radius:8px; margin-top:8px; text-align:center; font-size:15px; }
  .m-btn-outline{ border:1px solid #c9ced8; color:#0e2b63; }
  .m-btn-solid{ background:#ffd600; border:1px solid #e7c800; color:#222; font-weight:600; }

  /* JEZIKI */
  .m-lang{ margin: 0 !important; padding-bottom: 4px !important; }
  .m-lang a{ margin-right:12px; text-decoration:none; }
  .m-lang a.active{ font-weight:800; text-decoration:underline; }

  /* Checkbox hack – odprto stanje (burger X animacija + prikaz) */
  .mmenu-toggle:checked ~ #m-overlay{ opacity:1; pointer-events:auto; }
  .mmenu-toggle:checked ~ #m-drawer{ transform: translateX(0); }
  .mmenu-toggle:checked ~ #m-menubar .m-menu-btn svg rect:nth-child(2){ opacity:0; }
  .mmenu-toggle:checked ~ #m-menubar .m-menu-btn svg rect:nth-child(1){
    transform: translateY(5px) rotate(45deg); transform-origin:12px 7px;
  }
  .mmenu-toggle:checked ~ #m-menubar .m-menu-btn svg rect:nth-child(3){
    transform: translateY(-5px) rotate(-45deg); transform-origin:12px 17px;
  }
}

/* DESKTOP: mobilni header skrijemo */
@media (min-width: 992px){
  #m-topbar, .mmenu-toggle, #m-menubar, #m-overlay, #m-drawer { display:none !important; }
}
</style>

/* === FIX: odstrani osrednji logo in stare tri črtice === */
@media (max-width: 991.98px){

  /* odstrani osrednji (podvojen) logo iz bele vrstice */
  #m-menubar .brand,
  #m-menubar .brand-logo,
  #m-menubar .site-logo,
  #m-menubar img,
  #m-menubar [class*="logo"] {
    display: none !important;
  }

  /* odstrani stare tri črtice zgoraj desno (če jih tema še dodaja) */
  #site-header .mobile-hamburger,
  #site-header .header-actions,
  #site-header .right-icons,
  #site-header .topbar-icons {
    display: none !important;
  }
}

/* === FIX: odstrani logotip iz bele MENU vrstice === */
@media (max-width: 991.98px){
  #m-menubar .brand,
  #m-menubar .brand-logo,
  #m-menubar .site-logo,
  #m-menubar img,
  #m-menubar [class*="logo"] {
    display: none !important;
  }
}

/* --- MENUBAR: prisili brez logotipov/ozadij (mobilno) --- */
@media (max-width: 991.98px){
  #m-menubar [class*="logo"],
  #m-menubar .brand,
  #m-menubar .brand-logo,
  #m-menubar .site-logo,
  #m-menubar a[aria-label*="easy24service"],
  #m-menubar img,
  #m-menubar picture,
  #m-menubar svg[aria-label*="logo"] {
    display: none !important;
    width: 0 !important; height: 0 !important; overflow: hidden !important;
  }
  /* tudi morebitni background-image logotipi/psevdoelementi */
  #m-menubar, #m-menubar * { background-image: none !important; }
  #m-menubar::before, #m-menubar::after,
  #m-menubar .m-menubar-inner::before, #m-menubar .m-menubar-inner::after {
    content: none !important; background: none !important;
  }
}

<style>
/* ===== MOBILNI HEADER + MENU (KONČNA ČISTA VERZIJA) ===== */

/* 0) Skrij temine vrhnje pasove (samo mobilno) */
@media (max-width: 991.98px){
  header#site-header .subheader,
  header#site-header .sub-header,
  header#site-header .preheader,
  header#site-header .below-topbar,
  header#site-header .second-row,
  header#site-header .strip,
  header#site-header .breadcrumb,
  header#site-header .breadcrumbs,
  header#site-header .announcement,
  header#site-header .announcement-bar,
  header#site-header .contact-strip,
  header#site-header .separator,
  #site-header .topbar,
  #site-header .right-icons,
  #site-header .mobile-icons,
  #site-header .mobile-hamburger,
  #site-header .header-actions {
    display: none !important;
  }
}

/* 1) MOBILNI LAYOUT: header je FIXED (ne sticky), vsebino potisnemo dol */
@media (max-width: 991.98px){
  :root{
    --m-topbar-h: 56px;   /* pusti svojo višino logotipnega pasu */
    --m-menubar-h: 44px;
    --m-drawer-w: 82vw;
  }

  /* skrij celoten temin header na mobilnih */
  header#site-header, header.site-header { 
    display: none !important; 
    height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  }

  /* naš mobilni header viden */
  #mobile-only-header{ display:block !important; margin:0 !important; }

  /* LOGO pas (fixiran) */
  .m-topbar{
    position: fixed !important; top: 0; left: 0; right: 0;
    z-index: 5000;
    display:flex; justify-content:center; align-items:center;
    height: var(--m-topbar-h);
    background:#0e2b63; border-bottom:1px solid rgba(0,0,0,.08);
    padding: 8px 12px;
  }
  .m-topbar .m-logo img{
    height: 44px !important; max-height: 44px !important; width: auto !important;
    display:block !important;
  }

  /* MENUBAR (fixiran pod logotipom) */
  .m-menubar{
    position: fixed !important; top: var(--m-topbar-h); left: 0; right: 0;
    z-index: 4999;
    background:#fff; border-bottom:1px solid rgba(0,0,0,.08);
  }
  .m-menubar-inner{
    display:flex; align-items:center; justify-content:space-between;
    height: var(--m-menubar-h);
    padding: 8px 14px 6px;
  }
  .m-menubar-title{
    font-weight:700; color:#0e2b63; font-size:16px; line-height:1;
    cursor:pointer; user-select:none;
  }
  .m-menu-btn{
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer; user-select:none;
  }
  .m-menu-btn svg rect{ fill:#0e2b63; transition:transform .25s, opacity .2s; }

  /* 🔧 Potisni vsebino navzdol za fix headerjem (odpravi “bel pas”) */
  body{ 
    padding-top: calc(var(--m-topbar-h) + var(--m-menubar-h)) !important; 
  }

  /* 🔧 Dodatni hard reset na PRVI vsebinski blok (če ima vlastni margin/padding) */
  #m-menubar + *,
  main:first-of-type, #content:first-of-type, .site-content:first-of-type, .wrap:first-of-type, .page-content:first-of-type,
  .hero:first-of-type, .hero-section:first-of-type, .banner:first-of-type, .banner-hero:first-of-type,
  .container:first-of-type, .row:first-of-type, section:first-of-type,
  .elementor:first-of-type, .elementor-section:first-of-type, .elementor-container:first-of-type,
  .vc_row:first-of-type, .wpb_row:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-clip: padding-box !important; /* prepreči vizualne “odmike” ozadja */
  }

  /* Drawer */
  .m-overlay{
    position: fixed; left:0;
    top: calc(var(--m-topbar-h) + var(--m-menubar-h));
    bottom: 0; right: var(--m-drawer-w);
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none; transition: opacity .25s;
    z-index: 4997;
  }
  .m-drawer{
    position: fixed; right: 0;
    top: calc(var(--m-topbar-h) + var(--m-menubar-h));
    width: var(--m-drawer-w); max-width: 360px;
    height: calc(100dvh - (var(--m-topbar-h) + var(--m-menubar-h)));
    background:#fff; box-shadow:-6px 0 22px rgba(0,0,0,.16);
    transform: translateX(100%); transition: transform .25s;
    z-index: 4998;
    overflow: auto; -webkit-overflow-scrolling: touch;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* Links v meniju */
  .m-nav{
    padding: 12px 14px 0 !important;
    display: flex; flex-direction: column; gap: 10px; font-size: 16px;
  }
  .m-nav > *{ margin: 0 !important; }
  .m-nav a{ text-decoration: none; color: #111; padding: 10px 0 !important; }
  .m-nav a:hover{ color:#0e2b63; }
  .m-nav a:first-child{ padding-top: 12px !important; }
  .m-nav hr{ height:1px; border:0; background:#eee; margin: 10px 0 !important; }
  .m-nav > hr:first-child{ display:none !important; margin:0 !important; }

  .m-btn{ display:inline-block; padding:10px 12px; border-radius:8px; margin-top:8px; text-align:center; font-size:15px; }
  .m-btn-outline{ border:1px solid #c9ced8; color:#0e2b63; }
  .m-btn-solid{ background:#ffd600; border:1px solid #e7c800; color:#222; font-weight:600; }

  .m-lang{ margin: 0 !important; padding-bottom: 4px !important; }
  .m-lang a{ margin-right:12px; text-decoration:none; }
  .m-lang a.active{ font-weight:800; text-decoration:underline; }

  .mmenu-toggle:checked ~ #m-overlay{ opacity:1; pointer-events:auto; }
  .mmenu-toggle:checked ~ #m-drawer{ transform: translateX(0); }
  .mmenu-toggle:checked ~ #m-menubar .m-menu-btn svg rect:nth-child(2){ opacity:0; }
  .mmenu-toggle:checked ~ #m-menubar .m-menu-btn svg rect:nth-child(1){
    transform: translateY(5px) rotate(45deg); transform-origin:12px 7px;
  }
  .mmenu-toggle:checked ~ #m-menubar .m-menu-btn svg rect:nth-child(3){
    transform: translateY(-5px) rotate(-45deg); transform-origin:12px 17px;
  }
}

/* 2) DESKTOP: skrij naš mobilni header, pusti teminega/hero */
@media (min-width: 992px){
  #m-topbar, .mmenu-toggle, #m-menubar, #m-overlay, #m-drawer { display:none !important; }
  header#site-header, header.site-header { display:block !important; }
  body { padding-top: 0 !important; }
}
</style> 

@media (max-width: 991.98px){
  /* Reset zgornjega belega prostora pred prvim hero besedilom */
  .hero:first-of-type,
  .hero-section:first-of-type,
  .banner:first-of-type,
  .banner-hero:first-of-type,
  .elementor-section:first-of-type,
  .elementor:first-of-type,
  .vc_row:first-of-type,
  main > section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* === MOBILE GAP KILLER (place this at the very end) === */
@media (max-width: 991.98px){
  /* 1) Odstrani globalni odmik na telesu strani */
  body{
    padding-top: 0 !important;
  }

  /* 2) Prvi “hero” naj prevzame odmik za fiksni header */
  #home-hero{
    margin-top: 0 !important;
    padding-top: calc(var(--m-topbar-h) + var(--m-menubar-h)) !important;
  }

  /* 3) Če obstajajo mt-* ali dodatni paddings na vrhu – reset */
  #home-hero[class*="mt-"]{ margin-top: 0 !important; }
  #home-hero .container,
  #home-hero .container-fluid,
  #home-hero .container-fluid-xl{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 4) Odstrani morebitne pseudo trakove ali stripe nad herojem */
  #home-hero::before,
  #home-hero::after{
    content: none !important;
    display: none !important;
  }

  /* 5) Prvi element za mobilnim headerjem – brez odmika */
  #mobile-only-header + *{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 6) Če želiš povsem brez linije pod belim menijem */
  #m-menubar{
    border-bottom: 0 !important;
  }
}

/* === EASY24: večji logo na mobilnem topbaru === */
@media (max-width: 991.98px){
  /* 1) povečaj višino modrega pasu (topbar) */
  :root{
    --m-topbar-h: 120px; /* npr. 120px; daj 200–320px po želji */
  }

  /* 2) uskladi višino same slike z novim topbar-om */
  .m-topbar .m-logo img{
    height: 100px !important;     /* naj bo malo manj od topbar-ja */
    max-height: 100px !important;  /* prepiše stare 44px !important */
    width: auto !important;
    display: block !important;
  }

  /* 3) bel menubar + overlay/drawer naj se premaknejo dol za višino novega topbara */
  #m-menubar{
    top: var(--m-topbar-h) !important;
  }
  .m-overlay{
    top: calc(var(--m-topbar-h) + var(--m-menubar-h)) !important;
  }
  .m-drawer{
    top: calc(var(--m-topbar-h) + var(--m-menubar-h)) !important;
    height: calc(100dvh - (var(--m-topbar-h) + var(--m-menubar-h))) !important;
  }

  /* 4) potisni vsebino strani pod fiksna bara (modri + beli) */
  body{
    padding-top: calc(var(--m-topbar-h) + var(--m-menubar-h)) !important;
  }
}

<style>
#home-hero .hero-people { display:block !important; visibility:visible !important; opacity:1 !important; position:relative !important; z-index:2 !important; }
#home-hero .hero-bg-fallback { z-index:1 !important; }
#home-hero .bg-stripes, 
#home-hero .yellow-strip, 
#home-hero .stripe-yellow-vertical { pointer-events:none !important; }

@media (max-width: 991.98px){
  /* Nikoli ne skrivaj hero-people na mobitelih */
  #home-hero .hero-people:first-of-type { display:block !important; }
}
</style>

<style>
  #hero-right {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  #hero-right .hero-people {
    object-position: right bottom !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
  }
</style>


/* === CENTER SEARCHER V HEROJU (hard override) === */
#home-hero .hero-search{
  text-align: center !important;          /* centrira inline elemente znotraj */
  margin-top: 12px !important;
}

#home-hero .hero-search .input-group{
  display: inline-flex !important;         /* naj se obnaša kot inline blok */
  width: min(720px, 94vw) !important;      /* nastavi širino searcherja */
  margin: 0 auto !important;               /* dejansko na sredino */
  float: none !important;                  /* za vsak slučaj */
}

#home-hero .hero-search .form-control{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#home-hero .hero-search .btn-search{
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
}

#home-hero { --searcher-width: 720px; }
#home-hero .hero-search .input-group{ width: min(var(--searcher-width), 94vw) !important; }


.e24-header .btn-sos{
  background:#0e2b63; color:#fff; border:2px solid rgba(255,255,255,.28);
}
.e24-header .btn-sos:hover{ background:#0b2453; }

/* === SOS gumb – prisili rdečo (zamenjaj barve, če želiš modro) === */
.e24-header .actions a.btn.btn-sos,
.e24-header a[href*="/backend/become-provider"].btn.btn-sos{
  background-color:#DC2626 !important;   /* rdeča */
  background-image:none !important;       /* izklopi temin gradient */
  color:#fff !important;
  border:0 !important;
  box-shadow:0 6px 14px rgba(220,38,38,.28) !important;

  /* če tema uporablja Bootstrap spremenljivke */
  --bs-btn-bg:#DC2626;
  --bs-btn-hover-bg:#b91c1c;
  --bs-btn-active-bg:#991b1b;
}

/* izklopi morebiten ::before overlay iz teme */
.e24-header .actions a.btn.btn-sos::before{
  content:none !important;
  background:transparent !important;
  border:0 !important;
}

/* stanja */
.e24-header .actions a.btn.btn-sos:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(220,38,38,.35) !important;
}
.e24-header .actions a.btn.btn-sos:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(220,38,38,.28) !important;
}
.e24-header .actions a.btn.btn-sos:focus{
  outline:0;
  box-shadow:0 0 0 3px rgba(239,68,68,.35), 0 6px 14px rgba(220,38,38,.28) !important;
}