/* Your custom styles below */

* {
    box-sizing: border-box;
}

#headerColor {
    width:100%;
    margin:0;
}

#headerColor, #headerColor .navbar {
   background: black !important;    
}

.navbar-toggler {
    background-color: white; 
} 

.nav-link, .menu-item a {
    color:white;
    text-decoration: none;
    text-transform: uppercase;
}

.dropdown-menu .nav-item:last-child, .sub-menu .menu-item:last-child  {
    border-bottom: none;
}

a.nav-link:hover, .menu-item a:hover {
    color:rgb(209, 36, 243);
    background: none;
}

.navbar-nav .nav-link.show {
    color: white;
}

.nav-link:focus {
    color: white;
}

a.nav-link.active, .current-menu-item a {
    color:#c333fc !important;
}

a.nav-link.active:hover, .current-menu-item a:hover {
    color:#9e10d6 !important;
}

#navbarNav {
    margin-top: 15px;
}

#navbarNav li {
    font-size: 16px;
    padding-bottom: 15px;
}

.menu-item {
    font-size: 16px;
    padding-bottom: 25px !important;
}


.dropdown, .menu-item-has-children {
    position: relative;
    z-index: 1;
}

.menu-item-has-children::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;
    color: white;
}


.dropdown .dropdown-menu, .sub-menu {
    left: 40px;
    position: relative;
    background: #000000;
    list-style: none;
    width: 250px;
    padding: 15px 0;
    
   /* transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s; */ /* Smooth transition for all properties */ 
}

.sub-menu {
    display: none;
}


.menu-item-has-children:hover .sub-menu {
    display: block;
}


.dropdown-menu .nav-item, .sub-menu .menu-item {
    border-bottom: solid gray 2px;
    padding: 15px 0;
}


.dropdown-item {
    padding:8px;
    white-space: initial;
}

.dropdown-menu .nav-item a.active, .sub-menu .current-menu-item a {
    background: #202225;
}



/* === Hero, hero image ===*/

.hero-img-tablet, .hero-img-desktop, .hero-img-large {
    display: none;
}



.hero-container,
.hero-container img,
.text-hero {
    display: none;
}


.hero-container-for-style-and-style3-992px {
    width:100%;
    max-width: 100% !important;
    position: relative; 
    background: #000;
    padding:0px;
    margin:0 auto;
}

.text-hero-for-style-and-style3 {
    width: 100%;
    min-height: 100%;
    top:0;
    position:absolute;
    text-align: left;
    padding:0;
    color:white;
    background-image: linear-gradient(100deg, rgba(0, 0, 0, 1) 15%, rgba(22, 24, 32, 0.6) 60%, rgba(15, 16, 20, 0.87) 75%, rgba(0, 0, 0, 1) 100%) !important;
}

.text-hero-for-style-and-style3 h1 {
    color:white !important;
    font-weight: bold;
    width: 55%;
    font-size: 26px;;
    margin:0;
    padding:10% 0 10px 30px;
    line-height: 1.2;
}

