/* Your custom styles below */

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


#headerColor .navbar {
     background: transparent !important;
}

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

.nav-link, .menu-item a  {
    color:black;
    font-size: 16px;
    font-weight: 600;
    background: none !important;
}

a.nav-link:hover, .menu-item a:hover {
    color: #c10a0a;
}


a.nav-link.active, .current-menu-item a {
    color: white !important;
    padding:7px;
    background: #c10a0a !important;
    border-radius: 20px;
}

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

.dropdown-menu a.nav-link.active, .sub-menu .current-menu-item a {
    color: #3007b8fe  !important;
    background: none !important;
    
}


.dropdown-menu a.nav-link.active:hover, .sub-menu .current-menu-item a:hover {
    color:#c10a0a !important;
}

#navbarNav li {
    font-size: 16px;
    padding-left:12px;
}

.dropdown-menu, .sub-menu  {
    background: white;
}

.dropdown-menu .nav-item, .sub-menu .menu-item {
    border-bottom: solid gray 2px;
    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-menu .nav-item a:hover, .sub-menu .menu-item a:hover {
    background: white;
}

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

.dropdown-menu .nav-item a.active {
    width:100%;
    border-radius: 0;
}



/* === 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-style4 {
    width:100%;
    max-width: 100% !important;
    padding:0px 0px;
    margin: auto;
    text-align: center;  
    position: relative; 
    z-index: -4;  
   
}


.hero-container-for-style4::before {
    content: "";
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height:35%;
    z-index: -4 ;
    background: #1a1a1a;
} 


.hero-container-for-style4::after {
    content: "";
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
   /*  background: #7489a0; */
    background: white; 
    border-top: 4px white solid;
    z-index: -3 ;
} 



.style-4-image-wrap {
    position: relative;
    width: 90%;
    margin: auto;
    padding-top:20px;
    padding-bottom: 15px;
    z-index: 4;
   
}

.style-4-image-wrap::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    right: 0;
    top: 0;
    z-index: 10;
    background: transparent;
    border-bottom-left-radius: 400%;
 }


.style-4-image-wrap::after {
    content: "";
    position: absolute;
    bottom:-20px;
    left: 0px;
    background: #c10a0a;
    width: 100%;
    height: 70%;
    z-index: -3;
    border-bottom-left-radius: 60px;
    box-shadow: -8px 8px 5px #1a1a1a;
    
}


.style-4-image-wrap img {
    width: 90%;
    margin: auto;
    padding:0;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border: 6px white solid;
    box-shadow: 10px 10px 5px black;
   
}

.text-hero-for-style4 {
    width: 100%;
    min-height: 100%; 
    padding-top: 0px;
   /* background-image: linear-gradient(100deg, rgb(122, 117, 117) 20%, rgba(22, 24, 32, 0.6) 60%, rgba(15, 16, 20, 0.87) 75%, rgb(97, 92, 92) 100%) !important; */
}

.text-hero-for-style4 h1 {
    color:#1a1a1a !important;
    font-weight: bold;
    font-size: 26px;;
    margin:auto;
    padding-top: 15%;
    line-height: 1.2;
}

.text-hero-for-style4 h2 {
    color:#1a1a1a;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    margin: auto;
    padding-bottom: 10%;
}

.text-hero-for-style4 .line-divider {
    width: 130px;
    margin: 10px auto;
    border-bottom: #1a1a1a 2px solid;
}

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

img.award, img.licensed {
    width: 15%;  
    border: none;
    box-shadow: none;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}


.first-button-container {
    padding: 25px;
    background:#272727;
    width:100%;
    margin:0;
    z-index:6;
}

.second-button-container {
    background:#272727;
    padding:40px 20px;

}

.cta-btn a p {
    color:white;
    padding: 10px;
    font-size: 26px;
    border: 2px solid rgba(229, 231, 233, 0.9);
    width: 270px;
    margin: auto;
    background: #c10a0a;
    border-radius: 50px;
    box-shadow: 2px 4px 5px lightgray;
}

.cta-btn a p:hover {

    background-color: #1a1a1a;
    color:white;
}

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


