/* Your custom styles below */

#headerColor {
    background-color: hsla(207, 45%, calc(38% - 25%), 100%);
    width:100%;
    margin:0; 
}


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


.navbar-nav {
    margin-top: 25px;
    width: 300px;
    position: relative;
    left: 0px;
    margin-top: 0;
}


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

.nav-link {
    display: initial;
}

.nav-link, .menu-item a {
    text-transform: uppercase;
    padding: 10px;
    color:white;
    font-size: 16px;
    font-weight: 600;
    background: none !important;
    text-decoration: none;
}

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



a.nav-link.active, .current-menu-item a {
    color: #ee5519 !important;
    font-weight: bold;
}

/*

a.nav-link.active:hover, .current-menu-item a:hover {
    border-bottom: 2px solid white;
}

*/

 a.nav-link.active:hover, .current-menu-item a:hover {
    border-bottom: 0;
    color: red !important; 

}

.nav-item, .menu-item {
    background: hsla(207, 45%, calc(38% - 25%), 100%);
    font-size: 16px;
    margin-bottom: 20px;
    list-style: none;
}

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

.nav-item:has(a.active) {
   /* margin-bottom: 30px; */
}


.current-menu-item {
    margin-bottom: 30px;
}



.navbar-nav .dropdown-menu, .sub-menu {
    position: relative;
    width: 250px;
    left: 50px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 15px;
    border-radius: 0;
    border: 1px solid black;
}


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

.sub-menu {
    margin-top: 15px;
    border: 1px solid gray;
    border-radius: 10px;
    position: absolute;
    width: 250px;
    height: 100%;
    display: none;
    padding: 0;
    left: 50px;
    top: 10px;
}

.menu-item-has-children:hover .sub-menu {
    position: relative;
    z-index: 2;
    display: block;
    height: auto;
}

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

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

.dropdown-menu .nav-item a:hover, .sub-menu .menu-item a:hover {
    background: white;
}

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

.dropdown-item {
    padding:8px;
    margin:0;
    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-style4 {
   background-color: hsla(207, 45%, calc(38% - 25%), 100%);
   background-image:  url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2280%22%20height%3D%22120%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23prefix__clip0_43_320%29%22%20fill%3D%22rgba%280%2C0%2C0%2C0.3%29%22%3E%3Cpath%20d%3D%22M40%200L0%2030v30l40-30V0zm0%2030v30l40%2030V60L40%2030zM40-30V0l40%2030V0L40-30zm0%2090L0%2090v30l40-30V60zm0%2030v30l40%2030v-30L40%2090z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix__clip0_43_320%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h80v120H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E);
   opacity: 1 ;
   background-size: 100%;
   mix-blend-mode: normal;
   position: relative;
   padding-bottom: calc(20% + 63px);
 

}


.style-4-image-wrap {
    background: transparent;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 ;
    padding-bottom: 0;
    position: relative;

}


.style-4-image-wrap img {
    margin-bottom: 0;
    width: 90%;
    padding:0;
    border-radius: 60px;
    box-shadow: 10px 0.5rem 5px black;   
    
}


.text-hero-for-style4 {
    background: transparent;
    width: 85%;
    text-align: center;
    margin: auto;
    padding: 10% 0;
   }

.text-hero-for-style4 h1 {
    color:white !important;
    font-weight: bold;
    font-size: 26px;;
    margin:auto;
    line-height: 1.2;
}

.text-hero-for-style4 h2 {
    color:white;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    margin: auto;
}

.text-hero-for-style4 .line-divider {
    transform: skewX(-50deg);
    width: 130px;
    margin: 15px auto;
    border-top: #ee5519 7px solid;
}

.badges {
    background-color: transparent;
    padding: 0;
    position: absolute;
    bottom: 2%;
}

img.award, img.licensed {
    width: 15% !important;  
    height: auto !important;
    box-shadow: none;
    margin-bottom: 0;
}


.first-button-container {
    position: absolute;
    padding: 0;
    padding-bottom:10%;
    background-color: transparent;
    margin: 0;
    border-radius: 0 0 20px 20px;
    width: calc(100% - 1.5rem);
    bottom: 0;
}



.second-button-container {
  
    background-color: rgba(5, 25, 38, 0.991);
    padding:40px 20px;
    margin: auto;
    background-image:  url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2280%22%20height%3D%22120%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23prefix__clip0_43_320%29%22%20fill%3D%22rgba%280%2C0%2C0%2C0.3%29%22%3E%3Cpath%20d%3D%22M40%200L0%2030v30l40-30V0zm0%2030v30l40%2030V60L40%2030zM40-30V0l40%2030V0L40-30zm0%2090L0%2090v30l40-30V60zm0%2030v30l40%2030v-30L40%2090z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix__clip0_43_320%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h80v120H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E);
    opacity: 1 ;
    background-size: 100%;
    mix-blend-mode: normal;
   
}

