/*

[Custom Stylesheet]

Project: David Support Website
Company: David Support

*/

/*------------------------------------*\
    SECTION SPACING REDUCTION
    Theme default 100px is too much for a single-page layout
\*------------------------------------*/
.pd--100-0 {
    padding: 70px 0;
}
.pd--100-0-40 {
    padding: 70px 0 30px;
}
.pd--80-0 {
    padding: 60px 0;
}

/*------------------------------------*\
    STICKY HEADER TOP BAR
\*------------------------------------*/
.header--section {
    /* No longer sticky, only nav bar is sticky */
}

.header--navbar {
    /* Sticky handled by JS, not CSS */
}

.banner--section {
    margin-top: 0;
}

/*------------------------------------*\
    FORM VALIDATION ERRORS
\*------------------------------------*/
.field-error-msg {
    display: block;
    color: #119ee6;
    font-size: 12px;
    margin-top: 4px;
}

/*------------------------------------*\
    RECAPTCHA BADGE
    Badge hidden; the required Google notice is shown under each form (.recaptcha-note)
\*------------------------------------*/
.grecaptcha-badge {
    visibility: hidden;
}

.recaptcha-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8a8f98;
}

.recaptcha-note a {
    color: inherit;
    text-decoration: underline;
}

.recaptcha-note a:hover {
    color: #119ee6;
}

/*------------------------------------*\
    FEATURE ICON STYLE (FA icons - Why Choose Us + About sections)
\*------------------------------------*/
.feature--item .icon i,
.appointment--item .icon i {
    font-size: 42px;
    color: #119ee6;
    display: block;
    margin-bottom: 8px;
}

/*------------------------------------*\
    FOOTER OVERRIDES
\*------------------------------------*/
.footer--about .info .nav > li > span {
    color: #fff;
}

/*------------------------------------*\
    COLOR-10 ICON IMAGE OVERRIDES
    Convert theme icon images from orange to color-10 blue (#119ee6)
\*------------------------------------*/

/* Appointment step icons */
.appointment--item .icon img,

/* Feature/why-choose-us icons */
.feature--item .icon img,

/* Counter section icons */
.counter--item .icon img,

/* Pricing package icons */
.pricing--icon img,

/* Extra service icons */
.extra-service--item .icon img {
    -webkit-filter: hue-rotate(175deg) saturate(1.2);
            filter: hue-rotate(175deg) saturate(1.2);
}


/*------------------------------------*\
    TESTIMONIAL VERIFIED BADGE
\*------------------------------------*/
.verified-badge {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    padding: 4px 10px;
    text-transform: uppercase;
}

.verified-badge i {
    margin-right: 5px;
    color: #119ee6;
}

/*------------------------------------*\
    TESTIMONIAL SECTION BACKGROUND TRANSITION + OVERLAY
\*------------------------------------*/
.testimonial--section.bg--img {
    -webkit-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
}

.testimonial--section.bg--overlay:before {
    opacity: 0.78;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=78)";
}

/*------------------------------------*\
    404 PAGE — FULL SCREEN DARK TECH OVERLAY
\*------------------------------------*/
.f0f--section {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.f0f--section.bg--overlay:before {
    background-color: #000;
    opacity: 0.55;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
}

.f0f--section.bg--overlay,
.f0f--section.bg--overlay .title,
.f0f--section.bg--overlay .sub-title {
    color: #fff;
}

.f0f--section.bg--overlay .title {
    margin: 40px 0 20px;
}

/*------------------------------------*\
    MOBILE NAV TOGGLE COLOR-10 OVERRIDE
\*------------------------------------*/
@media (max-width: 767px) {
    .header--navbar .navbar-toggle {
        background-color: #119ee6;
        border-color: #119ee6;
    }
}

/*------------------------------------*\
    MENU: FULL BORDER ON THE HIGHLIGHTED ITEM
\*------------------------------------*/
/* Every item after the first has no left border (wide screens) or no top border (stacked menu) because it shares
   the neighbour's. The highlighted item uses the blue border, so it needs its own on that side, drawn over the
   neighbour's; the negative margin keeps every item exactly where it was. */
@media (min-width: 992px) {
    .header--nav-links > li + li.active > a,
    .header--nav-links > li + li > a:hover {
        position: relative;
        border-left-width: 1px;
        margin-left: -1px;
    }
}

@media (max-width: 991px) {
    .header--nav-links > li + li.active > a,
    .header--nav-links > li + li > a:hover {
        position: relative;
        border-top-width: 1px;
        margin-top: -1px;
    }
}

/*------------------------------------*\
    OFFER, PRICING, FAQ AND MOBILE CALL BAR
\*------------------------------------*/
.banner-offer {
    margin: 16px 0 22px;
    color: #fff;
    font-size: 18px;
}

.banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.banner-actions .btn {
    margin: 0;
}

.offer-strip {
    background: #119ee6;
    color: #fff;
    padding: 14px 0;
}

.offer-strip .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 36px;
}

