/* Global overrides — edited freely. Joins the purge input. */

/* Lock brand logo dimensions so height:auto from img-fluid cannot cause CLS */

:root {
    /* Primary Colors */
    --color-primary: #3bb44d;

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-black: #2D2D2D;

    /* Feedback Colors */

    /* Typography — latoblack for headers/buttons per live ezeletric.com */
    --font-primary: 'latoregular', 'Lato', sans-serif;
    --font-heading: 'latoblack', 'Lato', sans-serif;

    /* Spacing */

    /* Transition */
    --transition-base: 0.3s ease;
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--color-black);
    background-color: var(--color-white);
}

/* Override vendor !important Inter font on body — must beat site-components.css */
html body {
    font-family: 'latoregular', 'Lato', sans-serif !important;
}

/* Headings — latoregular per live ezeletric.com */
h1,
h2,
h3 {
    font-family: var(--font-heading);
}

ul {
    list-style: none;
}

/* Green dot bullets — applied via class on specific lists */
.custm-ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.custm-ul li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    line-height: 23px !important;
}

.custm-ul li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #148023 !important;
    border-radius: 50% !important;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Footer copyright trust badge: must be inline-block so the parent's
   `text-md-end` (text-align: right) can right-align it. */

button,
.btn {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: var(--font-heading);
    transition: var(--transition-base);
}

/* Utility Classes */
.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

.text-center {
    text-align: center;
}

.flex {
    display: flex;
}

/* Buttons */

/* Performance: defer footer style/layout work until it scrolls into view. */
footer.new-footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 1500px;
}

/* Text utilities */
.text-green {
    color: var(--color-primary) !important;
}

/* Green line separator between Recent Posts and Categories */

/* Blog Detail Page — Recent Posts sidebar styles
   Added here because PurgeCSS strips them from blog.css when the
   classes aren't found in the HTML (they're in the minified HTML
   but PurgeCSS sometimes misses them). Placing in global.css ensures
   they're always in the purge input. */

/* Blog Details Sidebar (single post) — exact match to live site */

/* Blog Detail Page — Article content styles */

/* Cache-bust: force new hash */

/* Author section - exact match to live site */

/* Related posts - exact match to live site */

/* Related post cards - exact match to live */

/* Responsive for blog detail */

/* ===== HEADER — Exact match to ezeletric.com ===== */
#masthead {
    background: #FFF;
    padding: 0;
    width: 100%;
    display: block;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    transition: box-shadow 0.3s ease;
}

#masthead.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#masthead>.container {
    width: 100%;
    max-width: 1110px;
    margin: 0 auto;
    padding: 0;
}

/* Logo */
.logo {
    float: left;
    padding: 10px 0;
}

.logo a {
    display: block;
    text-decoration: none;
}

.logo img {
    max-width: 80px;
    width: 80px;
    height: 80px;
    display: block;
}

.emergency-text {
    display: none;
}

/* Center time/phone section */
.head_titme {
    text-align: center;
    padding: 16px 0 0 140px;
    display: inline-block;
}

.system_time,
.system_time strong,
.system_time .day,
.system_time em,
.system_time span {
    font-size: 21px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    font-family: 'latoblack', sans-serif;
}

.system_time .day,
.system_time em {
    color: #3bb44d;
    font-style: normal;
}

/* Header toll free — must be more specific than vendor .toll_f_num rules */
.head_titme .toll_f_num,
.head_titme .toll_f_num span,
.head_titme .toll_f_num a {
    font-size: 21px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'latoblack', sans-serif;
}

.head_titme .toll_f_num .toll_free {
    color: #3bb44d;
    text-decoration: none;
}

.head_titme .toll_f_num .toll_free img {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    margin-right: 4px;
}

/* Right side service info */
.header-service {
    float: right;
    display: flex;
    padding: 18px 0 18px 0;
    align-items: center;
}

.sevi-logo {
    padding: 2px 0 0;
}

.header-service .sevi-logo img {
    width: 66px;
    height: 61px;
    display: block;
}

.header-service .emergency-serrvice {
    padding-left: 15px;
}

.header-service .emergency-serrvice p {
    font-size: 15px;
    margin-bottom: 0;
    line-height: 22px;
    font-weight: 800;
}

.header-service .emergency-serrvice p span {
    float: left;
    padding-right: 10px;
}

.header-service .emergency-serrvice p a {
    font-size: 16px;
    font-weight: 800;
    float: right;
    color: #3AB54B;
    text-decoration: none;
}

/* Mobile number variant (hidden on desktop) */
.header-service.mobiel_num {
    display: none !important;
}

/* Responsive toll number */
.toll_responsive {
    display: none;
    text-align: center;
    font-size: 16px;
    padding: 8px 0;
    border-top: 1px solid #e9ecef;
}

/* Clearfix for floated header elements */
#masthead>.container::after {
    content: "";
    display: table;
    clear: both;
}

/* Nav bar is now a sibling of the top container, not a child */
.main_menu_header {
    clear: both;
}

/* ===== NAVIGATION BAR ===== */
.main_menu_header {
    background: #fff;
    padding: 0;
}

