/* Your custom styles below */

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

header {
  border-top: 2px #1a1a1a solid;
  border-bottom: 2px solid #1a1a1a;
  box-shadow: 0px 5px 8px black;
  margin-bottom: 8px;
}

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

.nav-link, .menu-item a {
  color:black;
  text-decoration: none;
  padding: 0;

}


a.nav-link:hover, .menu-item a:hover {
  color:#159345;
  background: none !important;
}

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

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

#navbarNav li, .menu-item {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  padding:0;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;

}


.dropdown-menu, .sub-menu {
  margin-top: 15px;
  padding: 0;
  padding-bottom:15px;
  background: #eaeaea;
  list-style: none;
  border: 1px solid #1a1a1a;
  border-radius: 15px;
  width: 220px;
}

.dropdown-menu .nav-item, .sub-menu .menu-item {
  border-bottom: solid #333 2px;
  padding: 10px;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.dropdown-menu .nav-item a {
  overflow-wrap: break-word;
}



.sub-menu .menu-item a {
  padding-left: 10px;
}


.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: black;
}


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

.nav-item.dropdown:hover {
  color:#40b353 !important;
}

.dropdown-menu .nav-item a.active, .sub-menu .current-menu-item a {
  background: none !important;
}


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


.dropdown .dropdown-menu, .menu-item-has-children .sub-menu {
  position: absolute;
  display: none;
}

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


.dropdown:hover .dropdown-menu, .menu-item-has-children:hover .sub-menu {
  position: relative;
  z-index: 3;
  display: block;
  left: 40px;
}


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

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

.hero-container-for-style-and-style3-992px,
.hero-container-for-style-and-style3-992px img,
.text-hero-for-style-and-style3 {
 display: none;
}

.hero-container {
width:100%;
position: relative;
background: #d8d7d7;
padding:0px;
margin:0 auto;
}

.hero-img-wrap {
padding-top: 30px;
position: relative;
}


.text-hero {
width: 100%;
text-align: center;
padding:0;
padding-top:40px;
padding-bottom:40px;
}


.text-hero h1 {
color: #000000 !important;
font-weight: bold;
width: 80%;
font-size: 34px;
margin:0 auto;
padding:10px 0 10px 0px;
line-height: 1.2;
}


.text-hero h2 {
width: 80%;
font-size: 26px;
font-weight: bold;
line-height: 1.2;
margin: 0 auto;
color: #000000;
}


h2 {
color: #3f9e58;
}


.line-divider {
    color: #3f9e58;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 190px;
    height: 25px;
}

.hero-line-divider {
  margin: 0 auto;
}

/* ==========================================================================
   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;

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


.row {
margin:0;
}

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

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



.hero-img {
width:90%;
height: auto !important;
padding:5px;
margin: 0 auto;
object-fit: cover;
border-radius: 10px;
border:3px solid black;
box-shadow: 15px 15px 1px #3f9e58;
}

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


.btn-container {
padding: 25px;
background-color:#3f9e58;
}


.cta-btn a p {
color:rgb(223, 218, 218);
padding: 20px;
font-size: 26px;
border: 4px solid rgb(28, 25, 25);
width: 300px;
margin: auto;
background-color: #3f9e58 ;
box-shadow: 5px 5px 20px black;
border-radius: 50px;
}

.cta-btn a p:hover {
background-color: rgb(9, 109, 39);
}

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

.img-1-div img,
.img-2-div img,
.col-md-5 .img-fluid {
border: 2px solid black;
box-shadow: 15px 15px 1px #3f9e58;
border-radius: 10px;
padding: 5px;
}

.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;
}

.nearme {
  border-bottom: 2px solid gray;
}

.nap-map-section {
background: #348349;
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;
}

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: 50px;
}

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

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

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

/* Form groups */
.form-group {
margin-bottom: 24px;
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);
}

/* Responsive design */
@media (max-width: 600px) {
  .form-container {
      border-radius: 16px;
  }
  
  .contact-form {
      padding: 30px 25px;
  }
  
  .contact-form h2 {
      font-size: 1.75rem;
  }
  
  .form-group {
      margin-bottom: 20px;
  }
}

/* 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;
}

.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;
}


/* 550px */
@media (min-width: 550px) {
  .text-hero {
      padding-top: 50px;
      padding-bottom: 50px;
  }
}

/* 601 */
@media (min-width: 601px) {
  .hero-img-mobile{
      display: none;
  }

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

  .text-hero h1 {
      font-size: 46px;
  }

  .text-hero h2 {
      font-size: 36px;
  }

  
}

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


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

  .hero-img {
      display:block;
      width: 85%;
  }

  .text-hero h1 {
      font-size: 56px;
  }

  .text-hero h2 {
      font-size: 46px;
  }

  .line-divider {
   
    margin-top: 15px;
    margin-bottom:15px;
  }

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

/* 766 */
@media (min-width: 766px) {
  .text-hero h1 {
      font-size: 60px;
  }

  .text-hero h2 {
      font-size: 60px;
  }

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

/* Hover-to-open dropdowns on desktop */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }
  
  #navbarNav li, .menu-item {
      margin-top: 0;
  }
  

  .menu-item {
    margin-left: 15px;
    margin-right: 15px;
  }
  

  .dropdown:hover .dropdown-menu, .menu-item-has-children:hover .sub-menu {
    position: absolute;
    left: -80px;
    margin-top: 10px;
  }
  
  .sub-menu .menu-item {
    margin-left: 0;
    margin-right:0;
    margin-top: 15px !important;
  }
  
  .dropdown, .menu-item-has-children a {
    padding-bottom: 15px !important;
  }
  

  .hero-img-wrap {
    padding-top:30px;
    padding-bottom: 30px;
    padding-right: 30px;
    padding-left: 0;

  }


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


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


  .text-hero {
    padding-top: 30px;
    width: 50%;
    text-align:left;
  }

  .text-hero h1 {
    font-size: 50px;
    padding: 0;
  }

  .text-hero h2 {
    font-size: 40px;
  }

  .hero-line-divider {
   margin-left: 10%;
  }
    
}

/* 1250 */
@media (min-width: 1250px) {
  .nav-item.dropdown .dropdown-menu {
      left: -50px !important;
  }

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

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

  
  .hero-img {
    display: block;
    height: 60vh !important;
  }

  .text-hero h1 {
    font-size: 66px;
    text-align: center;    
  }

  .text-hero h2 {
    font-size: 40px;
    text-align: center;    
  }

  .hero-line-divider {
    margin: 10px auto;
   }

  
}



/* ==========================================================================
   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;
    }
}