.cta-btn a p {
    position: relative;
    z-index: 3;
    color:white;
    padding: 10px;
    font-size: 26px;
    border: 2px solid white;
    width: 270px;
    margin: auto;
    background: #ee5519;
    box-shadow: 2px 4px 5px black;
  
}

.cta-btn a p:hover {
    background-color: rgb(6, 18, 87);
    color:white;
}

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


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

.section-3 {
    background-color: hsla(207, 45%, calc(38% - 25%), 100%) !important;
    
    color: white;
}

.section-2 { 
    background: hsla(207, 45%, calc(38% - 25%), 100%) !important;
    color:white;
    width: 100%;
    margin: auto;
   
}

.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:48%;
    left:0;
    width: 100%;
    height: 10px;
    z-index: 5;
    background: rgba(6, 18, 87, 0); 
        
}

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

.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, .img-2-div img {
   
}

.service-cards {
    background-image:  url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2280%22%20height%3D%22120%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23prefix__clip0_43_320%29%22%20fill%3D%22rgba%280%2C0%2C0%2C0.3%29%22%3E%3Cpath%20d%3D%22M40%200L0%2030v30l40-30V0zm0%2030v30l40%2030V60L40%2030zM40-30V0l40%2030V0L40-30zm0%2090L0%2090v30l40-30V60zm0%2030v30l40%2030v-30L40%2090z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix__clip0_43_320%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h80v120H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E);
    opacity: 1 ;
    background-size: 100%;
    mix-blend-mode: normal;
    margin-top: 20px;
}

.service-card {
    padding-bottom: 20px;;
}

.service-card-icon svg {
    color: #ee5519;
}

.section-5 .col-md-5 .img-fluid {
    text-align: center;
    box-shadow: 15px -15px 1px  hsla(207, 45%, calc(38% - 25%), 100%);
    border-radius: 10px;
    border: 2px solid white;

}


.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: hsla(207, 45%, calc(38% - 25%), 100%);
    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:  #ee5519;
    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) {

    .style-4-image-wrap {
 
    }

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

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

    .text-hero-for-style4 {

    }
}


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

    .navbar-nav {
        width: 60%; 
    }
    
    .navbar-nav .dropdown-menu {
        left: 25px;
    }

    .style-4-image-wrap  {

        
    }

    .text-hero-for-style4 {
  
    }

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

    

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

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

    .text-hero-for-style4 h1 {
        
       
    }

    .text-hero-for-style4 h2 {
       
    }

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


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

    
    .hero-container-for-style4 {

    }


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

  

    .style-4-image-wrap {
     
    } 

    .text-hero-for-style4 {
   
    }
  

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

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

}

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

    .hero-container-for-style4 {
        padding-top:10%;
    }

    .style-4-image-wrap {
        width: 100%;   
        padding:0;
        margin:0;

    }

    .text-hero-for-style4 {
        width: 100%;
        padding:0;
        margin:0;
    }



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

    .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; 
        margin-top: 0;
    }



    .navbar-nav li:last-child {
        margin-top: -8px;
        padding: 5px;
        border: 2px solid white;
        background-image: linear-gradient(
            315deg,
            #ee5519 var(--cut, 25px),
            transparent var(--cut, 25px)
        );
    }

    .dropdown-menu li:last-child, .sub-menu li.menu-item:last-child {
        background-image: none;
        border: none;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top: initial;
    }



    .nav-item:has(a.active) { 
        margin-bottom: 0;
    }

    .current-menu-item {
        margin-bottom: 0;
    }

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

    /* Keep tight alignment under the trigger */
    .navbar .dropdown-menu {
      margin-top: 0;
    }
   

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

    .nav-item, .menu-item {
        margin-bottom: 0;
    }
    
    .menu-item-has-children:hover .sub-menu {
        position: absolute;
        left: -100px;
        background: white;
    }

    .hero-container-for-style4 {
        padding-top: 10%;

    }

    .style-4-image-wrap {
       
      margin:0;
      padding:0;

    }

    .text-hero-for-style4 {

        margin:0;
        padding:0;
        padding-left: 10%;
        text-align: left;
 
    }

    .text-hero-for-style4 h1 { 
        font-size: 2.5rem;
        margin-left:3%;
       
    }

    .text-hero-for-style4 h2 {
        font-size: 2rem;
        margin-left: 3%;
    }

    .text-hero-for-style4 .line-divider {
        
        margin-left: 3%;
    }

    .badges { 
        bottom: 2%;
    }

}
  


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

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

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

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

    .hero-container-for-style4 {
        padding-top: 8%;
        padding-bottom: calc(18% + 63px);
    }

    .style-4-image-wrap { 

    }


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


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

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

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

    .text-hero-for-style4 .line-divider {
        width: 30%;
        margin: 20px 0  20px 3%;
    }


    .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:        hsla(207, 45%, calc(38% - 25%), 100%);
    --faq-bar-bg-hover:  rgb(23, 54, 121);
    --faq-bar-bg-open:   rgb(23, 54, 121);
    --faq-accent:        #ee5519;   /* +/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: 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-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-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);
    }
}