.main_menu_header .container {
    background: #3BB34C;
    background: -moz-linear-gradient(top, #3BB34C 22%, #036911 100%);
    background: -webkit-linear-gradient(top, #3BB34C 22%, #036911 100%);
    background: linear-gradient(to bottom, #3BB34C 22%, #036911 100%);
}

.main_menu_header .container {
    width: 100%;
    max-width: 1110px;
    margin: 0 auto;
    padding: 0;
}

/* Mobile: collapse the green nav bar — the hamburger toggle is absolutely
   positioned over the header (top-right), so the bar itself takes no space.
   This matches ezeletric.com where .main_menu_header has height 0 on mobile. */
@media (max-width: 991px) {
    .site-navigation {
        min-height: 0;
        position: static;
    }
}

@media (min-width: 992px) {
    .site-navigation {
        position: relative;
    }
}

.site-menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start;
}

/* Desktop: stretch every menu cell to the bar's full height so the green
   gradient container never shows through as a strip below shorter items
   (e.g. when one label wraps to two lines). The <li> becomes a flex column
   so its <a>/<span> stretches to fill it (default align-items: stretch) and
   the item background is flush with the bar bottom. Matches ezeletric.com.
   Scoped to >= 992px — the mobile accordion (<=991px) sets its own
   height/padding and is unaffected. */
@media (min-width: 992px) {
    .site-menu {
        align-items: stretch;
    }

    .site-menu>li {
        display: flex;
    }

    .site-menu>li>a,
    .site-menu>li>span {
        flex: 1 1 auto;
        min-height: 50px;
    }
}

.site-menu>li {
    position: relative;
    flex: 1;
    text-align: center;
    border-left: 2px solid rgba(0, 0, 0, 0.16);
}

.site-menu>li:first-child {
    border-left: none;
}

.site-menu>li>a,
.site-menu>li>span {
    display: flex;
    text-decoration: none;
    height: auto;
    align-items: center;
    min-height: 50px;
    position: relative;
    justify-content: center;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 9px;
    width: 100%;
    font-family: 'latoregular', 'Lato', sans-serif;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.site-menu>li>a:hover,
.site-menu>li>span:hover {
    background: none !important;
    color: #000 !important;
}

.site-menu>li.active>a,
.site-menu>li.active>span {
    background: #000 !important;
    color: #fff !important;
}

.site-menu>li:active>a,
.site-menu>li:focus>a,
.site-menu>li:active>span,
.site-menu>li:focus>span {
    background: #000 !important;
}

/* Desktop dropdown arrows — CSS-only chevron, pinned to the right edge of each
   menu cell to match the live (UberMenu) layout. Scoped to >= 992px so the
   mobile accordion ::after rule (in the max-width:991px block below) is fully
   independent and unaffected. Absolutely positioned so the chevron sits at a
   constant right offset regardless of label length; padding-right on
   .has-children targets reserves space so centered text never collides. */
@media (min-width: 992px) {
    
    .site-menu .has-children>a::after,
    .site-menu .has-children>span::after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        width: 5px;
        height: 5px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-50%) rotate(45deg);
        margin-top: -1px;
    }

    /* Reserve space on the right of dropdown parents so the centered label
       clears the pinned chevron — mirrors live's padding-right on has-children. */
    .site-menu>li.has-children>a,
    .site-menu>li.has-children>span {
        padding-right: 22px;
    }
}

/* Dropdown menus — fixed width overlay, never affects nav layout.
   Must use !important to override vendor CSS: .dropdown { position: relative !important; } */
.site-menu>li>.dropdown,
.site-menu .dropdown {
    display: none;
    position: absolute !important;
    top: 100%;
    left: 0;
    width: 185px;
    min-width: 185px;
    background: #3bb44d;
    background: -moz-linear-gradient(top, #3bb44d 22%, #036911 100%);
    background: -webkit-linear-gradient(top, #3bb44d 22%, #036911 100%);
    background: linear-gradient(to bottom, #3bb44d 22%, #036911 100%);
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #2f903e;
    border-top: none;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .site-menu .has-children:hover>.dropdown {
        display: block;
    }

    /* Prevent parent li from getting any background on hover */
    .site-menu>li.has-children:hover,
    .site-menu>li.has-children:hover>a,
    .site-menu>li.has-children:hover>span {
        background: transparent !important;
    }
}

.site-menu .dropdown li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.site-menu .dropdown li:last-child {
    border-bottom: none;
}

.site-menu .dropdown li a {
    display: block;
    padding: 12px 6px;
    font-size: 14px;
    color: #fff !important;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: normal;
}

.site-menu .dropdown li a:hover {
    background: rgba(0, 0, 0, 0.25);
    color: #fff !important;
}

/* Mobile toggle */
.mobile-toggle {
    display: none;
    color: #fff;
    font-size: 20px;
    padding: 10px 15px;
    cursor: pointer;
}

/* ===== RESPONSIVE HEADER — exact match to ezeletric.com live ===== */

/* 1024px breakpoint — tablet landscape */
@media (max-width: 1024px) {
    .head_titme {
        padding: 20px 0 0 80px;
    }

    .system_time,
    .system_time strong,
    .system_time .day,
    .system_time em,
    .system_time span {
        font-size: 16px;
    }

    .head_titme .toll_f_num,
    .head_titme .toll_f_num span,
    .head_titme .toll_f_num a {
        font-size: 16px;
    }
}

/* 991px breakpoint — tablet portrait / mobile menu activation */
@media (max-width: 991px) {
    #masthead {
        box-shadow: -1px 3px 4px -1px rgba(0, 0, 0, 0.08);
    }

    #masthead>.container {
        max-width: 100%;
    }

    .logo {
        padding: 10px 0 5px;
    }

    .logo img {
        max-width: 65px;
        width: 65px;
        height: 65px;
    }

    .head_titme {
        display: initial;
        padding: 0;
    }

    .system_time {
        display: none;
    }

    .head_titme .toll_f_num {
        display: none;
    }

    .toll_f_num.toll_responsive {
        display: block;
        width: 100%;
        background: #3bb44d;
        text-align: center;
        color: #fff;
        padding: 5px;
        margin: 0;
        font-size: 16px;
        border-top: none;
    }

    .toll_f_num.toll_responsive a {
        color: #fff;
    }

    .header-service {
        padding: 17px 60px 0 0;
        float: right;
        justify-content: flex-end;
    }

    /* Mobile nav */
    .mobile-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 36px !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        position: absolute;
        right: 15px;
        top: 34px;
        font-weight: normal;
        color: #fff !important;
        background-color: #3ab54b;
        border-color: #3ab54b;
        transition: all 0.3s;
        z-index: 1001;
        line-height: 0;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid #3ab54b;
    }

    .mobile-toggle:hover,
    .mobile-toggle:active {
        background-color: #2f903e;
        border-color: #2f903e;
        color: #fff !important;
    }

    .mobile-toggle svg {
        display: block;
        pointer-events: none;
    }

    .mobile-toggle .icon-bars {
        display: inline-block;
    }

    .mobile-toggle .icon-close {
        display: none;
    }

    .mobile-toggle.open .icon-bars {
        display: none;
    }

    .mobile-toggle.open .icon-close {
        display: inline-block;
        color: #ffffff;
    }

    .site-menu {
        display: none;
        flex-direction: column;
        padding: 5px 0;
        margin: 0;
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
        background: #3bb44d;
        background: -moz-linear-gradient(top, #3bb44d 22%, #036911 100%) !important;
        background: -webkit-linear-gradient(top, #3bb44d 22%, #036911 100%) !important;
        background: linear-gradient(to bottom, #3bb44d 22%, #036911 100%) !important;
        z-index: 1000;
        max-height: initial;
        border: none !important;
        box-sizing: border-box;
    }

    .site-menu.open {
        display: flex !important;
    }

    .site-menu>li {
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
    }

    .site-menu>li>a,
    .site-menu>li>span {
        width: 100%;
        text-align: left;
        height: initial;
        margin: 0;
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        color: #ffffff !important;
        justify-content: space-between;
        box-sizing: border-box;
        font-family: 'latoregular', 'Lato', sans-serif;
    }

    .site-menu>li:last-child {
        border-bottom: none !important;
    }

    .site-menu>li>.dropdown,
    .site-menu .dropdown {
        position: static !important;
        display: none;
        box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15) !important;
        margin: 0 15px 15px 15px !important;
        padding: 0;
        list-style: none;
        border: 1px solid rgba(0, 0, 0, 0.16) !important;
        background: #2f903e;
        background: -moz-linear-gradient(top, #2f903e 0%, #036911 100%) !important;
        background: -webkit-linear-gradient(top, #2f903e 0%, #036911 100%) !important;
        background: linear-gradient(to bottom, #2f903e 0%, #036911 100%) !important;
        width: calc(100% - 30px) !important;
        box-sizing: border-box;
    }

    .site-menu .has-children.open>.dropdown {
        display: block;
    }

    .site-menu .dropdown li {
        border-bottom: none !important;
    }

    .site-menu .dropdown li a {
        text-align: left;
        width: 100%;
        color: #ffffff !important;
        text-decoration: none;
        padding: 12px 20px 12px 60px !important;
        font-size: 15px !important;
        font-weight: normal !important;
        text-transform: none !important;
        box-sizing: border-box;
        display: block;
    }

    .site-menu .dropdown li a:hover {
        background: rgba(0, 0, 0, 0.25) !important;
        color: #ffffff !important;
    }

    /* Mobile accordion indicators — white down-chevron on the right */
    .site-menu .has-children>a::after,
    .site-menu .has-children>span::after {
        content: '\00a0';
        display: inline-block;
        width: 12px;
        height: 12px;
        border: none;
        transform: none;
        background-color: transparent !important;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgdmlld0JveD0nMCAwIDEyIDEyJz48cGF0aCBkPSdNMSA0bDUgNSA1LTUnIHN0cm9rZT0nI2ZmZicgc3Ryb2tlLXdpZHRoPScyJyBmaWxsPSdub25lJy8+PC9zdmc+");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
    }

    /* Open accordion parent — transparent background, black text and black × close indicator */
    .site-menu .has-children.open>a,
    .site-menu .has-children.open>span {
        background: transparent !important;
        color: #000000 !important;
    }

    .site-menu .has-children.open>a::after,
    .site-menu .has-children.open>span::after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNCcgaGVpZ2h0PScxNCcgdmlld0JveD0nMCAwIDE0IDE0Jz48cGF0aCBkPSdNMiAybDEwIDEwTTEyIDJMMiAxMicgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzInIGZpbGw9J25vbmUnLz48L3N2Zz4=");
    }

    /* Active page item — solid black background, white text */
    .site-menu>li.active>a,
    .site-menu>li.active>span {
        background: #000000 !important;
        color: #ffffff !important;
    }

    /* Closed-item hover/focus on mobile — black background, white text like live */
    .site-menu>li>a:hover,
    .site-menu>li>span:hover {
        background: #000000 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 480px) {
    .site-menu {
        top: 88px !important;
    }
}

/* 767px breakpoint — small tablet */
@media (max-width: 767px) {
    .logo {
        padding: 5px 0;
    }

    .logo img {
        max-width: 64px;
        width: 64px;
        height: 64px;
    }

    .mobile-toggle {
        right: 15px;
        top: 27px;
    }

    /* Live fa-bars icon is 17px at ≤767px — scale the SVG to match */
    .mobile-toggle svg {
        width: 17px;
        height: 14px;
    }

    .header-service {
        padding: 7px 0 0 0;
        justify-content: center;
        float: none;
    }

    .header-service .emergency-serrvice {
        padding-left: 8px;
    }

    .header-service .emergency-serrvice p a {
        font-size: 26px;
        line-height: 30px;
    }
}

/* 575px breakpoint — large phones — matches ezeletric.com live mobile header */
@media (max-width: 575px) {
    #masthead {
        height: 110px;
    }

    /* Live Bootstrap container keeps 15px side gutters on mobile */
    #masthead>.container {
        padding: 0 15px;
    }

    .logo {
        padding: 24px 0 8px;
    }

    .logo img {
        max-width: 35px;
        width: 35px;
        height: 35px;
    }

    .header-service {
        padding: 7px 0 5px;
        display: inline-block;
        float: none;
        text-align: center;
        margin: 0 auto;
    }

    .header-service .emergency-serrvice {
        padding-right: 0;
        flex: none;
        display: inline-block;
        vertical-align: middle;
    }

    .header-service .emergency-serrvice p a {
        font-size: 14px;
        font-weight: 800;
    }

    .header-service .emergency-serrvice p span {
        font-size: 14px;
    }

    .sevi-logo {
        display: inline-block;
        /* Live vertically centers the 24/7 badge against the 3-line phone
           block (badge center ≈ numbers center). Middle-align both sides. */
        vertical-align: middle;
    }

    .header-service.webpage {
        display: none !important;
    }

    /* Vendor site-pages.css hides .header-service at ≤767px (visibility:hidden) as a
       CLS fix for service pages. The homepage mobile header needs the compact
       .mobiel_num phone block visible, so re-show it here. */
    .header-service.mobiel_num {
        visibility: visible;
        pointer-events: auto;
        padding: 8px 20px 8px 0;
        display: inline-block !important;
        margin: 0 auto;
        text-align: center;
        width: 76%;
        /* Live body line-height is 24px (1.5×16px); vendor site-pages.css
           resets body to line-height:normal, which top-aligns the 24/7 badge.
           24px restores the live vertical centering inside the mobile header. */
        line-height: 24px;
    }

    .header-service.mobiel_num .sevi-logo img {
        width: 50px;
        height: auto;
    }

    .header-service.mobiel_num .emergency-serrvice p {
        line-height: 16px;
        overflow: hidden;
    }

    .header-service.mobiel_num .emergency-serrvice p span {
        float: left;
        padding: 8px 5px 0 0;
        line-height: 16px;
    }

    .header-service.mobiel_num .emergency-serrvice p a {
        float: right;
        padding: 8px 0 0;
        white-space: nowrap;
        line-height: 16px;
    }

    .system_time {
        padding: 7px 50px 0 74px;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }

    .toll_f_num.toll_responsive span {
        font-size: 16px;
    }

    .toll_f_num.toll_responsive a.toll_free {
        font-size: 16px;
    }

    .toll-second {
        display: block;
        margin: 4px 0 5px 170px;
    }
}

/* 480px breakpoint — small phones */
@media (max-width: 480px) {
    .logo {
        padding: 24px 0 8px;
    }

    .logo img {
        max-width: 35px;
        width: 35px;
        height: 35px;
    }

    /* Live inline \3c style> rule (ubermenu-custom-generated-css) loads after
       style.css, so 35px wins over the ≤400px/≤320px rules below — !important
       replicates that cascade in a single stylesheet. */
    .mobile-toggle {
        top: 35px !important;
    }

    .system_time {
        padding: 0;
        margin: 0 auto;
    }
}

/* 400px breakpoint — extra small phones */
@media (max-width: 400px) {
    /* Live style.css has top:16px here, but the later-loading ≤480px inline
       rule (35px) wins on live — same result here via the !important above. */
    .mobile-toggle {
        top: 16px;
    }

    .header-service.mobiel_num {
        padding: 8px 20px 8px 0;
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        width: 76%;
    }

    .header-service .emergency-serrvice {
        padding-left: 4px;
    }
}

/* 320px breakpoint — smallest phones */
@media (max-width: 320px) {
    .mobile-toggle {
        top: 20px;
    }
}

/* ===== WELCOME SECTION ===== */

/* ===== SERVICES SECTION ===== */

/* ===== COUPON / BADGES SECTION — shared across pages ===== */
/* Matches live site: image-based badges with green dashed border and hover */
.home-coupon {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.coupon-section {
    display: flex;
    align-items: stretch;
    padding: 0 15px;
    max-width: 1140px;
    margin: 0 auto;
}

.coupon-section .coupon-box {
    border: 3px dashed #148023;
    border-radius: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #148023;
    padding: 15px 10px;
    width: 23%;
    justify-content: center;
    flex-direction: column;
    margin-left: 30px;
    background: #fff;
    transition: all 0.3s ease;
}

.coupon-section .coupon-box:first-child {
    margin-left: 0;
}

.coupon-section .coupon-box:hover {
    background: #148023;
    color: #fff;
    border: 3px dashed #fbfbfb;
    cursor: pointer;
}

.coupon-section .coupon-box img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Coupon responsive — matches ezeletric.com live mobile badges */
@media (max-width: 767px) {
    /* Live wrapper margins: mt-5/mb-3 computed at live's 22px root font-size.
       .home-coupon.mt-5 specificity (0,2,0) beats Bootstrap's .mt-5/.mb-3
       !important utilities (0,1,0) regardless of purged output order. */
    .home-coupon.mt-5 {
        margin-top: 66px !important;
    }

    .home-coupon.mb-3 {
        margin-bottom: 22px !important;
    }

    /* Live Bootstrap 4 .container is 540px at 576–767px, 100% below 576px.
       Local .coupon-section plays the container role (max-width + gutters). */
    .coupon-section {
        max-width: 540px;
    }

    .home-coupon .coupon-section {
        flex-flow: wrap;
        justify-content: center;
    }

    .coupon-section {
        flex-flow: wrap;
        justify-content: center;
    }

    .home-coupon .coupon-section .coupon-box {
        width: 48%;
        margin-bottom: 20px !important;
        flex: inherit;
    }

    .home-coupon .coupon-section .coupon-box:first-child {
        margin-left: 0;
    }

    .coupon-section .coupon-box {
        width: 48%;
        margin-left: 4%;
        margin-bottom: 20px !important;
        -webkit-box-flex: 1;
        flex: auto;
    }

    /* Live: odd boxes (1st/3rd/5th rows) start flush left — no 4% margin */
    .coupon-section .coupon-box:nth-child(2n+1) {
        margin-left: 0;
    }
}

/* ===== ABOUT SECTION — exact match to ezeletric.com live site ===== */

/* Constrain about-section container to match blog-section and live site width */

/* Green underline below the title */

/* Tab content structure — no visual tabs, just content container */

/* ===== BLOGS SECTION — exact match to ezeletric.com live site ===== */

/* Single blog detail page: ensure padding-top pushes content below fixed header */

/* Blog detail page container override — prevents Bootstrap/vendor .container from stretching to 1920px */
/* Use body prefix for higher specificity to beat vendor .container,.container-xl { max-width:1920px } */

/* Breadcrumb bar styles for blog pages */
.breadcrum-bar {
    background: #fff;
    padding: 10px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #3bb44d;
    display: inline-block;
    width: 100%;
    margin-top: 20px;
}

.breadcrum-bar .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.breadcrum-bar a {
    color: #000;
    font-size: 14px;
    text-decoration: none;
}

.breadcrum-bar a:hover {
    color: #000;
    text-decoration: none;
}

.breadcrum-bar .breadcrumb_last {
    font-size: 14px;
}

@media (max-width: 991px) {
    .breadcrum-bar {
        margin-top: 0;
    }
}

/* Blog responsive */

/* ===== TESTIMONIALS SECTION — exact match to ezeletric.com live site ===== */
.testimonial {
    padding: 40px 0;
    background: #3bb44d;
    margin-bottom: 0;
}

.testimonial .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.testimonial .carousel {
    position: relative;
    padding-bottom: 10px;
}

.testimonial .line-bottom {
    color: #fff;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-weight: 300;
    font-family: 'latoregular', 'Lato', sans-serif;
    font-size: 35px;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: center;
}

.testimonial .line-bottom::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    bottom: 0;
}

.testimonial .carousel-inner {
    text-align: center;
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 210px;
}

.testimonial .carousel-inner::after {
    display: block;
    clear: both;
    content: "";
}

/* Bootstrap-style carousel sliding */
.testimonial .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: -webkit-transform 0.6s ease-in-out;
    -o-transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.testimonial .carousel-item.active,
.testimonial .carousel-item-next,
.testimonial .carousel-item-prev {
    display: block;
}

/* Outgoing item moving left, incoming next item positioned at right */
.testimonial .active.carousel-item-end,
.testimonial .carousel-item-next:not(.carousel-item-start) {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}

/* Outgoing item moving right, incoming prev item positioned at left */
.testimonial .active.carousel-item-start,
.testimonial .carousel-item-prev:not(.carousel-item-end) {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

.testimonial .testi-img {
    text-align: center;
}

#testimonial .testi-img {
    display: none;
}

.testimonial .testi-img img {
    width: 52px;
    border-radius: 50%;
    border: 5px solid #fff;
    margin-bottom: 35px;
    padding: 0;
}

.testimonial .testi-content {
    position: relative;
    color: #fff;
    font-size: 18px;
    padding: 20px 50px;
    margin: 0 auto;
}

.testimonial .testi-content::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.testimonial .testi-content::before {
    position: absolute;
    right: 0;
    bottom: -7px;
    content: "";
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9.983 3v7.391c0 5.704-3.748 9.57-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983zm14.017 0v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.testimonial .testi-title {
    font-size: 28px;
    color: #fff;
    font-family: 'latoheavy', 'Lato', sans-serif;
    padding-top: 15px;
    display: block;
}

.testi-slider-arrow {
    position: absolute;
    width: 100%;
    z-index: 10;
    bottom: -20px;
    text-align: center;
}

.testi-slider-arrow .carousel-control-prev,
.testi-slider-arrow .carousel-control-next {
    font-size: 40px;
    color: #fff;
    opacity: 1;
    position: initial;
    width: initial;
    display: inline-block;
    margin: 0 20px;
    text-decoration: none;
}

.testi-slider-arrow .carousel-control-prev:hover,
.testi-slider-arrow .carousel-control-next:hover {
    color: #333f50;
}

.testi-slider-arrow .carousel-control-prev svg,
.testi-slider-arrow .carousel-control-next svg {
    width: 40px;
    height: 40px;
    display: block;
}

/* ===== INSURANCE / LOGO SECTION — exact match to ezeletric.com live site ===== */
.logo-section {
    background-color: #f2f2f2;
    padding: 50px 0;
}

.logo-section .section-title .line-bottom {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-weight: 300;
    color: #364d59;
    font-family: 'latoregular', 'Lato', sans-serif;
    font-size: 35px;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: center;
}

.logo-section .section-title .line-bottom::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 5px;
    left: 45%;
    background-color: #3bb44d;
    bottom: 0;
}

.logo-section .logo-content {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.logo-section .logo-content li {
    list-style: none;
    width: 20%;
    padding: 0 10px 20px;
}

.logo-section .logo-content li img {
    max-width: 100%;
    border-radius: 10px;
    height: auto;
    display: block;
}

.logo-section .logo-content li img:hover {
    box-shadow: 0px 2px 5px #d4d1d1;
}

/* ===== INSURANCE / LOGO SECTION — constrain width to match live site ===== */
.logo-section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Testimonial & Logo responsive — breakpoints match live site (991 / 767 / 575) */
@media (max-width: 991px) {
    .line-bottom.text_bg_right {
        margin-bottom: 40px;
        text-align: center;
    }

    .line-bottom {
        font-size: 28px !important;
    }

    .logo-section .logo-content li {
        width: 25%;
    }

    .logo-section {
        padding: 30px 0 20px;
    }
}

@media (max-width: 767px) {
    .testimonial {
        padding: 25px 0 30px;
    }

    .testimonial .carousel-inner {
        height: initial;
    }

    .testimonial .line-bottom {
        font-size: 24px !important;
    }

    .testimonial .line-bottom.text_bg_right {
        text-align: center;
    }

    .testimonial .testi-content {
        padding: 0 40px;
    }

    .testi-slider-arrow {
        margin-top: 10px;
    }

    .testi-slider-arrow .carousel-control-prev,
    .testi-slider-arrow .carousel-control-next {
        margin: 0 10px;
    }

    .testimonial .testi-content::after,
    .testimonial .testi-content::before {
        width: 25px;
        height: 25px;
    }

    .logo-section .logo-content li {
        width: 33.33%;
    }

    .logo-section {
        padding: 30px 0 20px;
    }
}

@media (max-width: 575px) {
    .logo-section .logo-content li {
        width: 50%;
        padding: 0 8px 15px;
    }

    .logo-section {
        padding: 20px 0 20px;
    }
}

@media (max-width: 480px) {
    .testimonial .carousel-inner {
        min-height: 410px;
    }
}

@media (max-width: 400px) {
    .testimonial .carousel-inner {
        min-height: 460px;
    }
}

@media (max-width: 374px) {
    .testimonial .carousel-inner {
        min-height: 570px;
    }
}

/* ===== FOOTER — exact match to ezeletric.com live footer ===== */
.new-footer.site-footer,
.new-footer.site-footer .footer-botm {
    background-color: #fff;
    color: #4a4a4a;
    font-family: 'latoregular', 'Lato', sans-serif;
}

.new-footer.site-footer .footer-botm {
    overflow: hidden;
    padding: 35px 0 0;
}

.new-footer.site-footer .site-footer-inner {
    padding: 0;
}

/* Force footer container to match live site's Bootstrap .container sizing
   (vendor CSS overrides .container-xl to max-width:1920px with 0 padding) */
.new-footer.site-footer .container-xl {
    width: 100%;
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.new-footer.site-footer .main_footer_bottam .container-xl {
    max-width: 1140px;
}

.new-footer.site-footer .footer-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.new-footer.site-footer .footer-col {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    display: block !important;
}

@media (min-width: 992px) {
    .new-footer.site-footer .footer-col-address {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .new-footer.site-footer .footer-col-links,
    .new-footer.site-footer .footer-col-info {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .new-footer.site-footer .footer-col-address {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .new-footer.site-footer .footer-col-links,
    .new-footer.site-footer .footer-col-info {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Address column */
.new-footer.site-footer .foo-address {
    display: block;
}

.new-footer.site-footer .foo-address .address-title {
    color: #434264;
    font-size: 26px;
    margin-bottom: 15px;
    line-height: 30px;
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
}

.new-footer.site-footer .foo-address .foo-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.new-footer.site-footer .foo-address .foo-title::after {
    content: "";
    display: table;
    clear: both;
}

.new-footer.site-footer .foo-address .foo-title .text_address {
    width: 31.3%;
    float: left;
    margin-left: 15px;
    position: relative;
}

.new-footer.site-footer .foo-address .foo-title .text_address:first-child {
    margin-left: 0;
}

.new-footer.site-footer .foo-address .text_address::after {
    content: "";
    width: 2px;
    height: 100%;
    background: #828282;
    position: absolute;
    top: 0;
    left: -20px;
}

.new-footer.site-footer .foo-address .text_address:first-child::after {
    background: transparent;
}

.new-footer.site-footer .foo-address .text_address p {
    margin: 0;
    font-size: 15px;
    color: #676767;
    line-height: 26px;
    font-family: 'latoregular', 'Lato', sans-serif;
}

.new-footer.site-footer .foo-address .text_address p a {
    color: #828282;
    transition: var(--transition-base);
}

.new-footer.site-footer .foo-address .text_address p a:hover {
    color: #000;
}

/* Quick Links + Info titles */
.new-footer.site-footer .sub_menu>p {
    font-size: 26px;
    color: #434264;
    margin-bottom: 15px;
    line-height: 30px;
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
}

.new-footer.site-footer .menu_iten {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.new-footer.site-footer .menu_iten li {
    margin-bottom: 0;
    line-height: 26px;
}

.new-footer.site-footer .menu_iten li a {
    color: #828282;
    text-decoration: none;
    font-size: 15px;
    transition: var(--transition-base);
}

.new-footer.site-footer .menu_iten li a:hover {
    color: #000;
}

/* Info / Email */
.new-footer.site-footer .email_text p {
    color: #434264;
    font-size: 18px;
    margin: 0;
    line-height: 26px;
}

.new-footer.site-footer .email_text .email-label {
    color: #434264;
    font-size: 18px;
}

.new-footer.site-footer .email_text p a {
    color: #828282;
    text-decoration: none;
    font-size: 15px;
    transition: var(--transition-base);
}

.new-footer.site-footer .email_text p a:hover {
    color: #000;
}

.new-footer.site-footer .email_text p a.start-reating {
    display: block;
    margin-top: 6px;
}

.new-footer.site-footer .email_text p a.start-reating img {
    width: 92px;
    height: 16px;
    display: block;
}

/* Social icons */
.new-footer.site-footer .footer_bg_icon {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    align-items: center;
}

.new-footer.site-footer .footer_bg_icon a {
    display: block;
    line-height: 0;
    transition: var(--transition-base);
}

.new-footer.site-footer .footer_bg_icon a:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.new-footer.site-footer .footer_bg_icon img,
.new-footer.site-footer .footer_bg_icon svg {
    width: 40px;
    height: 40px;
    display: block;
}

/* DMCA badge */
.new-footer.site-footer .dmca-badge {
    display: inline-block;
}

.new-footer.site-footer .dmca-badge img {
    width: 121px;
    height: 24px;
    display: block;
}

/* Toll-free number */
.new-footer.site-footer p.toll_f_num.new-toll-design {
    margin: -5px 0 0 0;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'latoblack', 'Lato', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3bb44d;
}

.new-footer.site-footer p.toll_f_num.new-toll-design img {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
}

.new-footer.site-footer p.toll_f_num.new-toll-design a.toll_free {
    color: #3bb44d;
    text-decoration: none;
    transition: var(--transition-base);
}

.new-footer.site-footer p.toll_f_num.new-toll-design a.toll_free:hover {
    color: #000;
}

/* Copyright bottom bar */
.new-footer.site-footer .main_footer_bottam {
    padding: 13px 20px;
    text-align: center;
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
    margin-top: 20px;
}

.new-footer.site-footer .main_footer_bottam .text_bootam_right p {
    margin-bottom: 0;
    color: #676767;
    font-size: 15px;
    line-height: 26px;
}

.new-footer.site-footer .main_footer_bottam .text_bootam_right p a {
    color: #828282;
    text-decoration: none;
    transition: var(--transition-base);
}

.new-footer.site-footer .main_footer_bottam .text_bootam_right p a:hover {
    color: #000;
}

/* Footer responsive */
@media (max-width: 991px) {
    .new-footer.site-footer .foo-address .foo-title .text_address {
        width: 31.8%;
        margin-left: 15px;
        margin-bottom: 15px;
    }

    .new-footer.site-footer .foo-address .foo-title .text_address:last-child {
        margin-left: 15px;
        margin-bottom: 15px;
    }

    .new-footer.site-footer p.toll_f_num.new-toll-design a.toll_free {
        display: block;
    }

    .new-footer.site-footer p.toll_f_num.new-toll-design {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .new-footer.site-footer .foo-address {
        text-align: center;
    }

    .new-footer.site-footer .foo-address .foo-title {
        display: block;
    }

    .new-footer.site-footer .foo-address .foo-title .text_address {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
        float: none;
    }

    .new-footer.site-footer .foo-address .foo-title .text_address:last-child {
        margin-left: 0;
        margin-bottom: 0;
    }

    .new-footer.site-footer .foo-address .text_address::after {
        height: 2px;
        background: #676767;
        position: absolute;
        top: auto;
        right: 0;
        bottom: -5px;
        left: 50%;
        width: 170px;
        transform: translate(-50%, -50%);
    }

    .new-footer.site-footer .foo-address .text_address:first-child::after {
        background: #676767;
    }

    .new-footer.site-footer .sub_menu {
        text-align: center;
        padding: 15px 0 0;
    }

    .new-footer.site-footer .sub_menu>p {
        margin-bottom: 5px;
        font-size: 24px;
        line-height: 26px;
    }

    .new-footer.site-footer .email_text {
        text-align: center;
    }

    .new-footer.site-footer .email_text p {
        font-size: 17px;
    }

    .new-footer.site-footer .email_text p a {
        font-size: 16px;
    }

    .new-footer.site-footer .email_text p a.start-reating {
        margin-left: auto;
        margin-right: auto;
    }

    .new-footer.site-footer .email_text p a.start-reating img {
        margin: 0 auto;
    }

    .new-footer.site-footer .footer_bg_icon {
        justify-content: center;
    }

    .new-footer.site-footer .dmca-badge {
        margin: 0 auto;
    }

    .new-footer.site-footer p.toll_f_num.new-toll-design {
        justify-content: center;
    }

    .new-footer.site-footer p.toll_f_num.new-toll-design img {
        height: 25px;
        width: auto;
    }

    .new-footer.site-footer .main_footer_bottam {
        padding: 13px 15px;
    }

    .new-footer.site-footer .main_footer_bottam .text_bootam_right p {
        font-size: 14px;
    }
}

/* ===== FLOATING SIDEBAR (sticky-tools) ===== */
nav.sticky-tools {
    display: block;
    position: fixed;
    bottom: calc(50% - 25px);
    right: -70px;
    z-index: 999;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

nav.sticky-tools ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav.sticky-tools ul li {
    display: inline-block;
    background-color: #000;
    border: 0.5px solid #fff;
}

nav.sticky-tools ul li a {
    display: block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Heebo", sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}

nav.sticky-tools ul li:nth-of-type(2) {
    background-color: #1eadc7;
    border-left: 0;
}

nav.sticky-tools ul li:last-of-type {
    border-left: 0;
    background-color: #ff0404;
}

nav.sticky-tools ul li:last-of-type a {
    text-indent: -99999em;
    display: block;
    width: 2rem;
    height: 40px;
    padding: 1rem 30px;
    background: url(/assets/images/ezeletric/phone-icon-white.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 40%;
}

nav.sticky-tools ul li a:hover,
nav.sticky-tools ul li a:focus {
    color: #fff;
}

nav.sticky-tools ul li:last-of-type a:hover,
nav.sticky-tools ul li:last-of-type a:focus {
    background: url(/assets/images/ezeletric/phone-icon-white.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 35%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {

    .header-service {
        display: none;
    }
}

/* ===== CALL ICON ===== */

/* ===== OFFCANVAS ===== */
.offcanvas {
    max-width: 300px;
}

/* ===== AOS ANIMATIONS (vanilla replacement) ===== */

/* ===== SITEMAP TESTIMONIALS & INSURANCE STYLES ===== */

/* Insurance Section */

/* Responsive Design */
/* ==========================================================================
   Self-hosted fonts — replaces Google Fonts CDN
   Previously: fonts.googleapis.com/css2?family=Outfit&family=Inter
   Font files in: assets/fonts/
   ========================================================================== */

/* Prevent CLS: banner rules reference --font-outfit before purged CSS loads.
   Outfit is not above-the-fold critical, so map it to Inter in critical CSS.
   Purged CSS re-declares this with 'Outfit' for pages that need it. */
:root { }

/* ── Lato — from live ezeletric.com (self-hosted) ── */

@font-face {
    font-family: 'latoregular';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('/assets/fonts/lato-regular-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'latoheavy';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('/assets/fonts/lato-heavy-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'latoblack';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('/assets/fonts/lato-black-webfont.woff2') format('woff2');
}

/* Inter — latin, weight 400 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — latin, weights 500–700 (variable file). Was previously three separate
   @font-face declarations pointing at inter-latin-500/600/700.woff2 — but those
   three .woff2 files were byte-identical (md5 verified), so the browser was
   downloading the same 85 KB three times. Single declaration with weight range
   serves all three weights from one cached request. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500 700;
    font-display: optional;
    src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@charset "UTF-8";/*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root,[data-bs-theme=light]{--bs-white-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-secondary-color:rgba(33,37,41,.75);--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0,0,0,.175);--bs-border-radius:0.375rem;--bs-border-radius-lg:0.5rem}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-bg:#212529;--bs-secondary-color:rgba(222,226,230,.75);--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-border-color:#495057;--bs-border-color-translucent:hsla(0,0%,100%,.15)}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}.h1,.h2,.h3,h1,h2,h3{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}p{margin-top:0;margin-bottom:1rem}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ul{padding-left:2rem}ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}strong{font-weight:bolder}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}img,svg{vertical-align:middle}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button{text-transform:none}[role=button]{cursor:pointer}[type=button],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}[hidden]{display:none!important}.container,.container-xl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-xl{max-width:1320px}}:root{}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}@media (min-width:768px){.col-md-6{flex:0 0 auto;width:50%}.col-md-12{flex:0 0 auto;width:100%}}[data-bs-theme=dark] .form-select{}[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn:disabled{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty:after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-bg:var(--bs-body-bg);--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-border-width:var(--bs-border-width);position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropdown-menu.show{display:block}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent)}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar[data-bs-theme=dark]{}.navbar[data-bs-theme=dark],[data-bs-theme=dark] .navbar-toggler-icon{}.card{--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-height: ;--bs-card-bg:var(--bs-body-bg);position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}[data-bs-theme=dark] .accordion-button:after{}[data-bs-theme=dark] .btn-close{filter:var(--bs-btn-close-white-filter)}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color: ;--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:var(--bs-border-width);--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:var(--bs-border-width);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translateY(-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - var(--bs-modal-margin) * 2)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin) * 2)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);outline:0}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.modal-header{display:flex;flex-shrink:0;align-items:center;padding:var(--bs-modal-header-padding);border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);border-top-left-radius:var(--bs-modal-inner-border-radius);border-top-right-radius:var(--bs-modal-inner-border-radius)}.modal-header .btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);margin:calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto}.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);background-color:var(--bs-modal-footer-bg);border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);border-bottom-right-radius:var(--bs-modal-inner-border-radius);border-bottom-left-radius:var(--bs-modal-inner-border-radius)}.modal-footer>*{margin:calc(var(--bs-modal-footer-gap) * .5)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}.modal-sm{--bs-modal-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{--bs-modal-width:800px}}@media (min-width:1200px){.modal-xl{--bs-modal-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-footer,.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-footer,.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-footer,.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-footer,.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-footer,.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner:after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-control-next-icon,[data-bs-theme=dark] .carousel .carousel-control-prev-icon,[data-bs-theme=dark].carousel .carousel-control-next-icon,[data-bs-theme=dark].carousel .carousel-control-prev-icon{filter:invert(1) grayscale(100)}[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target],[data-bs-theme=dark].carousel .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-caption,[data-bs-theme=dark].carousel .carousel-caption{color:#000}.offcanvas{--bs-offcanvas-zindex:1045;--bs-offcanvas-color:var(--bs-body-color);--bs-offcanvas-bg:var(--bs-body-bg);--bs-offcanvas-transition:transform 0.3s ease-in-out}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.show:not(.hiding){transform:none}.offcanvas.show{visibility:visible}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn:before{display:inline-block;content:""}.clearfix:after{display:block;clear:both;content:""}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom{border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.flex-wrap{flex-wrap:wrap!important}.mt-5{margin-top:3rem!important}.mb-0{margin-bottom:0!important}.mb-3{margin-bottom:1rem!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.text-center{text-align:center!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.visible{visibility:visible!important}
body {
    font-family: "Inter", sans-serif !important;
}

/* ============================================================
   TOP HEADER — Fluid scaling to match reference site
   Reference: clamp(10px, 1.3vw, 20px)
   ============================================================ */

/* Reference site lets .head_time sit at its natural content width and
   uses .top-header's justify-content:space-between to distribute gaps.
   Keep display:flex flex-direction:column align-items:center for inner
   vertical stack + horizontal centering of the two child <p>s, but DO
   NOT use flex:1 — that inflates the box to ~934px and pushes the
   header-service column ~22px right of live's position.
   IMPORTANT: explicitly set flex:0 1 auto here so it overrides any
   stale `flex:1` left in the inlined critical CSS. The purged stylesheet
   loads after the critical inline, so omitting `flex` from this rule lets
   the bad inline value persist on first paint. */

/* ============================================================
   EMERGENCY SERVICE — Hide below 768px, fluid text
   ============================================================ */

.emergency-service p span {
    font-size: clamp(10px, 1vw, 14px) !important;
    font-weight: 600 !important;
    color: #000000 !important;
    font-family: "Inter", sans-serif !important;
}

.emergency-service p a {
    font-size: clamp(10px, 1vw, 14px) !important;
    font-weight: 600 !important;
    color: #319A52 !important;
    font-family: "Inter", sans-serif !important;
}

/* Hide emergency contact section at mobile (<768px) 
   NOTE: .head_time remains visible to match reference site 
*/
@media (max-width: 767px) {
    .header-service {
        display: none !important;
    }

    /* Reference site keeps the status/toll-free visible even at small widths.
       Override the desktop flex-column centering: on mobile .head_time grows
       to fill the remaining width (logo is hidden, service is hidden) and
       centers itself via margin:auto. */

    /* Logo swap for mobile space saving */
}

/* ============================================================
   MAIN NAVIGATION — Desktop (≥992px)
   Reference: clamp(13px, 1vw, 16px) font, clamp(10px, 1vw, 20px) padding
   ============================================================ */

@media (min-width: 992px) {

    /* Vertical dividers */
}

/* ============================================================
   DESKTOP DROPDOWN MENUS
   ============================================================ */

@media (min-width: 992px) {
    .dropdown-menu {
        padding: 8px 0 !important;
        border: 1px solid rgba(0, 0, 0, 0.176) !important;
        border-radius: 6px !important;
        background-color: #fff !important;
        margin-top: 2px !important;
        box-shadow: none !important;
        min-width: 160px !important;
    }

    /* Click-to-open dropdowns — disable any hover-show from external CSS */

    .dropdown {
        position: relative !important;
    }
}

/* ============================================================
   MOBILE OFFCANVAS (≤991px)
   ============================================================ */

@media (max-width: 991.98px) {
    .offcanvas {
        z-index: 1060 !important;
        background-color: #fff !important;
        width: 400px !important;
        max-width: 100% !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: none !important;
    }

    /* Mobile Sublink Styles */

    /* Mobile dropdown toggle arrow */

    /* Mobile Dropdown Menu Styling */

    /* Close button */

    /* Mobile Contact Section */

    
    .offcanvas.show {
        transform: none !important;
        visibility: visible !important;
    }
}

/* Shared Footer Styles */

/* Home Page Specific Iframes (if needed) */
/* shared/css/promo-testimonial.css */
/* Styles for Promo Section and Testimonials (Shared across all pages) */

/* ==========================================================================
   1. Promo Section Styles
   ========================================================================== */

/* ==========================================================================
   2. Testimonials Section Styles
   ========================================================================== */

/* ==========================================================================
   3. Responsive Media Queries
   ========================================================================== *//* ==========================================================================
   Slick Base Rules — Self-hosted (replaces slick.css CDN)
   Previously loaded from: cdn.jsdelivr.net/npm/slick-carousel@1.8.1
   ========================================================================== */

/* Slider container */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

/* Track & list */
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

/* Slides */
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

/* Arrows — minimal, no icon font (we use .vc-arrow instead) */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

/* Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
}

.slick-dots li button:before {
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: 0.25;
    color: black;
}

/* ==========================================================================
   VCarousel — Vanilla carousel wrapper styles
   ========================================================================== */
.vc-carousel {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
    overflow: hidden;
}

.vc-carousel .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.vc-carousel .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    transition: transform 0.3s ease;
}

.vc-carousel .slick-slide {
    display: block;
    height: 100%;
    min-height: 1px;
}

/* VCarousel Arrows */
.vc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 10px;
    border-radius: 50%;
}

/* VCarousel Dots */
.slick-dots.vc-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 1rem 0;
    margin: 0;
    gap: 0.5rem;
    position: static;
    bottom: auto;
}

.slick-dots.vc-dots li {
    width: auto;
    height: auto;
    margin: 0;
}

.slick-dots.vc-dots li button {
    font-size: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--primary-color, #319a52);
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: transparent;
    transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
}

.slick-dots.vc-dots li button:before {
    display: none;
}

.slick-dots.vc-dots li.slick-active button {
    width: 40px;
    border-radius: 40px;
    background: var(--primary-color, #319a52);
}/**
 * carousel-vanilla.css
 * Core layout styles for the VCarousel vanilla replacement.
 * Fixes layout issues caused by missing Slick CDN CSS.
 */

.vc-carousel,
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.vc-track,
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: flex !important;
    /* Force flex for VCarousel rail */
    flex-direction: row;
    transition: transform 0.3s ease-out;
    margin-left: auto;
    margin-right: auto;
}

.vc-carousel .slick-slide {
    height: 100%;
    min-height: 1px;
    display: block !important;
    flex: 0 0 auto;
}

/* Dots Styling */
.vc-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 1rem 0;
    margin: 0;
}

.vc-dots li {
    margin: 0 5px;
}

.vc-dots li button {
    font-size: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #333;
    background: white;
    cursor: pointer;
    padding: 0;
    transition: 0.3s;
}

.vc-dots li.slick-active button {
    background: #333;
    transform: scale(1.2);
}

/* Arrows Styling */
.vc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.vc-arrow:hover {
    background: white;
}

.slick-prev.vc-arrow {
    left: 10px;
}

.slick-next.vc-arrow {
    right: 10px;
}/* ==========================================================================
   Slick Base Rules — Self-hosted (replaces slick.css CDN)
   Previously loaded from: cdn.jsdelivr.net/npm/slick-carousel@1.8.1
   ========================================================================== */

/* Slider container */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

/* Track & list */
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

/* Slides */
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

/* Arrows — minimal, no icon font (we use .vc-arrow instead) */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

/* Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
}

.slick-dots li button:before {
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: 0.25;
    color: black;
}

/* ==========================================================================
   VCarousel — Vanilla carousel wrapper styles
   ========================================================================== */
.vc-carousel {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
    overflow: hidden;
}

.vc-carousel .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.vc-carousel .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    transition: transform 0.3s ease;
}

.vc-carousel .slick-slide {
    display: block;
    height: 100%;
    min-height: 1px;
}

/* VCarousel Arrows */
.vc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 10px;
    border-radius: 50%;
}

/* VCarousel Dots */
.slick-dots.vc-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 1rem 0;
    margin: 0;
    gap: 0.5rem;
    position: static;
    bottom: auto;
}

.slick-dots.vc-dots li {
    width: auto;
    height: auto;
    margin: 0;
}

.slick-dots.vc-dots li button {
    font-size: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--primary-color, #319a52);
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: transparent;
    transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
}

.slick-dots.vc-dots li button:before {
    display: none;
}

.slick-dots.vc-dots li.slick-active button {
    width: 40px;
    border-radius: 40px;
    background: var(--primary-color, #319a52);
}
* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

body {
    color: #2d2d2d;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: Inter, sans-serif;
    line-height: normal
}

a,
a:hover {
    color: unset;
    text-decoration: none
}

li,
ul {
    list-style: none;
    padding: 0;
    margin: 0
}

img {
    max-width: 100%;
    height: auto;
    border: 0
}

.container,
.container-xl {
    max-width: 1920px;
    padding-inline: 0
}

.text-green {
    color: #319a52
}

.title {
    font-size: clamp(27px, 2.2vw, 36px);
    font-weight: 500;
    color: #2d2d2d;
    margin: 0
}

/* CLS fix: lock logo anchor height so swapping brand-logo/brand-logo-s
   does not shift the top-header layout on mobile. */

.header-service {
    display: flex;
    align-items: center;
    gap: 0
}

.emergency-service {
    display: flex;
    flex-direction: column
}

.emergency-service p {
    margin: 0;
    display: flex;
    justify-content: end;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #000
}

.nav-link:focus-visible {
    box-shadow: none
}

.dropdown-menu.show .dropdown-toggle.nav-link {
    position: relative
}

.dropdown-menu .dropdown .dropdown-toggle:after {
    transform: rotate(270deg)
}

/* Desktop Styles */

.call img {
    transform: rotate(260deg)
}

.slick-dots {
    margin-top: clamp(16px, 3.1vw, 30px);
    position: unset
}

.slick-dots li button:before {
    content: "";
    width: 7px;
    height: 7px;
    display: inline-block;
    background: #d9d9d9;
    border-radius: 50%;
    position: unset;
    opacity: 1
}

.slick-dots li button:hover:before {
    background: #000
}

.slick-dots li.slick-active {
    width: 40px
}

.slick-dots li.slick-active button:before {
    background: #319a52;
    width: 40px;
    border-radius: 40px;
    opacity: 1
}

.slick-dots li button {
    padding: 0;
    width: auto
}

.slick-dots li {
    width: auto
}

.slick-slide>div {
    height: 100%;
    margin: 0 5px
}

.slick-track {
    margin: 0 -5px;
    display: flex
}

.slick-slide {
    height: auto
}

.testimonials .slick-slide>div {
    margin: 0 18px
}

.footer {
    background: #f2f2f2;
    padding: 32px 0
}

.footer .footer-col {
    width: 33.33%;
    padding: 0 15px
}

.footer .footer-col ul li:not(:last-child) {
    margin-bottom: 13px
}

.footer .footer-col ul li a {
    font-size: 14px;
    text-transform: capitalize;
    color: #000;
    text-decoration: none;
    font-weight: 400;
    display: block;
    transition: all .3s ease
}

.footer .footer-col ul li a:hover {
    color: #319a52
}

.footer .email_text {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-top: 18px
}

.footer .email_text a {
    font-weight: 400
}

.new-footer .footer-col {
    display: flex;
    gap: 12px;
    align-items: start;
    width: 100%
}

.new-footer .footer-col ul {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    flex-wrap: wrap
}

.new-footer .footer-col ul li {
    margin: 0 !important
}

.new-footer .footer-col ul a {
    white-space: nowrap
}

/* Scrollbar: using browser native default (no custom styling) to match live site */

/* ===== CALL ICON ===== */

.hidden {
    display: none
}

@media only screen and (max-width:767px) {
    /* CLS fix: use visibility:hidden instead of display:none so the
       header-service box keeps its reserved space and does not collapse
       the top-header height, avoiding a layout shift. */
    .header-service {
        visibility: hidden;
        pointer-events: none
    }

    /* CLS prevention: before VCarousel initializes on mobile, render the
       insurance-logos as a single-row strip with overflow:hidden so the
       section takes the same height pre-init and post-init. Once VCarousel
       adds .slick-initialized the pre-init rule releases. */

    .services .title br {
        display: none
    }

    .footer .footer-col {
        padding: 0;
        width: 100%
    }

    .footer .footer-col .footer-col-links.active {
        display: block
    }

    .footer .footer-col ul li:last-child {
        margin-bottom: 20px
    }

    .modal-dialog.ebook-modal-wrapper.p-3 {
        padding: 0 !important
    }

    .modal-dialog.ebook-modal-wrapper.p-3 .modal-content {
        margin-top: 70px
    }
}

@media only screen and (max-width:575px) {

    /* CLS fix: keep the logo anchor at the same min-height so the
       smaller logo does not shrink the top-header. */
}

@media only screen and (max-width:480px) {

    /* CLS fix: keep visibility:hidden (already set at 767px) rather
       than display:none so space is preserved. */
    .header-service {
        visibility: hidden;
        pointer-events: none
    }
}


/* Per-page CSS for Orange AC Repair & Installation page */
/* Exact match to ezeletric.com/orange-ac-repair-installation/ live site */

/* ===== CLEARFIX — matches live site .clearfix div inside mega_info_box_2 ===== */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ===== MID-PART — pushes content below fixed header ===== */
.mid-part {
    margin-top: 140px;
}

@media (max-width: 991px) {
    .mid-part {
        margin-top: 147px;
    }
}

@media (max-width: 480px) {
    .mid-part {
        margin-top: 155px;
    }
}

/* ===== BREADCRUMB ===== */
.breadcrum-bar {
    background: #fff;
    padding: 15px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #3bb44d;
    display: inline-block;
    width: 100%;
    padding-top: 25px;
}

.breadcrum-bar .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px 0 15px;
}

.breadcrum-bar a {
    color: #000;
    font-size: 14px;
    text-decoration: none;
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 600;
}

.breadcrum-bar a:hover {
    text-decoration: underline;
}

.breadcrum-bar .breadcrumb_last {
    color: #3bb44d;
    font-size: 14px;
    font-weight: 600;
}

/* ===== UTILITY CLASSES (from live site style_other_pages.css) ===== */
.h1-style { font-family: 'latoregular', 'Lato', sans-serif; font-weight: 700 !important; margin: 0; color: #148023; }
.h3-style { font-family: 'latoregular', 'Lato', sans-serif; font-weight: 600 !important; margin: 0; color: #148023; }
.h-f-s-18 { font-size: 18px !important; line-height: 28px !important; }
.h-f-s-24 { font-size: 24px !important; line-height: 34px !important; }
.h-f-s-34 { font-size: 34px !important; line-height: 44px !important; }
.h-f-s-44 { font-size: 44px !important; line-height: 54px !important; }
.f-w-400 { font-weight: 400 !important; }
.f-w-700 { font-weight: 700 !important; }
.lh-40 { line-height: 40px !important; }
.pb-1 { padding-bottom: 10px !important; }
.pb-2 { padding-bottom: 20px !important; }
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center !important; }

/* ===== INNER-SECTION-1 — Hero with background image ===== */
.inner-section-1 {
    background-image: url('/assets/images/ezeletric/about-hero-banner.webp');
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding: 30px 0 30px 0;
    text-align: center;
    position: relative;
}

/* Dark overlay like live site */
.inner-section-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.inner-section-1 .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.inner-section-1 .w-heading {
    position: relative;
    width: 100%;
    display: inline-block;
    margin-bottom: 1.5em !important;
    text-align: center;
}

.inner-section-1 .hero-subtitle {
    color: #fff;
    font-size: 24px;
    font-family: 'latoregular', 'Lato', sans-serif;
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

.inner-section-1 h1 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 700 !important;
    font-size: 38px;
    line-height: 42px;
    color: #fff;
    text-align: center;
    position: relative;
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* White decorative line below heading — live site uses :before on w-heading */
.inner-section-1 .w-heading::before {
    content: '';
    display: inline-block;
    position: absolute;
    border-bottom: 3px solid #fff;
    top: auto;
    bottom: -10px;
    right: 0;
    left: 0;
    width: 36%;
    margin: 0 auto;
}

.inner-section-1 .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.inner-section-1 .col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .inner-section-1 .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Left text content */
.inner-section-1 .left-cstm-txt {
    z-index: 0;
    padding-top: 35px;
}

.inner-section-1 .left-cstm-txt .p-txt2 {
    color: #fff;
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 30px;
    text-align: left;
}

.inner-section-1 .left-cstm-txt .p-txt2:last-child {
    margin-bottom: 0;
}

.inner-section-1 .left-cstm-txt .p-txt2 a {
    color: #3bb44d;
    text-decoration: none;
}

.inner-section-1 .left-cstm-txt .p-txt2 a:hover {
    text-decoration: underline;
}

/* Right contact form — exact match to about-us page */
.inner-section-1 .contact-top {
    padding-top: 20px;
}

.inner-section-1 .contact-top .contact-form {
    background: #3bb44d;
    padding: 30px 40px 10px;
    text-align: center;
    margin: 0 auto;
    width: 85%;
}

.contact-top .cf-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    font-family: 'latoregular', 'Lato', sans-serif;
    margin-bottom: 25px;
    text-align: center;
    text-transform: uppercase;
}

.contact-form .cf-row {
    margin: 0 0 20px;
}

.contact-form .cf-row p {
    margin: 0;
}

.contact-form .cf-row input[type="text"],
.contact-form .cf-row input[type="email"],
.contact-form .cf-row input[type="tel"],
.contact-form .cf-row textarea {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 0;
    font-size: 15px;
    font-family: 'latoregular', 'Lato', sans-serif;
    color: #2d2d2d;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    height: auto !important;
    line-height: inherit;
}

.contact-form .cf-row input[type="text"]:focus,
.contact-form .cf-row input[type="email"]:focus,
.contact-form .cf-row input[type="tel"]:focus,
.contact-form .cf-row textarea:focus {
    border-color: #3bb44d;
    outline: none;
}

.contact-form .cf-row textarea {
    resize: none;
    height: 75px !important;
    min-height: auto;
}

/* Custom contact row with country code */
.contact-form .cf-row.custom-contact {
    position: relative;
}

.contact-form .custom-contact .country-code {
    position: absolute;
    left: 8px;
    top: 10px;
    font-weight: 400;
    color: #000;
    font-size: 16px;
    pointer-events: none;
}

.contact-form .custom-contact input[type="tel"] {
    padding-left: 40px;
}

.contact-form .contact-number-error {
    display: block;
    color: #dc3232;
    font-size: 12px;
    margin-top: 4px;
    min-height: 18px;
}

/* CF7 validation error tooltip — matches live site */
.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 12px;
    font-weight: normal;
    display: block;
    text-align: left;
    background: #dedede;
    padding: 2px 8px;
    line-height: normal;
}

.wpcf7-form-control-wrap {
    position: relative;
}

/* Invalid field border highlight */
.wpcf7-form-control.wpcf7-not-valid {
    border: 1px solid #dc3232 !important;
}

/* Response output messages */
.wpcf7-response-output {
    border: 0;
    background: transparent;
    color: red;
    font-size: 13px;
    text-align: left;
    line-height: normal;
    margin: 2px auto;
    padding: 3px 0px;
    width: 80%;
    left: 0;
    right: 0;
}

.contact-form > p > label {
    font-size: 16px;
    color: #fff;
    text-align: left;
    margin: 10px 0;
    font-family: 'latoregular', 'Lato', sans-serif;
    display: block;
    font-weight: 700;
}

.contact-form .cf-btn {
    text-align: center;
    margin-bottom: 30px;
}

.contact-form .cf-btn p {
    margin: 0;
}

.contact-form .cf-btn input[type="submit"] {
    background: #148023;
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    font-family: 'latoregular', 'Lato', sans-serif;
    transition: all 0.3s ease;
    width: 100%;
}

.contact-form .cf-btn input[type="submit"]:hover {
    background: #fff;
    color: #148023;
}

/* ===== COUPON / BADGES SECTION ===== */
.home-coupon {
    margin-top: 2em !important;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.home-coupon .coupon-section {
    padding: 0 15px;
    max-width: 1140px;
    margin: 0 auto;
}

.coupon-section .coupon-box {
    background: #fff;
    transition: all 0.3s ease;
}

.coupon-section .coupon-box:hover {
    background: #148023;
    color: #fff;
    border: 3px dashed #fbfbfb;
    cursor: pointer;
}

.coupon-section .coupon-box img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ===== IOS-APP-DEV-SECTION-2 — AC Installation Section ===== */
.ios-app-dev-section-2 {
    padding: 30px 0;
    background-color: #fff;
}

.ios-app-dev-section-2 .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.ios-app-dev-section-2 h2 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 600 !important;
    margin: 0;
    color: #148023;
    font-size: 34px !important;
    line-height: 44px !important;
    padding-bottom: 20px !important;
}

.ios-app-dev-section-2 .h-f-s-24 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 600 !important;
    margin: 0;
    color: #148023;
    font-size: 24px !important;
    line-height: 34px !important;
    margin-bottom: 30px;
}

.ios-app-dev-section-2 .txt-detail-p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 16px;
    text-align: left;
    color: #2d2d2d;
}

.ios-app-dev-section-2 .txt-detail-p:last-child {
    margin-bottom: 0;
}

.ios-app-dev-section-2 .txt-detail-p a {
    color: #3bb44d;
    text-decoration: none;
}

.ios-app-dev-section-2 .txt-detail-p a:hover {
    text-decoration: underline;
}

/* ===== INNER-SECTION-6 — Services Grid (gray bg) ===== */
.inner-section-6.services-grid-section {
    background-color: #f7f7f7 !important;
    padding: 80px 0 50px;
    margin-top: 2em;
    margin-bottom: 2em;
}

.inner-section-6.services-grid-section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.inner-section-6 .s-heading {
    position: relative;
    margin-bottom: 2em !important;
    display: inline-block;
    width: 100%;
}

.inner-section-6 .s-heading::before {
    content: '';
    display: inline-block;
    position: absolute;
    border-bottom: 3px solid #148023;
    top: 0;
    bottom: -10px;
    right: 0;
    left: 0;
    width: 42%;
    margin: 0;
}

.inner-section-6 .s-heading.text-center::before {
    margin: 0 auto;
}

.inner-section-6 .s-heading.text-center p {
    text-align: center;
}

.inner-section-6 .s-heading p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #148023;
    line-height: 45px;
    text-align: left;
    margin: 0;
}

.inner-section-6 .s-heading p strong {
    font-weight: 600 !important;
    font-size: 40px;
}

.inner-section-6 .s-heading h3 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #148023;
    line-height: 1.2;
    margin: 10px 0;
    text-align: left;
}

.inner-section-6 .txt-detail-p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 30px;
    text-align: left;
    max-width: 900px;
    color: #333;
}

/* ===== BETTER-EXPERIENCE-SECTION — Service Cards Grid ===== */
/* Live site: NO card styling (uses .nones class) — image on left, text on right, no box/shadow */
/* Live site: rows stack directly with no vertical gap (margin-bottom: 0) */
.better-experience-section .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 0;
}

.better-experience-section .col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .better-experience-section .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mega info box — NO card styling on live site (.nones class removes all box effects) */
/* Live site: margin-bottom: 1em (from style_other_pages.css line 117) */
.mega_info_box_2 {
    margin-bottom: 1em;
}

/* Image on the left, floated — live site: natural size (90×90 icons) */
/* Live site: NO padding on mega-info-header (style_other_pages.css line 113) */
.mega-info-header {
    float: left;
    height: 100%;
    position: relative;
    top: 0;
    text-align: center;
    padding: 0;
}

.mega-info-img {
    display: block;
    margin: 0 auto;
}

/* Text content on the right, 78% width */
/* Live site: NO padding on mega-info-footer on desktop (style_other_pages.css line 114) */
.mega-info-footer {
    float: right;
    width: 78%;
    padding: 0;
}

.mega-info-desc .h3 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 600 !important;
    font-size: 18px;
    margin: 0 auto 10px;
    line-height: 1.3;
}

.mega-info-desc .text-green {
    color: #47c88f !important;
}

.mega-info-desc .text-orange {
    color: #f1a818 !important;
}

/* Live site: padding: 0 30px 0 0 (style_other_pages.css) — right padding only */
.mega-info-desc p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    padding: 0 30px 0 0;
    color: #333;
    margin: 0;
}

.mega-info-desc p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    padding: 0 30px 0 0;
    color: #333;
    margin: 0;
}

/* ===== INNER-SECTION-6 — CTA Section (white bg) ===== */
.inner-section-6.cta-section {
    background-color: #ffffff !important;
    padding: 50px 0;
}

.inner-section-6.cta-section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.inner-section-6.cta-section .s-heading {
    margin-bottom: 30px;
}

.inner-section-6.cta-section .s-heading p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #148023;
    line-height: 45px;
    text-align: center;
}

.inner-section-6.cta-section .s-heading strong {
    font-weight: 600 !important;
    font-size: 40px;
}

.inner-section-6.cta-section .txt-detail-p {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* ===== AREAS WE SERVE — matches live site exactly ===== */
.areas.area-section {
    padding: 50px 0;
    background-color: #fff;
}

.areas.area-section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.areas.area-section .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.areas.area-section .col-md-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.areas.area-section .section-title {
    text-align: center;
    margin-bottom: 30px;
}

.areas.area-section .section-title p {
    font-size: 28px;
    font-weight: 300;
    color: #364d59;
    font-family: 'latoregular', 'Lato', sans-serif;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 0;
    display: inline-block;
}

.areas.area-section .section-title p::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 4px;
    background-color: #3bb44d;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* 4-column grid with map pin icons — exact match to live site */

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .inner-section-1 {
        padding-top: 0em;
    }

    .inner-section-1 h1 {
        font-size: 36px;
    }

    .inner-section-1 .hero-subtitle {
        font-size: 20px;
    }

    .inner-section-1 .left-cstm-txt .p-txt2 {
        color: #fff;
    }

    .inner-section-1 .contact-top .contact-form {
        margin-top: 30px;
    }

    .contact-form {
        padding: 25px 20px 10px;
        width: 100%;
        margin: 30px auto;
    }

    .ios-app-dev-section-2 h2 {
        font-size: 28px !important;
        line-height: 38px !important;
    }

    .ios-app-dev-section-2 .h-f-s-24 {
        font-size: 20px !important;
        line-height: 30px !important;
    }

    .inner-section-6 .s-heading h3 {
        font-size: 28px;
    }

    .inner-section-6 .s-heading p strong {
        font-size: 30px;
    }

    .inner-section-6.services-grid-section,
    .inner-section-6.cta-section,
    .areas.area-section {
        padding: 30px 0;
    }

    .mid-part {
        margin-top: 147px;
    }
}

@media (max-width: 768px) {
    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-header .mega-info-img {
        width: 64px;
    }
}

@media (max-width: 767px) {
    .breadcrum-bar {
        margin-top: 0 !important;
    }

    .inner-section-1 .w-heading {
        font-size: 32px;
        padding: 0;
        line-height: 45px;
        margin-bottom: 1em !important;
    }

    .inner-section-1 .w-heading h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .inner-section-1 .left-cstm-txt .p-txt2 {
        color: #fff;
        text-align: center;
    }

    .inner-section-6 .s-heading p {
        text-align: center;
        line-height: 35px;
        font-size: 18px;
    }

    .inner-section-6 .s-heading p strong {
        font-size: 27px;
    }

    .inner-section-6 .s-heading::before {
        width: 70%;
        margin: 0 auto;
    }

    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-header {
        margin: 0 auto 15px;
        float: none;
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-header .mega-info-img {
        display: inline-block;
        margin: 0 auto;
        width: 64px;
    }

    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-footer {
        float: none;
        width: 100%;
        text-align: center;
    }

    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-footer .mega-info-desc p {
        padding: 0;
    }

    .ios-app-dev-section-2 h2 {
        font-size: 24px !important;
        line-height: 34px !important;
    }

    .ios-app-dev-section-2 .h-f-s-24 {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    .inner-section-6 .s-heading h3 {
        font-size: 24px;
    }

    .mega-info-desc .h3 {
        font-size: 18px;
    }

    .areas.area-section {
        padding: 20px 0;
    }

    .areas.area-section .section-title p {
        font-size: 22px;
    }

    .coupon-section .coupon-box:nth-child(3) {
        margin-left: 0;
    }
    .h-f-s-24 { font-size: 24px !important; line-height: 28px !important; }
    .h-f-s-34 { font-size: 26px !important; line-height: 30px !important; }
    .h-f-s-44 { font-size: 32px !important; line-height: 46px !important; }
}

@media (max-width: 575px) {
    .inner-section-1 h1 {
        font-size: 24px !important;
        line-height: 34px !important;
    }

    .inner-section-1 .hero-subtitle {
        font-size: 16px;
    }

    .inner-section-1 .contact-top .contact-form {
        padding: 20px 15px;
    }

    .contact-form .cf-title {
        font-size: 20px;
    }

    .ios-app-dev-section-2 h2 {
        font-size: 22px !important;
        line-height: 32px !important;
    }

    .inner-section-6 .s-heading h3 {
        font-size: 22px;
    }

    .inner-section-6 .s-heading p strong {
        font-size: 24px;
    }

    .areas.area-section .section-title p {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .mid-part {
        margin-top: 155px;
    }

    .inner-section-1 {
        padding-top: 0em;
    }

    .inner-section-1 .w-heading {
        font-size: 32px;
        padding: 0;
        line-height: 45px;
        margin-bottom: 1em !important;
    }

    .inner-section-1 .w-heading h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .inner-section-1 .hero-subtitle {
        font-size: 15px;
    }

    .better-experience-section .col-md-6 {
        margin-bottom: 20px;
    }

    .mega_info_box_2 {
        margin-bottom: 15px;
    }
    .h-f-s-24 { font-size: 24px !important; line-height: 34px !important; }
    .h-f-s-34 { font-size: 26px !important; line-height: 30px !important; }
    .h-f-s-44 { font-size: 32px !important; line-height: 46px !important; }
}

/* ===== ADD MAP SECTION — matches live site ===== */

/* Text white utility */
.inner-section-1 .text-white {
    color: #ffffff;
}

/* ===== END orange-ac-repair-installation.css ===== */

/* Shared service page CSS for AC city/service pages */
/* Based on orange-ac-repair-installation live site styles */

/* ===== CLEARFIX — matches live site .clearfix div inside mega_info_box_2 ===== */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ===== MID-PART — pushes content below fixed header ===== */
.mid-part {
    margin-top: 140px;
}

@media (max-width: 991px) {
    .mid-part {
        margin-top: 147px;
    }
}

@media (max-width: 480px) {
    .mid-part {
        margin-top: 155px;
    }
}

/* ===== BREADCRUMB ===== */
.breadcrum-bar {
    background: #fff;
    padding: 15px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #3bb44d;
    display: inline-block;
    width: 100%;
    padding-top: 25px;
}

.breadcrum-bar .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px 0 15px;
}

.breadcrum-bar a {
    color: #000;
    font-size: 14px;
    text-decoration: none;
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 600;
}

.breadcrum-bar a:hover {
    text-decoration: underline;
}

.breadcrum-bar .breadcrumb_last {
    color: #3bb44d;
    font-size: 14px;
    font-weight: 600;
}

/* ===== TAG COLOR — used in live site headings ===== */

/* ===== UTILITY CLASSES (from live site style_other_pages.css) ===== */
.h1-style { font-family: 'latoregular', 'Lato', sans-serif; font-weight: 700 !important; margin: 0; color: #148023; }
.h3-style { font-family: 'latoregular', 'Lato', sans-serif; font-weight: 600 !important; margin: 0; color: #148023; }
.h-f-s-18 { font-size: 18px !important; line-height: 28px !important; }
.h-f-s-24 { font-size: 24px !important; line-height: 34px !important; }
.h-f-s-34 { font-size: 34px !important; line-height: 44px !important; }
.h-f-s-44 { font-size: 44px !important; line-height: 54px !important; }
.f-w-400 { font-weight: 400 !important; }
.f-w-700 { font-weight: 700 !important; }
.lh-40 { line-height: 40px !important; }
/* pb-1 / pb-2 intentionally NOT overridden here — Bootstrap's defaults
   (0.25rem / 0.5rem = 4px / 8px) match the live site exactly. The previous
   10px/20px overrides inflated content-section heading spacing vs live. */
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center !important; }

/* ===== INNER-SECTION-1 — Hero with background image ===== */
.inner-section-1 {
    background-image: url('/assets/images/ezeletric/about-hero-banner.webp');
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding: 30px 0 30px 0;
    text-align: center;
    position: relative;
}

/* Dark overlay like live site */
.inner-section-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.inner-section-1 .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.inner-section-1 .w-heading {
    position: relative;
    width: 100%;
    display: inline-block;
    margin-bottom: 1.5em !important;
    text-align: center;
}

.inner-section-1 .hero-subtitle {
    color: #fff;
    font-size: 24px;
    font-family: 'latoregular', 'Lato', sans-serif;
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

.inner-section-1 h1 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 700 !important;
    font-size: 38px;
    line-height: 42px;
    color: #fff;
    text-align: center;
    position: relative;
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* White decorative line below heading — live site uses :before on w-heading */
.inner-section-1 .w-heading::before {
    content: '';
    display: inline-block;
    position: absolute;
    border-bottom: 3px solid #fff;
    top: auto;
    bottom: -10px;
    right: 0;
    left: 0;
    width: 36%;
    margin: 0 auto;
}

.inner-section-1 .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.inner-section-1 .col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .inner-section-1 .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Left text content */
.inner-section-1 .left-cstm-txt {
    z-index: 0;
    padding-top: 35px;
}

.inner-section-1 .left-cstm-txt .p-txt2 {
    color: #fff;
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 30px;
    text-align: left;
}

.inner-section-1 .left-cstm-txt .p-txt2:last-child {
    margin-bottom: 0;
}

.inner-section-1 .left-cstm-txt .p-txt2 a {
    color: #3bb44d;
    text-decoration: none;
}

.inner-section-1 .left-cstm-txt .p-txt2 a:hover {
    text-decoration: underline;
}

/* Right contact form — exact match to about-us page */
.inner-section-1 .contact-top {
    padding-top: 20px;
}

.inner-section-1 .contact-top .contact-form {
    background: #3bb44d;
    padding: 30px 40px 10px;
    text-align: center;
    margin: 0 auto;
    width: 85%;
}

.contact-top .cf-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    font-family: 'latoregular', 'Lato', sans-serif;
    margin-bottom: 25px;
    text-align: center;
    text-transform: uppercase;
}

.contact-form .cf-row {
    margin: 0 0 20px;
}

.contact-form .cf-row p {
    margin: 0;
}

.contact-form .cf-row input[type="text"],
.contact-form .cf-row input[type="email"],
.contact-form .cf-row input[type="tel"],
.contact-form .cf-row textarea {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 0;
    font-size: 15px;
    font-family: 'latoregular', 'Lato', sans-serif;
    color: #2d2d2d;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    height: auto !important;
    line-height: inherit;
}

.contact-form .cf-row input[type="text"]:focus,
.contact-form .cf-row input[type="email"]:focus,
.contact-form .cf-row input[type="tel"]:focus,
.contact-form .cf-row textarea:focus {
    border-color: #3bb44d;
    outline: none;
}

.contact-form .cf-row textarea {
    resize: none;
    height: 75px !important;
    min-height: auto;
}

/* Custom contact row with country code */
.contact-form .cf-row.custom-contact {
    position: relative;
}

.contact-form .custom-contact .country-code {
    position: absolute;
    left: 8px;
    top: 10px;
    font-weight: 400;
    color: #000;
    font-size: 16px;
    pointer-events: none;
}

.contact-form .custom-contact input[type="tel"] {
    padding-left: 40px;
}

.contact-form .contact-number-error {
    display: block;
    color: #dc3232;
    font-size: 12px;
    margin-top: 4px;
    min-height: 18px;
}

/* CF7 validation error tooltip — matches live site */
.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 12px;
    font-weight: normal;
    display: block;
    text-align: left;
    background: #dedede;
    padding: 2px 8px;
    line-height: normal;
}

.wpcf7-form-control-wrap {
    position: relative;
}

/* Invalid field border highlight */
.wpcf7-form-control.wpcf7-not-valid {
    border: 1px solid #dc3232 !important;
}

/* Response output messages */
.wpcf7-response-output {
    border: 0;
    background: transparent;
    color: red;
    font-size: 13px;
    text-align: left;
    line-height: normal;
    margin: 2px auto;
    padding: 3px 0px;
    width: 80%;
    left: 0;
    right: 0;
}

.cf7-hidden-fields {
    display: none;
}

.contact-form > p > label {
    font-size: 16px;
    color: #fff;
    text-align: left;
    margin: 10px 0;
    font-family: 'latoregular', 'Lato', sans-serif;
    display: block;
    font-weight: 700;
}

.contact-form .cf-btn {
    text-align: center;
    margin-bottom: 30px;
}

.contact-form .cf-btn p {
    margin: 0;
}

.contact-form .cf-btn input[type="submit"] {
    background: #148023;
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    font-family: 'latoregular', 'Lato', sans-serif;
    transition: all 0.3s ease;
    width: 100%;
}

.contact-form .cf-btn input[type="submit"]:hover {
    background: #fff;
    color: #148023;
}

/* ===== COUPON / BADGES SECTION ===== */
.home-coupon {
    margin-top: 2em !important;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.home-coupon .coupon-section {
    padding: 0 15px;
    max-width: 1140px;
    margin: 0 auto;
}

.coupon-section .coupon-box {
    background: #fff;
    transition: all 0.3s ease;
}

.coupon-section .coupon-box:hover {
    background: #148023;
    color: #fff;
    border: 3px dashed #fbfbfb;
    cursor: pointer;
}

.coupon-section .coupon-box img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ===== IOS-APP-DEV-SECTION-2 — AC Installation Section ===== */
.ios-app-dev-section-2 {
    padding: 30px 0;
    background-color: #fff;
}

.ios-app-dev-section-2 .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.ios-app-dev-section-2 h2 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 600 !important;
    margin: 0;
    color: #148023;
    font-size: 34px !important;
    line-height: 44px !important;
    padding-bottom: 20px !important;
}

.ios-app-dev-section-2 .h-f-s-24 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 600 !important;
    margin: 0;
    color: #148023;
    font-size: 24px !important;
    line-height: 34px !important;
}

/* Space below the green subtitle before the body text begins — matches the
   ~35px WPBakery column gap on the live site. Only fires when a subtitle is
   directly followed by body copy, so the tight heading stack stays flush. */
.ios-app-dev-section-2 .h-f-s-24 + .txt-detail-p {
    margin-top: 35px;
}

.ios-app-dev-section-2 .txt-detail-p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 16px;
    text-align: left;
    color: #2d2d2d;
}

.ios-app-dev-section-2 .txt-detail-p:last-child {
    margin-bottom: 0;
}

.ios-app-dev-section-2 .txt-detail-p a {
    color: #3bb44d;
    text-decoration: none;
}

.ios-app-dev-section-2 .txt-detail-p a:hover {
    text-decoration: underline;
}

/* ===== INNER-SECTION-6 — Services Grid (gray bg) ===== */
.inner-section-6.services-grid-section {
    background-color: #f7f7f7 !important;
    padding: 80px 0 50px;
}

.inner-section-6.services-grid-section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.inner-section-6 .s-heading {
    position: relative;
    /* 51px matches the live WPBakery column gap below the green ::before
       underline before the body copy begins (services-grid + Why-Choose). */
    margin-bottom: 51px !important;
    display: inline-block;
    width: 100%;
}

.inner-section-6 .s-heading::before {
    content: '';
    display: inline-block;
    position: absolute;
    border-bottom: 3px solid #148023;
    top: 0;
    bottom: -10px;
    right: 0;
    left: 0;
    width: 42%;
    margin: 0;
}

.inner-section-6 .s-heading.text-center::before {
    margin: 0 auto;
}

.inner-section-6 .s-heading.text-center h3,
.inner-section-6 .s-heading.text-center p {
    text-align: center;
}

.inner-section-6.cta-section .s-heading.text-center h3,
.inner-section-6.cta-section .s-heading.text-center p {
    font-size: 34px;
    line-height: 44px;
    font-weight: 400;
    color: #148023;
    margin: 0;
}

.inner-section-6.cta-section .s-heading.text-center h3 strong,
.inner-section-6.cta-section .s-heading.text-center p strong {
    font-weight: 600 !important;
}

.inner-section-6 .s-heading p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #148023;
    line-height: 45px;
    text-align: left;
    margin: 0;
}

.inner-section-6 .s-heading p strong {
    font-weight: 600 !important;
    font-size: 40px;
}

.inner-section-6 .s-heading h3 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #148023;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    text-align: left;
}

