.page {
    box-sizing: content-box; /* Overrides Bootstrap setting page to border box*/
    position: relative;
}




.accordion-item:nth-child(even) {
    background-color: #f8f9fa; /* Light gray for even items */
}

/* Default Button Style */
.accordion-button {
    font-weight: bold;
    background-color: #e3f2fd; 
    color: #333; 
    border: none;
}

/* Active/Expanded Button Style */
.accordion-button:not(.collapsed) {
    background-color: #cfe2ff; /* Slightly darker blue when expanded */
    color: #333; /* Keep text readable */
    border-left: 4px solid #182957; /* Add a left border for emphasis */
}

/* Border & Shadow for Better Visibility */
.accordion-item {
    border-radius: 5px;
    margin-bottom: 5px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
}

.accordion-button:hover {
    background-color: #d9ecf7;
    color: #333; 
}

/* Testimoninals Slider */

.slider-controls {
    position: relative;
    width: max-content;
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
}

.slick-dots {
    position: relative;
    margin: 0 !important;
    padding: 0 4em !important;
    bottom: initial;
}

.prev-slide, .next-slide {
    color: inherit;
    display: block;
    width: 42px;
    height: 42px;
    line-height: 1;
    font-size: 1em;
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translate(0, -50%);
    
    &:before {
    content: "";
    display: inline-block;
    transition: all .15s;
    opacity: 1;
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f178";
    font-size: 1.85em;
    color: var(--medium-gray);
}
}

.prev-slide {
    left: 0;
    
    &:before {
        transform: rotate(180deg);
    }
}

.next-slide {
    right: 0;
}

.slick-dots {
    list-style: none;
    margin: .5em -5px 0;
    padding: 0;
    line-height: 0;

    & li {
        display: inline-block;
        vertical-align: top;
        margin: 0 4px;
        width: 10px;
        height: 10px;

        & button {
            color: inherit;
            font-size: 0;
            margin: 0;
            padding: 0;
            outline: 0;
            cursor: pointer;
            transition: all .15s;
            border: 0;
            outline: 0;
            position: relative;
            width: 10px;
            height: 10px;
            background: var(--light-gray);
            border-radius: 50%;
        }

        & button:before {
            display:none;
        }

        &.slick-active button {
            background: var(--red);
        }
    }
}

.number-block-wrap {
    position: absolute;
    top: calc(var(--gutter) * -1);
    left: var(--gutter);
    width: 5em;

    .number-block {
        position: relative;
        padding-bottom: 100%;
        background-color: var(--blue-gray);
    }

& span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--white);
    font-size: 2em;
    font-family: var(--font-headline);
    font-weight: 700;
}

& img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 80%;
}
}

/* ------- Form Styling ------- */
.form-select {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 1px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #000000;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    max-width: 100%;
    width: 250px;
    padding: 0.5em;
    font-size: 1em;
}
.form-select:invalid {
    color: #333;
    background-color: #ffffffde;
    border: 1px solid #FFF;
}
.form-select:valid {
    color: #333;
}

.form-select option {
    background-color: #f8f9fa;
    color: #495057;
}