.text-hero-for-style-and-style3 h2 {
    width: 55%;
    padding:0 0 0px 30px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.text-hero-for-style-and-style3 .line-divider {
    position:relative;
    left: 30px;
    width: 130px;
    margin-bottom: 10px;
    border-bottom: #9f11d7 2px solid;
}


.badges {
    position: absolute;
    left: 8%;
    bottom: 2%;
}

.award, .licensed {
    width: 15%;  
}


.first-button-container {
    padding: 25px;
    background-color: black;
   /* position:absolute; */
    top:500px;
    width:100%;
    margin:0;
    z-index:6;
}

.second-button-container {
    background-color:black;
    padding:40px 20px;

}

.first-button-container h3,
.second-button-container h3 {
    color: #be0be5;
    padding-bottom: 20px;
}


.cta-btn a p {
    color:white;
    padding: 10px;
    font-size: 26px;
    border: 2px solid rgb(208, 188, 188);
    width: 270px;
    margin: auto;
    background-color: #8a05bf;
    border-radius: 50px;
    box-shadow: 2px 2px 10px rgb(157, 145, 145);
}

.cta-btn a p:hover {

    background-color: rgb(156, 20, 198);
}

.cta-btn a {
    text-decoration: none; 
}

.section-1, .section-3 {
    border-bottom: 2px solid black;
}


.section-1, .section-2, .section-3, .section-4, .section-5 {
    background-color: #131415 !important;
    color:rgb(238, 234, 234);
}

.service-cards {
    margin-top: 30px;
}

.service-card {
    margin-bottom: 30px;
}

.service-cards .col-md-6 {
    margin-bottom: 1.5rem;
}

.section-1 a, .section-2 a, .section-3 a, .section-4 a, .section-5 a {
    color:#cf3def;
}


.section-5 {
    background-color: black !important;
}

.nearme {
    background-color: black;
    color:rgb(238, 234, 234);
}


.about-video-section {
    width: 80%;
    padding: 30px 10px;
}

.section-padding {
    padding-top:60px;
    padding-bottom:60px;
    padding-left:30px;
    padding-right:30px;
}


.section-padding h2 {
    padding-bottom:20px;
    font-size: 28px;
    line-height: 1.5;

}

.section-padding h3 {
    font-size: 22px;
    padding-bottom:20px;
    line-height: 1.5;

}

.section-padding p, .ul-second-section li {
    font-size: 19px;
    line-height: 1.6;

}

.section-padding p:last-child {
    margin-bottom: 0;

}

.text-two-images-section .col-lg-10 h2 {
    padding-top: 60px;
}

.img-1-div, .img-2-div {
    position: relative;
    z-index: 4;
    padding:15px !important;
    
    
}

.img-1-div img, .img-2-div  img {
    border: 2px solid black;
}


.row-first-section-2-img, .row-second-section-2-img {
    position: relative;
    overflow: hidden;
    z-index: 20;
    padding:0px;
    box-shadow: 4px 4px 10px rgb(177, 27, 218);
}

.row-first-section-2-img::before, .row-second-section-2-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2; /* sits above the images */
    pointer-events: none;
  
    /* Linear dark overlay: black -> transparent -> dark gray */
    background-image: linear-gradient(100deg, rgba(0, 0, 0, 0.96) 5%, rgba(0, 0, 0, 0.85) 10%, rgba(22, 24, 32, 0.3) 60%, rgba(15, 16, 20, 0.85) 75%, rgba(0, 0, 0, 0.88) 90%, rgba(0,0,0,1) 100%) !important;
}

  .row-first-section-2-img .img-1-div,
  .row-first-section-2-img .img-2-div,
  .row-second-section-2-img .img-1-div,
  .row-second-section-2-img .img-2-div {
    position: relative;
    z-index: 1;
  }

  .col-md-5 {
    text-align: center;
  }

  .col-md-5 img {
    box-shadow: 4px 4px 10px rgb(177, 27, 218);
    border-radius: 10px;
   
}


.google-map iframe {
    width: 100%;
    
}

.btn-container-2 {
    padding-top:50px;
    padding-bottom:50px;
}

.div-text-padding-bottom, .image-padding-bottom {
    padding-bottom:60px;
}

.section-padding a {
    text-decoration: none;
}

.nap-map-section{
    background: #080808;
    color:white;
}

.nap p{
    font-size: 20px;
    padding-bottom:10px;
}

a svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    transition: fill 0.3s ease;
}
  
a:hover svg {
    fill: #0d6efd; /* Change to brand color or theme */
}
  

footer a {
    text-decoration: none;
    font-size: 18px;
    color:darkblue;
}


/* ==========================================================================
   Contact form
   --------------------------------------------------------------------------
   Fields, validation and the submit button, matched to this theme.

   Colours come from what the theme already uses:
     #8a05bf / rgb(156,20,198)   .cta-btn a p  and its hover
     rgb(208,188,188)            .cta-btn a p  border
     #cf3def                     .section-N a
     rgb(177,27,218)             the glow under .row-first-section-2-img
     rgb(238,234,234)            .section-N body text
   ========================================================================== */

