/* ----------------------------------------------------------------
    MIN Elektro — Petrovac
    Based on xArchi Mover Demo (yellow-2 color scheme)
    Custom overrides for MIN Elektro brand
-----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ----------------------------------------------------------------
    About Section — clean redesign
-----------------------------------------------------------------*/

.about-clean-section {
    padding: 80px 0;
    background: #fff;
}

/* "O NAMA" yellow badge */
.about-badge {
    display: inline-block;
    background: #f0a500;
    color: #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    padding: 5px 14px;
    border-radius: 2px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.about-clean-section h2 {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 18px;
    color: #111;
}

.about-cta-row {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Stat boxes */
.about-stat-box {
    background: #f8f9fa;
    border-left: 4px solid #f0a500;
    padding: 22px 18px;
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.about-stat-box:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.09);
    transform: translateY(-2px);
}

.about-stat-icon {
    width: 42px;
    height: 42px;
    background: #f0a500;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.about-stat-icon i {
    color: #000;
    font-size: 19px;
}

.about-stat-box h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #111;
}

.about-stat-box p {
    font-size: 13.5px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

body {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    line-height: 1.7em;
}

/* Logo height constraint */
#logo img.logo {
    max-height: 105px !important;
    width: auto;
}

/* OG card image in footer */
.footer-og-card {
    width: 100%;
    max-width: 190px;
    border-radius: 6px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
    display: block;
    margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
}

.footer-og-card:hover {
    opacity: 1;
}

.de_tab.tab_steps .de_nav li span {
    font-family: "Poppins", sans-serif;
    text-transform: none;
}

.expand h4 {
    font-size: 15px;
}

h1 {
    text-align: left;
    letter-spacing: 0;
    font-size: 48px;
    text-transform: none;
    letter-spacing: -2px;
}

h2 {
    font-size: 32px;
    letter-spacing: -1.15px;
}

#mainmenu,
#mainmenu li a {
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

#mainmenu > li > a {
    font-weight: 600;
}

.de_count.ultra-big {
    padding: 0;
}

.de_count.ultra-big h3 {
    letter-spacing: -10px;
    margin-bottom: 0;
}

.de_count.ultra-big span {
    letter-spacing: 0;
    font-size: 16px;
}

.de_phone-simple .d-num {
    color: #000000;
    letter-spacing: -1.1px;
}

a.btn-custom,
a.btn-custom:hover {
    letter-spacing: 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}



/* Header WEB SHOP button — yellow bg, black icon + text */
.header-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #f0a500;
    color: #000 !important;
    text-decoration: none !important;
    padding: 8px 22px;
    font-family: "Poppins", sans-serif;
    font-size: 15.5px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 4px;
    margin-left: 20px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
    line-height: 1;
    align-self: center;
    margin-top: -10px;
}

.header-shop-btn i {
    color: #000;
    font-size: 20px;
}

.header-shop-btn:hover {
    background: #d48f00;
    color: #000 !important;
    transform: translateY(-1px);
}

.box-number.square i {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

p.lead {
    font-size: 17px;
}

footer {
    font-size: 14px;
}

footer .widget ul li {
    padding: 2px 0;
}

footer address span {
    padding: 2px 0;
}

/* Prevent horizontal overflow */
html,
body {
    overflow-x: hidden;
}

/* Mobile responsive */
@media (max-width: 991.98px) {
    h1 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    h2 {
        font-size: 26px;
    }
}

@media (max-width: 575.98px) {
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 22px;
    }
}

/* ----------------------------------------------------------------
    Contact Form Fixes
    Ensure form-control uses correct font and sizing
-----------------------------------------------------------------*/

.form-default input[type="text"],
.form-default input[type="email"],
.form-default input[type="tel"],
.form-default select,
.form-default textarea {
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    width: 100%;
    display: block;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
}

.form-default input[type="text"]:focus,
.form-default input[type="email"]:focus,
.form-default input[type="tel"]:focus,
.form-default select:focus,
.form-default textarea:focus {
    outline: none;
    border-color: #f0a500;
    box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.15);
}

.form-default select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-default textarea {
    resize: vertical;
    min-height: 130px;
}

.form-default input[type="submit"],
.form-default .btn-custom {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 14px 32px;
    cursor: pointer;
    border: none;
}

/* De_contact_info improvements */
.de_contact_info address p {
    margin-bottom: 10px;
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.de_contact_info address p i {
    margin-top: 3px;
    min-width: 16px;
}

/* Services section wrapper — proper spacing after Hero */
.section-services-wrap {
    padding-top: 40px;
    padding-bottom: 0;
}

@media (max-width: 991.98px) {
    .section-services-wrap {
        padding-top: 30px;
    }
}

.section-services-wrap .svc-row {
    --bs-gutter-x: 5px;
    --bs-gutter-y: 5px;
    margin-bottom: 5px;
}

/* Services section: card min-height */
#section-services .col-md-4.text-middle .h-100 {
    min-height: 320px;
}