.inner-section-6 .txt-detail-p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 1rem;
    text-align: left;
    color: #333;
}

/* ===== BETTER-EXPERIENCE-SECTION — Service Cards Grid ===== */
/* Live site: NO card styling (uses .nones class) — image on left, text on right, no box/shadow */
/* Live site: rows stack directly with no vertical gap (margin-bottom: 0) */
.better-experience-section .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 0;
}

.better-experience-section .col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .better-experience-section .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mega info box — NO card styling on live site (.nones class removes all box effects) */
/* Live site: margin-bottom: 1em (from style_other_pages.css line 117) */
.mega_info_box_2 {
    margin-bottom: 1em;
}

/* Image on the left, floated — live site: natural size (90×90 icons) */
/* Live site: NO padding on mega-info-header (style_other_pages.css line 113) */
.mega-info-header {
    float: left;
    height: 100%;
    position: relative;
    top: 0;
    text-align: center;
    padding: 0;
}

.mega-info-img {
    display: block;
    margin: 0 auto;
}

/* Text content on the right, 78% width */
/* Live site: NO padding on mega-info-footer on desktop (style_other_pages.css line 114) */
.mega-info-footer {
    float: right;
    width: 78%;
    padding: 0;
}

.mega-info-desc .h3 {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 600 !important;
    font-size: 18px;
    margin: 0 auto 10px;
    line-height: 1.3;
}