.form-container {
    overflow: hidden;
    width: 100%;
    background-color: #131415 !important;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* DIRECT CHILD, not any descendant.
   `.form-container div` also matched every .form-group inside the form, so
   the field groups were rendering at 90% width and centred rather than full
   width — and anything painting a background here painted it behind every
   field as well. */
.form-container > div {
    width: 90%;
    margin: auto;
    border-radius: 16px;
}

/* --------------------------------------------------------------------------
   Kill the light panel
   --------------------------------------------------------------------------
   Something OUTSIDE this file paints the form's wrapper near-white — a
   contact-page stylesheet, or an inline style on the div. It is not in
   style3.css: the border-radius above lands, the background does not, which
   means the other declaration is winning on specificity or is inline.

   !important is the only thing that beats both from here, and it is the
   correct tool for exactly this — an author rule reaching past a stylesheet
   it does not control. It loses only to another !important; if the panel is
   still grey after this, that is what is happening, and the rule needs
   removing at the source instead.

   The .form-group line matters too: if the outside rule is written
   `.form-container div` it matches every field group as well, which would
   leave grey blocks behind each input.
   -------------------------------------------------------------------------- */

.form-container > div,
.form-container .contact-form,
.contact-form .form-group {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.contact-form {
    padding: 50px;
    padding-bottom: 60px;
    max-width: 700px;
    margin: auto;
    background: transparent;

    --field-edge:    rgba(238, 234, 234, .30);
    --field-edge-hi: rgba(238, 234, 234, .60);
    --field-ink:     rgb(238, 234, 234);
    --field-hint:    rgba(238, 234, 234, .40);
    --field-label:   rgba(238, 234, 234, .62);

    /* only used to repaint Chrome's autofill background — must be the
       section's real colour, never transparent (see the autofill block) */
    --field-solid:   #131415;

    --accent:        #cf3def;
    --accent-lit:    rgba(207, 61, 239, .85);

    /* semantic, deliberately not the accent hue */
    --ok:            #3fb984;
    --bad:           #ff5f5f;

    /* the site's primary action, taken from .cta-btn a p */
    --btn-bg:        #8a05bf;
    --btn-bg-hi:     rgb(156, 20, 198);
    --btn-edge:      rgb(208, 188, 188);
    --btn-glow:      rgba(177, 27, 218, .45);
}

.contact-form h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--field-ink);
    margin-bottom: 8px;
    text-align: center;
    padding: 0 0 10px;
}

.form-subtitle {
    color: rgba(238, 234, 234, .62);
    text-align: center;
    margin-bottom: 34px;
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Field groups
   -------------------------------------------------------------------------- */

.contact-form .form-group {
    width: 100%;
    margin: 0 0 20px;
    position: relative;
    background: transparent;
}

.contact-form .form-group:last-of-type { margin-bottom: 28px; }

/* Uppercase and letterspaced — the same treatment as .pricing-unit and the
   nav, so the form reads as part of the same site. */
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--field-label);
    transition: color .18s ease;
}

/* The label lights up with its own field. :focus-within on the group is what
   makes this possible without touching the markup — CSS cannot look backwards
   from an input to its label. */
.form-group:focus-within label { color: var(--accent); }

/* --------------------------------------------------------------------------
   The fields
   --------------------------------------------------------------------------
   Transparent, so they sit on the section colour, with a bottom line only.

   An underline only works as an affordance if it REACTS. The three things
   that make this readable where a bare underline is not:

     the line is visible    2px at 30% white, not 1px transparent
     the line reacts        dim -> 60% on hover -> accent on focus
     the text has a colour  #eeeaea, not inherited black on near-black

   Flush left, so the text starts level with its label. With no panel there is
   nothing for an inset to belong to.
   -------------------------------------------------------------------------- */

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;

    color: var(--field-ink);
    background-color: transparent;

    border: 0;
    border-bottom: 2px solid var(--field-edge);
    border-radius: 0;

    caret-color: var(--accent);
    resize: vertical;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--field-hint);
    opacity: 1;                 /* Firefox dims placeholders by default */
}

.form-group input:hover,
.form-group textarea:hover {
    border-bottom-color: var(--field-edge-hi);
}

/* Focus: the line takes the accent and throws a glow DOWNWARD only. A ring on
   all four sides would put the box back. */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: var(--accent);
    box-shadow: 0 5px 14px -6px var(--accent-lit);
}

.form-group textarea {
    height: 120px;
    min-height: 120px;
    margin-bottom: 0;           /* the group already provides the gap */
}

/* --------------------------------------------------------------------------
   Validation
   --------------------------------------------------------------------------
   :user-invalid, NOT :invalid:not(:placeholder-shown).

   The obvious guard is wrong on this form. :placeholder-shown only ever
   matches an element that HAS a placeholder attribute, and these inputs do
   not have one. So on an untouched, empty, required field:

       :placeholder-shown        false
       :not(:placeholder-shown)  TRUE
       :invalid                  true

   ...the whole selector matches the instant the page loads, and the visitor
   is greeted by a form with every line already flagged.

   :user-invalid is built for exactly this: the browser applies it only after
   the person has actually interacted with the field, whatever attributes it
   carries. The @supports fallback covers engines without it.
   -------------------------------------------------------------------------- */

@supports selector(:user-invalid) {

    .form-group input:user-invalid,
    .form-group textarea:user-invalid {
        border-bottom-color: var(--bad);
        box-shadow: 0 5px 14px -6px rgba(255, 95, 95, .8);
    }

    .form-group input:user-valid,
    .form-group textarea:user-valid {
        border-bottom-color: var(--ok);
    }
}

