/* ==========================================
   WRKMAN - Inline custom CSS from live site
   Extracted from wrkmanapp.com
   ========================================== */

/* Font is set by theme.css (Lato, sans-serif) */

.navbar .navbar-brand { margin: 0; }
.tnc-33 ul { list-style: unset; margin-left: 20px; }
.handymn-title-33 { color: #0C2D52 !important; }
#navbarSupportedContent { flex-grow: unset !important; }

.fade {
    justify-content: center;
    align-items: center;
    background: hsla(212, 74%, 18%, 0.75);
}

.mb-46 { margin-bottom: 46px; }
.mb-20 { margin-bottom: 20px; }
.mb-32 { margin-bottom: 32px; }
.mb-13 { margin-bottom: 13px !important; }
.pad-40 { padding: 41px 40px !important; }

.modal label { margin-bottom: 5px; }
.sub-heading-33 { margin-bottom: 33px; }

.modal-dialog { max-width: 612.99px !important; }
div#thankYouModal .modal-dialog {
    max-width: 523.07px !important;
    min-height: 292.55px !important;
}
#thankYouModal h2.thanks-head-33,
#thankYouModal p.thanks-subhead-33 { margin-bottom: 0 !important; }
#thankYouModal .btn-wrkman-22 { margin-top: 64px; }

/* Figma: blue diamond-pattern header band across the top of the submitted popup.
   Sits above .modal-body; the modal-content's overflow:hidden + border-radius
   clips its top corners symmetrically. */
#thankYouModal .modal-content,
#serviceModal .modal-content {
    background-color: #fff !important;
    /* Figma: 22px top corners (blue header), 16px bottom corners (white body) */
    border-radius: 22px 22px 16px 16px !important;
}
/* blue header band (Figma #2046CB) */
#thankYouModal .thanks-decor-33,
#serviceModal .thanks-decor-33 {
    height: 52px;
    background: #2046CB url('../images/modal-header.png') center / cover no-repeat;
    border-radius: 22px 22px 0 0;
}
/* white body tucks flush under the blue header (Bootstrap modal won't reliably
   render the curved seam here; kept clean/straight) */
#thankYouModal .modal-body,
#serviceModal .modal-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Figma: a little breathing room between benefit rows + slightly larger icons */
#thankYouModal .modal-body ul li {
    margin-bottom: 12px;
}
#thankYouModal .modal-body ul li > span:first-child {
    font-size: 22px !important;
}

.modal-inner-title-33,
#thankYouModal h2.thanks-head-33 {
    font-family: "Rasa", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 30px;
    color: #0C2D52;
    line-height: 30px;
}

.optional-33 {
    font-family: "lato", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    color: #8696a8;
    font-size: 12px;
    line-height: 14.4px;
    margin-left: 2px;
}

#selected-services .service-item label {
    margin: 0;
    font-family: "lato", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 16px;
    line-height: 19.2px;
}

#service-form label:has(+.form-control:focus) { color: #00B7FF !important; }
#service-form .form-control:focus { border-color: #00B7FF !important; }

#service-form .form-check-input:checked[type=checkbox] {
    background-image: url('/WpWeb/images/check-icon.png');
    background-position: center;
    background-size: 10px;
}
#service-form .form-check-input:checked {
    background-color: #2046CB;
    border-color: #2046CB;
}
#selected-services .form-check-input { position: unset; margin-left: unset; }

.btn-wrkman-22 {
    font-family: "lato", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    border-radius: 10px;
    padding: 11px 50px;
    font-size: 18px;
    height: 47px;
    background: #35b7ff;
    border: #35b7ff;
}

#selected-services .service-item {
    background: unset;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 0;
}
#selected-services {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

#service-form input[type="text"],
#service-form input[type="email"],
#service-form textarea,
#service-form input[type="number"] {
    height: 47px;
    border-radius: 10px;
}
#service-form ::placeholder {
    color: var(--Enter-text, #D2D2D2);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#service-form textarea { min-height: 75.9px; }

#selected-services .service-item input[type=checkbox] {
    height: 17px;
    width: 17px;
    border-radius: 5px;
    margin: 0;
}

#serviceModal label {
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #071854;
    line-height: normal;
}

.thanks-subhead-33 { margin-top: 8px !important; }
.sub-heading-33,
#thankYouModal .thanks-subhead-33 {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #0C2D52;
    line-height: 19.2px;
}
.plumber-span-33 {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    color: #2046CB;
}

.contact-section::after { top: 0; }