.section-1, .section-2, .section-3, .section-4 {
    background-color: #ffffff !important;
    color:rgb(0, 0, 0);
}

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



.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: 0;
    margin-bottom: 10px;
        
}

.img-1-div::before {
    content: '';
    position: absolute;
    top:0;
    left:48%;
    width: 10px;
    height: 100%;
    z-index: 5;
    background: rgb(255, 255, 255); 
        
}

.img-2-div::before {
    content: '';
    position: absolute;
    top:0;
    left:48%;
    width: 10px;
    height: 100%;
    z-index: 5;
    background: rgb(255, 255, 255); 
        
}

.img-1-div img {
    width:95%;
   /* box-shadow: 7px 7px 1px #1a1a1a; */
}

.img-2-div  img {
    width:95%;
    /* box-shadow: -7px 7px 1px #1a1a1a; */
}

.img-1-div img {
    border-top-right-radius: 0px;
    border-top-left-radius: 50px;
}

.img-2-div img {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 50px;
    
}

.col-md-5 img {
    border-bottom-right-radius: 50px;
    border-top-left-radius: 50px;
    box-shadow: 15px 15px #c10a0a;
}



.row-first-section-2-img, .row-second-section-2-img {
    position: relative;
    overflow: hidden;
    z-index: 20;
    padding:0px;
    
}

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


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


/* 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: #c10a0a;
    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) {


    
}


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

    .text-hero-for-style4 h1 {
        font-size: 2rem;
        width: 70%;
    }

    .text-hero-for-style4 h2 {
        font-size: 1.75rem;
        width: 70%;
    }
   
    
}


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

    .navbar-nav {
        width: 70%; 
   }

    .style-4-image-wrap {
        width: 80%;
    }

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

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

    .text-hero-for-style4 h1 {
        width:90%;
       
    }

    .text-hero-for-style4 h2 {
        width:90%;
    }

 
    .text-hero-for-style4 .line-divider {
        width: 200px;
        margin: 15px auto;
    }

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

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

    .text-hero-for-style4 h1 {
        font-size: 2.5rem;
        padding-top: 12%;
    }

    .text-hero-for-style4 h2 {
        font-size: 2rem;
    }
    

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

}


/* Hover-to-open dropdowns on desktop */
@media (min-width: 992px) { /* matches .navbar-expand-lg breakpoint */
    .navbar .dropdown:hover > .dropdown-menu {
      display: block;
    }

    .navbar-nav {
        width: initial; 
    }

    .navbar-nav li a {
        margin-left: 10px;
        margin-right: 10px;
    }

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

    .nav-item {
        padding-left: 0 !important;
    }

    .style-4-image-wrap {
        width: 70%; 
    }

    .text-hero-for-style4 h1 { 
        font-size: 3.5rem;
       
    }

    .text-hero-for-style4 h2 {
        font-size: 3rem;
    }


}
  


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

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

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

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

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

    .style-4-image-wrap {
        width: 70%;     
    }

    .style-4-image-wrap::after {
        
    }

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


    .text-hero-for-style4 h1 {
        padding-top: 5%;

    }

    .text-hero-for-style4 h2 {
        font-size: 3rem;
        padding-bottom: 4%;
    }

    .text-hero-for-style4 .line-divider {
        width: 20%;
    }


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

}
  
 
/* ==========================================================================
   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:        rgba(0, 0, 0, .04);
    --faq-bar-bg-hover:  rgba(0, 0, 0, .07);
    --faq-bar-bg-open:   rgba(0, 0, 0, .07);
    --faq-accent:        currentColor;   /* +/x icon */
    --faq-gap:           10px;
    --faq-radius:        6px;
}

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

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

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

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

.faq-section .accordion-body p {
    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:      #c10a0a;
    --card-radius:    10px;

    margin-top: 40px;
}

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

.service-card {
    text-align: center; 
    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: black;
    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: rgb(101, 90, 90);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    opacity: .90;
}

.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: #c10a0a;      /* 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: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 15%;
    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: 10px;
    top: 50%;
    width: 12px;
    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;
    }
}