@supports not selector(:user-invalid) {

    .form-group input:invalid:not(:focus):not(:placeholder-shown),
    .form-group textarea:invalid:not(:focus):not(:placeholder-shown) {
        border-bottom-color: var(--bad);
        box-shadow: 0 5px 14px -6px rgba(255, 95, 95, .8);
    }

    .form-group input:valid:not(:focus):not(:placeholder-shown),
    .form-group textarea:valid:not(:focus):not(:placeholder-shown) {
        border-bottom-color: var(--ok);
    }
}

/* --------------------------------------------------------------------------
   Chrome autofill
   --------------------------------------------------------------------------
   Chrome repaints autofilled inputs with its own near-white background, so
   the moment it fills a name and email you get glaring white boxes in the
   middle of a black form. There is no property to turn it off — the inset
   shadow is the standard repaint, and the absurd transition delay stops
   Chrome animating back to white.

   --field-solid, not transparent: a transparent inset shadow paints nothing.
   -------------------------------------------------------------------------- */

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--field-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--field-solid) inset;
            box-shadow: 0 0 0 1000px var(--field-solid) inset;
    caret-color: var(--field-ink);
    transition: background-color 100000s ease-in-out 0s;
}

/* --------------------------------------------------------------------------
   Submit button
   --------------------------------------------------------------------------
   Not a new button — the SAME button as the phone CTA. Two different-looking
   primary actions on one page make a visitor stop and work out which is the
   real one.
   -------------------------------------------------------------------------- */

.submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 16px 24px;
    font-size: 1.15rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;

    color: #fff;
    background: var(--btn-bg);
    border: 2px solid var(--btn-edge);
    border-radius: 50px;                  /* the CTA pill */

    cursor: pointer;
    position: relative;
    overflow: hidden;                     /* keeps the sweep inside the pill */

    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* the shine sweep */
.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    transition: left .6s ease;
    pointer-events: none;
}

.submit-btn:hover::before { left: 100%; }

.submit-btn:hover {
    background: var(--btn-bg-hi);
    transform: translateY(-2px);
    /* the same glow this theme puts under .row-first-section-2-img */
    box-shadow: 0 8px 22px var(--btn-glow);
}

.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* Focus must be visible against BLACK. A translucent blue ring all but
   vanished on #131415, which left keyboard users with no visible focus. */
.submit-btn:focus-visible {
    outline: 2px solid #e879ff;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(207, 61, 239, .28);
}

.submit-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.submit-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    background: var(--btn-bg);
    box-shadow: none;
}

.submit-btn:disabled::before { display: none; }

.btn-text,
.btn-icon {
    position: relative;
    z-index: 1;                     /* above the sweep */
}

.btn-icon { transition: transform .25s ease; }

.submit-btn:hover .btn-icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .submit-btn,
    .submit-btn::before,
    .btn-icon,
    .form-group input,
    .form-group textarea,
    .form-group label { transition: none; }

    .submit-btn:hover { transform: none; }
    .submit-btn:hover::before { left: -100%; }
    .submit-btn:hover .btn-icon { transform: none; }
}



/* 400px */
@media (min-width: 400px) {

    .text-hero-for-style-and-style3 h1,
    .text-hero-for-style-and-style3 h2 {
       
       padding-left: 10%;
        
    }

    .text-hero-for-style-and-style3 .line-divider {
        left: 10%;
    }

    
}


  /* 550px */
@media (min-width: 550px) {

    .text-hero-for-style-and-style3 h1 {
        padding-top: 12%;
        font-size: 2rem;
        width: 60%;
    }

    .text-hero-for-style-and-style3 h2 {
        font-size: 1.75rem;
        width: 60%;
    }
    
}


/* 601 */
@media (min-width: 601px) {

    .hero-img-mobile{
        display: none;
    }

    .hero-img-tablet{
        display: block;
    }

    .text-hero-for-style-and-style3 h1 {
        padding-top: 12%;
       
    }

 
    .text-hero-for-style-and-style3 .line-divider {
        width: 200px;
    }
    
  }


