/* Your custom styles below */


#headerColor, #headerColor .navbar {
    background-color: #082d5b !important;
}

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

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


a.nav-link:hover, .menu-item a:hover {
    color: green;
    background: none;
}


a.nav-link.active, .current-menu-item a {
    color: #3ebe3e !important;
    background: none;
}

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

.dropdown-menu, .sub-menu {
    border: 0.5px solid #b2b2b269;
    background: #082d5b;
}

.dropdown-menu .nav-item, .sub-menu .menu-item {
    border-bottom: solid gray 1px;
    padding-left: 10px;
}

.dropdown-menu li:only-child, .sub-menu li:only-child  {
    border-bottom: none
  }

  .dropdown-menu li:last-of-type, .sub-menu li:last-of-type  {
    border-bottom: none;
  }

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

/* === 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: #082d5b;
    padding:0px;
    margin:0 auto;
}

.style-4-image-wrap {
    position: relative;
}

.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(10, 33, 178, 0.60) 35%, rgba(14, 43, 237, 0.11) 57%, rgba(12, 59, 201, 0.08) 85%, rgba(14, 43, 237, 0) 100%) !important;
}

.text-hero-for-style-and-style3 h1 {
    color:white !important;
    font-weight: bold;
    width: 55%;
    font-size: 26px;;
    margin:0;
    padding:15% 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: #53d353 2px solid;
    background-color: #53d353;
}

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

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

.btn-container {
    padding: 25px;
    background-color:#082d5b;
}


.cta-btn a p {
    color:white;
    padding: 20px;
    font-size: 26px;
    border: 2px solid white;
    width: 270px;
    margin: auto;
    background-color: green;
}

.cta-btn a p:hover {

    background-color: darkgreen;
}

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


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


.section-padding h2 {
    padding-bottom: 0px;
    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 {
    margin-bottom: 40px;
}

.col-md-6 img, .col-md-5 img {
    box-shadow: 10px 10px 5px #aaa;
    border-radius: 10px;
}

.nearme {
    border-bottom: 1px solid black;
    background: #082d5b;
    color: white;
}

.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: #082d5b;
    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;
}


/* Form container */
.form-container {
    overflow: hidden;
    width: 90%;
    margin: auto;
    margin-bottom: 60px;
    border-radius: 16px;
}


/* Form styles */
.contact-form {
    padding: 50px;
    padding-bottom:60px;
    max-width: 700px;
    margin: auto;
}

.contact-form h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 8px;
    text-align: center;
    padding: 30px 25px;
}

.form-subtitle {
    color: #718096;
    text-align: center;
    margin-bottom: 32px;
    font-size: 0.95rem;
}

/* Form groups */
.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.9rem;
}

/* Input and textarea styles */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    font-size: 1rem;
    font-family: inherit;
    background-color: transparent;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: #667eea;
    box-shadow: 0 2px 0 0 green;
    transform: translateY(-2px);
}

.form-group input:hover,
.form-group textarea:hover {
    border-bottom-color: #cbd5e0;
}

/* Textarea specific */
.form-group textarea {
    height: 80px;
    min-height: 80px;
    resize: vertical;
}

/* Submit button */
.submit-btn {
    width: 100%;
    background: green;
    color: white;
    border: none;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

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

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.submit-btn:active {
    transform: translateY(0);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

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


/* Focus styles for accessibility */
.submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);
}

/* Form validation styles */
.form-group input:invalid:not(:focus):not(:placeholder-shown),
.form-group textarea:invalid:not(:focus):not(:placeholder-shown) {
    border-bottom-color: #082d5b;
    /* box-shadow: 0 2px 0 0 rgba(198, 191, 191, 0.2); */
}

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

/* Loading state for button */
.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.submit-btn:disabled:hover {
    transform: none;
    box-shadow: 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: 15%;
        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: 10%;
       
    }

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

    .badges {
        position: absolute;
        left: 8%;
        bottom: 5%;
    }
    
    .award, .licensed {
        width: 15%;  
    }
    
}


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

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

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


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

    .badges { 
        bottom: 15%;
        left: 9%;
    } 
    
}