/* Services section quote */
.svc-quote {
    position: relative;
    font-family: "Poppins", sans-serif;
    font-size: 21px;
    font-style: italic;
    font-weight: 300;
    color: #555;
    border: none;
    padding: 0 32px;
    margin: 0 auto 8px;
    max-width: 580px;
    line-height: 1.65;
}

.svc-quote::before {
    content: '\201C';
    position: absolute;
    left: 0;
    top: -10px;
    font-size: 60px;
    line-height: 1;
    font-family: Georgia, serif;
    font-style: normal;
    color: #f0a500;
    opacity: 0.6;
}

.svc-quote::after {
    content: '\201D';
    position: absolute;
    right: 0;
    bottom: -24px;
    font-size: 60px;
    line-height: 1;
    font-family: Georgia, serif;
    font-style: normal;
    color: #f0a500;
    opacity: 0.6;
}

/* ----------------------------------------------------------------
    Service Card CSS Patterns
    Premium dark gradient + geometric pattern backgrounds
    Used instead of stock photos for service categories
-----------------------------------------------------------------*/

/* Shared: no background-image from JS, handled by CSS */
.svc-pattern {
    background-size: 28px 28px, 100% 100%;
    position: relative;
    min-height: 320px;
}

/* Remove overlay div dependency — inherit overlay via gradient */
.svc-pattern .padding40 {
    position: relative;
    z-index: 2;
}

/* ── Elektroinstalacije — dark electric navy, dot grid + yellow center pulse */
.svc-elektro {
    background-image:
        radial-gradient(ellipse at center, rgba(240,165,0,0.1) 0%, transparent 60%),
        radial-gradient(circle, rgba(255,255,255,0.05) 1.5px, transparent 1.5px),
        linear-gradient(145deg, #0d1b2e 0%, #1a2f4a 50%, #0d1b2e 100%);
    background-size: 100% 100%, 24px 24px, 100% 100%;
}

/* ── Vodovod — deep ocean blue, diagonal dots */
.svc-vodovod {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px),
        linear-gradient(145deg, #0b2545 0%, #134074 50%, #0b2545 100%);
    background-size: 26px 26px, 100% 100%;
}

/* ── Grejanje — deep ember red, diagonal lines */
.svc-grejanje {
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 14px
        ),
        linear-gradient(145deg, #3d0c02 0%, #7a1c06 50%, #3d0c02 100%);
    background-size: 100% 100%, 100% 100%;
}

/* ── LED Rasveta — midnight green, dot grid */
.svc-led {
    background-image:
        radial-gradient(circle, rgba(240,165,0,0.1) 1.5px, transparent 1.5px),
        linear-gradient(145deg, #0a2e1a 0%, #1a5c2e 50%, #0a2e1a 100%);
    background-size: 24px 24px, 100% 100%;
}

/* ── Pumpe — deep teal, cross-hatch grid */
.svc-pumpa {
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(145deg, #032b36 0%, #065a6e 50%, #032b36 100%);
    background-size: 24px 24px, 24px 24px, 100% 100%;
}

/* ── Toplotne pumpe — burnt amber, radial pulse */
.svc-toplotna {
    background-image:
        radial-gradient(ellipse at center, rgba(240,120,0,0.12) 0%, transparent 65%),
        radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(145deg, #2a1200 0%, #5c2d0a 50%, #2a1200 100%);
    background-size: 100% 100%, 22px 22px, 100% 100%;
}

/* ── Kupatila — dark slate navy, fine dot grid */
.svc-kupatilo {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(145deg, #0d1b2a 0%, #1a3a5c 50%, #0d1b2a 100%);
    background-size: 20px 20px, 100% 100%;
}

/* ── Sanitarije — dark charcoal, subtle tile grid */
.svc-sanitarije {
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(145deg, #1a1a1a 0%, #303030 50%, #1a1a1a 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
}

/* ── Pločice — dark graphite, chess dot pattern */
.svc-plocice {
    background-image:
        radial-gradient(circle, rgba(240,165,0,0.08) 2px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.04) 2px, transparent 2px),
        linear-gradient(145deg, #1c1c1c 0%, #2e2e2e 50%, #1c1c1c 100%);
    background-size: 32px 32px, 16px 16px, 100% 100%;
    background-position: 0 0, 8px 8px, 0 0;
}

/* Icon treatment on CSS pattern cards — bigger, softer */
.svc-pattern .fa {
    font-size: 3.8rem;
    opacity: 0.95;
    filter: drop-shadow(0 2px 12px rgba(240,165,0,0.4));
    display: block;
    margin-bottom: 16px;
}

/* Separator line under icon */
.svc-pattern h3::before {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: #f0a500;
    margin: 0 auto 14px;
    border-radius: 2px;
}