/* 720 */
@media (min-width: 720px) {

    .hero-img-tablet {
        display: none;
    }

    .hero-img-desktop {
        display:block;
    }

    .btn-container{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
}

/* 766 */
@media (min-width: 766px) {

    .text-hero-for-style-and-style3 h1 {
        font-size: 2.5rem;
    }

    .text-hero-for-style-and-style3 h2 {
        font-size: 2rem;
    }
    

    .img-1-div {
        margin-bottom: auto;
    }

    .badges { 
        bottom: 7%;
    }

    .about-video-section {
        width: 60%;
        padding: 15px;
    }

    .form-container > div {
        width: 60%;
    }
    

}


/* Hover-to-open dropdowns on desktop */
@media (min-width: 992px) { /* matches .navbar-expand-lg breakpoint */

    .menu-item-has-children:hover .sub-menu {
      position: absolute;
    }

    #navbarNav {
      margin-top: 0;
    }

   
    #navbarNav li {
      margin-left: 15px;
      margin-right: 15px;
      padding-bottom: initial;
    }

    .menu-item {
      padding-bottom: initial !important;
    }
    
    .navbar .dropdown:hover > .dropdown-menu {
      display: block;
    }
    /* Keep tight alignment under the trigger */
    .navbar .dropdown-menu {
      margin-top: 0;
    }
    /* Optional: show active state on the trigger while hovering */
    .navbar .dropdown:hover > .nav-link {
      color:rgb(140, 21, 196);
    }
}
  


    /* 1250 */
@media (min-width: 1250px) {

    .nav-item.dropdown .dropdown-menu, .sub-menu {
        left: -50px !important;
    }

    .dropdown .dropdown-menu li, .sub-menu .menu-item  {
        width: 200px;
    }

    .dropdown .dropdown-menu li a, .sub-menu .menu-item a {
        white-space: normal;
    }

    .hero-img-desktop {
        display: none;
    }

    .hero-img-large {
        display: block;
        min-width: 100%;
        max-width: 100%;
    }


    .text-hero-for-style-and-style3 h1 {
        width: 60%;
        padding-top: 12%;
        font-size: 3.5rem;
    }

    .text-hero-for-style-and-style3 h2 {
        width: 60%;
        font-size: 3rem;
    }

    .text-hero-for-style-and-style3 .line-divider {
        width: 20%;
    }

    .first-button-container {
        background: transparent;
        position:absolute; 
        top:550px;
        z-index:5; 
    }

    .cta-btn a p {
        padding:20px;
    }

}

/* ==========================================================================
   FAQ accordion — black / purple theme
   --------------------------------------------------------------------------
   REPLACES the previous FAQ block in this one theme file.

   CSS only. Bootstrap's accordion markup is untouched — this works off the
   .collapsed class Bootstrap already toggles.

   WHY IT LOOKS DIFFERENT FROM THE OLD BLOCK

   The old one drew filled, rounded bars. That was a second visual language on
   a page whose pricing table is built from rules, and the two sections read as
   though they came from different sites. This uses the same four devices:

     the 100deg gradient hairline   identical to .pricing-table tbody tr
     the 130px purple divider       identical to .pricing-section h2::after
     the left rail on the answer    the pricing disclaimer's border-left
     the hover glow                 the same rgb(177,27,218) at text scale

   THE BUG IT ALSO FIXES

   The old values were rgba(0,0,0,.04) / .07 — a translucent BLACK tint. The
   comment said it "reads as a subtle shade of whatever background sits behind
   it", which is true on a light theme. This theme's sections are #131415, so
   4% black over near-black was invisible: the question bars had no background
   at all and the accordion looked unstyled. Nothing here depends on a tint.
   ========================================================================== */

   .faq-section {
    --faq-accent:  #cf3def;               /* open question, +/x icon */
    --faq-bright:  #e879ff;               /* hover */
    --faq-rule:    #9f11d7;               /* rails and dividers */
    --faq-glow:    rgba(177, 27, 218, .55);
    --faq-ink:     rgb(238, 234, 234);
    --faq-gap:     4px;

    /* Same reason as the pricing section: .faq-section is not in this theme's
       ".section-1, .section-2, ..." background rule, so without this it
       renders on the default page background. */
    background-color: #131415;
    color: var(--faq-ink);
}

/* The hero's .line-divider again — same 130px, same 2px, same colour. */
.faq-section h2 {
    position: relative;
    padding-bottom: 26px;
}

.faq-section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 130px;
    height: 2px;
    background: var(--faq-rule);
}

/* --------------------------------------------------------------------------
   Strip Bootstrap
   --------------------------------------------------------------------------
   Bootstrap 5 paints .accordion-item white and gives the open button a blue
   background and blue text from its own custom properties. All of it has to
   go, or it fights this theme on every state.
   -------------------------------------------------------------------------- */

.faq-section .accordion,
.faq-section .accordion-item {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: var(--faq-ink);
}

/* --------------------------------------------------------------------------
   The item rule
   --------------------------------------------------------------------------
   Byte for byte the gradient used on .pricing-table tbody tr — purple under
   the start of the question, fading to a neutral hairline. Drawn as a
   background-image because a border can only be one flat colour.
   -------------------------------------------------------------------------- */