/* 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: 12%;

    } 

}


/* Hover-to-open dropdowns on desktop */
@media (min-width: 992px) { /* matches .navbar-expand-lg breakpoint */
    .navbar .dropdown:hover > .dropdown-menu {
      display: block;
    }
    /* Keep tight alignment under the trigger */
    .navbar .dropdown-menu, .sub-menu {
      margin-top: 0;
    }
    /* Optional: show active state on the trigger while hovering */
    .navbar .dropdown:hover > .nav-link {
      color:green;
    }
    
    .nav-link, .menu-item a {
      margin-right: 15px;
      margin-left: 15px;
    }
    
    .menu-item-has-children {
        position: relative;
        z-index: 1;
        padding-bottom: 20px;
    }
    
    .sub-menu {
        display: none;
        position: absolute;
        z-index: 3;
        border: 2px solid #08203d;
        border-radius: 10px;
        padding: 0;
        margin-top: 10px;

    }
    
     .menu-item-has-children:hover .sub-menu {
        display: block;
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
    }
    
    
    .sub-menu .menu-item {
        padding: 10px;
    }
    
      .dropdown .dropdown-menu li, .sub-menu .menu-item  {
        width: 250px;
    }
    
     .nav-item.dropdown .dropdown-menu, .sub-menu {
        left: -100px !important;
    }


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

    .badges {
        bottom: 25%;
    }
    
}
  
    /* 1250 */
@media (min-width: 1250px) {    

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

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

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

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

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

    .badges { 
        bottom: 18%;
    } 

}

/* ==========================================================================
   FAQ accordion
   --------------------------------------------------------------------------
   Append this to each theme you want it on:
     src/css/themes/style.css
     src/css/themes/style2.css   ... and so on

   It deliberately inherits rather than hardcoding colours, so the same block
   works on every theme:

     - question text uses the theme's body colour (inherit)
     - the +/x icon uses currentColor, so it matches that text
     - the bar tint is a translucent black, which reads as a subtle shade of
       whatever background sits behind it

   Typography already follows the theme, because the FAQ sits inside
   .container.section-padding — so .section-padding h2 and
   .section-padding p rules apply to the heading and answers.

   To tune one theme, override just the variables at the top:

     .faq-section { --faq-accent: #ff3f34; --faq-bar-bg: rgba(0,0,0,.06); }
   ========================================================================== */

   .faq-section {
    --faq-bar-bg:        green;
    --faq-bar-bg-hover:  #082d5b;
    --faq-bar-bg-open:   #082d5b;
    --faq-accent:        currentColor;   /* +/x icon */
    --faq-gap:           10px;
    --faq-radius:        6px;
}

.faq-section {
    background: #e2e3e5;
}

/* Strip Bootstrap's card chrome so the bars sit on the page cleanly */
.faq-section .accordion,
.faq-section .accordion-item {
    background: transparent;
    border: 0;
}

.faq-section .accordion-item {
    margin-bottom: var(--faq-gap);
}

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

/* ---- the question bar ---- */

.faq-section .accordion-button {
    background: var(--faq-bar-bg);
    color: white;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 500;
    padding: 14px 18px 14px 46px;   /* left room for the icon */
    border: 0;
    border-radius: var(--faq-radius) !important;
    box-shadow: none;
    transition: background-color .2s ease;
}

.faq-section .accordion-button:hover {
    background: var(--faq-bar-bg-hover);
}

.faq-section .accordion-button:not(.collapsed) {
    background: var(--faq-bar-bg-open);
    color: white;
    box-shadow: none;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

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

/* ---- the +/x icon ---- */

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


.faq-section .accordion-button::before {
    content: "";
    color: black;
    position: absolute;
    left: 18px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;

    /* a plus sign drawn from two gradients, so it inherits currentColor */
    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;
}

.faq-section .accordion-button:hover::before {
    color: white;
}

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

/* ---- the answer ---- */

.faq-section .accordion-body {
    background: var(--faq-bar-bg-open);
    padding: 4px 18px 18px 46px;
    border-radius: 0 0 var(--faq-radius) var(--faq-radius);
}

.faq-section .accordion-body p {
    color: white;
    margin-bottom: 0;
}

/* ---- columns ---- */

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

/* ==========================================================================
   Service cards (home page)
   --------------------------------------------------------------------------
   Append to each theme you want them on:
     src/css/themes/style.css ... style5.css

   Like the FAQ block, this inherits rather than hardcoding, so one snippet
   works across all five themes:

     - the icon uses currentColor, so it takes the theme's text colour
     - the card tint is a translucent black, reading as a subtle shade of
       whatever sits behind it
     - the title inherits body colour and the section's own heading styles

   To tune one theme, override the variables:

     .service-cards { --card-icon: #ff3f34; --card-bg: rgba(0,0,0,.05); }
   ========================================================================== */

   .service-cards {
    --card-bg:        #082d5b;
    --card-bg-hover:  rgba(0, 0, 0, .07);
    --card-icon:      green;
    --card-radius:    10px;

    margin-top: 40px;
}

.service-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: 26px 22px;
    height: 100%;
    transition: transform .2s ease, background-color .2s ease;
}