.offer-strip li {
    font-size: 16px;
    white-space: nowrap;
}

.offer-strip i {
    margin-right: 6px;
}

.offer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 28px 0 8px;
}

.offer-card {
    flex: 1 1 220px;
    padding: 26px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid #e3e7ec;
    border-radius: 6px;
}

.offer-card.featured {
    border-color: #119ee6;
    box-shadow: 0 6px 22px rgba(17, 158, 230, .18);
}

.offer-card i {
    display: block;
    margin-bottom: 10px;
    font-size: 34px;
    color: #119ee6;
}

.offer-card h3 {
    margin: 0 0 8px;
    font-size: 22px;
}

.offer-card p {
    margin: 0;
}

.offer-actions {
    margin: 22px 0 8px;
}

.offer-actions .btn {
    margin: 4px 6px 4px 0;
}

.text-center.offer-actions .btn {
    margin: 4px 5px;
}

.service--links {
    margin-top: 44px;
    font-size: 15px;
    text-align: center;
}

.service--links .link-label {
    margin: 16px 0 4px;
    font-weight: 600;
}

.service--links .link-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service--links .link-list li + li::before {
    content: "\00b7";
    margin: 0 10px;
    color: #999;
}

.faq-list details {
    padding: 4px 0;
    border-bottom: 1px solid #dde2e8;
}

.faq-list summary {
    position: relative;
    padding: 14px 34px 14px 0;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 10px;
    font-size: 26px;
    font-weight: 400;
    color: #119ee6;
}

.faq-list details[open] summary::after {
    content: "\2212";
}

.faq-list details p {
    margin: 0 0 14px;
}

.page-content .lead {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.6;
}

.page-content h2 {
    margin: 38px 0 14px;
}

.page-content ul,
.page-content ol {
    margin: 0 0 14px 20px;
    padding-left: 10px;
}

.page-content ul {
    list-style: disc;
}

.page-content li {
    margin-bottom: 6px;
}

.page-content .post-date {
    margin-bottom: 14px;
}

.mobile-cta {
    display: none;
}

@media (max-width: 767px) {
    .mobile-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
    }

    .mobile-cta a {
        flex: 1;
        padding: 14px 4px;
        text-align: center;
        font-weight: 600;
        color: #119ee6;
    }

    .mobile-cta a.primary {
        background: #119ee6;
        color: #fff;
    }

    body {
        padding-bottom: 52px;
    }

    .back-to-top-btn {
        bottom: 70px;
    }

    .offer-strip li {
        white-space: normal;
    }

}

.page-content p,
.page-content li {
    font-size: 16px;
    line-height: 1.7;
}

.takeaways,
.author-box {
    margin: 24px 0;
    padding: 20px 24px;
    background: #f3f9fd;
    border-left: 4px solid #119ee6;
    border-radius: 4px;
}

.takeaways h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.takeaways ul {
    margin-bottom: 0;
}

.author-box p {
    margin: 0;
}

.toc {
    margin: 24px 0;
    padding: 18px 24px;
    border: 1px solid #e3e7ec;
    border-radius: 4px;
}

.toc ol {
    margin: 10px 0 0 20px;
    padding-left: 6px;
    list-style: none;
}

.toc li {
    margin-bottom: 4px;
}

.related-posts {
    margin-top: 44px;
}

.related-posts li {
    margin-bottom: 14px;
}

.post-card {
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e3e7ec;
}

.post-card h2 {
    margin: 0 0 6px;
    font-size: 26px;
}

.post-card p {
    margin-bottom: 8px;
}

.page-content h2[id] {
    scroll-margin-top: 90px;
}

.recent-posts--widget .all-posts {
    margin-top: 14px;
    font-weight: 600;
}