.faq-section .accordion-item {
    margin-bottom: var(--faq-gap);
    background-image: linear-gradient(
        100deg,
        rgba(207, 61, 239, .70)   0%,
        rgba(207, 61, 239, .30)  24%,
        rgba(238, 234, 234, .11) 48%,
        rgba(238, 234, 234, .09) 100%
    );
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.faq-section .accordion-item:last-child {
    margin-bottom: 0;
    background-image: none;
}

/* --------------------------------------------------------------------------
   The question
   --------------------------------------------------------------------------
   Flush left, so questions line up with the h2 above them and with the
   service names in the pricing table. The icon moved to the RIGHT to make
   that possible — and it is where people expect an accordion control anyway.
   -------------------------------------------------------------------------- */

.faq-section .accordion-button {
    position: relative;
    background: transparent;
    color: var(--faq-ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    padding: 18px 42px 18px 0;      /* right room for the icon */
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    transition: color .18s ease;
}

.faq-section .accordion-button:hover { color: var(--faq-bright); }

/* Open: the question takes the accent, the way the active nav item does. */
.faq-section .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--faq-accent);
    box-shadow: none;
}

/* Keyboard focus stays visible without Bootstrap's heavy blue ring. */
.faq-section .accordion-button:focus {
    box-shadow: none;
    outline: 2px solid var(--faq-accent);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   The +/x icon
   -------------------------------------------------------------------------- */

/* Bootstrap draws a chevron as a background image on ::after. Remove it. */
.faq-section .accordion-button::after { display: none; }

.faq-section .accordion-button::before {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;

    /* a plus drawn from two gradients — no image, no font, no extra element */
    background:
        linear-gradient(var(--faq-accent), var(--faq-accent)) center / 100% 2px no-repeat,
        linear-gradient(var(--faq-accent), var(--faq-accent)) center / 2px 100% no-repeat;

    transition: transform .25s ease, filter .18s ease;
}

/* open: rotate the plus into a cross */
.faq-section .accordion-button:not(.collapsed)::before {
    transform: rotate(45deg);
}

/* the same glow this theme puts under its section images, at icon scale */
.faq-section .accordion-button:hover::before {
    filter: drop-shadow(0 0 6px var(--faq-glow));
}

/* --------------------------------------------------------------------------
   The answer
   --------------------------------------------------------------------------
   The left rail is the pricing disclaimer's border-left, reused. It ties the
   answer to the question above it and repeats a shape already on the page.
   -------------------------------------------------------------------------- */

.faq-section .accordion-body {
    background: transparent;
    padding: 2px 42px 22px 18px;
    border-left: 2px solid var(--faq-rule);
}

/* This theme sets .section-padding p to 19px, which is too heavy for an
   answer sitting in a half-width column. Two classes plus the element beats
   that rule — one class alone would not. */
.faq-section .accordion-body p {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(238, 234, 234, .78);
}

/* --------------------------------------------------------------------------
   Columns
   -------------------------------------------------------------------------- */

/* Below lg the two columns stack, so the first needs breathing room. */
@media (max-width: 991.98px) {
    .faq-section .col-lg-6:not(:last-child) {
        margin-bottom: var(--faq-gap);
    }

    /* Stacked, the last item of the FIRST column is no longer the last thing
       on screen — it needs its rule back or the two columns visibly join. */
    .faq-section .col-lg-6:not(:last-child) .accordion-item:last-child {
        background-image: linear-gradient(
            100deg,
            rgba(207, 61, 239, .70)   0%,
            rgba(207, 61, 239, .30)  24%,
            rgba(238, 234, 234, .11) 48%,
            rgba(238, 234, 234, .09) 100%
        );
        background-size: 100% 1px;
        background-position: 0 100%;
        background-repeat: no-repeat;
    }
}

@media (max-width: 575.98px) {
    .faq-section .accordion-button {
        font-size: 16px;
        padding-right: 34px;
    }

    .faq-section .accordion-body { padding-right: 0; }
}
/* ==========================================================================
   Pricing table — black / purple theme
   --------------------------------------------------------------------------
   REPLACES the previous pricing block in this one theme file.

   CSS only. Same markup the builder already emits — no new elements, no
   inline styles, no JS. Everything here is borders, backgrounds, spacing and
   two pseudo-elements.

   Colours are taken from what this theme already uses rather than invented:

     #9f11d7   the hero .line-divider rule
     #cf3def   .section-N a  (body links)
     #c333fc   a.nav-link.active
     rgb(177,27,218)  the glow under .row-first-section-2-img
     #131415   .section-1 ... .section-4 background
     rgb(238,234,234) .section-N body text

   To port to another theme, change the five variables at the top and nothing
   else.
   ========================================================================== */

   .pricing-section {
    --price-accent:  #cf3def;              /* the figures */
    --price-bright:  #e879ff;              /* hover */
    --price-rule:    #9f11d7;              /* divider, matches .line-divider */
    --price-glow:    rgba(177, 27, 218, .55);
    --price-ink:     rgb(238, 234, 234);

    /* .pricing-section is NOT in this theme's
       ".section-1, .section-2, ..." background rule, so without this line the
       section renders on the default page background — a white band in the
       middle of a black site. Set explicitly rather than relying on that list
       being updated. */
    background-color: #131415;
    color: var(--price-ink);
}

/* Echoes the hero's .line-divider — same 130px, same 2px, same colour — so
   the section reads as part of this theme rather than bolted on. */
.pricing-section h2 {
    position: relative;
    padding-bottom: 26px;
}

.pricing-section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 130px;
    height: 2px;
    background: var(--price-rule);
}

