:root {
--color-primary: #bbff00;
--color-secondary: #111111;
--color-background: #f5f5f5;
--color-text: #111111;
--color-accent: #bbff00;
--color-header-bg: #111111;
--color-footer-bg: #111111;
--font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
line-height: 1.6;
color: var(--color-text);
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* Site header & nav */
.site-header {
background: var(--color-header-bg, #000);
color: #fff;
position: relative;
z-index: 100;
overflow: visible;
}
.site-header a { color: #fff; text-decoration: none; }
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
max-width: 1400px;
margin: 0 auto;
position: sticky;
top: 0;
background: var(--color-header-bg, #000);
z-index: 100;
}
.navbar-brand {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
letter-spacing: 2px;
color: #fff;
text-decoration: none;
}
.navbar-brand img { height: 48px; width: auto; object-fit: contain; }
.navbar-nav { display: flex; gap: 32px; list-style: none; align-items: center; }
.navbar-nav a {
font-size: 13px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
opacity: 0.9;
transition: opacity 0.2s;
position: relative;
}
.navbar-nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1.5px;
background: #fff;
transition: width 0.25s ease;
}
.navbar-nav a:hover { opacity: 1; }
.navbar-nav a:hover::after { width: 100%; }
.navbar-nav a.active { opacity: 1; font-weight: 600; }
.navbar-nav a.active::after { width: 100%; }
/* Hamburger button */
.navbar-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 1001;
-webkit-tap-highlight-color: transparent;
}
.navbar-toggle span {
display: block;
width: 24px;
height: 2.5px;
background: #fff;
margin: 5px 0;
transition: transform 0.3s ease, opacity 0.3s ease;
border-radius: 2px;
}
.navbar-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.navbar-toggle.active span:nth-child(2) { opacity: 0; }
.navbar-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Announcement bar */
.announcement-bar { background: #dc2626; color: #fff; text-align: center; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
/* Mobile nav */
@media (max-width: 768px) {
.navbar { flex-wrap: nowrap; position: sticky; padding: 10px 16px; }
.navbar-brand { font-size: 17px; }
.navbar-brand img { height: 38px; }
.navbar-toggle { display: block; }
.navbar-nav {
display: flex;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: #000;
padding: 12px 20px 20px;
gap: 0;
border-top: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
z-index: 1000;
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.navbar-nav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.navbar-nav li { width: 100%; }
.navbar-nav a {
display: block;
padding: 12px 0;
font-size: 15px;
border-bottom: 1px solid rgba(255,255,255,0.06);
opacity: 0.9;
}
.navbar-nav a::after { display: none; }
.navbar-nav li:last-child a { border-bottom: none; }
.navbar-cta {
margin-top: 8px;
display: inline-block;
width: 100%;
text-align: center;
box-sizing: border-box;
}
}
/* Hero */
.block-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
}
.block-hero video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.block-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.85);
}
.block-hero .hero-overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0.35);
z-index: 1;
}
.block-hero .hero-content {
position: relative; z-index: 2;
max-width: 860px; padding: 48px 28px;
}
.block-hero h1 {
font-family: var(--font-heading);
font-size: clamp(36px, 5vw, 64px);
margin-bottom: 20px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.block-hero p {
font-size: clamp(16px, 2vw, 22px);
opacity: 0.95; max-width: 600px; margin: 0 auto 36px;
line-height: 1.5;
}
.block-hero .cta {
display: inline-block;
background: #fff;
color: #000;
padding: 16px 40px;
font-size: 13px; font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
}
.block-hero .cta:hover {
background: #000;
color: #fff;
}
.block-hero-badge {
display: inline-block;
background: rgba(255,255,255,0.15);
color: #fff;
padding: 8px 22px;
border-radius: 100px;
font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 26px;
border: 1px solid rgba(255,255,255,0.2);
}
.block-hero.hero-compact { min-height: auto; padding: 48px 0; }
.block-hero.hero-compact .hero-overlay { background: rgba(0,0,0,0.5); }
/* Header section */
.block-header { padding: 80px 0 40px; }
.block-header h2 {
font-family: var(--font-heading);
font-size: clamp(32px, 3.5vw, 46px);
color: var(--color-secondary);
letter-spacing: -0.3px;
}
.block-header p { font-size: 18px; color: #64748b; margin-top: 16px; max-width: 640px; line-height: 1.65; }
/* Text */
.block-text { padding: 56px 0; }
.block-text p { margin-bottom: 20px; font-size: 17px; line-height: 1.85; color: #374151; }
.block-text h2, .block-text h3 { margin: 32px 0 12px; line-height: 1.3; }
.block-text h2 { font-size: 26px; }
.block-text h3 { font-size: 21px; }
.block-text h2:first-child, .block-text h3:first-child { margin-top: 0; }
.block-text ul, .block-text ol { margin: 0 0 20px 26px; font-size: 17px; line-height: 1.85; color: #374151; }
.block-text ul { list-style: disc; }
.block-text ol { list-style: decimal; }
.block-text li { margin-bottom: 6px; }
.block-text blockquote { margin: 24px 0; padding: 8px 20px; border-left: 4px solid #0E8C8C; background: #f8fbfa; font-style: italic; }
.block-text a { color: #0E8C8C; text-decoration: underline; }
.block-text img { max-width: 100%; height: auto; border-radius: 12px; }
/* About */
.block-about { padding: 80px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
.about-text h2 {
font-family: var(--font-heading);
font-size: clamp(32px, 3.5vw, 46px);
color: var(--color-secondary);
margin-bottom: 26px;
letter-spacing: -0.3px;
}
.about-text p { font-size: 17px; line-height: 1.85; margin-bottom: 20px; color: #4b5563; }
.about-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-images img { width: 100%; height: 200px; object-fit: cover; border-radius: 16px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.about-images img:hover { transform: scale(1.03); }
.about-images img:first-child { grid-column: span 2; height: 260px; }
.about-stats { display: flex; gap: 48px; margin-top: 40px; }
.about-stat { text-align: center; padding: 20px 28px; background: #f8fafc; border-radius: 14px; border: 1px solid rgba(0,0,0,0.04); }
.about-stat-number {
font-family: var(--font-heading);
font-size: 48px; font-weight: 700;
color: var(--color-primary);
line-height: 1;
}
.about-stat-label { font-size: 14px; color: #6b7280; margin-top: 8px; font-weight: 500; }
/* Activities */
.block-activities { padding: 80px 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
.activities-intro { text-align: center; margin-bottom: 64px; }
.activities-intro h2 {
font-family: var(--font-heading);
font-size: clamp(32px, 3.5vw, 46px);
color: var(--color-secondary);
margin-bottom: 16px;
letter-spacing: -0.3px;
}
.activities-intro p { font-size: 18px; color: #64748b; max-width: 600px; margin: 0 auto; line-height: 1.6; }
.activities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.activity-card {
background: #fff;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 20px;
padding: 40px 32px;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
position: relative;
}
.activity-card::before {
content: '';
position: absolute; top: 0; left: 20px; right: 20px; height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
border-radius: 0 0 4px 4px;
opacity: 0;
transition: opacity 0.3s, top 0.3s;
}
.activity-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,0.08); }
.activity-card:hover::before { opacity: 1; top: -3px; }
.activity-icon {
width: 56px; height: 56px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: #fff;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 700;
margin-bottom: 22px;
box-shadow: 0 6px 16px rgba(220,38,38,0.2);
}
.activity-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--color-secondary); }
.activity-card p { font-size: 15.5px; color: #6b7280; line-height: 1.7; }
/* Gallery */
.block-gallery { padding: 80px 0; }
.block-gallery h2 {
font-family: var(--font-heading);
font-size: clamp(32px, 3.5vw, 46px);
color: var(--color-secondary);
text-align: center;
margin-bottom: 52px;
letter-spacing: -0.3px;
}}
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-grid img { width: 100%; height: 210px; object-fit: cover; border-radius: 12px; transition: transform 0.35s, box-shadow 0.35s; cursor: pointer; }
.gallery-grid img:hover { transform: scale(1.04); box-shadow: 0 12px 28px rgba(0,0,0,0.15); z-index: 2; position: relative; }
.gallery-grid img:nth-child(3) { grid-row: span 2; height: 100%; }
/* Campaigns */
.block-campaigns { padding: 70px 0; background: #f8fafc; }
.block-campaigns h2 {
font-family: var(--font-heading);
font-size: clamp(30px, 3.2vw, 42px);
color: var(--color-secondary);
text-align: center;
margin-bottom: 44px;
}
.campaigns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.campaign-card { position: relative; border-radius: 18px; overflow: hidden; height: 300px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; }
.campaign-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
.campaign-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.campaign-card:hover img { transform: scale(1.05); }
.campaign-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
display: flex; align-items: flex-end; padding: 28px;
transition: background 0.3s;
}
.campaign-card:hover .campaign-card-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, transparent 100%); }
.campaign-card h3 { color: #fff; font-size: 21px; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
/* News */
.block-news { padding: 70px 0; }
.news-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; }
.news-header h2 {
font-family: var(--font-heading);
font-size: clamp(30px, 3.2vw, 42px);
color: var(--color-secondary);
}
.news-header .badge {
background: var(--color-accent);
color: var(--color-secondary);
padding: 5px 14px;
border-radius: 6px;
font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
display: inline-block;
margin-bottom: 10px;
}
.news-header .view-all {
color: var(--color-primary);
font-weight: 600; font-size: 14px; text-decoration: none;
transition: color 0.2s;
}
.news-header .view-all:hover { color: var(--color-secondary); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.news-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 18px;
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s;
}
.news-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); }
.news-card-image { height: 200px; background: #f3f4f6; overflow: hidden; }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.news-card:hover .news-card-image img { transform: scale(1.06); }
.news-card-content { padding: 26px; }
.news-card-meta { display: flex; gap: 14px; margin-bottom: 14px; font-size: 12px; }
.news-card-meta .category { color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.news-card-meta .date { color: #9ca3af; font-weight: 500; }
.news-card h3 { font-size: 18px; font-weight: 600; color: var(--color-secondary); margin-bottom: 10px; line-height: 1.4; }
.news-card p { font-size: 14.5px; color: #6b7280; line-height: 1.65; margin-bottom: 14px; }
.news-card .read-more { color: var(--color-primary); font-weight: 600; font-size: 14px; text-decoration: none; transition: color 0.2s; }
.news-card .read-more:hover { color: var(--color-secondary); }
/* CTA Banner */
.block-cta-banner {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: #fff;
padding: 90px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
.block-cta-banner::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.4;
pointer-events: none;
}
.block-cta-banner h2 {
font-family: var(--font-heading);
font-size: clamp(30px, 3.5vw, 46px);
margin-bottom: 18px;
position: relative;
}
.block-cta-banner p { font-size: 19px; opacity: 0.95; max-width: 640px; margin: 0 auto 32px; line-height: 1.55; position: relative; }
.block-cta-banner .cta {
display: inline-block;
background: #fff;
color: var(--color-primary);
padding: 16px 40px;
border-radius: 10px;
text-decoration: none;
font-weight: 600; font-size: 16px;
transition: transform 0.25s, box-shadow 0.25s;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
position: relative;
}
.block-cta-banner .cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
/* Slideshow */
.block-slideshow { position: relative; overflow: hidden; }
.slideshow-track { position: relative; height: 100%; }
.slideshow-slide {
position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease-in-out;
display: flex; align-items: center; justify-content: center; text-align: center;
}
.slideshow-slide.active { opacity: 1; z-index: 2; }
.slideshow-slide-bg {
position: absolute; inset: 0; background-size: cover; background-position: center;
transform: scale(1.05); transition: transform 6s ease-out;
}
.slideshow-slide.active .slideshow-slide-bg { transform: scale(1.12); }
.slideshow-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%); }
.slideshow-slide-content {
position: relative; z-index: 3; max-width: 800px; padding: 0 32px;
color: #fff; text-align: center;
}
.slideshow-slide-content h2 {
font-family: var(--font-heading);
font-size: 48px; font-weight: 800; line-height: 1.1; margin-bottom: 16px;
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.slideshow-slide-content p {
font-size: 20px; opacity: 0.95; margin-bottom: 28px; max-width: 600px;
margin-left: auto; margin-right: auto; line-height: 1.5;
text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
.slideshow-slide-content .cta {
display: inline-block; padding: 14px 40px; border-radius: 0; font-weight: 700;
font-size: 14px; text-transform: uppercase; letter-spacing: 2px;
background: var(--color-primary); color: #fff !important; text-decoration: none;
transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.slideshow-slide-content .cta:hover {
transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.slideshow-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
width: 48px; height: 48px; border-radius: 50%; border: none;
background: rgba(0,0,0,0.4); color: #fff; cursor: pointer; font-size: 24px;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, transform 0.2s;
}
.slideshow-arrow:hover { background: rgba(0,0,0,0.7); transform: translateY(-50%) scale(1.1); }
.slideshow-arrow.prev { left: 20px; }
.slideshow-arrow.next { right: 20px; }
.slideshow-dots {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
z-index: 10; display: flex; gap: 10px;
}
.slideshow-dot {
width: 12px; height: 12px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(255,255,255,0.4); transition: background 0.3s, transform 0.3s;
padding: 0;
}
.slideshow-dot.active { background: #fff; transform: scale(1.3); }
@media (max-width: 768px) {
.slideshow-slide-content h2 { font-size: 30px; }
.slideshow-slide-content p { font-size: 16px; }
.slideshow-arrow { width: 36px; height: 36px; font-size: 18px; }
.slideshow-arrow.prev { left: 10px; }
.slideshow-arrow.next { right: 10px; }
}
@media (max-width: 480px) {
.slideshow-slide-content h2 { font-size: 24px; }
.slideshow-slide-content .cta { padding: 12px 28px; font-size: 12px; }
.slideshow-dots { bottom: 12px; gap: 6px; }
.slideshow-dot { width: 8px; height: 8px; }
}
/* Features (legacy) */
.block-features { padding: 70px 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.feature-card { background: #f8fafc; padding: 28px; border-radius: 14px; border: 1px solid #e5e7eb; transition: box-shadow 0.2s; }
.feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.feature-card h3 { font-size: 20px; margin-bottom: 10px; color: var(--color-secondary); }
.feature-card p { color: #64748b; line-height: 1.65; }
/* About */
.block-about { background: #0a0a0a; color: #fff; padding: 90px 0; position: relative; overflow: hidden; }
.block-about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }
.about-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text .about-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--color-secondary, #d4a017); margin-bottom: 20px; padding: 6px 16px; border: 1px solid rgba(212,160,23,0.3); border-radius: 4px; }
.about-text h2 { font-size: 42px; font-weight: 300; line-height: 1.2; margin-bottom: 24px; letter-spacing: -0.5px; }
.about-text h2 strong { font-weight: 700; }
.about-text p { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.7); margin-bottom: 18px; }
.about-highlights { list-style: none; padding: 0; margin: 28px 0; }
.about-highlights li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.about-highlights li::before { content: '✓'; color: var(--color-secondary, #d4a017); font-weight: 700; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.about-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 14px 32px; background: var(--color-secondary, #d4a017); color: #000; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; border-radius: 4px; transition: transform 0.2s, box-shadow 0.2s; }
.about-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,0.3); }
.about-images { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-img-main { grid-column: 1 / -1; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.about-img-sub { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.about-stats { display: flex; gap: 40px; margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); }
.about-stat .num { font-size: 36px; font-weight: 700; color: var(--color-secondary, #d4a017); }
.about-stat .label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 4px; }
@media (max-width: 968px) {
.about-container { grid-template-columns: 1fr; gap: 40px; }
.about-text h2 { font-size: 32px; }
.block-about { padding: 60px 0; }
.about-stats { gap: 24px; }
}
/* Image */
.block-image { padding: 48px 0; text-align: center; }
.block-image img { max-width: 100%; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
/* Spacer */
.block-spacer { height: 48px; }
/* HTML */
.block-html { padding: 48px 0; }
/* Interactive Map */
.block-interactive-map { padding: 32px 0; }
.block-interactive-map .imap-w { max-width: 100%; margin: 0 auto; }
.block-interactive-map .imap-w .leaflet-container { font: inherit; border-radius: 12px; }
.imap-pop { text-align: center; padding: 4px; }
.imap-pop-img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.imap-pop-title { display: block; font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.imap-pop-desc { font-size: 13px; color: #64748b; line-height: 1.5; margin: 0 0 8px; }
.imap-pop-link { display: inline-block; font-size: 13px; font-weight: 600; color: #2563eb; text-decoration: none; }
.imap-pop-link:hover { text-decoration: underline; }
/* Site footer */
.site-footer { background: #000; color: #fff; padding: 60px 0 30px; }
.footer-content { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-brand { font-size: 20px; font-weight: 700; letter-spacing: 2px; margin-bottom: 16px; }
.footer-desc { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 38px; height: 38px; background: rgba(255,255,255,0.1); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.footer-social a:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.footer-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; color: #fff; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 24px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 40px; }
/* Language switcher */
.lang-switcher { display: flex; gap: 8px; align-items: center; padding: 8px 24px; max-width: 1200px; margin: 0 auto; justify-content: flex-end; }
.lang-item { font-size: 13px; text-decoration: none; color: rgba(255,255,255,0.6); padding: 5px 10px; border-radius: 6px; transition: all 0.2s; }
.lang-item:hover { color: #fff; background: rgba(255,255,255,0.1); }
.lang-item.lang-active { color: #fff; background: rgba(255,255,255,0.2); font-weight: 600; }
/* Mobile responsive */
@media (max-width: 768px) {
.block-hero { min-height: 70vh; }
.block-hero .hero-content { padding: 32px 20px; }
.block-hero .cta { padding: 14px 28px; font-size: 12px; }
.block-header { padding: 48px 0 24px; }
.block-text { padding: 36px 0; }
.about-images { grid-template-columns: 1fr; }
.about-images img:first-child { grid-column: span 1; height: 200px; }
.about-stats { flex-wrap: wrap; gap: 12px; justify-content: center; }
.about-stat { flex: 1 1 calc(50% - 12px); min-width: 120px; padding: 16px 12px; }
.about-stat-number { font-size: 36px; }
.activities-grid { grid-template-columns: 1fr; gap: 20px; }
.activity-card { padding: 28px 20px; }
.gallery-grid img { height: 160px; }
.gallery-grid img:nth-child(3) { grid-row: span 1; height: 160px; }
.campaigns-grid { grid-template-columns: 1fr !important; }
.campaign-card { height: 220px; }
.news-header { flex-direction: column; align-items: flex-start; gap: 12px; }
.news-grid { grid-template-columns: 1fr !important; }
.news-card-image { height: 160px; }
.block-cta-banner { padding: 56px 20px; }
.block-cta-banner .cta { padding: 14px 28px; font-size: 14px; }
.block-features { padding: 48px 0; }
.features-grid { grid-template-columns: 1fr; gap: 16px; }
.block-contact { padding: 48px 0; }
.lang-switcher { padding: 6px 16px; }
.lang-item { font-size: 11px; padding: 4px 7px; }
.container { padding: 0 16px; }
}
@media (max-width: 480px) {
.block-hero { min-height: 60vh; }
.block-hero h1 { font-size: 28px; }
.navbar-brand img { height: 32px; }
.about-stat { flex: 1 1 100%; }
.footer-grid { grid-template-columns: 1fr; }
}
/* Subtle section divider */
section + section { position: relative; }
/* Product grid */
.block-products { padding: 64px 0; }
.products-heading { font-family: var(--font-heading); font-size: 32px; text-align: center; margin-bottom: 40px; color: var(--color-text); }
.products-grid { display: grid; gap: 16px; }
.product-card { transition: transform 0.3s; }
.product-card:hover { transform: translateY(-4px); }
.product-image-wrap { display: block; position: relative; border: 1px solid #e5e7eb; border-radius: 0; overflow: hidden; background: #f5f5f5; aspect-ratio: 3/4; }
.product-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.product-card:hover .product-image-wrap img { transform: scale(1.03); }
.product-badge { position: absolute; top: 12px; left: 12px; background: #e53935; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; }
.product-badge-out { background: #4b5563; }
.product-badge[hidden] { display: none !important; }
.product-no-image { width: 100%; height: 100%; background: linear-gradient(135deg, #f0f0f0, #e0e0e0); }
.product-info { padding: 12px 0; }
.product-name { font-size: 14px; font-weight: 400; margin-bottom: 4px; line-height: 1.3; }
.product-name a { color: var(--color-text); text-decoration: none; }
.product-name a:hover { color: var(--color-primary); }
.product-listing-category { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.product-listing-desc { font-size: 13px; color: #6b7280; line-height: 1.4; margin-bottom: 6px; }
.product-rich-text ul, .product-rich-text ol { padding-left: 1.4em; margin: 0 0 1em; }
.product-rich-text p { margin: 0 0 1em; }
.product-rich-text hr { border: 0; border-top: 1px solid #ddd; margin: 1.5em 0; }
.product-price-wrap { font-size: 14px; }
.product-price { font-weight: 600; }
.product-price-compare { text-decoration: line-through; color: #999; margin-right: 8px; }
.product-price-sale { font-weight: 700; color: #e53935; }
.products-viewall { text-align: center; margin-top: 40px; }
/* Build-time pagination (news categories, products, product categories) */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: var(--color-text); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; }
a.pagination-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; cursor: default; }
.pagination-disabled { color: #c0c4cc; cursor: default; background: #fafafa; }
.pagination-ellipsis { color: #9ca3af; padding: 0 2px; }
@media (max-width: 768px) {
.pagination { gap: 6px; }
.pagination-link { min-width: 36px; height: 36px; font-size: 13px; padding: 0 10px; }
}
.btn-outline { display: inline-block; padding: 12px 32px; border: 2px solid var(--color-text); color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 8px; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.5px; }
.btn-outline:hover { background: var(--color-text); color: #fff; }
@media (max-width: 768px) {
.products-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Product detail page */
.product-breadcrumb { padding: 16px 0; font-size: 14px; color: #64748b; }
.product-breadcrumb a { color: #64748b; text-decoration: none; }
.product-breadcrumb a:hover { color: var(--color-primary); }
.product-breadcrumb-sep { margin: 0 8px; }
.product-breadcrumb-current { color: var(--color-text); font-weight: 500; }
.block-product-detail { padding: 40px 0 80px; }
.product-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.product-gallery { display: flex; flex-direction: column; gap: 12px; }
.product-gallery-main { border: 1px solid #e5e7eb; overflow: hidden; background: #f5f5f5; border-radius: 8px; }
.product-gallery-main img { width: 100%; height: auto; max-height: 500px; object-fit: contain; display: block; }
.product-gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.product-gallery-thumb { width: 72px; height: 72px; border: 2px solid #e5e7eb; border-radius: 6px; overflow: hidden; cursor: pointer; transition: border-color 0.2s; }
.product-gallery-thumb.active { border-color: var(--color-primary); }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-no-image-large { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #f0f0f0, #e0e0e0); border-radius: 8px; }
.product-detail-title { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 42px); font-weight: 700; margin-bottom: 16px; color: var(--color-text); line-height: 1.2; }
.product-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.product-category-tag { display: inline-block; background: #f1f5f9; color: #475569; font-size: 13px; padding: 4px 12px; border-radius: 20px; }
.product-short-description { font-size: 16px; color: #64748b; margin-bottom: 20px; line-height: 1.6; }
.product-detail-price { margin-bottom: 16px; font-size: 24px; }
.product-sku { font-size: 13px; color: #94a3b8; margin-bottom: 16px; }
.product-description { font-size: 15px; line-height: 1.7; color: var(--color-text); margin-bottom: 24px; }
.product-description p { margin-bottom: 12px; }
.product-properties { margin-bottom: 32px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.product-properties h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.product-properties-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.product-properties-list dt { font-size: 13px; color: #64748b; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.product-properties-list dd { font-size: 14px; color: var(--color-text); }
.product-back-link { margin-top: 24px; }
/* Product Variants */
.product-variants { margin-bottom: 24px; }
.variant-group { display: flex; flex-direction: column; gap: 8px; }
.variant-label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-swatch { min-width: 44px; min-height: 44px; padding: 8px 16px; border: 2px solid #e5e7eb; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; background: #fff; color: var(--color-text); transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.variant-swatch:hover { border-color: var(--color-primary); }
.variant-swatch.selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
.variant-swatch-color { width: 44px; height: 44px; padding: 0; border-radius: 50%; overflow: hidden; }
.variant-swatch-color img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
.product-detail-layout { grid-template-columns: 1fr; gap: 24px; }
.product-gallery { grid-template-columns: repeat(2, 1fr); }
.product-properties-list { grid-template-columns: 1fr; }
}
/* Editable product-detail template variants */
.product-detail-layout.product-detail-no-media { grid-template-columns: 1fr; }
.product-detail-stacked .product-detail-layout { grid-template-columns: 1fr; }
.product-detail-stacked .product-detail-media { width: 100%; max-width: 760px; margin: 0 auto; }
.product-detail-stacked .product-detail-info { width: 100%; max-width: 760px; margin: 0 auto; }
/* Cart / eShop */
.cart-icon-btn { position: relative; background: none; border: none; cursor: pointer; padding: 8px; color: var(--color-text); font-size: 24px; }
.cart-badge { position: absolute; top: 0; right: 0; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: none; align-items: center; justify-content: center; line-height: 1; }
.cart-icon-btn .cart-icon-svg { width: 24px; height: 24px; fill: currentColor; }
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: -420px; width: 400px; max-width: 90vw; height: 100vh; background: #fff; z-index: 9999; box-shadow: -4px 0 24px rgba(0,0,0,0.15); transition: right 0.3s ease; display: flex; flex-direction: column; }
.cart-drawer.open { right: 0; }
.cart-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
.cart-drawer-header h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin: 0; }
.cart-drawer-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #64748b; padding: 4px; line-height: 1; }
.cart-drawer-items { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-drawer-empty { display: block; text-align: center; padding: 48px 0; color: #94a3b8; }
.cart-drawer-empty svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.5; }
.cart-drawer-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid #f1f5f9; position: relative; }
.cart-drawer-item-image { width: 72px; height: 72px; flex-shrink: 0; overflow: hidden; background: #f5f5f5; }
.cart-drawer-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer-item-info { flex: 1; min-width: 0; }
.cart-drawer-item-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.cart-drawer-item-name a { color: var(--color-text); text-decoration: none; }
.cart-drawer-item-price { font-size: 14px; color: #64748b; margin-bottom: 8px; }
.cart-drawer-item-qty { display: flex; align-items: center; gap: 8px; }
.cart-qty-btn { width: 28px; height: 28px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; color: var(--color-text); }
.cart-qty-btn:hover { background: #f1f5f9; }
.cart-qty-value { font-size: 14px; font-weight: 500; min-width: 20px; text-align: center; }
.cart-drawer-item-remove { position: absolute; top: 16px; right: 0; background: none; border: none; color: #94a3b8; font-size: 12px; cursor: pointer; text-decoration: underline; }
.cart-drawer-item-remove:hover { color: #ef4444; }
.cart-drawer-footer { padding: 20px 24px; border-top: 1px solid #e5e7eb; }
.cart-drawer-subtotal { display: none; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cart-drawer-subtotal-label { font-size: 16px; font-weight: 500; }
.cart-drawer-subtotal-amount { font-size: 20px; font-weight: 700; }
.cart-drawer-actions { display: flex; gap: 12px; }
.cart-drawer-actions .btn { flex: 1; text-align: center; }
.btn-add-to-cart { background: var(--color-primary); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; margin-top: 8px; transition: background 0.2s; width: 100%; }
.btn-add-to-cart:hover { opacity: 0.9; }
.cart-page { padding: 48px 0; }
.cart-page-title { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 38px); font-weight: 700; margin-bottom: 32px; }
.cart-empty-msg { font-size: 18px; color: #64748b; margin-bottom: 24px; }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.cart-table th { text-align: left; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #64748b; padding: 12px 16px; border-bottom: 2px solid #e5e7eb; }
.cart-table td { padding: 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cart-table-img { width: 64px; }
.cart-table-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cart-qty-inline { display: inline-flex; align-items: center; gap: 8px; }
.cart-remove-btn { background: none; border: none; color: #ef4444; font-size: 13px; cursor: pointer; text-decoration: underline; }
.cart-page-total { display: flex; justify-content: flex-end; gap: 12px; align-items: center; font-size: 18px; margin-bottom: 24px; padding: 16px; background: #f8fafc; border-radius: 8px; }
.cart-page-total strong { font-size: 24px; }
@media (max-width: 768px) {
.cart-table th:nth-child(1), .cart-table td:nth-child(1) { display: none; }
.cart-table { font-size: 14px; }
}
.btn-checkout, .cart-checkout-btn { background: #635bff; color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background 0.2s, transform 0.1s; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-checkout:hover, .cart-checkout-btn:hover { background: #4f46e5; }
.btn-checkout:disabled, .cart-checkout-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.cart-page-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; flex-wrap: wrap; gap: 16px; }
.order-status-page { padding: 80px 16px; min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.order-status-card { max-width: 520px; width: 100%; margin: 0 auto; background: #fff; border-radius: 16px; border: 1px solid #e5e7eb; padding: 40px 32px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.order-status-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: bold; }
.order-status-card.success .order-status-icon { background: #ecfdf5; color: #059669; }
.order-status-card.cancel .order-status-icon { background: #fef2f2; color: #dc2626; }
.order-status-card h1 { font-family: var(--font-heading); font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.order-status-card p { font-size: 16px; color: #64748b; margin-bottom: 28px; line-height: 1.5; }
/* Contact section */
.block-contact { padding: 80px 0; background: #f8fafc; }
.block-contact h2 {
font-family: var(--font-heading);
font-size: clamp(32px, 3.5vw, 46px);
color: var(--color-secondary);
text-align: center;
margin-bottom: 16px;
}
.contact-desc { text-align: center; font-size: 18px; color: #64748b; max-width: 600px; margin: 0 auto 48px; line-height: 1.6; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
.contact-item { background: #fff; padding: 32px 24px; border-radius: 16px; text-align: center; border: 1px solid #e5e7eb; transition: transform 0.25s, box-shadow 0.25s; }
.contact-item:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
.contact-item strong { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-primary); margin-bottom: 10px; }
.contact-item a { color: var(--color-text); text-decoration: none; font-size: 16px; font-weight: 500; }
.contact-item a:hover { color: var(--color-primary); }
.contact-item span { color: var(--color-text); font-size: 16px; }
/* Project Custom CSS */
/* ============================================================
* Canonical reference stylesheet — index.html (MKS Service)
* Project: 86cae3b8-19a5-45c6-9d5e-f0932120f0cf
*
* Deduplicated: 49 inline styles -> 25 unique rules.
* Identical declaration blocks share a comma-separated selector.
* Selectors are synthetic scoped classes (block-N) derived from the
* original inline style="" attributes; add them as class="" on the
* matching elements to apply these styles from a stylesheet.
* ============================================================ */
/* ---- home-banner ---- */
.home-banner-1 {
background: #bbff00;
color: #111;
padding: 12px 16px;
text-align: center;
font-size: 14px;
font-weight: 600;
}
.block-html{
padding: 16px 0;
}
/* ---- home-cta ---- */
.home-cta-1 {
padding: 80px 0;
background: #bbff00;
color: #111;
}
.home-cta-2 {
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.home-cta-3 {
font-size: 36px;
font-weight: 800;
margin-bottom: 14px;
}
.home-cta-4 {
font-size: 18px;
opacity: 0.85;
margin-bottom: 0;
}
.home-cta-5 {
display: inline-block;
margin-top: 24px;
padding: 14px 32px;
background: #111;
color: #bbff00;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
/* ---- home-services ---- */
.home-services-1 {
padding: 96px 0;
}
.home-services-2,
.home-why-2 {
/* shared by 2 elements */
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.home-services-3 {
font-size: 36px;
font-weight: 800;
text-align: center;
max-width: 640px;
margin: 0 auto 16px;
color: #111;
}
.home-services-4 {
font-size: 17px;
color: #666;
text-align: center;
max-width: 560px;
margin: 0 auto 64px;
}
.home-services-5 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.home-services-6,
.home-services-11,
.home-services-16,
.home-services-21 {
/* shared by 4 elements */
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 18px;
padding: 36px 28px;
transition: all 0.2s;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.home-services-7,
.home-services-12,
.home-services-17,
.home-services-22 {
/* shared by 4 elements */
width: 52px;
height: 52px;
background: #111;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
color: #bbff00;
}
.home-services-8,
.home-services-13,
.home-services-18,
.home-services-23 {
/* shared by 4 elements */
font-size: 19px;
margin-bottom: 10px;
color: #111;
}
.home-services-9,
.home-services-14,
.home-services-19,
.home-services-24 {
/* shared by 4 elements */
font-size: 15px;
color: #666;
margin-bottom: 16px;
}
.home-services-10,
.home-services-15,
.home-services-20,
.home-services-25 {
/* shared by 4 elements */
font-size: 14px;
font-weight: 600;
color: #111;
margin-top: auto;
}
/* ---- home-trust ---- */
.home-trust-1 {
border-top: 4px solid #bbff00;
border-bottom: 1px solid #e0e0e0;
background: #fff;
padding: 24px 16px;
}
.home-trust-2 {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.home-trust-3,
.home-trust-4,
.home-trust-5 {
/* shared by 3 elements */
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
color: #111;
}
/* ---- home-why ---- */
.home-why-1 {
padding: 120px 0;
background: #111;
color: #fff;
}
.home-why-3 {
font-size: 36px;
font-weight: 800;
text-align: center;
max-width: 640px;
margin: 0 auto 80px;
color: #fff;
}
.home-why-4 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px;
}
.home-why-5,
.home-why-8,
.home-why-11 {
/* shared by 3 elements */
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.08);
border: 2px solid #bbff00;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
color: #bbff00;
}
.home-why-6,
.home-why-9,
.home-why-12 {
/* shared by 3 elements */
font-size: 19px;
margin-bottom: 10px;
color: #fff;
}
.home-why-7,
.home-why-10,
.home-why-13 {
/* shared by 3 elements */
font-size: 15px;
color: #bbb;
line-height: 1.65;
}
/* ============================================================
* Canonical reference stylesheet — header (MKS Service)
* Project: 86cae3b8-19a5-45c6-9d5e-f0932120f0cf
*
* Deduplicated: 21 inline styles -> 7 unique rules.
* Identical declaration blocks share a comma-separated selector.
* Selectors are synthetic scoped classes (block-N) derived from the
* original inline style="" attributes; add them as class="" on the
* matching elements to apply these styles from a stylesheet.
* ============================================================ */
/* ---- hdr-custom ---- */
.hdr-custom-1 {
gap: 24px;
}
.hdr-custom-2 {
position: relative;
}
.hdr-custom-3 {
display: flex;
align-items: center;
gap: 4px;
}
.hdr-custom-4 {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: #111;
min-width: 280px;
border-radius: 8px;
padding: 6px;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
list-style: none;
z-index: 99;
gap: 0;
}
.hdr-custom-5,
.hdr-custom-7,
.hdr-custom-9,
.hdr-custom-11,
.hdr-custom-13,
.hdr-custom-15,
.hdr-custom-17,
.hdr-custom-19 {
/* shared by 8 elements */
width: 100%;
}
.hdr-custom-6,
.hdr-custom-8,
.hdr-custom-10,
.hdr-custom-12,
.hdr-custom-14,
.hdr-custom-16,
.hdr-custom-18,
.hdr-custom-20 {
/* shared by 8 elements */
display: block;
padding: 10px 14px;
border-radius: 6px;
font-size: 14px;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
opacity: 0.9;
border: none !important;
}
.hdr-custom-21 {
background: #bbff00;
color: #111 !important;
padding: 8px 18px;
border-radius: 8px;
font-weight: 700;
}
/* ============================================================
* Canonical reference stylesheet — all-pages (MKS Service)
* Project: 86cae3b8-19a5-45c6-9d5e-f0932120f0cf
*
* Deduplicated: 570 inline styles -> 77 unique rules.
* Identical declaration blocks share a comma-separated selector.
* Selectors are synthetic scoped classes (block-N) derived from the
* original inline style="" attributes; add them as class="" on the
* matching elements to apply these styles from a stylesheet.
* ============================================================ */
/* ---- abt-features ---- */
.abt-features-1 {
padding: 96px 0;
background: #f5f5f5;
}
.abt-features-2,
.svc-montaj-bana-sub-2,
.svc-montaj-bana-gal-2,
.svc-montaj-pompi-sub-2,
.svc-montaj-pompi-gal-2,
.svc-otkrivane-techove-sub-2,
.svc-otkrivane-techove-gal-2,
.svc-otopitelni-instalacii-sub-2,
.svc-otopitelni-instalacii-gal-2,
.svc-probivane-otvori-sub-2,
.svc-probivane-otvori-gal-2,
.svc-grid-2,
.svc-termopompi-sub-2,
.svc-termopompi-gal-2,
.svc-vik-instalacia-sub-2,
.svc-vik-instalacia-gal-2,
.svc-vik-remonti-sub-2,
.svc-vik-remonti-gal-2 {
/* shared by 18 elements */
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.abt-features-3 {
font-size: 36px;
font-weight: 800;
text-align: center;
max-width: 640px;
margin: 0 auto 64px;
color: #111;
}
.abt-features-4 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.abt-features-5,
.abt-features-9,
.abt-features-13 {
/* shared by 3 elements */
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 28px;
}
.abt-features-6,
.abt-features-10,
.abt-features-14 {
/* shared by 3 elements */
width: 44px;
height: 44px;
background: #111;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: #bbff00;
}
.abt-features-7,
.abt-features-11,
.abt-features-15 {
/* shared by 3 elements */
font-size: 18px;
margin-bottom: 8px;
color: #111;
}
.abt-features-8,
.abt-features-12,
.abt-features-16 {
/* shared by 3 elements */
font-size: 15px;
color: #666;
margin: 0;
}
/* ---- contact-banner ---- */
.contact-banner-1 {
background: #bbff00;
color: #111;
padding: 12px 16px;
text-align: center;
font-size: 14px;
font-weight: 600;
}
/* ---- contact-main ---- */
.contact-main-1 {
max-width: 900px;
margin: 0 auto;
padding: 48px 24px;
}
.contact-main-2 {
font-size: 36px;
font-weight: 800;
margin-bottom: 16px;
color: #111;
text-align: center;
}
.contact-main-3 {
font-size: 18px;
color: #666;
margin-bottom: 40px;
text-align: center;
}
.contact-main-4 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.contact-main-5,
.contact-main-9,
.contact-main-13 {
/* shared by 3 elements */
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 32px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
}
.contact-main-6,
.contact-main-10,
.contact-main-14 {
/* shared by 3 elements */
width: 56px;
height: 56px;
background: #111;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #bbff00;
}
.contact-main-7,
.contact-main-11,
.contact-main-15,
.svc-montaj-bana-sub-6,
.svc-montaj-bana-sub-9,
.svc-montaj-bana-sub-12,
.svc-montaj-pompi-sub-6,
.svc-montaj-pompi-sub-9,
.svc-montaj-pompi-sub-12,
.svc-otkrivane-techove-sub-6,
.svc-otkrivane-techove-sub-9,
.svc-otkrivane-techove-sub-12,
.svc-otopitelni-instalacii-sub-6,
.svc-otopitelni-instalacii-sub-9,
.svc-otopitelni-instalacii-sub-12,
.svc-probivane-otvori-sub-6,
.svc-probivane-otvori-sub-9,
.svc-probivane-otvori-sub-12,
.svc-termopompi-sub-6,
.svc-termopompi-sub-9,
.svc-termopompi-sub-12,
.svc-vik-instalacia-sub-6,
.svc-vik-instalacia-sub-9,
.svc-vik-instalacia-sub-12,
.svc-vik-remonti-sub-6,
.svc-vik-remonti-sub-9,
.svc-vik-remonti-sub-12 {
/* shared by 27 elements */
font-size: 16px;
margin-bottom: 8px;
color: #111;
}
.contact-main-8,
.contact-main-12 {
/* shared by 2 elements */
color: #111;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.contact-main-16 {
color: #666;
font-size: 15px;
margin: 0;
}
.contact-main-17 {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 40px;
}
.contact-main-18 {
font-size: 22px;
margin-bottom: 24px;
color: #111;
}
.contact-main-19 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.contact-main-20,
.contact-main-21 {
/* shared by 2 elements */
padding: 12px 16px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 15px;
font-family: inherit;
}
.contact-main-22 {
width: 100%;
padding: 12px 16px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 15px;
font-family: inherit;
margin-bottom: 16px;
resize: vertical;
}
.contact-main-23 {
background: #bbff00;
color: #111;
border: none;
padding: 14px 32px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
/* ---- svc-cta ---- */
.svc-cta-1 {
padding: 80px 0;
background: #bbff00;
color: #111;
}
.svc-cta-3 {
font-size: 36px;
font-weight: 800;
margin-bottom: 14px;
}
.svc-cta-4 {
font-size: 18px;
opacity: 0.85;
margin-bottom: 0;
}
.svc-cta-5 {
display: inline-block;
margin-top: 24px;
padding: 14px 32px;
background: #111;
color: #bbff00;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
/* ---- svc-grid ---- */
.svc-grid-3 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.svc-grid-4,
.svc-grid-9,
.svc-grid-14,
.svc-grid-19,
.svc-grid-24,
.svc-grid-29,
.svc-grid-34,
.svc-grid-39 {
/* shared by 8 elements */
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 18px;
padding: 36px 28px;
transition: all 0.2s;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.svc-grid-5,
.svc-grid-10,
.svc-grid-15,
.svc-grid-20,
.svc-grid-25,
.svc-grid-30,
.svc-grid-35,
.svc-grid-40 {
/* shared by 8 elements */
width: 52px;
height: 52px;
background: #111;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
color: #bbff00;
}
.svc-grid-6,
.svc-grid-11,
.svc-grid-16,
.svc-grid-21,
.svc-grid-26,
.svc-grid-31,
.svc-grid-36,
.svc-grid-41 {
/* shared by 8 elements */
font-size: 19px;
margin-bottom: 10px;
color: #111;
}
.svc-grid-7,
.svc-grid-12,
.svc-grid-17,
.svc-grid-22,
.svc-grid-27,
.svc-grid-32,
.svc-grid-37,
.svc-grid-42 {
/* shared by 8 elements */
font-size: 15px;
color: #666;
margin-bottom: 16px;
}
.svc-grid-8,
.svc-grid-13,
.svc-grid-18,
.svc-grid-23,
.svc-grid-28,
.svc-grid-33,
.svc-grid-38,
.svc-grid-43 {
/* shared by 8 elements */
font-size: 14px;
font-weight: 600;
color: #111;
margin-top: auto;
}
/* ---- svc-montaj-bana-c ---- */
.svc-montaj-bana-c-1,
.svc-montaj-pompi-c-1,
.svc-otkrivane-techove-c-1,
.svc-otopitelni-instalacii-c-1,
.svc-probivane-otvori-c-1,
.svc-termopompi-c-1,
.svc-vik-instalacia-c-1,
.svc-vik-remonti-c-1 {
/* shared by 8 elements */
padding: 64px 0;
background: #111;
color: #fff;
}
.svc-montaj-bana-c-2,
.svc-montaj-pompi-c-2,
.svc-otkrivane-techove-c-2,
.svc-otopitelni-instalacii-c-2,
.svc-probivane-otvori-c-2,
.svc-cta-2,
.svc-termopompi-c-2,
.svc-vik-instalacia-c-2,
.svc-vik-remonti-c-2 {
/* shared by 9 elements */
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.svc-montaj-bana-c-3,
.svc-montaj-pompi-c-3,
.svc-otkrivane-techove-c-3,
.svc-otopitelni-instalacii-c-3,
.svc-probivane-otvori-c-3,
.svc-termopompi-c-3,
.svc-vik-instalacia-c-3,
.svc-vik-remonti-c-3 {
/* shared by 8 elements */
font-size: 32px;
font-weight: 800;
margin-bottom: 14px;
}
.svc-montaj-bana-c-4,
.svc-montaj-pompi-c-4,
.svc-otkrivane-techove-c-4,
.svc-otopitelni-instalacii-c-4,
.svc-probivane-otvori-c-4,
.svc-termopompi-c-4,
.svc-vik-instalacia-c-4,
.svc-vik-remonti-c-4 {
/* shared by 8 elements */
font-size: 18px;
color: #bbb;
margin-bottom: 0;
}
.svc-montaj-bana-c-5,
.svc-montaj-pompi-c-5,
.svc-otkrivane-techove-c-5,
.svc-otopitelni-instalacii-c-5,
.svc-probivane-otvori-c-5,
.svc-termopompi-c-5,
.svc-vik-instalacia-c-5,
.svc-vik-remonti-c-5 {
/* shared by 8 elements */
display: inline-block;
margin-top: 24px;
padding: 14px 32px;
background: #bbff00;
color: #111;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
/* shared by 9 elements */
padding: 64px 0;
background: #f5f5f5;
}
.svc-montaj-bana-gal-4,
.svc-montaj-pompi-gal-4,
.svc-otkrivane-techove-gal-4,
.svc-otopitelni-instalacii-gal-4,
.svc-probivane-otvori-gal-4,
.svc-termopompi-gal-4,
.svc-vik-instalacia-gal-4,
.svc-vik-remonti-gal-4 {
/* shared by 8 elements */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.svc-montaj-bana-gal-5,
.svc-montaj-bana-gal-6,
.svc-montaj-bana-gal-7,
.svc-montaj-bana-gal-8,
.svc-montaj-bana-gal-9,
.svc-montaj-bana-gal-10,
.svc-montaj-pompi-gal-5,
.svc-montaj-pompi-gal-6,
.svc-montaj-pompi-gal-7,
.svc-montaj-pompi-gal-8,
.svc-montaj-pompi-gal-9,
.svc-montaj-pompi-gal-10,
.svc-otkrivane-techove-gal-5,
.svc-otkrivane-techove-gal-6,
.svc-otkrivane-techove-gal-7,
.svc-otkrivane-techove-gal-8,
.svc-otkrivane-techove-gal-9,
.svc-otkrivane-techove-gal-10,
.svc-otopitelni-instalacii-gal-5,
.svc-otopitelni-instalacii-gal-6,
.svc-otopitelni-instalacii-gal-7,
.svc-otopitelni-instalacii-gal-8,
.svc-otopitelni-instalacii-gal-9,
.svc-otopitelni-instalacii-gal-10,
.svc-probivane-otvori-gal-5,
.svc-probivane-otvori-gal-6,
.svc-probivane-otvori-gal-7,
.svc-probivane-otvori-gal-8,
.svc-probivane-otvori-gal-9,
.svc-probivane-otvori-gal-10,
.svc-termopompi-gal-5,
.svc-termopompi-gal-6,
.svc-termopompi-gal-7,
.svc-termopompi-gal-8,
.svc-termopompi-gal-9,
.svc-termopompi-gal-10,
.svc-vik-instalacia-gal-5,
.svc-vik-instalacia-gal-6,
.svc-vik-instalacia-gal-7,
.svc-vik-instalacia-gal-8,
.svc-vik-instalacia-gal-9,
.svc-vik-instalacia-gal-10,
.svc-vik-remonti-gal-5,
.svc-vik-remonti-gal-6,
.svc-vik-remonti-gal-7,
.svc-vik-remonti-gal-8,
.svc-vik-remonti-gal-9,
.svc-vik-remonti-gal-10 {
/* shared by 48 elements */
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 12px;
transition: transform 0.35s;
}
.svc-montaj-bana-gal-11,
.svc-montaj-bana-gal-12,
.svc-montaj-bana-gal-13,
.svc-montaj-bana-gal-14,
.svc-montaj-bana-gal-15,
.svc-montaj-bana-gal-16,
.svc-montaj-pompi-gal-11,
.svc-montaj-pompi-gal-12,
.svc-montaj-pompi-gal-13,
.svc-montaj-pompi-gal-14,
.svc-montaj-pompi-gal-15,
.svc-montaj-pompi-gal-16,
.svc-otkrivane-techove-gal-11,
.svc-otkrivane-techove-gal-12,
.svc-otkrivane-techove-gal-13,
.svc-otkrivane-techove-gal-14,
.svc-otkrivane-techove-gal-15,
.svc-otkrivane-techove-gal-16,
.svc-otopitelni-instalacii-gal-11,
.svc-otopitelni-instalacii-gal-12,
.svc-otopitelni-instalacii-gal-13,
.svc-otopitelni-instalacii-gal-14,
.svc-otopitelni-instalacii-gal-15,
.svc-otopitelni-instalacii-gal-16,
.svc-probivane-otvori-gal-11,
.svc-probivane-otvori-gal-12,
.svc-probivane-otvori-gal-13,
.svc-probivane-otvori-gal-14,
.svc-probivane-otvori-gal-15,
.svc-probivane-otvori-gal-16,
.svc-termopompi-gal-11,
.svc-termopompi-gal-12,
.svc-termopompi-gal-13,
.svc-termopompi-gal-14,
.svc-termopompi-gal-15,
.svc-termopompi-gal-16,
.svc-vik-instalacia-gal-11,
.svc-vik-instalacia-gal-12,
.svc-vik-instalacia-gal-13,
.svc-vik-instalacia-gal-14,
.svc-vik-instalacia-gal-15,
.svc-vik-instalacia-gal-16,
.svc-vik-remonti-gal-11,
.svc-vik-remonti-gal-12,
.svc-vik-remonti-gal-13,
.svc-vik-remonti-gal-14,
.svc-vik-remonti-gal-15,
.svc-vik-remonti-gal-16 {
/* shared by 9 elements */
text-align: center;
margin-top: 32px;
}
.svc-montaj-bana-gal-18,
.svc-montaj-pompi-gal-18,
.svc-otkrivane-techove-gal-18,
.svc-otopitelni-instalacii-gal-18,
.svc-probivane-otvori-gal-18,
.svc-termopompi-gal-18,
.svc-vik-instalacia-gal-18,
.svc-vik-remonti-gal-18 {
/* shared by 8 elements */
display: inline-block;
padding: 12px 32px;
background: #bbff00;
color: #111;
border: none;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
}
/* ---- svc-montaj-bana-m ---- */
.svc-montaj-bana-m-1,
.svc-montaj-bana-sub-1,
.svc-montaj-pompi-m-1,
.svc-montaj-pompi-sub-1,
.svc-otkrivane-techove-m-1,
.svc-otkrivane-techove-sub-1,
.svc-otopitelni-instalacii-m-1,
.svc-otopitelni-instalacii-sub-1,
.svc-probivane-otvori-m-1,
.svc-probivane-otvori-sub-1,
.svc-grid-1,
.svc-termopompi-m-1,
.svc-termopompi-sub-1,
.svc-vik-instalacia-m-1,
.svc-vik-instalacia-sub-1,
.svc-vik-remonti-m-1,
.svc-vik-remonti-sub-1 {
/* shared by 17 elements */
padding: 64px 0;
}
.svc-montaj-bana-m-2,
.svc-montaj-pompi-m-2,
.svc-otkrivane-techove-m-2,
.svc-otopitelni-instalacii-m-2,
.svc-probivane-otvori-m-2,
.svc-termopompi-m-2,
.svc-vik-instalacia-m-2,
.svc-vik-remonti-m-2 {
/* shared by 8 elements */
max-width: 1000px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.svc-montaj-bana-m-3,
.svc-montaj-pompi-m-3,
.svc-otkrivane-techove-m-3,
.svc-otopitelni-instalacii-m-3,
.svc-probivane-otvori-m-3,
.svc-termopompi-m-3,
.svc-vik-instalacia-m-3,
.svc-vik-remonti-m-3 {
/* shared by 8 elements */
width: 64px;
height: 64px;
background: #111;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: #bbff00;
}
.svc-montaj-bana-m-4,
.svc-montaj-pompi-m-4,
.svc-otkrivane-techove-m-4,
.svc-otopitelni-instalacii-m-4,
.svc-probivane-otvori-m-4,
.svc-termopompi-m-4,
.svc-vik-instalacia-m-4,
.svc-vik-remonti-m-4 {
/* shared by 8 elements */
font-size: 17px;
color: #333;
line-height: 1.7;
margin-bottom: 24px;
}
.svc-montaj-bana-m-5,
.svc-montaj-pompi-m-5,
.svc-otkrivane-techove-m-5,
.svc-otopitelni-instalacii-m-5,
.svc-probivane-otvori-m-5,
.svc-termopompi-m-5,
.svc-vik-instalacia-m-5,
.svc-vik-remonti-m-5 {
/* shared by 8 elements */
font-size: 20px;
margin-bottom: 16px;
color: #111;
}
.svc-montaj-bana-m-6,
.svc-montaj-pompi-m-6,
.svc-otkrivane-techove-m-6,
.svc-otopitelni-instalacii-m-6,
.svc-probivane-otvori-m-6,
.svc-termopompi-m-6,
.svc-vik-instalacia-m-6,
.svc-vik-remonti-m-6 {
/* shared by 8 elements */
list-style: none;
padding: 0;
margin: 0;
}
.svc-montaj-bana-m-7,
.svc-montaj-bana-m-9,
.svc-montaj-bana-m-11,
.svc-montaj-bana-m-13,
.svc-montaj-bana-m-15,
.svc-montaj-bana-m-17,
.svc-montaj-pompi-m-7,
.svc-montaj-pompi-m-9,
.svc-montaj-pompi-m-11,
.svc-montaj-pompi-m-13,
.svc-montaj-pompi-m-15,
.svc-montaj-pompi-m-17,
.svc-otkrivane-techove-m-7,
.svc-otkrivane-techove-m-9,
.svc-otkrivane-techove-m-11,
.svc-otkrivane-techove-m-13,
.svc-otkrivane-techove-m-15,
.svc-otkrivane-techove-m-17,
.svc-otopitelni-instalacii-m-7,
.svc-otopitelni-instalacii-m-9,
.svc-otopitelni-instalacii-m-11,
.svc-otopitelni-instalacii-m-13,
.svc-otopitelni-instalacii-m-15,
.svc-otopitelni-instalacii-m-17,
.svc-probivane-otvori-m-7,
.svc-probivane-otvori-m-9,
.svc-probivane-otvori-m-11,
.svc-probivane-otvori-m-13,
.svc-probivane-otvori-m-15,
.svc-probivane-otvori-m-17,
.svc-termopompi-m-7,
.svc-termopompi-m-9,
.svc-termopompi-m-11,
.svc-termopompi-m-13,
.svc-termopompi-m-15,
.svc-termopompi-m-17,
.svc-vik-instalacia-m-7,
.svc-vik-instalacia-m-9,
.svc-vik-instalacia-m-11,
.svc-vik-instalacia-m-13,
.svc-vik-instalacia-m-15,
.svc-vik-instalacia-m-17,
.svc-vik-remonti-m-7,
.svc-vik-remonti-m-9,
.svc-vik-remonti-m-11,
.svc-vik-remonti-m-13,
.svc-vik-remonti-m-15,
.svc-vik-remonti-m-17 {
/* shared by 48 elements */
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.svc-montaj-bana-m-8,
.svc-montaj-bana-m-10,
.svc-montaj-bana-m-12,
.svc-montaj-bana-m-14,
.svc-montaj-bana-m-16,
.svc-montaj-bana-m-18,
.svc-montaj-pompi-m-8,
.svc-montaj-pompi-m-10,
.svc-montaj-pompi-m-12,
.svc-montaj-pompi-m-14,
.svc-montaj-pompi-m-16,
.svc-montaj-pompi-m-18,
.svc-otkrivane-techove-m-8,
.svc-otkrivane-techove-m-10,
.svc-otkrivane-techove-m-12,
.svc-otkrivane-techove-m-14,
.svc-otkrivane-techove-m-16,
.svc-otkrivane-techove-m-18,
.svc-otopitelni-instalacii-m-8,
.svc-otopitelni-instalacii-m-10,
.svc-otopitelni-instalacii-m-12,
.svc-otopitelni-instalacii-m-14,
.svc-otopitelni-instalacii-m-16,
.svc-otopitelni-instalacii-m-18,
.svc-probivane-otvori-m-8,
.svc-probivane-otvori-m-10,
.svc-probivane-otvori-m-12,
.svc-probivane-otvori-m-14,
.svc-probivane-otvori-m-16,
.svc-probivane-otvori-m-18,
.svc-termopompi-m-8,
.svc-termopompi-m-10,
.svc-termopompi-m-12,
.svc-termopompi-m-14,
.svc-termopompi-m-16,
.svc-termopompi-m-18,
.svc-vik-instalacia-m-8,
.svc-vik-instalacia-m-10,
.svc-vik-instalacia-m-12,
.svc-vik-instalacia-m-14,
.svc-vik-instalacia-m-16,
.svc-vik-instalacia-m-18,
.svc-vik-remonti-m-8,
.svc-vik-remonti-m-10,
.svc-vik-remonti-m-12,
.svc-vik-remonti-m-14,
.svc-vik-remonti-m-16,
.svc-vik-remonti-m-18 {
/* shared by 48 elements */
color: #bbff00;
flex-shrink: 0;
margin-top: 2px;
}
.svc-montaj-bana-m-19,
.svc-montaj-pompi-m-19,
.svc-otkrivane-techove-m-19,
.svc-otopitelni-instalacii-m-19,
.svc-probivane-otvori-m-19,
.svc-termopompi-m-19,
.svc-vik-instalacia-m-19,
.svc-vik-remonti-m-19 {
/* shared by 8 elements */
display: inline-block;
margin-top: 28px;
padding: 14px 32px;
background: #bbff00;
color: #111;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
.svc-montaj-bana-m-20,
.svc-montaj-pompi-m-20,
.svc-otkrivane-techove-m-20,
.svc-otopitelni-instalacii-m-20,
.svc-probivane-otvori-m-20,
.svc-termopompi-m-20,
.svc-vik-instalacia-m-20,
.svc-vik-remonti-m-20 {
/* shared by 8 elements */
width: 100%;
border-radius: 16px;
object-fit: cover;
aspect-ratio: 4/3;
}
/* ---- svc-montaj-bana-sub ---- */
.svc-montaj-bana-sub-3,
.svc-montaj-bana-gal-3,
.svc-montaj-pompi-sub-3,
.svc-montaj-pompi-gal-3,
.svc-otkrivane-techove-sub-3,
.svc-otkrivane-techove-gal-3,
.svc-otopitelni-instalacii-sub-3,
.svc-otopitelni-instalacii-gal-3,
.svc-probivane-otvori-sub-3,
.svc-probivane-otvori-gal-3,
.svc-termopompi-sub-3,
.svc-termopompi-gal-3,
.svc-vik-instalacia-sub-3,
.svc-vik-instalacia-gal-3,
.svc-vik-remonti-sub-3,
.svc-vik-remonti-gal-3 {
/* shared by 16 elements */
font-size: 28px;
font-weight: 800;
text-align: center;
margin-bottom: 48px;
color: #111;
}
.svc-montaj-bana-sub-4,
.svc-montaj-pompi-sub-4,
.svc-otkrivane-techove-sub-4,
.svc-otopitelni-instalacii-sub-4,
.svc-probivane-otvori-sub-4,
.svc-termopompi-sub-4,
.svc-vik-instalacia-sub-4,
.svc-vik-remonti-sub-4 {
/* shared by 8 elements */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.svc-montaj-bana-sub-5,
.svc-montaj-bana-sub-8,
.svc-montaj-bana-sub-11,
.svc-montaj-pompi-sub-5,
.svc-montaj-pompi-sub-8,
.svc-montaj-pompi-sub-11,
.svc-otkrivane-techove-sub-5,
.svc-otkrivane-techove-sub-8,
.svc-otkrivane-techove-sub-11,
.svc-otopitelni-instalacii-sub-5,
.svc-otopitelni-instalacii-sub-8,
.svc-otopitelni-instalacii-sub-11,
.svc-probivane-otvori-sub-5,
.svc-probivane-otvori-sub-8,
.svc-probivane-otvori-sub-11,
.svc-termopompi-sub-5,
.svc-termopompi-sub-8,
.svc-termopompi-sub-11,
.svc-vik-instalacia-sub-5,
.svc-vik-instalacia-sub-8,
.svc-vik-instalacia-sub-11,
.svc-vik-remonti-sub-5,
.svc-vik-remonti-sub-8,
.svc-vik-remonti-sub-11 {
/* shared by 24 elements */
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 24px;
}
.svc-montaj-bana-sub-7,
.svc-montaj-bana-sub-10,
.svc-montaj-bana-sub-13,
.svc-montaj-pompi-sub-7,
.svc-montaj-pompi-sub-10,
.svc-montaj-pompi-sub-13,
.svc-otkrivane-techove-sub-7,
.svc-otkrivane-techove-sub-10,
.svc-otkrivane-techove-sub-13,
.svc-otopitelni-instalacii-sub-7,
.svc-otopitelni-instalacii-sub-10,
.svc-otopitelni-instalacii-sub-13,
.svc-probivane-otvori-sub-7,
.svc-probivane-otvori-sub-10,
.svc-probivane-otvori-sub-13,
.svc-termopompi-sub-7,
.svc-termopompi-sub-10,
.svc-termopompi-sub-13,
.svc-vik-instalacia-sub-7,
.svc-vik-instalacia-sub-10,
.svc-vik-instalacia-sub-13,
.svc-vik-remonti-sub-7,
.svc-vik-remonti-sub-10,
.svc-vik-remonti-sub-13 {
/* shared by 24 elements */
font-size: 14px;
color: #666;
margin: 0;
}
/* Fix: .block-about readability — heading + stat-labels unreadable on dark bg #0a0a0a */
.about-text h2,
.about-text h2 strong { color: #ffffff !important; }
.about-text h2 strong { color: var(--color-primary) !important; }
.about-stat-label { color: rgba(255,255,255,0.65) !important; }
/* About-stat cards: lime background, black numbers, dark-gray labels */
.about-stat { background: #bbff00 !important; border-color: #bbff00 !important; }
.about-stat-number { color: #111111 !important; }
.about-stat-label { color: #333333 !important; }
/* About CTA button: black text on lime */
.about-text .cta,
.about-text a.cta { color: #111111 !important; }
/* h1 SEO headings — visually styled like the original h2 header block */
.page-title-section { padding: 80px 0 40px; }
.page-title-section h1 {
font-family: var(--font-heading);
font-size: clamp(32px, 3.5vw, 46px);
color: var(--color-secondary);
letter-spacing: -0.3px;
margin: 0;
}
.page-title-section p {
font-size: 18px;
color: #64748b;
margin-top: 16px;
max-width: 640px;
line-height: 1.65;
}
/* SEO-only h1 for pages whose visible heading is inside a slideshow (index).
Accessible to screen readers + search engines, but visually hidden.
NOT display:none (Google penalizes that). Uses clip technique instead. */
.seo-h1 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === DESIGN UPGRADE 1: Typography === */
/* Load Google Fonts via @import (works even when appended, just with slight delay) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');
/* Override theme font variables */
:root {
--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* Apply body font */
body { font-family: 'Inter', -apple-system, system-ui, sans-serif; }
/* Headings use Poppins */
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', -apple-system, system-ui, sans-serif; }
/* === DESIGN UPGRADE 2: Service cards === */
/* Modern card with hover lift, accent bar, rounded icon */
.home-services-6, .home-services-11, .home-services-16, .home-services-21 {
border: none !important;
border-radius: 16px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease !important;
position: relative;
overflow: hidden;
}
.home-services-6::before, .home-services-11::before, .home-services-16::before, .home-services-21::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #bbff00;
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: left;
}
.home-services-6:hover, .home-services-11:hover, .home-services-16:hover, .home-services-21:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12) !important;
}
.home-services-6:hover::before, .home-services-11:hover::before, .home-services-16:hover::before, .home-services-21:hover::before {
transform: scaleX(1);
}
/* Icon container: circle instead of square */
.home-services-7, .home-services-12, .home-services-17, .home-services-22 {
border-radius: 50% !important;
width: 56px !important;
height: 56px !important;
}
/* === DESIGN UPGRADE 3: Visual rhythm === */
/* Alternate section backgrounds for better flow */
.home-trust-1 {
background: #fafafa !important;
}
.home-why-1 {
background: #0a0a0a !important;
}
/* CTA section gets gradient instead of flat lime */
.home-cta-1 {
background: linear-gradient(135deg, #bbff00 0%, #a3e600 100%) !important;
}
/* === DESIGN UPGRADE 4: Smooth scrolling + better link transitions === */
html { scroll-behavior: smooth; }
a { transition: color 0.2s ease, opacity 0.2s ease; }
/* === DESIGN UPGRADE 5: Section dividers (subtle) === */
.home-services-1 {
position: relative;
}
.home-services-1::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #bbff00;
border-radius: 2px;
}
/* === FOOTER ENHANCEMENT === */
.footer-desc::after {
content: '⏱ Работно време: Пон—Пет 08:00–18:00, Съб 09:00–14:00';
display: block;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 13px;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
/* Trust badges row under footer brand */
.footer-brand::after {
content: '✓ ITC Sweden Certified • От 2008 година • 500+ обекта';
display: block;
margin-top: 8px;
font-size: 12px;
font-weight: 500;
color: #bbff00;
letter-spacing: 0.3px;
}
/* Footer bottom copyright enhancement */
.footer-bottom {
font-size: 13px;
color: rgba(255,255,255,0.4);
padding: 24px;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.08);
}
/* Fix: page-title-section should flow into the next section, not create white gap.
For pages where the next section is dark (block-about), make the title section
itself dark so they blend. For light pages, keep it light but reduce padding. */
/* Reduce the large top padding — 80px was too much */
.page-title-section { padding: 48px 0 24px; }
/* On pages with block-about as the main content (about, index),
make the title section dark to flow into the dark block-about */
.page-title-section + .block-about,
.page-title-section + section.block-about {
/* Remove the gap between title and dark section */
margin-top: -24px;
}
/* Better: make page-title-section inherit the dark bg when followed by block-about.
We do this by checking the page. Since we can't target parent,
we style the about page title specifically via the h1 content. */
/* Actually simplest: on about page, the h1 is 'За нас'. Make the section dark. */
/* We use a general approach: darker bg for all page-title-sections to add depth */
.page-title-section {
background: #0a0a0a;
color: #fff;
}
.page-title-section h1 {
color: #fff !important;
}
.page-title-section p {
color: rgba(255,255,255,0.7) !important;
}
/* But this makes ALL page titles dark. Some pages have light content below.
Let's be smart: only dark when followed by dark section. CSS can't do this easily.
Compromise: make title section subtle gray instead — works with both light and dark */
.page-title-section {
background: #fafafa;
border-bottom: 1px solid #eee;
}
.page-title-section h1 {
color: #111 !important;
}
.page-title-section p {
color: #64748b !important;
}
/* === PAGE HEADER: Professional dark hero banner === */
/* Replaces the muddy #fafafa with a bold dark header consistent with navbar/footer */
.page-title-section {
background: #0a0a0a !important;
color: #fff !important;
padding: 64px 0 48px !important;
border-bottom: none !important;
position: relative;
overflow: hidden;
}
/* Lime accent line on top — brand connection */
.page-title-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #bbff00 0%, #a3e600 100%);
}
.page-title-section h1 {
color: #fff !important;
margin: 0 0 12px 0 !important;
}
.page-title-section p {
color: rgba(255,255,255,0.65) !important;
margin: 0 !important;
}
/* Remove the gap between dark header and dark block-about (they should flow) */
.page-title-section + .block-about {
padding-top: 0 !important;
}
.page-title-section + .block-about .about-container {
padding-top: 64px !important;
}
/* Fix: announcement banner should have NO padding — flush against navbar */
.block-html:has(.home-banner-1) {
padding: 0 !important;
}
/* Fallback for browsers without :has() — target the first block-html on index */
.home-banner-1 {
margin: 0 !important;
}
/* === Proper fix: banner + seo-h1 spacing === */
/* seo-h1 is visually hidden — its container must NOT take any vertical space */
.block-html:has(.seo-h1) {
padding: 0 !important;
margin: 0 !important;
height: 0 !important;
overflow: hidden;
}
/* Announcement banner: flush to navbar on top, small gap below before slideshow */
.block-html:has(.home-banner-1) {
padding: 0 0 8px 0 !important;
}
/* Fallback for older browsers: if :has() unsupported, these IDs let us target directly.
We can't easily target by content, but the banner div itself should be flush. */
.home-banner-1 {
margin: 0 !important;
border-radius: 0 !important;
}
/* === PROFESSIONAL LAYOUT RHYTHM === */
/* 1. BANNER: full-width (break out of .container) */
.block-html:has(.home-banner-1) .container {
max-width: 100% !important;
padding: 0 !important;
}
.home-banner-1 {
padding: 14px 24px !important;
text-align: center;
}
/* 2. UNIFIED VERTICAL SPACING (8px scale) */
/* Content sections: 80px (uniform, was 96/120/80 mixed) */
.home-services-1 { padding: 80px 0 !important; }
.home-why-1 { padding: 80px 0 !important; }
.block-about { padding: 80px 0 !important; }
.home-cta-1 { padding: 80px 0 !important; }
/* Trust badges: compact 32px (tighter, it's a thin strip) */
.home-trust-1 { padding: 28px 16px !important; }
/* 3. Section dividers — subtle lime accent on top of each major section */
.home-services-1 { position: relative; }
.home-services-1::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 60px; height: 3px;
background: #bbff00;
border-radius: 2px;
}
/* 4. Remove the gap-fix remnants from earlier experiments */
.page-title-section + .block-about { padding-top: 0 !important; }
.page-title-section + .block-about .about-container { padding-top: 64px !important; }
/* 5. Consistent horizontal padding for all constrained content */
.home-services-2,
.home-why-2,
.home-cta-2 {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* === MODERN RADIUS SYSTEM === */
/* Scale: pills (buttons) = 100px, cards = 16px, inputs = 10px, badges = 8px */
/* 1. BUTTONS — pill shape (fully rounded, modern) */
.block-hero .cta,
.slideshow-slide-content .cta,
.about-cta,
.about-text .cta,
.home-cta-5,
.svc-cta-5,
.contact-main-23,
.hdr-custom-21,
.navbar-cta,
.btn,
.btn-primary,
.btn-outline,
.btn-add-to-cart {
border-radius: 100px !important;
}
/* 2. INPUT FIELDS — soft rounded */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select,
.contact-main-20,
.contact-main-21,
.contact-main-22 {
border-radius: 10px !important;
}
/* 3. CARDS — generous rounded */
.home-services-6, .home-services-11, .home-services-16, .home-services-21,
.feature-card,
.activity-card,
.news-card,
.campaign-card,
.contact-item {
border-radius: 16px !important;
}
/* 4. BANNERS & ANNOUNCEMENT — subtle rounded (not full, it's a strip) */
.home-banner-1 {
border-radius: 0 !important;
}
/* 5. ICON CONTAINERS — already 50% (circles), keep */
/* 6. IMAGES in galleries — rounded */
.about-images img,
.gallery-grid img,
.cc-gallery-item,
.cc-gallery-item img {
border-radius: 14px !important;
}
/* 7. BADGES & TAGS — small rounded */
.news-header .badge,
.product-badge,
.product-category-tag,
.block-hero-badge {
border-radius: 8px !important;
}
/* 8. NAVBAR — keep sharp (full-width bars should be sharp) */
/* navbar stays 0 — intentional */
/* 9. Cart elements */
.cart-drawer,
.cart-drawer-item-image,
.cart-qty-btn {
border-radius: 10px !important;
}
/* 10. Footer social icons already 50% — keep */
/* === CONTAINER ROUNDING === */
/* Round internal containers/cards that have backgrounds but are NOT full-width sections */
/* Service CTA inner containers (dark #111 bg cards) */
.svc-montaj-bana-c-1, .svc-montaj-pompi-c-1, .svc-otkrivane-techove-c-1,
.svc-otopitelni-instalacii-c-1, .svc-probivane-otvori-c-1, .svc-termopompi-c-1,
.svc-vik-instalacia-c-1, .svc-vik-remonti-c-1 {
border-radius: 20px !important;
}
/* About section: inner containers */
.about-container {
border-radius: 20px;
}
.about-stat {
border-radius: 16px !important;
}
/* Contact items */
.contact-item {
border-radius: 16px !important;
}
/* Feature/activity/news cards (already 16px in some, ensure consistency) */
.feature-card,
.activity-card,
.news-card,
.campaign-card {
border-radius: 16px !important;
overflow: hidden;
}
/* Home services inner grid container */
.home-services-5,
.home-services-2,
.home-why-2,
.home-why-4 {
border-radius: 0;
}
/* Slideshow container */
.block-slideshow,
.block-hero {
border-radius: 0;
}
/* Inner content wrappers within dark sections */
.home-why-4 .home-why-5,
.home-why-8, .home-why-11 {
border-radius: 12px !important;
}
/* === WHY-US: 3 columns as rounded cards === */
.home-why-4 > div {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 40px 32px;
transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.home-why-4 > div:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.07);
border-color: rgba(187, 255, 0, 0.3);
}
/* Reduce grid gap since cards now have their own padding */
.home-why-4 {
gap: 32px !important;
}
/* Icon containers: make them 50% (circles) for modern look */
.home-why-5, .home-why-8, .home-why-11 {
border-radius: 50% !important;
}
/* === Round the major dark/light section containers === */
.home-why-1 {
border-radius: 24px;
margin: 0 24px 24px;
overflow: hidden;
}
/* Also round the about section */
.block-about {
border-radius: 24px;
margin: 0 24px 24px;
overflow: hidden;
}
/* Round CTA section */
.home-cta-1 {
border-radius: 24px;
margin: 0 24px 24px;
overflow: hidden;
}
/* Round services section */
.home-services-1 {
border-radius: 24px;
margin: 0 24px 24px;
overflow: hidden;
}
/* Round trust section */
.home-trust-1 {
border-radius: 24px;
margin: 0 24px 24px;
overflow: hidden;
}
/* Remove gap between banner and slideshow — they should be flush */
.block-html:has(.home-banner-1) {
padding: 0 !important;
margin: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Fix: logo in about section — display full (not cropped) */
.about-images img[src*="6067ca47"] {
height: auto !important;
max-height: 200px;
width: auto !important;
max-width: 100%;
object-fit: contain !important;
grid-column: span 2 !important;
justify-self: center;
margin: 0 auto;
padding: 16px;
background: rgba(255,255,255,0.05);
border-radius: 12px;
}
/* Fix: logo in about section — bigger, full display */
.about-images img[src*="6067ca47"] {
height: auto !important;
max-height: 360px;
width: auto !important;
max-width: 100%;
object-fit: contain !important;
grid-column: span 2 !important;
justify-self: center;
margin: 0 auto;
padding: 24px;
background: rgba(255,255,255,0.05);
border-radius: 16px;
}
/* Fix: ANY logo (png) in about section displays full + big.
Targets png files (logos) — jpg (real photos) keep their cropped look. */
.about-images img[src$=".png"],
.about-images img[src*=".png"] {
height: auto !important;
max-height: 360px;
width: auto !important;
max-width: 100%;
object-fit: contain !important;
grid-column: span 2 !important;
justify-self: center;
margin: 0 auto;
padding: 24px;
background: rgba(255,255,255,0.05);
border-radius: 16px;
}
/* Fix: logo/image in about section — when there's only ONE image, show it full + big.
Targets the only-child img (works regardless of file extension). */
.about-images img:only-child {
height: auto !important;
max-height: 360px;
min-height: 200px;
width: auto !important;
max-width: 100%;
object-fit: contain !important;
grid-column: span 2 !important;
justify-self: center;
margin: 0 auto;
padding: 24px;
background: rgba(255,255,255,0.05);
border-radius: 16px;
}
/* Override the :first-child rule when only one image exists */
.about-images img:first-child:last-child {
height: auto !important;
max-height: 360px;
object-fit: contain !important;
}
/* Fix: center the logo in about section when it's the only image */
.about-images img:only-child {
height: auto !important;
max-height: 360px;
min-height: 200px;
width: auto !important;
max-width: 100%;
object-fit: contain !important;
grid-column: 1 / -1 !important;
justify-self: center !important;
align-self: center !important;
margin: 0 auto !important;
padding: 24px;
background: rgba(255,255,255,0.05);
border-radius: 16px;
}
/* Force the grid container to center when only one child */
.about-images:has(img:only-child) {
grid-template-columns: 1fr !important;
justify-items: center !important;
align-items: center !important;
}
/* === SERVICES PAGE: round the CTA section (consistency with other rounded sections) === */
.svc-cta-1 {
border-radius: 24px;
margin: 0 24px 24px;
overflow: hidden;
}
/* Also round svc-grid container for consistency */
.svc-grid-1 {
border-radius: 24px;
margin: 0 24px 24px;
overflow: hidden;
}
/* Round the svc-cta inner dark container on service subpages too */
.svc-montaj-bana-c-1, .svc-montaj-pompi-c-1, .svc-otkrivane-techove-c-1,
.svc-otopitelni-instalacii-c-1, .svc-probivane-otvori-c-1, .svc-termopompi-c-1,
.svc-vik-instalacia-c-1, .svc-vik-remonti-c-1 {
border-radius: 24px !important;
margin: 0 24px 24px !important;
overflow: hidden;
}
/* === SERVICES: light header instead of dark hero === */
/* Override the page-title-section dark bg ONLY on services page context.
We target it via .svc-grid-1 being the sibling. */
.svc-header-h1 .page-title-section,
section.page-title-section:has(+ .svc-grid-1) {
background: transparent !important;
padding: 40px 0 24px !important;
}
section.page-title-section:has(+ .svc-grid-1)::before {
display: none;
}
section.page-title-section:has(+ .svc-grid-1) h1 {
color: #111 !important;
font-size: 38px;
}
section.page-title-section:has(+ .svc-grid-1) p {
color: #64748b !important;
}
/* === SERVICE CARDS: border + hover effect === */
.svc-grid-4, .svc-grid-9, .svc-grid-14, .svc-grid-19, .svc-grid-24, .svc-grid-29, .svc-grid-34, .svc-grid-39 {
border: 1px solid #e5e7eb !important;
border-radius: 16px !important;
background: #fff;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
position: relative;
overflow: hidden;
}
.svc-grid-4::before, .svc-grid-9::before, .svc-grid-14::before, .svc-grid-19::before,
.svc-grid-24::before, .svc-grid-29::before, .svc-grid-34::before, .svc-grid-39::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #bbff00;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.svc-grid-4:hover, .svc-grid-9:hover, .svc-grid-14:hover, .svc-grid-19:hover,
.svc-grid-24:hover, .svc-grid-29:hover, .svc-grid-34:hover, .svc-grid-39:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.1);
border-color: transparent;
}
.svc-grid-4:hover::before, .svc-grid-9:hover::before, .svc-grid-14:hover::before, .svc-grid-19:hover::before,
.svc-grid-24:hover::before, .svc-grid-29:hover::before, .svc-grid-34:hover::before, .svc-grid-39:hover::before {
transform: scaleX(1);
}
/* Icon container: light up to lime on hover */
.svc-grid-5, .svc-grid-10, .svc-grid-15, .svc-grid-20, .svc-grid-25, .svc-grid-30, .svc-grid-35, .svc-grid-40 {
border-radius: 50% !important;
transition: background 0.3s ease, color 0.3s ease !important;
}
.svc-grid-4:hover .svc-grid-5, .svc-grid-9:hover .svc-grid-10,
.svc-grid-14:hover .svc-grid-15, .svc-grid-19:hover .svc-grid-20,
.svc-grid-24:hover .svc-grid-25, .svc-grid-29:hover .svc-grid-30,
.svc-grid-34:hover .svc-grid-35, .svc-grid-39:hover .svc-grid-40 {
background: #bbff00 !important;
color: #111 !important;
}
/* === HOME-SERVICES: full hover effect (matches services page cards) === */
.home-services-6, .home-services-11, .home-services-16, .home-services-21 {
border: 1px solid #e5e7eb !important;
border-radius: 16px !important;
background: #fff;
box-shadow: none !important;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
position: relative;
overflow: hidden;
}
/* Accent bar on top — appears on hover */
.home-services-6::before, .home-services-11::before, .home-services-16::before, .home-services-21::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #bbff00;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
/* Hover: lift + shadow + accent bar */
.home-services-6:hover, .home-services-11:hover, .home-services-16:hover, .home-services-21:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.1) !important;
border-color: transparent;
}
.home-services-6:hover::before, .home-services-11:hover::before, .home-services-16:hover::before, .home-services-21:hover::before {
transform: scaleX(1);
}
/* Icon: light up to lime on hover */
.home-services-7, .home-services-12, .home-services-17, .home-services-22 {
border-radius: 50% !important;
width: 56px !important;
height: 56px !important;
transition: background 0.3s ease, color 0.3s ease !important;
}
.home-services-6:hover .home-services-7,
.home-services-11:hover .home-services-12,
.home-services-16:hover .home-services-17,
.home-services-21:hover .home-services-22 {
background: #bbff00 !important;
color: #111 !important;
}
/* All Services button — centered under the services grid */
.home-all-services {
text-align: center;
margin-top: 48px;
}
.btn-all-services {
display: inline-block;
padding: 14px 36px;
background: #111;
color: #bbff00 !important;
border-radius: 100px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
border: 2px solid #111;
}
.btn-all-services:hover {
transform: translateY(-2px);
background: #bbff00;
color: #111 !important;
border-color: #bbff00;
box-shadow: 0 12px 28px rgba(187,255,0,0.3);
}
/* === HOVER EFFECTS FOR ALL BUTTONS/LINKS === */
/* 1. CTA buttons (home-cta-5, svc-cta-5, svc-*-c-5): invert colors on hover */
.home-cta-5, .svc-cta-5,
.svc-montaj-bana-c-5, .svc-montaj-pompi-c-5, .svc-otkrivane-techove-c-5,
.svc-otopitelni-instalacii-c-5, .svc-probivane-otvori-c-5, .svc-termopompi-c-5,
.svc-vik-instalacia-c-5, .svc-vik-remonti-c-5,
.about-text .cta, .about-cta {
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}
.home-cta-5:hover, .svc-cta-5:hover,
.svc-montaj-bana-c-5:hover, .svc-montaj-pompi-c-5:hover, .svc-otkrivane-techove-c-5:hover,
.svc-otopitelni-instalacii-c-5:hover, .svc-probivane-otvori-c-5:hover, .svc-termopompi-c-5:hover,
.svc-vik-instalacia-c-5:hover, .svc-vik-remonti-c-5:hover {
transform: translateY(-2px);
background: #fff !important;
color: #111 !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
/* 2. "Вижте повече →" links: lime + slide right on hover */
.home-services-10, .home-services-15, .home-services-20, .home-services-25,
.svc-grid-8, .svc-grid-13, .svc-grid-18, .svc-grid-23, .svc-grid-28, .svc-grid-33, .svc-grid-38, .svc-grid-43,
.svc-montaj-bana-sub-7, .svc-montaj-bana-sub-10, .svc-montaj-bana-sub-13,
.svc-montaj-pompi-sub-7, .svc-montaj-pompi-sub-10, .svc-montaj-pompi-sub-13,
.svc-otkrivane-techove-sub-7, .svc-otkrivane-techove-sub-10, .svc-otkrivane-techove-sub-13,
.svc-otopitelni-instalacii-sub-7, .svc-otopitelni-instalacii-sub-10, .svc-otopitelni-instalacii-sub-13,
.svc-probivane-otvori-sub-7, .svc-probivane-otvori-sub-10, .svc-probivane-otvori-sub-13,
.svc-termopompi-sub-7, .svc-termopompi-sub-10, .svc-termopompi-sub-13,
.svc-vik-instalacia-sub-7, .svc-vik-instalacia-sub-10, .svc-vik-instalacia-sub-13,
.svc-vik-remonti-sub-7, .svc-vik-remonti-sub-10, .svc-vik-remonti-sub-13 {
transition: color 0.25s ease, transform 0.25s ease !important;
display: inline-block;
}
.home-services-6:hover .home-services-10, .home-services-11:hover .home-services-15,
.home-services-16:hover .home-services-20, .home-services-21:hover .home-services-25,
.svc-grid-4:hover .svc-grid-8, .svc-grid-9:hover .svc-grid-13, .svc-grid-14:hover .svc-grid-18,
.svc-grid-19:hover .svc-grid-23, .svc-grid-24:hover .svc-grid-28, .svc-grid-29:hover .svc-grid-33,
.svc-grid-34:hover .svc-grid-38, .svc-grid-39:hover .svc-grid-43 {
color: #bbff00 !important;
transform: translateX(4px);
}
/* 4. Navbar CTA button hover */
.navbar-cta, .hdr-custom-21 {
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.navbar-cta:hover, .hdr-custom-21:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(187,255,0,0.4);
}
/* 5. Footer links hover */
.footer-col a {
transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.footer-col a:hover {
color: #bbff00 !important;
padding-left: 4px;
}
/* === ABOUT: CTA button + about-stat hover === */
/* 1. "Научете повече за нас" button — invert + lift on hover */
.about-text .cta,
.about-text a.cta {
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}
.about-text .cta:hover,
.about-text a.cta:hover {
transform: translateY(-2px);
background: #111 !important;
color: #bbff00 !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
/* 2. about-stat blocks — lift + lime accent on hover */
.about-stat {
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
cursor: default;
}
.about-stat:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
border-color: #bbff00 !important;
}
/* 3. about-stat-number: pulse to lime on hover */
.about-stat-number {
transition: color 0.3s ease, transform 0.3s ease !important;
}
.about-stat:hover .about-stat-number {
color: #fff !important;
transform: scale(1.05);
}
/* 4. about-stat-label: brighter on hover */
.about-stat-label {
transition: color 0.3s ease !important;
}
.about-stat:hover .about-stat-label {
color: #bbff00 !important;
}
/* === ABOUT: fix stat hover — keep text readable on lime bg === */
/* Override the previous bad hover (white number, lime label = unreadable on lime) */
.about-stat:hover .about-stat-number {
color: #111 !important;
transform: scale(1.08);
}
.about-stat:hover .about-stat-label {
color: #111 !important;
}
/* Slightly stronger shadow + darker border for definition on lime */
.about-stat:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
border-color: #111 !important;
border-width: 2px;
}
/* === DISABLE about-stat hover animations (they affect text above) === */
.about-stat,
.about-stat:hover {
transform: none !important;
box-shadow: none !important;
border-color: rgba(0,0,0,0.04) !important;
border-width: 1px !important;
transition: none !important;
}
.about-stat-number,
.about-stat:hover .about-stat-number {
transform: none !important;
color: #111 !important;
transition: none !important;
}
.about-stat-label,
.about-stat:hover .about-stat-label {
color: #333 !important;
transition: none !important;
}
/* Keep ONLY the CTA button hover (Научете повече) */
.about-text .cta,
.about-text a.cta {
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}
.about-text .cta:hover,
.about-text a.cta:hover {
transform: translateY(-2px);
background: #111 !important;
color: #bbff00 !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
/* About CTA button hover: white background instead of black */
.about-text .cta:hover,
.about-text a.cta:hover {
background: #fff !important;
color: #111 !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
/* === SERVICES GRID: give the whole block a defined container === */
.svc-grid-1 {
background: #f8fafc !important;
border: 1px solid #e5e7eb !important;
border-radius: 24px;
margin: 0 24px 32px !important;
padding: 64px 32px !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
/* Inner container stays centered */
.svc-grid-2 {
max-width: 1200px;
margin: 0 auto;
}
/* Cards now sit on light gray — make them white with subtle shadow for depth */
.svc-grid-4, .svc-grid-9, .svc-grid-14, .svc-grid-19, .svc-grid-24, .svc-grid-29, .svc-grid-34, .svc-grid-39 {
background: #fff !important;
border: 1px solid #e5e7eb !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
/* === REMOVE the gray grid container (revert) === */
.svc-grid-1 {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Cards back to simple white */
.svc-grid-4, .svc-grid-9, .svc-grid-14, .svc-grid-19, .svc-grid-24, .svc-grid-29, .svc-grid-34, .svc-grid-39 {
background: #fff !important;
border: 1px solid #e5e7eb !important;
box-shadow: none !important;
}
/* === ROUND the dark title block (page-title-section) === */
.page-title-section {
border-radius: 24px !important;
margin: 16px 24px 24px !important;
overflow: hidden;
}
/* === SERVICES: light title instead of dark hero === */
/* Target only services page title (followed by svc-grid-1) */
section.page-title-section:has(+ .svc-grid-1) {
background: transparent !important;
border-radius: 0 !important;
margin: 0 0 32px 0 !important;
padding: 24px 0 16px !important;
border-bottom: 3px solid #bbff00;
}
section.page-title-section:has(+ .svc-grid-1)::before {
display: none;
}
section.page-title-section:has(+ .svc-grid-1) h1 {
color: #111 !important;
}
section.page-title-section:has(+ .svc-grid-1) p {
color: #64748b !important;
margin-top: 8px;
}
/* Services page: light title (override dark hero) */
.page-title-section.svc-title-light {
background: transparent !important;
border-radius: 0 !important;
margin: 0 0 32px 0 !important;
padding: 24px 0 16px !important;
border-bottom: 3px solid #bbff00;
}
.page-title-section.svc-title-light::before {
display: none;
}
.page-title-section.svc-title-light h1 {
color: #111 !important;
}
.page-title-section.svc-title-light p {
color: #64748b !important;
margin-top: 8px;
}
/* Fix: make the lime line visible (override overflow:hidden, make line full-width) */
.page-title-section.svc-title-light {
overflow: visible !important;
}
.page-title-section.svc-title-light .container {
border-bottom: 3px solid #bbff00;
padding-bottom: 16px;
}
/* Remove the section border-bottom (move it to container) */
.page-title-section.svc-title-light {
border-bottom: none !important;
}
/* === Termopompi specs section === */
.tp-specs {
padding: 64px 24px;
background: #f8fafc;
margin: 0 24px 32px;
border-radius: 24px;
border: 1px solid #e5e7eb;
}
.tp-specs-container {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.tp-specs-title {
font-size: 36px;
font-weight: 800;
color: #111;
margin-bottom: 12px;
}
.tp-specs-intro {
font-size: 17px;
color: #64748b;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.tp-specs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.tp-spec-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 28px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
}
.tp-spec-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #bbff00;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.tp-spec-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.1);
border-color: transparent;
}
.tp-spec-card:hover::before {
transform: scaleX(1);
}
.tp-spec-label {
font-size: 13px;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.tp-spec-value {
font-size: 22px;
font-weight: 700;
color: #111;
transition: color 0.3s ease;
}
.tp-spec-card:hover .tp-spec-value {
color: #bbff00;
}
.tp-specs-note {
background: #fff;
border-left: 4px solid #bbff00;
border-radius: 12px;
padding: 24px 28px;
text-align: left;
margin-bottom: 24px;
font-size: 16px;
line-height: 1.7;
color: #333;
}
.tp-specs-note strong {
color: #111;
font-weight: 700;
}
.tp-specs-prices-note {
font-size: 15px;
color: #64748b;
font-style: italic;
margin-top: 16px;
}
@media (max-width: 768px) {
.tp-specs-grid { grid-template-columns: repeat(2, 1fr); }
.tp-specs { padding: 40px 16px; margin: 0 16px 24px; }
}
/* === FIX: restore original button colors, keep only hover === */
/* svc-termopompi-m-19 (Заявете услуга) — restore original lime, remove white */
.svc-termopompi-m-19 {
background: #bbff00 !important;
color: #111 !important;
border-radius: 100px !important;
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}
.svc-termopompi-m-19:hover {
transform: translateY(-2px);
background: #111 !important;
color: #bbff00 !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
/* === Buttons: BLACK bg + LIME text (like navbar CTA), hover inverts to lime === */
/* termopompi Контакти button (svc-termopompi-c-5): lime/black, hover → white/lime */
.svc-termopompi-c-5 {
background: #bbff00 !important;
color: #111 !important;
border: 2px solid #bbff00 !important;
}
.svc-termopompi-c-5:hover {
background: #fff !important;
color: #bbff00 !important;
border-color: #fff !important;
}
.svc-termopompi-c-5:hover {
background: #fff !important;
color: #111 !important;
}
/* === TOTAL TABLE CLEANUP: uniform rows, no hover, same font === */
/* === ZEBRA STRIPES: alternating white/gray rows === */
/* === Revert to original: white rows on gray table background === */
/* === PRICES TABLE — clean, beautiful styling === */
/* === PRICES TABLE — polished, no hovers, no border on button === */
/* === PRICES TABLE (final, clean) === */
.svc-termopompi-prices-3 {
font-size: 32px; font-weight: 800; text-align: center;
margin-bottom: 12px; color: #111;
}
.svc-termopompi-prices-4 {
font-size: 15px; color: #6b7280; text-align: center; margin-bottom: 8px;
}
.svc-termopompi-prices-4 strong { color: #111; }
.svc-termopompi-prices-5 {
font-size: 13px; color: #9ca3af; text-align: center; margin-bottom: 32px;
}
.svc-termopompi-prices-7 {
width: 100%; border-collapse: collapse;
background: #f5f5f5; border-radius: 20px; overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.svc-termopompi-prices-8 { background: #111; color: #bbff00; }
.svc-termopompi-prices-9, .svc-termopompi-prices-10 {
padding: 20px 24px; text-align: left;
font-size: 14px; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase;
}
.svc-termopompi-prices-10 { text-align: right; }
.svc-termopompi-prices-12, .svc-termopompi-prices-15,
.svc-termopompi-prices-18, .svc-termopompi-prices-21,
.svc-termopompi-prices-24, .svc-termopompi-prices-27,
.svc-termopompi-prices-30 {
padding: 18px 24px; font-size: 16px; font-weight: 500; color: #374151;
}
.svc-termopompi-prices-13, .svc-termopompi-prices-16,
.svc-termopompi-prices-19, .svc-termopompi-prices-22,
.svc-termopompi-prices-25, .svc-termopompi-prices-28,
.svc-termopompi-prices-31 {
padding: 18px 24px; font-size: 16px; font-weight: 700;
color: #111; text-align: right; white-space: nowrap;
}
.svc-termopompi-prices-11, .svc-termopompi-prices-14,
.svc-termopompi-prices-17, .svc-termopompi-prices-20,
.svc-termopompi-prices-23, .svc-termopompi-prices-26,
.svc-termopompi-prices-29 { background: #fff; }
.svc-termopompi-prices-11, .svc-termopompi-prices-14,
.svc-termopompi-prices-17, .svc-termopompi-prices-20,
.svc-termopompi-prices-23, .svc-termopompi-prices-26 {
border-bottom: 1px solid #f0f0f0;
}
.svc-termopompi-prices-32 {
font-size: 14px; color: #6b7280; text-align: center; margin-top: 24px;
}
/* Center the button */
.svc-termopompi-prices-33 { text-align: center; margin-top: 32px; }
.svc-termopompi-prices-34 {
display: inline-block; padding: 16px 40px;
background: #bbff00; color: #111;
border-radius: 100px; font-size: 15px; font-weight: 600;
letter-spacing: 0.3px; text-decoration: none;
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.svc-termopompi-prices-34:hover {
transform: translateY(-2px); background: #111; color: #bbff00;
box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
/* No hover on rows */
.svc-termopompi-prices-7 tr, .svc-termopompi-prices-7 tr:hover,
.svc-termopompi-prices-7 td, .svc-termopompi-prices-7 td:hover {
background: inherit; transform: none; transition: none;
}
/* Fix: header cells need explicit bg (tr bg doesn't inherit to th) */
.svc-termopompi-prices-8,
.svc-termopompi-prices-8 th,
.svc-termopompi-prices-9, .svc-termopompi-prices-10 {
background: #111 !important;
color: #bbff00 !important;
}
/* === GALLERY (all service pages, shared classes) === */
/* Section container */
.svc-termopompi-gal-1, .svc-montaj-bana-gal-1, .svc-montaj-pompi-gal-1,
.svc-otkrivane-techove-gal-1, .svc-otopitelni-instalacii-gal-1,
.svc-probivane-otvori-gal-1, .svc-vik-instalacia-gal-1, .svc-vik-remonti-gal-1,
.svc-termopompi-prices-1 {
padding: 64px 0;
background: #f5f5f5;
border-radius: 24px;
margin: 0 24px 32px;
}
/* Inner container */
.svc-termopompi-gal-2, .svc-montaj-bana-gal-2, .svc-montaj-pompi-gal-2,
.svc-otkrivane-techove-gal-2, .svc-otopitelni-instalacii-gal-2,
.svc-probivane-otvori-gal-2, .svc-vik-instalacia-gal-2, .svc-vik-remonti-gal-2 {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Gallery heading */
.svc-termopompi-gal-3, .svc-montaj-bana-gal-3, .svc-montaj-pompi-gal-3,
.svc-otkrivane-techove-gal-3, .svc-otopitelni-instalacii-gal-3,
.svc-probivane-otvori-gal-3, .svc-vik-instalacia-gal-3, .svc-vik-remonti-gal-3 {
font-size: 28px;
font-weight: 800;
text-align: center;
margin-bottom: 32px;
color: #111;
}
/* Grid layout */
.svc-termopompi-gal-4, .svc-montaj-bana-gal-4, .svc-montaj-pompi-gal-4,
.svc-otkrivane-techove-gal-4, .svc-otopitelni-instalacii-gal-4,
.svc-probivane-otvori-gal-4, .svc-vik-instalacia-gal-4, .svc-vik-remonti-gal-4 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* Gallery images */
.svc-termopompi-gal-5, .svc-termopompi-gal-6, .svc-termopompi-gal-7,
.svc-termopompi-gal-8, .svc-termopompi-gal-9, .svc-termopompi-gal-10,
.svc-termopompi-gal-11, .svc-termopompi-gal-12, .svc-termopompi-gal-13,
.svc-termopompi-gal-14, .svc-termopompi-gal-15, .svc-termopompi-gal-16,
.svc-montaj-bana-gal-5, .svc-montaj-bana-gal-6, .svc-montaj-bana-gal-7,
.svc-montaj-bana-gal-8, .svc-montaj-bana-gal-9, .svc-montaj-bana-gal-10,
.svc-montaj-bana-gal-11, .svc-montaj-bana-gal-12, .svc-montaj-bana-gal-13,
.svc-montaj-bana-gal-14, .svc-montaj-bana-gal-15, .svc-montaj-bana-gal-16,
.svc-montaj-pompi-gal-5, .svc-montaj-pompi-gal-6, .svc-montaj-pompi-gal-7,
.svc-montaj-pompi-gal-8, .svc-montaj-pompi-gal-9, .svc-montaj-pompi-gal-10,
.svc-montaj-pompi-gal-11, .svc-montaj-pompi-gal-12, .svc-montaj-pompi-gal-13,
.svc-montaj-pompi-gal-14, .svc-montaj-pompi-gal-15, .svc-montaj-pompi-gal-16,
.svc-otkrivane-techove-gal-5, .svc-otkrivane-techove-gal-6, .svc-otkrivane-techove-gal-7,
.svc-otkrivane-techove-gal-8, .svc-otkrivane-techove-gal-9, .svc-otkrivane-techove-gal-10,
.svc-otkrivane-techove-gal-11, .svc-otkrivane-techove-gal-12, .svc-otkrivane-techove-gal-13,
.svc-otkrivane-techove-gal-14, .svc-otkrivane-techove-gal-15, .svc-otkrivane-techove-gal-16,
.svc-otopitelni-instalacii-gal-5, .svc-otopitelni-instalacii-gal-6, .svc-otopitelni-instalacii-gal-7,
.svc-otopitelni-instalacii-gal-8, .svc-otopitelni-instalacii-gal-9, .svc-otopitelni-instalacii-gal-10,
.svc-otopitelni-instalacii-gal-11, .svc-otopitelni-instalacii-gal-12, .svc-otopitelni-instalacii-gal-13,
.svc-otopitelni-instalacii-gal-14, .svc-otopitelni-instalacii-gal-15, .svc-otopitelni-instalacii-gal-16,
.svc-probivane-otvori-gal-5, .svc-probivane-otvori-gal-6, .svc-probivane-otvori-gal-7,
.svc-probivane-otvori-gal-8, .svc-probivane-otvori-gal-9, .svc-probivane-otvori-gal-10,
.svc-probivane-otvori-gal-11, .svc-probivane-otvori-gal-12, .svc-probivane-otvori-gal-13,
.svc-probivane-otvori-gal-14, .svc-probivane-otvori-gal-15, .svc-probivane-otvori-gal-16,
.svc-vik-instalacia-gal-5, .svc-vik-instalacia-gal-6, .svc-vik-instalacia-gal-7,
.svc-vik-instalacia-gal-8, .svc-vik-instalacia-gal-9, .svc-vik-instalacia-gal-10,
.svc-vik-instalacia-gal-11, .svc-vik-instalacia-gal-12, .svc-vik-instalacia-gal-13,
.svc-vik-instalacia-gal-14, .svc-vik-instalacia-gal-15, .svc-vik-instalacia-gal-16,
.svc-vik-remonti-gal-5, .svc-vik-remonti-gal-6, .svc-vik-remonti-gal-7,
.svc-vik-remonti-gal-8, .svc-vik-remonti-gal-9, .svc-vik-remonti-gal-10,
.svc-vik-remonti-gal-11, .svc-vik-remonti-gal-12, .svc-vik-remonti-gal-13,
.svc-vik-remonti-gal-14, .svc-vik-remonti-gal-15, .svc-vik-remonti-gal-16 {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 12px;
transition: transform 0.35s ease;
}
/* Note text */
.svc-termopompi-gal-17, .svc-montaj-bana-gal-17, .svc-montaj-pompi-gal-17,
.svc-otkrivane-techove-gal-17, .svc-otopitelni-instalacii-gal-17,
.svc-probivane-otvori-gal-17, .svc-vik-instalacia-gal-17, .svc-vik-remonti-gal-17 {
text-align: center;
margin-top: 32px;
}
/* "Виж всички" toggle button */
.svc-termopompi-gal-18, .svc-montaj-bana-gal-18, .svc-montaj-pompi-gal-18,
.svc-otkrivane-techove-gal-18, .svc-otopitelni-instalacii-gal-18,
.svc-probivane-otvori-gal-18, .svc-vik-instalacia-gal-18, .svc-vik-remonti-gal-18 {
display: inline-block;
padding: 12px 32px;
background: #111;
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
/* Prices section container (shares gal-1 styling) */
.svc-termopompi-prices-1 {
padding: 64px 0;
background: #f5f5f5;
border-radius: 24px;
margin: 0 24px 32px;
}
.svc-termopompi-prices-2 {
max-width: 1000px;
margin: 0 auto;
padding: 0 24px;
}
/* Gallery: hide extra images by default (show on "Виж всички") */
.gallery-extra {
display: none;
}
/* Termopompi components text */
.svc-termopompi-m-components {
font-size: 15px;
line-height: 1.8;
color: #4b5563;
margin: 24px 0;
}
.svc-termopompi-m-components strong {
color: #111;
font-weight: 700;
}
/* Termopompi components text — elegant card style */
.svc-termopompi-m-components {
font-size: 15px;
line-height: 1.8;
color: #4b5563;
margin: 24px 0;
padding: 20px 24px;
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
border-radius: 12px;
border-left: 4px solid #bbff00;
position: relative;
}
.svc-termopompi-m-components strong {
color: #111;
font-weight: 700;
}
/* Свързани услуги cards — hover directly on each card */
.svc-montaj-bana-sub-5, .svc-montaj-bana-sub-8, .svc-montaj-bana-sub-11,
.svc-montaj-pompi-sub-5, .svc-montaj-pompi-sub-8, .svc-montaj-pompi-sub-11,
.svc-otkrivane-techove-sub-5, .svc-otkrivane-techove-sub-8, .svc-otkrivane-techove-sub-11,
.svc-otopitelni-instalacii-sub-5, .svc-otopitelni-instalacii-sub-8, .svc-otopitelni-instalacii-sub-11,
.svc-probivane-otvori-sub-5, .svc-probivane-otvori-sub-8, .svc-probivane-otvori-sub-11,
.svc-termopompi-sub-5, .svc-termopompi-sub-8, .svc-termopompi-sub-11,
.svc-vik-instalacia-sub-5, .svc-vik-instalacia-sub-8, .svc-vik-instalacia-sub-11,
.svc-vik-remonti-sub-5, .svc-vik-remonti-sub-8, .svc-vik-remonti-sub-11 {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
cursor: default;
}
.svc-montaj-bana-sub-5:hover, .svc-montaj-bana-sub-8:hover, .svc-montaj-bana-sub-11:hover,
.svc-montaj-pompi-sub-5:hover, .svc-montaj-pompi-sub-8:hover, .svc-montaj-pompi-sub-11:hover,
.svc-otkrivane-techove-sub-5:hover, .svc-otkrivane-techove-sub-8:hover, .svc-otkrivane-techove-sub-11:hover,
.svc-otopitelni-instalacii-sub-5:hover, .svc-otopitelni-instalacii-sub-8:hover, .svc-otopitelni-instalacii-sub-11:hover,
.svc-probivane-otvori-sub-5:hover, .svc-probivane-otvori-sub-8:hover, .svc-probivane-otvori-sub-11:hover,
.svc-termopompi-sub-5:hover, .svc-termopompi-sub-8:hover, .svc-termopompi-sub-11:hover,
.svc-vik-instalacia-sub-5:hover, .svc-vik-instalacia-sub-8:hover, .svc-vik-instalacia-sub-11:hover,
.svc-vik-remonti-sub-5:hover, .svc-vik-remonti-sub-8:hover, .svc-vik-remonti-sub-11:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
border-color: #bbff00;
}
/* === RESPONSIVE: all custom elements === */
/* ─── TABLET (max-width: 968px) ─── */
@media (max-width: 968px) {
/* Service grids: 4 cols → 2 cols */
.home-services-5, .svc-grid-3 {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Why-us: 3 cols → 2 cols */
.home-why-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Related services: 3 cols → 2 cols */
.svc-montaj-bana-sub-4, .svc-montaj-pompi-sub-4,
.svc-otkrivane-techove-sub-4, .svc-otopitelni-instalacii-sub-4,
.svc-probivane-otvori-sub-4, .svc-termopompi-sub-4,
.svc-vik-instalacia-sub-4, .svc-vik-remonti-sub-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Gallery: 3 cols → 2 cols */
.svc-termopompi-gal-4, .svc-montaj-bana-gal-4, .svc-montaj-pompi-gal-4,
.svc-otkrivane-techove-gal-4, .svc-otopitelni-instalacii-gal-4,
.svc-probivane-otvori-gal-4, .svc-vik-instalacia-gal-4, .svc-vik-remonti-gal-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Components badges: 4 cols → 2 cols */
.tp-specs-badges, .tp-specs-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Section margins reduce on tablet */
.home-why-1, .home-services-1, .home-trust-1, .home-cta-1,
.svc-grid-1, .svc-cta-1, .svc-termopompi-prices-1,
.svc-montaj-bana-gal-1, .svc-montaj-pompi-gal-1,
.svc-otkrivane-techove-gal-1, .svc-otopitelni-instalacii-gal-1,
.svc-probivane-otvori-gal-1, .svc-termopompi-gal-1,
.svc-vik-instalacia-gal-1, .svc-vik-remonti-gal-1 {
margin: 0 16px 24px !important;
border-radius: 16px !important;
}
/* Service main blocks: 2-col → 1-col */
.svc-montaj-bana-m-2, .svc-montaj-pompi-m-2,
.svc-otkrivane-techove-m-2, .svc-otopitelni-instalacii-m-2,
.svc-probivane-otvori-m-2, .svc-termopompi-m-2,
.svc-vik-instalacia-m-2, .svc-vik-remonti-m-2 {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
/* About section: 2-col → 1-col */
.about-container, .about-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
/* Trust badges: wrap */
.home-trust-2 {
flex-wrap: wrap !important;
justify-content: center !important;
}
/* Contact grid: 1-col */
.contact-grid {
grid-template-columns: 1fr !important;
}
/* Footer grid: 1-col */
.footer-grid {
grid-template-columns: 1fr 1fr !important;
}
/* Prices table: make scrollable */
.svc-termopompi-prices-7 {
display: block !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
/* Page title section */
.page-title-section {
padding: 32px 16px !important;
margin: 8px 16px 16px !important;
}
/* All services button */
.btn-all-services {
padding: 12px 28px !important;
font-size: 14px !important;
}
/* Buttons on mobile: full width */
.svc-termopompi-m-19, .svc-termopompi-prices-34,
.svc-montaj-bana-m-19, .svc-montaj-pompi-m-19,
.svc-otkrivane-techove-m-19, .svc-otopitelni-instalacii-m-19,
.svc-probivane-otvori-m-19, .svc-vik-instalacia-m-19, .svc-vik-remonti-m-19 {
display: block !important;
text-align: center !important;
padding: 14px 24px !important;
}
}
/* ─── MOBILE (max-width: 480px) ─── */
@media (max-width: 480px) {
/* Service grids: 2 cols → 1 col */
.home-services-5, .svc-grid-3 {
grid-template-columns: 1fr !important;
}
/* Why-us: 2 cols → 1 col */
.home-why-4 {
grid-template-columns: 1fr !important;
}
/* Related services: 1 col */
.svc-montaj-bana-sub-4, .svc-montaj-pompi-sub-4,
.svc-otkrivane-techove-sub-4, .svc-otopitelni-instalacii-sub-4,
.svc-probivane-otvori-sub-4, .svc-termopompi-sub-4,
.svc-vik-instalacia-sub-4, .svc-vik-remonti-sub-4 {
grid-template-columns: 1fr !important;
}
/* Gallery: 1 col */
.svc-termopompi-gal-4, .svc-montaj-bana-gal-4, .svc-montaj-pompi-gal-4,
.svc-otkrivane-techove-gal-4, .svc-otopitelni-instalacii-gal-4,
.svc-probivane-otvori-gal-4, .svc-vik-instalacia-gal-4, .svc-vik-remonti-gal-4 {
grid-template-columns: 1fr !important;
}
/* Components badges: 1 col */
.tp-specs-badges, .tp-specs-grid {
grid-template-columns: 1fr !important;
}
/* Section padding reduce on mobile */
.home-services-1, .home-why-1, .home-cta-1, .block-about,
.svc-grid-1, .svc-cta-1, .svc-termopompi-prices-1,
.svc-termopompi-gal-1, .svc-montaj-bana-gal-1, .svc-montaj-pompi-gal-1,
.svc-otkrivane-techove-gal-1, .svc-otopitelni-instalacii-gal-1,
.svc-probivane-otvori-gal-1, .svc-vik-instalacia-gal-1, .svc-vik-remonti-gal-1 {
padding: 40px 16px !important;
margin: 0 8px 16px !important;
}
/* About stats: wrap */
.about-stats {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
}
.about-stat {
flex: 1 1 calc(50% - 12px) !important;
min-width: 120px !important;
}
/* Footer grid: 1 col */
.footer-grid {
grid-template-columns: 1fr !important;
}
/* Hide trust badges text on very small screens (keep icons) */
.home-trust-2 > div {
font-size: 12px !important;
}
/* Page title smaller */
.page-title-section h1 {
font-size: 26px !important;
}
/* Headings smaller */
.home-services-3, .home-why-3, .home-cta-3 {
font-size: 26px !important;
}
/* Prices table smaller font */
.svc-termopompi-prices-9, .svc-termopompi-prices-10,
.svc-termopompi-prices-12, .svc-termopompi-prices-13,
.svc-termopompi-prices-15, .svc-termopompi-prices-16,
.svc-termopompi-prices-18, .svc-termopompi-prices-19,
.svc-termopompi-prices-21, .svc-termopompi-prices-22,
.svc-termopompi-prices-24, .svc-termopompi-prices-25,
.svc-termopompi-prices-27, .svc-termopompi-prices-28,
.svc-termopompi-prices-30, .svc-termopompi-prices-31 {
font-size: 14px !important;
padding: 14px 12px !important;
}
/* Buttons smaller on mobile */
.btn-all-services, .svc-termopompi-prices-34 {
font-size: 14px !important;
padding: 12px 24px !important;
}
}