.modal-body:after {
    content: "";
    position: absolute;
    background: url('/WpWeb/images/bg-modal.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 116.77px;
    width: 100%;
    top: -47px;
    right: 0;
    left: 0;
    z-index: -1;
    border-radius: 1.3rem !important;
}

.check { display: none; }
.modal.show .modal-dialog { margin-top: 6%; }

.modal-header {
    height: 50px;
    position: relative;
    border-top-right-radius: 1.3rem !important;
    border-top-left-radius: 1.3rem !important;
    background: darkblue;
    border-bottom: none !important;
    color: white !important;
}

button.close-btn-33 {
    border-radius: 50%;
    border: 3px solid #2046cb;
    background: white;
    position: absolute;
    margin: 0 !important;
    padding: 0px !important;
    /* Figma: 42px circle, sitting on the blue/white seam (blue header = 52px) */
    height: 42px;
    width: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 24px;
    top: 31px;
    z-index: 5;
    font-size: 25px;
}
button.close-btn-33 .cross-img { width: 16px; }

.modal-content {
    background-color: darkblue !important;
    border-radius: 1.3rem !important;
}
.modal-body {
    padding: 40px;
    background: white !important;
    border-radius: 1.3rem !important;
}

/* Search Container */
.search-container {
    display: flex;
    width: 100%;
    max-width: 360px;
    margin: 0 15px;
    flex-shrink: 1;
    position: relative;
    border-radius: 50px;
    box-shadow: 0px 4.882px 17.9px 0px rgba(0, 0, 0, 0.10);
}
.search-container label { width: 100%; margin: 0; cursor: pointer; }
.search-bar::placeholder { color: #A6C5E2 !important; }
.search-bar {
    height: 50px;
    width: 100%;
    border-radius: 50px;
    border: none;
    padding: 10px 130px 10px 130px;
    box-shadow: 0px 0px 0px 1px #2047ca30;
    transition: all ease 0.5s;
    font-size: unset !important;
    color: #3c3c3c;
}

header .navbar .navbar-collapse .navbar-nav li {
    margin-right: 22px;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .search-container {
        max-width: 270px;
        margin: 0 8px;
        flex-shrink: 1;
    }
    .post-fixed-txt {
        display: none;
    }
    .search-bar {
        padding: 10px 95px 10px 45px;
    }
    .searchbutton {
        padding: 5px 12px;
        width: 85px;
        font-size: 14px;
    }
    header .navbar .navbar-collapse .navbar-nav li {
        margin-right: 12px;
    }
    header .navbar .navbar-collapse .navbar-nav li a {
        font-size: 15px;
    }
}
#search-results {
    position: absolute;
    background: white;
    width: 100%;
    top: 60px;
    max-height: 200px;
    overflow-y: auto;
    scroll-behavior: smooth;
    box-shadow: 0px 3px 16px -5px #000;
    border-radius: 12px;
    padding: 20px;
}
.service-item { padding: 10px; margin-bottom: 5px; background: #d3d3d35c; border-radius: 8px; }
.service-item.selected { background: blue; color: white; }
.post-fixed-txt { font-weight: 500; color: #0C2D52; }
.search-bar::placeholder {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #999;
}
.search-bar:focus-visible {
    outline: none;
    box-shadow: 0px 0px 0px 5px #2047ca30;
    transition: all ease 0.5s;
}
.search-icon-box img { width: 100%; }
.icn-box { width: 20px; }
.search-icon-box {
    position: absolute;
    left: 20px;
    top: 5px;
    bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.buttonbox { position: absolute; right: 4px; top: 4px; bottom: 4px; }
.searchbutton {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background-color: #2047ca;
    height: 100%;
    padding: 5px 25px;
    color: white;
    border-radius: 50px;
    border: none;
    width: 121.245px;
}
#section-1 { height: 100vh; display: flex; justify-content: center; align-items: center; }

/* FAQ */
.faq-section .row .faq-box .collapse-box .card-body ul {
    padding: 10px 0px;
    padding-left: 30px;
    list-style-type: disc;
}
.faq-section .row .faq-box .collapse-box .card-body ul li { margin-bottom: 5px; }
.faq-section .row .faq-box .collapse-box .card-body ul li:last-child { margin-bottom: 0px; }
.button { min-width: 170px; text-align: center; }
.contact-form .button-wrapper { flex-direction: row-reverse; }

/* Blog */
.single-post-section ul { list-style: disc; margin: auto; padding-left: 30px; }
.single-post-section a { color: #152d82; }

/* Pagination */
.navigation { text-align: center !important; }
.navigation li { display: inline; }
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration: none;
    background-color: #2046CB;
    border-radius: 3px;
    cursor: pointer;
    padding: 0.75rem;
}
.navigation li a:hover,
.navigation li.active a { background-color: #00B7FF; }

/* Responsive */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .search-container { order: 2; margin: 10px auto; max-width: 320px; }
    .navbar-toggler { order: 3; }
    .modal.show .modal-dialog { margin-top: 4%; }
}
@media screen and (max-width: 768px) {
    .search-container { order: 3; margin-top: 12px; }
    .navbar-toggler { order: 2; }
    .banner-section { padding: 150px 0px; }
    .modal.show .modal-dialog {
        margin: 15px auto !important;
        width: 94% !important;
        max-width: 500px !important;
    }
    .modal-body, .modal-body.pad-40 {
        padding: 24px 16px !important;
    }
    .modal-inner-title-33 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    .sub-heading-33 {
        font-size: 13px !important;
        margin-bottom: 15px !important;
    }
    button.close-btn-33 {
        right: 16px !important;
        top: 33px !important;
        width: 38px !important;
        height: 38px !important;
    }
    button.close-btn-33 .cross-img {
        width: 14px !important;
    }
    .nw-overlay {
        padding: 20px 12px !important;
    }
    .nw-body {
        padding: 20px 16px 28px !important;
    }
    .nw-svc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .nw-modal .nw-search {
        height: 48px !important;
        margin-top: 14px !important;
    }
}
@media screen and (min-width: 320px) and (max-width: 425px) {
    .search-bar:placeholder { font-size: 14px; }
    .post-fixed-txt { font-size: 14px; }
    .search-bar { padding: 5px 80px 5px 110.18px; height: 45px; font-size: 14px !important; }
    .searchbutton { padding: 5px 15px; width: unset; font-size: 14px; }
    .icn-box { width: 18px; }
    .search-icon-box { left: 15px; }
}