/* --------------------------------------------------------------------------
   The table
   --------------------------------------------------------------------------
   border-collapse: separate, not collapse. Collapsed borders swallow row
   backgrounds and box-shadows, and the hover state below needs both.
   -------------------------------------------------------------------------- */

.pricing-table {
    width: 100%;
    margin: 30px 0 0;
    border-collapse: separate;
    border-spacing: 0;
}

.pricing-table thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;          /* matches the nav */
    color: var(--price-accent);
    padding: 0 16px 12px;
    border-bottom: 2px solid var(--price-rule);
}

.pricing-table thead th:first-child { padding-left: 0; }

.pricing-table thead th:last-child {
    text-align: right;
    padding-right: 0;
}

/* --------------------------------------------------------------------------
   Row rules
   --------------------------------------------------------------------------
   Drawn as a background-image, not a border. A border would be one flat
   colour; this is a 100deg gradient — the same angle as the hero overlay and
   the image overlays — so the rule is purple under the service name and fades
   to a neutral hairline under the price. It ties the row to the theme without
   putting a coloured line across the whole table.

   The old version striped rows AND ruled them. That is two dividers doing one
   job, and it made the table read as a solid slab. The fills are gone.
   -------------------------------------------------------------------------- */

.pricing-table tbody tr {
    background-image: linear-gradient(
        100deg,
        rgba(207, 61, 239, .70)   0%,
        rgba(207, 61, 239, .30)  24%,
        rgba(238, 234, 234, .11) 48%,
        rgba(238, 234, 234, .09) 100%
    );
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-color .18s ease;
}

.pricing-table tbody tr:last-child { background-image: none; }

.pricing-table tbody th,
.pricing-table tbody td {
    padding: 20px 16px;
    vertical-align: baseline;
    border: 0;
}

.pricing-table tbody th:first-child { padding-left: 0; }
.pricing-table tbody td:last-child { padding-right: 0; }

/* Hover: a faint wash, and the figure lights up.
   The text-shadow is the same glow this theme puts under its section images
   (box-shadow: 4px 4px 10px rgb(177,27,218)), reused at text scale. */
.pricing-table tbody tr:hover { background-color: rgba(207, 61, 239, .07); }

.pricing-table tbody tr:hover .pricing-amount {
    color: var(--price-bright);
    text-shadow: 0 0 14px var(--price-glow);
}

/* --------------------------------------------------------------------------
   Cells
   -------------------------------------------------------------------------- */

.pricing-service {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
    text-align: left;
    color: var(--price-ink);
}

.pricing-note {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(238, 234, 234, .55);
    margin-top: 5px;
}

.pricing-range {
    text-align: right;
    white-space: nowrap;
}

.pricing-amount {
    display: block;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--price-accent);
    /* the figures form a column, so the digits must share a width */
    font-variant-numeric: tabular-nums;
    transition: color .18s ease, text-shadow .18s ease;
}