/*------------------------------------*    MOBILE POLISH (phones)
\*------------------------------------*/
@media (max-width: 767px) {
    /* Header: the logo, address, hours and button took half the first screen. The call bar and menu replace them. */
    .header--navbar-top {
        display: none;
    }

    .header--navbar {
        margin-bottom: 0;
        border-bottom: 1px solid #e3e7ec;
    }

    .header--navbar .navbar-header {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        float: none;
        width: 100%;
        margin: 0;
    }

    .header--navbar .navbar-header::before,
    .header--navbar .navbar-header::after {
        display: none;
    }

    .header--navbar .navbar-toggle {
        margin: 8px 0;
    }

    .header--navbar .navbar-brand {
        display: block !important;
        height: auto;
        padding: 8px 0;
    }

    /* Spacing: sections were 70px top and bottom, which makes a phone page very long. */
    .pd--100-0 {
        padding: 44px 0;
    }

    .pd--100-0-40 {
        padding: 44px 0 24px;
    }

    /* The hero form's margin is set by script and needs this top padding to stay inside the hero. */
    .pd--80-0 {
        padding: 60px 0 24px;
    }

    .page--title.pd--130-0 {
        padding: 56px 0;
    }

    .page--title h1 {
        font-size: 30px;
        line-height: 1.25;
    }

    .section--title h2,
    .section--title .h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .section--title {
        margin-bottom: 28px;
    }

    /* Hero */
    .banner--content {
        padding-top: 44px;
        padding-bottom: 24px;
        font-size: 15px;
        line-height: 24px;
    }

    .banner--content h1 {
        font-size: 32px;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    .banner-offer {
        margin: 12px 0 16px;
        font-size: 16px;
    }

    .banner-actions .btn {
        flex: 1 1 100%;
        text-align: center;
    }

    /* Offer strip: a tidy 2 x 2 grid */
    .offer-strip {
        padding: 12px 0;
    }

    .offer-strip .nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 6px;
    }

    .offer-strip li {
        font-size: 14px;
    }

    /* Why Choose Us: icon beside text instead of a tall centered stack */
    .feature--item {
        display: grid;
        grid-template-columns: 52px 1fr;
        column-gap: 14px;
        margin-bottom: 22px;
        text-align: left;
    }

    .feature--item .icon {
        grid-row: 1 / span 2;
        margin: 0;
        padding: 0;
    }

    .feature--item .icon::before {
        display: none;
    }

    .feature--item .icon i {
        margin: 0;
        font-size: 34px;
    }

    .feature--item .title .h4 {
        margin: 0 0 4px;
        font-size: 18px;
    }

    .feature--item .content p {
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
    }

    /* Pricing, buttons and links */
    .offer-card {
        flex-basis: 100%;
        padding: 20px 18px;
    }

    .offer-actions .btn,
    .text-center.offer-actions .btn {
        display: block;
        margin: 10px 0;
        text-align: center;
    }

    .service--links {
        margin-top: 28px;
    }

    .service--links .link-list {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .service--links .link-list li {
        width: 100%;
        padding: 9px 0;
        border-bottom: 1px solid #e3e7ec;
    }

    .service--links .link-list li + li::before {
        display: none;
    }

    .service--links .link-label,
    .service--links {
        text-align: left;
    }

    .faq-list summary {
        font-size: 16px;
    }

    .page-content .lead {
        font-size: 18px;
    }

    .takeaways,
    .author-box,
    .toc {
        padding: 16px 18px;
    }

    .back-to-top-btn {
        right: 14px;
        bottom: 66px;
    }

    .page--breadcrumb .breadcrumb li {
        display: inline;
        font-size: 13px;
    }
}

/* The theme's .nav clearfix pseudo-elements would otherwise take a cell in these flex/grid lists. */
.offer-strip .nav::before,
.offer-strip .nav::after {
    display: none;
}

@media (max-width: 767px) {
    /* iPhone: stay clear of the home indicator, and stop Safari zooming into fields smaller than 16px */
    body {
        padding-bottom: calc(52px + env(safe-area-inset-bottom));
    }

    .mobile-cta {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .back-to-top-btn {
        bottom: calc(66px + env(safe-area-inset-bottom));
    }

    input,
    select,
    textarea,
    .form-control {
        font-size: 16px;
    }

    /* The service timeline dots look like radio buttons without the desktop timeline */
    .service--item .dot {
        display: none;
    }

    .service--items .service--item,
    .service--items.text-right .service--item {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left;
    }
}

/* The testimonial overlay is drawn above its section by the section's padding; keep it in step with our shorter padding
   so it does not cover the About text, and leave no dark strip under it. */
@media (max-width: 991px) {
    .testimonial--slider-wrapper:before {
        top: -70px;
    }

    .testimonial--section.pd--100-0 {
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .testimonial--slider-wrapper:before {
        top: -44px;
    }

    .testimonial--slider-wrapper {
        padding-bottom: 44px;
    }
}