/* ==========================================================================
   Pricing table — style4 (white page / navy panels / blue accents)
   --------------------------------------------------------------------------
   REPLACES the previous pricing block in this one theme file.

   CSS only, same markup.

   THE SHAPE IS BORROWED, NOT INVENTED

   This theme's rhythm is white sections interrupted by a rounded panel:

       .section-2               { background: rgb(6,18,87); width: 90%;
                                  margin: auto; border-radius: 20px; }
       .second-button-container { background: #0a65fc;      width: 90%;
                                  margin: auto; border-radius: 20px; }

   The pricing section takes exactly that shape. It is a feature block — the
   one place on the page with hard numbers — so it earns a panel rather than
   sitting flat on white like sections 1, 3 and 4.

   THE PRICE COLOUR IS NOT #0a65fc, AND THAT IS DELIBERATE

   The obvious move is to reuse the theme's blue for the figures. Measured
   against the navy panel it does not hold up:

       #0a65fc on rgb(6,18,87)   3.47:1   large text only, and muddy
       #8ec5ff on rgb(6,18,87)   9.40:1   clean

   Blue on blue at 3.5:1 is legible in the sense that you can make it out, not
   in the sense that a price list should be. #8ec5ff is the same hue family,
   lightened until it actually reads.

   To port to another theme, change the six variables below.
   ========================================================================== */

   .pricing-section {
    --price-panel:  hsla(207, 45%, calc(38% - 25%), 100%);        /* .section-2 */
    --price-ink:    #ffffff;
    --price-accent: #8ec5ff;               /* the figures */
    --price-soft:   rgba(255, 255, 255, .65);
    --price-faint:  rgba(255, 255, 255, .45);
    --price-rule:   rgba(255, 255, 255, .22);

    /* the panel — same three values as .section-2 */
    background: var(--price-panel);
    color: var(--price-ink);
    width: 90%;
    margin: 0 auto;
    margin-top: 60px;
    border-radius: 20px;
}

/* The hero's .line-divider, reused: 130px, 2px, white. Left-aligned here
   because body headings in this theme are left-aligned — only the hero
   centres. */
.pricing-section h2 {
    position: relative;
    color: var(--price-ink);
    padding-bottom: 26px;
}

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

/* --------------------------------------------------------------------------
   The table
   -------------------------------------------------------------------------- */

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

/* The 2px white rule under the header is the same device as
   .second-button-container's `border-top: 4px white solid` — a white edge
   dividing two areas of colour. */
.pricing-table thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;          /* matches the nav */
    color: var(--price-ink);
    padding: 0 16px 12px;
    border-bottom: 2px solid var(--price-ink);
}

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

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

/* Row rules: a flat translucent white, not a gradient.
   The dark theme fades its rules because it has a coloured accent to fade
   FROM. Here the panel is already the accent, so a plain white hairline is
   the honest version — a gradient would be decoration for its own sake. */
.pricing-table tbody tr {
    transition: background-color .18s ease;
}

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

.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td { border-bottom: 0; }

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

/* Hover: a white wash and the figure goes to full white. No glow — this
   theme's shadows are hard black (box-shadow: 2px 4px 5px black), which is
   invisible on navy. */
.pricing-table tbody tr:hover { background-color: rgba(255, 255, 255, .06); }

.pricing-table tbody tr:hover .pricing-amount { color: var(--price-ink); }

/* --------------------------------------------------------------------------
   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: var(--price-soft);
    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;
}

.pricing-unit {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--price-faint);
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   The estimate notice
   --------------------------------------------------------------------------
   NOTE THE SELECTOR. `.pricing-disclaimer` on its own 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 renders at 19px rather than
   the 14px intended. Two classes takes it back.

   Rounded, because everything in this theme is: 20px panels, 50px buttons,
   50px images. A square-cornered box here would be the one hard edge on the
   page.
   -------------------------------------------------------------------------- */

.pricing-section .pricing-disclaimer {
    margin-top: 28px;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--price-soft);
    background: rgba(255, 255, 255, .07);
    border-left: 3px solid var(--price-ink);
    border-radius: 0 12px 12px 0;
}

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

/* --------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------
   Each row stacks so the figure sits under the service rather than being
   squeezed against it.
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .pricing-table thead {
        /* clipped, not display:none — the column headers stay in the
           accessibility tree 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;
        border-bottom: 1px solid var(--price-rule);
    }

    .pricing-table tbody tr:last-child { border-bottom: 0; }

    /* the rule moves to the row; the cells inside must not draw their own */
    .pricing-table tbody th,
    .pricing-table tbody td {
        padding: 0;
        border-bottom: 0;
    }

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

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

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