.mega-info-desc .text-green {
    color: #47c88f !important;
}

.mega-info-desc .text-orange {
    color: #f1a818 !important;
}

/* Live site: padding: 0 30px 0 0 (style_other_pages.css) — right padding only */
.mega-info-desc p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    padding: 0 30px 0 0;
    color: #333;
    margin: 0;
}

.mega-info-desc p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    padding: 0 30px 0 0;
    color: #333;
    margin: 0;
}

/* ===== INNER-SECTION-6 — CTA Section (white bg) ===== */
.inner-section-6.cta-section {
    background-color: #ffffff !important;
    padding: 50px 0;
}

.inner-section-6.cta-section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.inner-section-6.cta-section .s-heading {
    margin-bottom: 30px;
}

.inner-section-6.cta-section .s-heading p {
    font-family: 'latoregular', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #148023;
    line-height: 45px;
    text-align: center;
}

.inner-section-6.cta-section .s-heading strong {
    font-weight: 600 !important;
    font-size: 40px;
}

.inner-section-6.cta-section .txt-detail-p {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* ===== AREAS WE SERVE — matches live site exactly ===== */
/* Live site: .areas has NO base padding (only padding: 20px 0 inside @media max-width:991px).
   This page's .row is empty, so any padding here would render as dead whitespace above testimonials. */
.areas.area-section {
    padding: 0;
    background-color: #fff;
}

.areas.area-section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.areas.area-section .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.areas.area-section .col-md-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.areas.area-section .section-title {
    text-align: center;
    margin-bottom: 30px;
}

.areas.area-section .section-title p {
    font-size: 28px;
    font-weight: 300;
    color: #364d59;
    font-family: 'latoregular', 'Lato', sans-serif;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 0;
    display: inline-block;
}

.areas.area-section .section-title p::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 4px;
    background-color: #3bb44d;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* 4-column grid with map pin icons — exact match to live site */

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .inner-section-1 {
        padding-top: 0em;
    }

    .inner-section-1 h1 {
        font-size: 36px;
    }

    .inner-section-1 .hero-subtitle {
        font-size: 20px;
    }

    .inner-section-1 .left-cstm-txt .p-txt2 {
        color: #fff;
    }

    .inner-section-1 .contact-top .contact-form {
        margin-top: 30px;
    }

    .contact-form {
        padding: 25px 20px 10px;
        width: 100%;
        margin: 30px auto;
    }

    .ios-app-dev-section-2 h2 {
        font-size: 28px !important;
        line-height: 38px !important;
    }

    .ios-app-dev-section-2 .h-f-s-24 {
        font-size: 20px !important;
        line-height: 30px !important;
    }

    .inner-section-6 .s-heading h3 {
        font-size: 28px;
    }

    .inner-section-6 .s-heading p strong {
        font-size: 30px;
    }

    .inner-section-6.services-grid-section,
    .inner-section-6.cta-section,
    .areas.area-section {
        padding: 30px 0;
    }

    .mid-part {
        margin-top: 147px;
    }
}

