/* Bootstrap 5 plus icon svg */
/* 
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg> 
*/
/* Bootstrap 5 dash icon svg */
/*
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
  <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
</svg>
*/

.hero-image-co {
    background-image: url('../assets/images/contact/contact.png');
    min-height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* accordion ----- ----- */

.accordion-item {
    border: none;
}

.accordion-button {
    font-family: var(--our-font-family);
    color: var(--our-black-2);
    font-size: 18px;
    line-height: 24px;
    background-color: var(--our-white-2);
    border: none;
}

.accordion-button:focus {
    box-shadow: none;
}


.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' fill='%231F1F1F' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    transition: all 0.5s;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231F1F1F' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
    background-color: var(--our-white-2);
    color: var(--our-black-2);
}

.accordion-body {
    font-family: var(--our-font-family);
    color: var(--our-black-3);
    background-color: var(--our-white-1);
    padding: 20px 30px 20px 20px;
}


/* css media queries ----- ----- */

@media only screen and (min-width: 400px) {
    .hero-image-co {
        min-height: 250px;
    }
}

@media only screen and (min-width: 768px) {
    .hero-image-co {
        min-height: 500px;
    }
}