/* Lift on hover, but only where hovering is a real interaction */
@media (hover: hover) {
    .service-card:hover {
        background: var(--card-bg-hover);
        transform: translateY(-3px);
    }
}


.service-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--card-icon);
    color: white;
}

.service-card-title {
    color: white;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 8px;
    padding: 0;              /* the section's h2/h3 padding would be too much here */
}

.service-card-text {
    color: white;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    opacity: .85;
}

.service-card:hover .service-card-title,
.service-card:hover .service-card-text  {
    color: black;
}


/* The cards sit inside .section-padding, which styles headings and text for
   full-width prose. Reset the bits that don't suit a small card. */
.section-padding .service-card-title,
.section-padding .service-card-text {
    padding-bottom: 0;
}


/* ==========================================================================
   Pricing table
   --------------------------------------------------------------------------
   Append to each theme you want it on:
     src/css/themes/style.css ... style5.css

   Inherits rather than hardcoding, so one snippet suits all five themes:
     - text uses the theme's body colour
     - row tint is a translucent black, reading as a shade of whatever
       background sits behind it
     - the price uses currentColor at a heavier weight

   To tune one theme:
     .pricing-section { --price-accent: #ff3f34; }
   ========================================================================== */

   .pricing-section {
    --price-row-bg:     rgba(0, 0, 0, .03);
    --price-row-alt:    rgba(0, 0, 0, .06);
    --price-border:     rgba(0, 0, 0, .10);
    --price-accent:     currentColor;
}

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

.pricing-table thead th {
    text-align: left;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
    padding: 0 16px 12px;
    border-bottom: 2px solid var(--price-border);
}

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

.pricing-table tbody tr:nth-child(odd) {
    background: var(--price-row-bg);
}

.pricing-table tbody tr:nth-child(even) {
    background: var(--price-row-alt);
}

.pricing-table tbody th,
.pricing-table tbody td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--price-border);
}

/* Service name + the short qualifier underneath it */
.pricing-service {
    font-weight: 600;
    font-size: 17px;
    text-align: left;
}

.pricing-note {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    opacity: .7;
    margin-top: 4px;
}

/* The range, and how it's charged */
.pricing-range {
    text-align: right;
    white-space: nowrap;
}

.pricing-amount {
    display: block;
    font-weight: 700;
    font-size: 19px;
    color: var(--price-accent);
}

.pricing-unit {
    display: block;
    font-size: 13px;
    opacity: .65;
    margin-top: 2px;
}

/* The estimate notice. Understated but not hidden — it needs to be readable,
   since it's what keeps the figures honest. */
.pricing-disclaimer {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    opacity: .8;
    padding: 14px 16px;
    border-left: 3px solid var(--price-border);
    background: var(--price-row-bg);
}

/* Narrow screens: stack each row so the range sits under the service rather
   than being squeezed against it. */
@media (max-width: 575.98px) {
    .pricing-table thead {
        display: none;
    }

    .pricing-table tbody tr {
        display: block;
        padding: 6px 0;
    }

    .pricing-table tbody th,
    .pricing-table tbody td {
        display: block;
        border-bottom: 0;
        padding: 4px 16px;
        text-align: left;
    }

    .pricing-table tbody tr {
        border-bottom: 1px solid var(--price-border);
    }

    .pricing-range {
        text-align: left;
        padding-bottom: 14px !important;
    }

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

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

/* ==========================================================================
   Trust points (About Us, Section 1)
   --------------------------------------------------------------------------
   Append to each theme you want it on:
     src/css/themes/style.css ... style5.css

   A white check inside a green circle. The green is deliberately fixed
   rather than inherited — a verified tick reads as green on every design.

   To tune one theme:
     .trust-points { --trust-bg: #0d6efd; }
   ========================================================================== */

   .trust-points {
    --trust-bg: #17801a;      /* circle */
    --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;
}

/* Green circle. Drawn in CSS rather than as an icon: no extra request, and
   it scales with the text. Unlike the rest of the theme components this does
   NOT inherit the theme colour — a verified tick reads as green everywhere.
   Override --trust-bg on a theme if you want it to match instead. */
.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);
}