@media (max-width: 768px) {
    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-header .mega-info-img {
        width: 64px;
    }
}

@media (max-width: 767px) {
    .breadcrum-bar {
        margin-top: 0 !important;
    }

    .inner-section-1 .w-heading {
        font-size: 32px;
        padding: 0;
        line-height: 45px;
        margin-bottom: 1em !important;
    }

    .inner-section-1 .w-heading h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .inner-section-1 .left-cstm-txt .p-txt2 {
        color: #fff;
        text-align: center;
    }

    .inner-section-6 .s-heading p {
        text-align: center;
        line-height: 35px;
        font-size: 18px;
    }

    .inner-section-6 .s-heading p strong {
        font-size: 27px;
    }

    .inner-section-6 .s-heading::before {
        width: 70%;
        margin: 0 auto;
    }

    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-header {
        margin: 0 auto 15px;
        float: none;
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-header .mega-info-img {
        display: inline-block;
        margin: 0 auto;
        width: 64px;
    }

    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-footer {
        float: none;
        width: 100%;
        text-align: center;
    }

    .inner-section-6 .better-experience-section .mega_info_box_2 .mega-info-footer .mega-info-desc p {
        padding: 0;
    }

    .ios-app-dev-section-2 h2 {
        font-size: 24px !important;
        line-height: 34px !important;
    }

    .ios-app-dev-section-2 .h-f-s-24 {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    .inner-section-6 .s-heading h3 {
        font-size: 24px;
    }

    .mega-info-desc .h3 {
        font-size: 18px;
    }

    .areas.area-section {
        padding: 20px 0;
    }

    .areas.area-section .section-title p {
        font-size: 22px;
    }

    .coupon-section .coupon-box:nth-child(3) {
        margin-left: 0;
    }
    .h-f-s-24 { font-size: 24px !important; line-height: 28px !important; }
    .h-f-s-34 { font-size: 26px !important; line-height: 30px !important; }
    .h-f-s-44 { font-size: 32px !important; line-height: 46px !important; }
}

@media (max-width: 575px) {
    .inner-section-1 h1 {
        font-size: 24px !important;
        line-height: 34px !important;
    }

    .inner-section-1 .hero-subtitle {
        font-size: 16px;
    }

    .inner-section-1 .contact-top .contact-form {
        padding: 20px 15px;
    }

    .contact-form .cf-title {
        font-size: 20px;
    }

    .ios-app-dev-section-2 h2 {
        font-size: 22px !important;
        line-height: 32px !important;
    }

    .inner-section-6 .s-heading h3 {
        font-size: 22px;
    }

    .inner-section-6 .s-heading p strong {
        font-size: 24px;
    }

    .areas.area-section .section-title p {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .mid-part {
        margin-top: 155px;
    }

    .inner-section-1 {
        padding-top: 0em;
    }

    .inner-section-1 .w-heading {
        font-size: 32px;
        padding: 0;
        line-height: 45px;
        margin-bottom: 1em !important;
    }

    .inner-section-1 .w-heading h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .inner-section-1 .hero-subtitle {
        font-size: 15px;
    }

    .better-experience-section .col-md-6 {
        margin-bottom: 20px;
    }

    .mega_info_box_2 {
        margin-bottom: 15px;
    }
    .h-f-s-24 { font-size: 24px !important; line-height: 34px !important; }
    .h-f-s-34 { font-size: 26px !important; line-height: 30px !important; }
    .h-f-s-44 { font-size: 32px !important; line-height: 46px !important; }
}

/* ===== ADD MAP SECTION — matches live site ===== */

/* Text white utility */
.inner-section-1 .text-white {
    color: #ffffff;
}

/* ===== END orange-ac-repair-installation.css ===== */