@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
:root {
    --primary: #0170b7;
    --secondary: #adb746;
}

html, body {
    font-family: "Montserrat", sans-serif !important;
}
a {
    color: #0170b7;
    font-weight: bold;
}
a:hover{
    color: black;
}

.navbar {
    box-shadow: 0 6px 5px -3px rgba(0, 0, 0, 0.2);
    font-size:small;
}
.nav-item .nav-link, .nav-link {
    font-weight: bold;
    color:  black;
}
.dropdown-menu .nav-link {
    font-weight: normal;
    font-size: small;
}
.navbar a.nav-link:hover,
ul.navbar-nav a.nav-link:hover,
a.nav-link.dropdown-toggle.show {
    color: var(--primary);
}
.dropdown-menu .nested-dropdown.nav-link {
    color: black;
    font-weight:bold;
}
    .dropdown-menu .nested-dropdown.nav-link.collapsed {
        color: black;
        
    }

.carousel-dropdown ul li a:active {
    background-color: #0170b7;
}
.carousel-dropdown ul li a:hover {
    background-color: #062234;
    color:white;
}

.dropdown-menu a.nav-link:hover {
    font-weight: bold;
    color: black !important;
}
.nav-item .dropdown-menu {
    border-top: 4px solid #adb746;
    border-bottom: none;
    border-left: none;
    border-right: none;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2);
    border-radius: 0;
    
}
footer {
    background: var(--primary);
    padding: 20px 0;
    top: 0;
    color: white;
}
footer .nav-link, footer a{
    color:white;
    font-weight:bold;
    text-transform:uppercase;
    text-decoration:none;
}
    .footer a.nav-link:hover, footer a:hover{
        color: black;
    }

.carousel-item .image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px; 
    overflow: hidden;
}

    .carousel-item .image-container img {
        display: block;
        height: 100%; 
        width: auto;
        object-fit: cover;
    }

    .carousel-item .image-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(8, 20, 31, 0.85); 
        pointer-events: none;
    }

.carousel-caption {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-70%);
    text-align: start;
    padding-left: 2rem; 
    width: 100%; 
}
.carousel-item .form-select{
    border-radius: 0px;
}
.btn {
    border-radius: 0px;
    border: 2px solid #c3d62f;
    font-size:small;
}

.btn-hover-fill-dark {
    position: relative;
    overflow: hidden;
    z-index: 0;
    background-color: #062234; /* Bootstrap primary */
    color: white;
    transition: color 0.3s ease;
}
.btn-hover-fill-dark .nav-link {
    color: white;
}
    .btn-hover-fill-dark:hover .nav-link, .btn-hover-fill-dark:focus .nav-link {
        color: black;
    }

    .btn-hover-fill-dark::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: #c3d62f; 
        z-index: -1;
        transition: left 0.4s ease;
    }

    .btn-hover-fill-dark:hover::before {
        left: 0;
    }

    .btn-hover-fill-dark:hover {
        background-color: #062234;
        border: 2px solid #c3d62f;
    }
    .btn-hover-fill-dark:focus {
        background-color: #c3d62f;
    }
.btn:disabled {
    background-color: #c3d62f !important;
    border-color: #c3d62f;
    opacity: 100;
}
.btn-hover-fill {
    position: relative;
    overflow: hidden;
    z-index: 0;
    background-color: #c3d62f; /* Bootstrap primary */
    color: black;
    transition: color 0.3s ease;
}

    .btn-hover-fill::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: white; 
        z-index: -1;
        transition: left 0.4s ease;
    }

    .btn-hover-fill:hover::before {
        left: 0;
    }

    .btn-hover-fill:hover {
        color: black;
        background-color: #c3d62f;
        border: 2px solid #c3d62f;
    }
    .btn-hover-fill:focus {
        color: black;
        background-color: white;
    }


.custom-card {
    position: relative; 
    border-top: 3px solid #0170b7;
    border-right: 3px solid #0170b7;
    padding-top: 0;
    margin-top: -1px;
}

    /* Dot at the end of the border */
    .custom-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        background-color: #0170b7;
        border-radius: 50%;
        transform: translate(65%, 50%);
    }