/* ==========================================================================
   About Us intro video
   --------------------------------------------------------------------------
   Append to each theme:
     src/css/themes/style.css ... style5.css

   The markup uses Bootstrap's .ratio helper, but .ratio is not in the
   PurgeCSS safelist in webpack.config.js or postcss.config.cjs. It should
   survive because PurgeCSS scans the generated HTML — but if it ever does
   not, a bare <iframe> falls back to the browser default of 300x150px, which
   is exactly the "tiny video" problem this fixes.

   These rules make the sizing self-contained, so the video renders correctly
   whether or not Bootstrap's .ratio classes make it through the build.
   ========================================================================== */

   .about-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
}

.about-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Stacked below the text under 768px, so give it room to breathe */
@media (max-width: 767.98px) {
    .about-video-section {
        margin-top: 24px;
    }
}

/* ==========================================================================
   Brush-stroke divider
   --------------------------------------------------------------------------
   Append to each theme:
     src/css/themes/style.css ... style5.css

   Restyles the existing .line-divider elements — the ones already sitting
   under the H1 in the hero and under the H2 in section 1. No template or
   builder changes needed.

   HOW IT WORKS
   The SVG is used as a CSS *mask*, not as a background image. That matters:
   a background image bakes its colour into the SVG, so it could not follow
   the theme. As a mask, the SVG only defines the SHAPE and background-color
   fills it — so the stroke takes currentColor and matches its heading on
   every design.

   To tune one theme:
     .line-divider { --divider-color: #ff3f34; }
   ========================================================================== */

   .line-divider {
    --divider-color: currentColor;
    --divider-width: 250px;
    --divider-height: 25px;

    /* Reset whatever the straight-line version set */
    border: 0;
    background-image: none;

    width: var(--divider-width);
    height: var(--divider-height);
    margin: 14px 0 18px;

    /* The colour: the mask below decides which parts of this show through */
    background-color: var(--divider-color);

    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 24' preserveAspectRatio='none'><path d='M6,13 C40,8 72,7 112,9 C152,11 182,5 214,8 L215,15 C182,18 152,13 112,16 C72,19 40,17 6,17 Z'/><path d='M222,9 C226,8 230,10 233,9 L233,13 C230,14 226,12 222,13 Z'/><path d='M239,10 C241,9 243,11 245,10 L245,13 C243,14 241,12 239,13 Z'/></svg>");
            mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 24' preserveAspectRatio='none'><path d='M6,13 C40,8 72,7 112,9 C152,11 182,5 214,8 L215,15 C182,18 152,13 112,16 C72,19 40,17 6,17 Z'/><path d='M222,9 C226,8 230,10 233,9 L233,13 C230,14 226,12 222,13 Z'/><path d='M239,10 C241,9 243,11 245,10 L245,13 C243,14 241,12 239,13 Z'/></svg>");

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}

/* The hero divider sits on a photo, so it needs to be white regardless of
   the theme's text colour. */

.line-divider {
    color: green;
    margin-top: 10px;
    margin-bottom: 10px;
}

.text-hero.line-divider
 {
    --divider-color: #53d353;
}

/* Centred headings want a centred stroke */
.text-center .line-divider,
.text-center > .line-divider {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .line-divider {
        --divider-width: 190px;
        --divider-height: 25px;
    }
}


/* --------------------------------------------------------------------------
   OPTIONAL: use the same stroke under every section H2
   --------------------------------------------------------------------------
   The templates only place .line-divider in two spots. To put a stroke under
   every section heading without touching the markup, uncomment this.
   -------------------------------------------------------------------------- */

/*
.section-padding h2::after {
    content: "";
    display: block;
    width: 190px;
    height: 15px;
    margin: 12px 0 4px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 24' preserveAspectRatio='none'><path d='M6,13 C40,8 72,7 112,9 C152,11 182,5 214,8 L215,15 C182,18 152,13 112,16 C72,19 40,17 6,17 Z'/></svg>");
            mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 24' preserveAspectRatio='none'><path d='M6,13 C40,8 72,7 112,9 C152,11 182,5 214,8 L215,15 C182,18 152,13 112,16 C72,19 40,17 6,17 Z'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
*/