.pricing-unit {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(238, 234, 234, .45);
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   The estimate notice
   --------------------------------------------------------------------------
   NOTE THE SELECTOR. `.pricing-disclaimer` alone loses to this theme's
   `.section-padding p` rule — same class count, but that one also names an
   element, so it is more specific and the notice has been rendering at 19px
   rather than the 14px the old block asked for. Two classes wins it back.
   -------------------------------------------------------------------------- */

.pricing-section .pricing-disclaimer {
    margin-top: 28px;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(238, 234, 234, .72);
    background: rgba(0, 0, 0, .45);
    border-left: 3px solid var(--price-rule);
}

.pricing-section .pricing-disclaimer strong {
    color: var(--price-accent);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------
   Each row stacks so the figure sits under the service rather than being
   squeezed against it. The row rule stays, and moves to the bottom of the
   stacked block.
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .pricing-table thead {
        /* clipped, not display:none — the column headers stay in the
           accessibility tree for screen readers even though nothing shows */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .pricing-table,
    .pricing-table tbody,
    .pricing-table tbody tr,
    .pricing-table tbody th,
    .pricing-table tbody td {
        display: block;
        width: 100%;
    }

    .pricing-table tbody tr { padding: 16px 0; }

    .pricing-table tbody th,
    .pricing-table tbody td { padding: 0; }

    .pricing-range {
        text-align: left;
        margin-top: 10px;
    }

    .pricing-amount,
    .pricing-unit { display: inline-block; }

    .pricing-unit { margin-left: 10px; }
}

/* ==========================================================================
   Reviews — "What Customers Are Saying"
   --------------------------------------------------------------------------
   Appended to every theme: style.css ... style6.css

   Inherits rather than hardcoding, the same way the pricing table does, so one
   snippet suits all six themes:
     - text uses the theme's body colour
     - the card tint is a translucent black, reading as a shade of whatever
       background sits behind it
     - the stars are the ONE hard-coded colour. Everything else inherits,
       but a star only reads as a rating when it is amber; in the body text
       colour it reads as an icon. #f5a623 holds its contrast on a white
       card and on a navy one, which plain yellow does not.

   To tune one theme:
     .reviews-section { --review-star: #e8b004; }

   THE NOTE ABOVE THE CARDS IS NOT DECORATION. It says the reviews are a sample
   and have to be replaced. It is deliberately legible rather than a whisper of
   grey fine print — see utils/generateSampleReviews.js for why.
   ========================================================================== */

.reviews-section {
    --review-card-bg:   rgba(0, 0, 0, .03);
    --review-border:    rgba(0, 0, 0, .10);
    --review-star:      #f5a623;
    --review-radius:    10px;
}

.reviews-section .reviews-note {
    margin: 6px 0 28px;
    font-size: 15px;
    opacity: .75;
}

.review-card {
    height: 100%;
    padding: 22px;
    background: var(--review-card-bg);
    border: 1px solid var(--review-border);
    border-radius: var(--review-radius);
    /* Cards in a row are only as tall as their content unless told otherwise,
       and four reviews are never the same length. */
    display: flex;
    flex-direction: column;
}

.review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    color: var(--review-star);
}

.review-star {
    /* fill, not stroke: the path in buildStars() is a solid star. */
    fill: currentColor;
    flex: 0 0 auto;
}

.review-text {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    /* Pushes the author line to the bottom of the card so the four names sit
       on one line across the row regardless of review length. */
    flex: 1 1 auto;
}

.review-author {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    opacity: .85;
}

@media (max-width: 575.98px) {
    .review-card {
        padding: 18px;
    }
}

/* ==========================================================================
   Trust points (About Us, Section 1)
   --------------------------------------------------------------------------
   The same component style.css, style2.css, style4.css and style6.css carry.
   Markup is buildTrustList() in utils/buildAboutUsPage.js:

     <ul class="trust-points"><li>Licensed, insured and bonded</li>…</ul>

   Up to eight points, two columns from 576px up, one below that.

   THE DEEPER PURPLE, not the brighter #cf3def this theme uses for links.
   Both are the theme's own; #9f11d7 is the hero .line-divider, and the
   pricing section above already chose it for the same reason — a solid fill
   carrying white needs the darker of the pair. White on #9f11d7 is 5.94:1,
   against 3.77:1 on #cf3def, which would leave the tick looking washed.
   ========================================================================== */

.trust-points {
    --trust-bg: #9f11d7;
    --trust-tick: #ffffff;    /* the check inside it */

    list-style: none;
    padding: 0;
    margin: 20px 0 24px;

    /* Two columns on wider screens; one on mobile. Six points then read as
       3 + 3 rather than a long vertical run. */
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 28px;
}

@media (min-width: 576px) {
    .trust-points {
        grid-template-columns: 1fr 1fr;
    }
}

.trust-points li {
    position: relative;
    padding-left: 40px;
    line-height: 1.5;
    min-height: 26px;
    display: flex;
    align-items: center;
    font-weight: 500;
}

/* The circle. Drawn in CSS rather than as an icon: no extra request, and it
   scales with the text. */
.trust-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    background: var(--trust-bg);
}

/* The tick itself: two borders rotated into a check, sitting on the circle. */
.trust-points li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 10px;
    height: 5px;
    margin-top: -4px;
    border-left: 2px solid var(--trust-tick);
    border-bottom: 2px solid var(--trust-tick);
    transform: rotate(-45deg);
}