.socials a {
    color: black;
}
    .socials a:hover {
        color: #0170b7;
    }
p.h5 {
    font-size: large;
    color: #0170b7;
    text-transform:uppercase;
}
.incentives h6 {
    font-weight: bold;
    text-transform: uppercase;
}
.incentives .form-control, .incentives .form-check-input {
    border: solid 2px black;
    border-radius: 0px;
    border-radius: 0px;
}
.form-check-input:checked {
    background-color: #0170b7;
}

tr.collapse.show{
    background-color:#f5f5f5 !important;
}
.accordion-item button, .accordion-item button:focus, .accordion-item button:not(.collapsed){
    background-color: #c3d62f;
    color: black;
    font-size: large;
    font-weight: bold;
    box-shadow: none;
}
.accordion-item {
    border: none;
}
.accordion.faq p {
    margin-left: 2rem;
    margin-right: 2rem;
}
.pagination {
    border: none;
    border-radius: 0px;
}

.page-item.active .page-link {
    background-color: #0170b7 !important;
    color: white !important;
}

.page-link{
    background-color: white !important;
    color: black !important;
    
}
.page-link:hover {
    text-decoration: underline !important;
}
.ctct-form-defaults {
    background-color: rgba(0,0,0,0)!important;
}
.spinner-border,
.spinner-grow {
    animation-duration: 1.2s !important; /* slower speed */
}
a.nav-link.nested-dropdown:hover {
    font-weight:bold!important;
}
.centered-border {
    position: absolute;
    top: 0;
    
    width: 5%; /* Adjust as desired for the length of the border */
    border-top: 2px solid ; /* Adjust as desired for the border appearance */
}
.centered-border {
    position: relative;
}


    /* Main div for border to extend to 50% from bottom left corner */

    .centered-border:after {
        content: "";
        background: black;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 50%;
        width: 1px;
    }

.img-background {
    /*    background-image: var(--custom-background-image, rgba(0,0,0,0));*/
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0,0,0,0);
    z-index: -1;
}

/* Screen sizes to show background images. Probably a better way to do this, but we can't use a css variable for min-width */
@media (min-width: 0) {
    .img-background-xs {
        background-image: var(--custom-background-image, rgba(0,0,0,0));
    }
}

@media (min-width: 576px) {
    .img-background-sm {
        background-image: var(--custom-background-image, rgba(0,0,0,0));
    }
}

@media (min-width: 768px) {
    .img-background-md {
        background-image: var(--custom-background-image, rgba(0,0,0,0));
    }
}

@media (min-width: 992px) {
    .img-background-lg {
        background-image: var(--custom-background-image, rgba(0,0,0,0));
    }
}

@media (min-width: 1200px) {
    .img-background-xl {
        background-image: var(--custom-background-image, rgba(0,0,0,0));
    }
}

@media (min-width: 1400px) {
    .img-background-xxl {
        background-image: var(--custom-background-image, rgba(0,0,0,0));
    }
}

/* Height of info boxes*/
@media (min-width: 0) {
    .info-box {
        height: auto;
    }
}

@media (min-width: 576px) {
    .info-box {
        height: auto;
    }
}

@media (min-width: 768px) {
    .info-box {
        height: auto;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .info-box {
        height: 280px;
    }
}

@media (min-width: 1200px) {
    .info-box {
        height: 200px;
    }
}

@media (min-width: 1400px) {
    .info-box {
        height: 200px;
    }
}

.line-with-bullet {
    position: relative;
    width: 100%;
    margin: 1rem 0;
}

    .line-with-bullet hr {
        border: none;
        border-top: 2px solid #c3d62f;
        margin: 0;

    }

    .line-with-bullet .bullet {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 7px;
        width: 7px;
        background-color: #333;
        border-radius: 50%;
    }

.squiggle-image-container {
    background-image: url('img/residential-contact-contractor.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 800px;
    color: white
}
.va-agency-bar-container {
    z-index: 1000 !important;
}