#gallery h2 {text-align:center;font-size:2.2em;margin-bottom:20px;text-transform:uppercase;letter-spacing:1px;} :root{ --brand-blue:#058dd2; --brand-blue-dark:#046ea5; --ink:#1d1d21; --slate:#52504c; --soft:#f5f7fa; --line:#d9dde3; --white:#ffffff; --success:#1d7f47; --success-bg:#e9f8ef; --danger:#b42318; --danger-bg:#fef3f2; --radius:18px; --shadow:0 18px 45px rgba(29,29,33,.08); --shadow-lg:0 28px 60px rgba(29,29,33,.12); --container:min(1180px, calc(100% - 2rem)); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Arial, Helvetica, sans-serif; color:var(--ink); background:var(--white); line-height:1.6; } img{max-width:100%;display:block} a{text-decoration:none;color:inherit} button,input,textarea,select{font:inherit} section{scroll-margin-top:110px} .container{width:var(--container);margin-inline:auto} .brand-accent{color:var(--brand-blue)} .top-bar{ background:var(--ink); color:var(--white); font-size:.92rem; } .top-bar-inner{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.55rem 0; flex-wrap:wrap; } .top-bar-group{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; } .top-pill{opacity:.95} .main-nav{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid rgba(217,221,227,.9); box-shadow:0 10px 26px rgba(29,29,33,.05); } .main-nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; } .main-nav-brand{ display:flex; align-items:center; gap:.85rem; min-width:0; font-weight:800; } .main-nav-brand img{ height:50px; width:auto; object-fit:contain; } .main-nav-brand-text{ font-size:1.04rem; letter-spacing:.02em; white-space:nowrap; } .nav-toggle{ display:none; border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:12px; padding:.72rem .9rem; cursor:pointer; font-weight:700; } .main-nav-menu{ display:flex; align-items:center; gap:1.15rem; flex-wrap:wrap; } .main-nav-menu a{ font-weight:700; color:var(--ink); transition:color .2s ease; } .main-nav-menu a:hover, .main-nav-menu a.active{ color:var(--brand-blue); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.95rem 1.3rem; border-radius:999px; font-weight:700; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; border:none; cursor:pointer; } .btn:hover{transform:translateY(-1px)} .btn-primary{ background:var(--brand-blue); color:var(--white); box-shadow:0 12px 30px rgba(5,141,210,.2); } .btn-primary:hover{background:var(--brand-blue-dark)} .btn-secondary{ background:var(--white); color:var(--ink); border:2px solid var(--line); } .btn-secondary:hover{ border-color:var(--brand-blue); color:var(--brand-blue); } .btn-nav{ padding:.78rem 1rem; box-shadow:0 10px 22px rgba(5,141,210,.16); } .hero{ position:relative; overflow:hidden; background: radial-gradient(circle at 12% 8%, rgba(5,141,210,.08), transparent 28%), radial-gradient(circle at 90% 12%, rgba(5,141,210,.08), transparent 24%), linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%); padding:4.6rem 0 3.7rem; } .hero-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:2.5rem; align-items:center; } .hero-card{ background:var(--white); border:1px solid rgba(29,29,33,.08); border-radius:28px; padding:1.3rem; box-shadow:var(--shadow-lg); max-width:430px; animation:cardSlideIn .85s ease-out both; }
.hero-card img{
width:100%;
background:#f7f7f7;
border-radius:22px;
margin-bottom:1.2rem;
padding:1.3rem;
box-shadow:0 18px 40px rgba(0,0,0,.08);
transition:transform .3s ease, box-shadow .3s ease;
}
.hero-card img:hover{
transform:translateY(-3px);
box-shadow:0 26px 60px rgba(0,0,0,.12);
}
.card-strip h3{ margin:.1rem 0 .7rem; color:var(--brand-blue); font-size:clamp(1.4rem, 2.2vw, 2rem); line-height:1.12; } .card-strip p{ margin:0 0 1rem; color:#4c5560; } .card-badges{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1rem; } .badge{ font-size:.88rem; padding:.45rem .7rem; border-radius:999px; background:#eef8fd; color:var(--brand-blue-dark); font-weight:700; border:1px solid #d4edf9; } .eyebrow{ display:inline-block; color:var(--brand-blue); font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.85rem; font-size:.82rem; } .hero h1{ font-size:clamp(2.3rem, 4.5vw, 4.8rem); line-height:1.03; margin:0 0 1rem; letter-spacing:.01em; } .hero-copy p{ font-size:1.08rem; color:#4a515a; max-width:62ch; margin:0 0 1.5rem; } .hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.4rem; } .highlights{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; margin-top:1.25rem; } .highlight{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:1.3rem; box-shadow:0 10px 30px rgba(29,29,33,.05); } .highlight strong{ display:block; font-size:1.35rem; color:var(--brand-blue); margin-bottom:.15rem; } .highlight span{ color:#505761; font-size:.95rem; } .section{padding:4.6rem 0} .section.alt{background:var(--soft)} .section-head{ text-align:center; max-width:760px; margin:0 auto 2rem; } .section-head h2{ font-size:clamp(1.9rem, 3vw, 2.8rem); margin:0 0 .7rem; } .section-head p{ margin:0; color:#5a6068; } .cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; } .card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.35rem; box-shadow:0 10px 28px rgba(29,29,33,.04); } .card h3{margin:.15rem 0 .55rem} .card p{margin:0;color:#57606b} .card-icon{ width:48px;height:48px; border-radius:14px; display:grid;place-items:center; background:#eef8fd; color:var(--brand-blue); font-weight:800; margin-bottom:1rem; } .about-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:2rem; align-items:start; } .about-panel, .contact-card, .quote-card{ background:var(--white); border:1px solid var(--line); border-radius:24px; padding:1.5rem; box-shadow:var(--shadow); } .check-list{ display:grid; gap:.9rem; margin-top:1rem; } .check-item{ display:flex; gap:.8rem; align-items:flex-start; } .check{ width:24px;height:24px; border-radius:999px; background:#e8f7ee; color:var(--success); display:grid;place-items:center; flex:0 0 24px; font-weight:800; margin-top:2px; } .stats{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:1rem;
align-items:stretch;
} .stat{
background:var(--soft);
border:1px solid var(--line);
border-radius:18px;
padding:1.2rem;
min-width:0;
height:100%;
} .stat strong{
display:block;
font-size:1.2rem;
color:var(--brand-blue);
margin-bottom:.35rem;
line-height:1.2;
}
.stat span{
display:block;
color:#505761;
line-height:1.5;
word-break:break-word;
} .quote-wrap{ display:grid; grid-template-columns:.88fr 1.12fr; gap:1.5rem; align-items:start; } .quote-points{ display:grid; gap:.8rem; margin-top:1rem; } .quote-point{ background:#eef8fd; color:#335568; border:1px solid #d7ebf7; border-radius:14px; padding:.9rem 1rem; font-weight:700; } .form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; } .field{ display:grid; gap:.42rem; } .field.full{grid-column:1/-1} label{ font-weight:700; font-size:.95rem; } input, textarea, select{ width:100%; border:1px solid var(--line); border-radius:14px; padding:.92rem 1rem; background:#fff; color:var(--ink); outline:none; transition:border-color .2s ease, box-shadow .2s ease; } input:focus, textarea:focus, select:focus{ border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(5,141,210,.12); } textarea{min-height:140px;resize:vertical} .form-note{ color:#5b6570; font-size:.92rem; margin-top:.8rem; } .alert{ display:none; border-radius:16px; padding:1rem 1.05rem; margin-bottom:1rem; border:1px solid transparent; font-weight:700; } .alert.show{display:block} .alert-success{ background:var(--success-bg); border-color:#b7e4c7; color:var(--success); } .alert-error{ background:var(--danger-bg); border-color:#f5c2c0; color:var(--danger); } .hp-field{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; } .contact-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.1rem; margin-top:1.2rem; } .contact-item{ background:var(--soft); border:1px solid var(--line); border-radius:18px; padding:1.3rem; } .contact-item strong{ display:block; margin-bottom:.28rem; color:var(--brand-blue); } .faq{ display:grid; gap:1rem; max-width:900px; margin:0 auto; } .faq-item{ border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden; } .faq-item summary{ list-style:none; cursor:pointer; padding:1.1rem 1.2rem; font-weight:700; position:relative; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"+"; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--brand-blue); font-size:1.25rem; font-weight:800; } .faq-item[open] summary::after{content:"–"} .faq-item p{ margin:0; padding:0 1.2rem 1.2rem; color:#59626d; } .footer{ background:var(--ink); color:#fff; padding:2rem 0; } .footer-inner{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; } .footer small{opacity:.8} .whatsapp-float{ position:fixed; right:18px; bottom:18px; z-index:999; background:#1fad5a; color:#fff; padding:.95rem 1.1rem; border-radius:999px; font-weight:700; box-shadow:0 18px 35px rgba(31,173,90,.25); } .whatsapp-float:hover{transform:translateY(-1px)} @keyframes cardSlideIn{ from{opacity:0; transform:translateX(-28px) translateY(6px)} to{opacity:1; transform:translateX(0) translateY(0)} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .hero-card{animation:none} .btn, .whatsapp-float{transition:none} } @media (max-width: 980px){
.stats{grid-template-columns:1fr;}
.hero-grid, .about-grid, .quote-wrap, .cards, .contact-grid, .highlights{ grid-template-columns:1fr; } .hero-card{max-width:100%} .stats{grid-template-columns:1fr 1fr} .form-grid{grid-template-columns:1fr} .field.full{grid-column:auto} .main-nav-inner{flex-wrap:wrap} .nav-toggle{display:inline-flex} .main-nav-menu{ width:100%; display:none; flex-direction:column; align-items:flex-start; padding:.35rem 0 .4rem; } .main-nav-menu.open{display:flex} } @media (max-width: 640px){ .hero{padding:3.4rem 0 2.8rem} .top-bar-inner, .footer-inner{flex-direction:column; align-items:flex-start} .stats{grid-template-columns:1fr} .hero h1{font-size:clamp(2rem, 11vw, 3rem)} .whatsapp-float{ right:12px; bottom:12px; padding:.88rem 1rem; } }
.map-wrap{
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow);
background:#fff;
margin-top:1.5rem;
}
.gallery-section{background:linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%)}
.gallery-intro{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap;}
.gallery-intro p{max-width:64ch; margin:.35rem 0 0; color:#4f5964;}
.gallery-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem;}
.gallery-item{position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--line); background:var(--white); box-shadow:0 10px 26px rgba(29,29,33,.08); cursor:pointer; isolation:isolate; aspect-ratio:1/1; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;}
.gallery-item::after{content:"Pogledaj"; position:absolute; right:1rem; bottom:1rem; background:rgba(29,29,33,.78); color:var(--white); padding:.45rem .7rem; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.02em; transform:translateY(10px); opacity:0; transition:transform .25s ease, opacity .25s ease;}
.gallery-item:hover,.gallery-item:focus-visible{transform:translateY(-4px); box-shadow:0 18px 38px rgba(29,29,33,.14); border-color:rgba(5,141,210,.35);}
.gallery-item:hover::after,.gallery-item:focus-visible::after{transform:translateY(0); opacity:1;}
.gallery-item img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .45s ease;}
.gallery-item:hover img,.gallery-item:focus-visible img{transform:scale(1.08);}
.lightbox{position:fixed; inset:0; display:none; place-items:center; background:rgba(8,16,24,.82); padding:1rem; z-index:2000;}
.lightbox.open{display:grid;}
.lightbox-dialog{position:relative; width:min(1100px, 100%); max-height:92vh; background:transparent;}
.lightbox-image{width:100%; max-height:82vh; object-fit:contain; border-radius:22px; box-shadow:0 28px 60px rgba(0,0,0,.3); background:#fff; position:relative; z-index:1;}
.lightbox-close{position:absolute; top:.75rem; right:.75rem; width:46px; height:46px; border:none; border-radius:999px; background:rgba(255,255,255,.94); color:#1d1d21; font-size:1.5rem; font-weight:700; cursor:pointer; box-shadow:0 12px 28px rgba(0,0,0,.18); z-index:4;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none; border-radius:999px; background:rgba(255,255,255,.94); color:#1d1d21; font-size:2rem; line-height:1; cursor:pointer; box-shadow:0 12px 28px rgba(0,0,0,.18); display:grid; place-items:center; transition:transform .2s ease, box-shadow .2s ease; z-index:3;}
.lightbox-nav:hover,.lightbox-nav:focus-visible,.lightbox-close:hover,.lightbox-close:focus-visible{transform:translateY(-50%) scale(1.04); box-shadow:0 18px 36px rgba(0,0,0,.24);}
.lightbox-close:hover,.lightbox-close:focus-visible{transform:scale(1.04);}
.lightbox-prev{left:.75rem;}.lightbox-next{right:.75rem;}@media (max-width:1024px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:768px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.gallery-grid{grid-template-columns:1fr;}.gallery-item{border-radius:18px;}}.lightbox-nav:hover,.lightbox-nav:focus-visible,.lightbox-close:hover,.lightbox-close:focus-visible{background:#fff;}@media (max-width: 640px){.lightbox-nav{width:44px; height:44px; font-size:1.7rem;}.lightbox-prev{left:.4rem;}.lightbox-next{right:.4rem;}}
@media (max-width: 920px){.gallery-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width: 640px){.gallery-grid{grid-template-columns:1fr;}}
@media (max-width:480px){.gallery-grid{grid-template-columns:1fr;}}
.top-pill a{color:inherit}
.top-pill a:hover,.top-pill a:focus-visible{text-decoration:underline}
.contact-item a{color:inherit}
.contact-item a:hover,.contact-item a:focus-visible{text-decoration:underline}
.contact-item-social{
background:linear-gradient(180deg,#f7fbff 0%, #eef7ff 100%);
border-color:rgba(5,141,210,.18);
box-shadow:0 14px 34px rgba(5,141,210,.08);
}
.contact-item-social strong{
margin-bottom:.45rem;
}
.contact-item-social .social-copy{
color:#59626d;
line-height:1.55;
margin-bottom:1rem;
max-width:26ch;
}
.social-links{
display:flex;
align-items:center;
gap:.55rem;
margin-top:.15rem;
flex-wrap:wrap;
}
.social-links a{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:16px;
background:#fff;
border:1px solid rgba(5,141,210,.12);
box-shadow:0 8px 18px rgba(16,24,40,.06);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.social-links a:hover,
.social-links a:focus-visible{
transform:translateY(-3px) scale(1.05);
box-shadow:0 12px 24px rgba(5,141,210,.14);
text-decoration:none;
}
/* brand colors */
.social-links a[href*="facebook"]:hover{background:#1877f2;border-color:#1877f2;}
.social-links a[href*="instagram"]:hover{background:#e4405f;border-color:#e4405f;}
.social-links a[href*="wa.me"]:hover{background:#25d366;border-color:#25d366;}
/* make icons white on hover */
.social-links a:hover svg{
fill:#fff;
}
.social-links svg{
width:26px;
height:26px;
}
.social-links a:hover,
.social-links a:focus-visible{
transform:translateY(-2px);
border-color:rgba(5,141,210,.35);
box-shadow:0 14px 28px rgba(5,141,210,.16);
text-decoration:none;
}
.social-links svg{
width:26px;
height:26px;
}
@media (max-width:640px){
.contact-item-social .social-copy{max-width:none;}
.social-links{gap:.5rem;}
.social-links a{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:16px;
background:#fff;
border:1px solid rgba(5,141,210,.12);
box-shadow:0 8px 18px rgba(16,24,40,.06);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.social-links a:hover,
.social-links a:focus-visible{
transform:translateY(-3px) scale(1.05);
box-shadow:0 12px 24px rgba(5,141,210,.14);
text-decoration:none;
}
/* brand colors */
.social-links a[href*="facebook"]:hover{background:#1877f2;border-color:#1877f2;}
.social-links a[href*="instagram"]:hover{background:#e4405f;border-color:#e4405f;}
.social-links a[href*="wa.me"]:hover{background:#25d366;border-color:#25d366;}
/* make icons white on hover */
.social-links a:hover svg{
fill:#fff;
}
.social-links svg{
width:26px;
height:26px;
}
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.brand-title{
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 1px;
}
@media (min-width:768px){
.brand-title{font-size:2.2rem;}
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.navbar, nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.brand-title {
font-size: 2.2rem !important;
font-weight: 800 !important;
line-height: 1;
}
nav ul, .nav-links {
display: flex;
align-items: center;
gap: 20px;
}
nav ul li a, .nav-links a {
font-size: 1rem;
display: flex;
align-items: center;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.brand-title{
font-size:2.2rem !important;
font-weight:800 !important;
letter-spacing:1.5px;
position:relative;
display:inline-block;
}
.brand-title::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:100%;
height:3px;
background:linear-gradient(90deg,#007bff,#00c6ff);
border-radius:2px;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Bigger nav items */
.nav-links a, nav ul li a{
font-size:1.15rem;
font-weight:500;
}
/* Kontakt button hover fix */
.nav-links a[href*="kontakt"],
nav ul li a[href*="kontakt"]{
padding:8px 16px;
border-radius:6px;
background:transparent;
transition:all .25s ease;
}
.nav-links a[href*="kontakt"]:hover,
nav ul li a[href*="kontakt"]:hover{
background:var(--brand-blue-dark);
color:var(--white) !important;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* FORCE bigger nav items */
nav a, .nav-links a {
font-size: 1.25rem !important;
font-weight: 600 !important;
}
/* KONTAKT button - force styling */
a[href*="kontakt"] {
padding: 10px 18px !important;
border-radius: 8px !important;
transition: all 0.25s ease !important;
}
a[href*="kontakt"]:hover {
background: var(--brand-blue-dark) !important;
color: #ffffff !important;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Bigger navbar items */
header nav a,
nav a,
.nav-links a,
.navbar a,
.menu a{
font-size: 1.25rem !important;
font-weight: 600 !important;
}
/* Force Kontakt hover by href, class, or last nav item */
header nav a[href*="kontakt"],
header nav a[href*="contact"],
nav a[href*="kontakt"],
nav a[href*="contact"],
.nav-links a[href*="kontakt"],
.nav-links a[href*="contact"],
.navbar a[href*="kontakt"],
.navbar a[href*="contact"],
.menu a[href*="kontakt"],
.menu a[href*="contact"]{
transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
/* Hover/focus state */
header nav a[href*="kontakt"]:hover,
header nav a[href*="kontakt"]:focus-visible,
header nav a[href*="contact"]:hover,
header nav a[href*="contact"]:focus-visible,
nav a[href*="kontakt"]:hover,
nav a[href*="kontakt"]:focus-visible,
nav a[href*="contact"]:hover,
nav a[href*="contact"]:focus-visible,
.nav-links a[href*="kontakt"]:hover,
.nav-links a[href*="kontakt"]:focus-visible,
.nav-links a[href*="contact"]:hover,
.nav-links a[href*="contact"]:focus-visible,
.navbar a[href*="kontakt"]:hover,
.navbar a[href*="kontakt"]:focus-visible,
.navbar a[href*="contact"]:hover,
.navbar a[href*="contact"]:focus-visible,
.menu a[href*="kontakt"]:hover,
.menu a[href*="kontakt"]:focus-visible,
.menu a[href*="contact"]:hover,
.menu a[href*="contact"]:focus-visible{
background: var(--brand-blue-dark) !important;
color: #ffffff !important;
border-color: var(--brand-blue-dark) !important;
}
/* If Kontakt is styled as button */
header nav .btn:hover,
header nav .button:hover,
header nav .kontakt:hover,
header nav .contact:hover,
nav .btn:hover,
nav .button:hover,
nav .kontakt:hover,
nav .contact:hover,
.nav-links .btn:hover,
.nav-links .button:hover,
.nav-links .kontakt:hover,
.nav-links .contact:hover{
color: #ffffff !important;
}
/* Fallback: last nav item is usually Kontakt */
header nav ul li:last-child a:hover,
header nav ul li:last-child a:focus-visible,
nav ul li:last-child a:hover,
nav ul li:last-child a:focus-visible,
.nav-links a:last-child:hover,
.nav-links a:last-child:focus-visible{
background: var(--brand-blue-dark) !important;
color: #ffffff !important;
border-color: var(--brand-blue-dark) !important;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* FIX gallery image spacing + proportions */
.gallery-item{
aspect-ratio:1/1 !important;
overflow:hidden !important;
border-radius:12px;
}
.gallery-item img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block;
}
/* ensure equal padding visually */
.gallery-grid{
gap:20px !important;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Visible gallery sizing fix */
#gallery .gallery-grid,
.gallery-section .gallery-grid,
.gallery-grid{
display:grid !important;
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
gap:20px !important;
}
#gallery .gallery-item,
.gallery-section .gallery-item,
.gallery-grid .gallery-item{
position:relative !important;
width:100% !important;
aspect-ratio:1 / 1 !important;
overflow:hidden !important;
border-radius:18px !important;
box-sizing:border-box !important;
}
#gallery .gallery-item img,
.gallery-section .gallery-item img,
.gallery-grid .gallery-item img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:cover !important;
object-position:center center !important;
display:block !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
transform:none !important;
}
/* Keep hover effect while preserving fit */
#gallery .gallery-item:hover img,
.gallery-section .gallery-item:hover img,
.gallery-grid .gallery-item:hover img{
transform:scale(1.06) !important;
transition:transform .35s ease !important;
}
@media (max-width: 1024px){
#gallery .gallery-grid,
.gallery-section .gallery-grid,
.gallery-grid{
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px){
#gallery .gallery-grid,
.gallery-section .gallery-grid,
.gallery-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 480px){
#gallery .gallery-grid,
.gallery-section .gallery-grid,
.gallery-grid{
grid-template-columns:1fr !important;
}
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Nav items size */
nav a,
.nav-links a,
.navbar a{
font-size: 1rem !important;
font-weight: 500 !important;
}
/* Kontakt button hover = same blue */
a[href*="kontakt"]:hover,
a[href*="contact"]:hover{
background: var(--brand-blue-dark) !important;
color: #ffffff !important;
border-color: var(--brand-blue-dark) !important;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Bold nav items */
nav a,
.nav-links a,
.navbar a{
font-size: 1rem !important;
font-weight: 700 !important;
}
/* Force Kontakt button hover EXACT blue */
a[href*="kontakt"],
a[href*="contact"]{
border: 1px solid transparent !important;
}
a[href*="kontakt"]:hover,
a[href*="kontakt"]:focus,
a[href*="contact"]:hover,
a[href*="contact"]:focus{
background-color: var(--brand-blue-dark) !important;
color: #ffffff !important;
border-color: var(--brand-blue-dark) !important;
box-shadow: none !important;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Navbar items: 1rem + bold */
.main-nav a,
.main-nav-links a,
.main-nav .btn,
.main-nav .btn-nav{
font-size: 1rem !important;
font-weight: 700 !important;
}
/* Kontakt button uses the site's real blue palette */
.main-nav .btn-nav,
.main-nav a.btn-nav,
.main-nav a[href*="kontakt"],
.main-nav a[href*="contact"]{
background: var(--brand-blue) !important;
color: var(--white) !important;
border: none !important;
box-shadow: 0 10px 22px rgba(5,141,210,.16) !important;
}
/* Hover matches the rest of the page buttons */
.main-nav .btn-nav:hover,
.main-nav .btn-nav:focus-visible,
.main-nav a.btn-nav:hover,
.main-nav a.btn-nav:focus-visible,
.main-nav a[href*="kontakt"]:hover,
.main-nav a[href*="kontakt"]:focus-visible,
.main-nav a[href*="contact"]:hover,
.main-nav a[href*="contact"]:focus-visible{
background: var(--brand-blue-dark) !important;
color: var(--white) !important;
border: none !important;
box-shadow: 0 12px 26px rgba(5,141,210,.22) !important;
}
.offer-list{
list-style:none;
padding:0;
margin-top:1rem;
}
.offer-list li{
position:relative;
padding-left:1.6rem;
margin-bottom:.5rem;
line-height:1.5;
}
.offer-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:8px;
height:8px;
border-radius:50%;
background:#058dd2;
opacity:.7;
}
.offer-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
}
.offer-list .icon{
display:inline-flex;
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
color:#058dd2;
}
.offer-list .icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.contact-form ul{
list-style:none;
padding:0;
}
.contact-form ul li{
display:flex;
align-items:center;
gap:.6rem;
background:#e6f0f6;
border-radius:12px;
padding:.75rem 1rem;
margin-bottom:.6rem;
font-weight:500;
}
.contact-form .li-icon{
width:18px;
height:18px;
display:inline-block;
position:relative;
}
.contact-form .li-icon::before{
content:"";
position:absolute;
inset:0;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#058dd2;
}
.contact-form li:nth-child(2) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.contact-form li:nth-child(3) .li-icon::before{
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}