:root {
    --primary: #6B5B95;
    --highlight: #88B04B;
    --highlight2: #f5b7ff;

    --dark: #1E1D20;

    --text-primary: #FFFFFF;
    --text-secondary: #E3E3E0;

    --btn-bg-primary: #FFFFFF;
    --btn-hover-primary: #E3E3E0;

    --bs-link-hover-color: #a06ab4;

    --bg-primary: #1E1D20;
    --bg-secondary: #32264e;
    --bg-tertiary: #19161b;

    --bg-light: #fff8ff;

    --bg-footer: #f9d9ff;
    --bg-footer-2: #fae4fd;

    --focus-ring-color: #6B5B95;
    --bs-focus-ring-color: #6B5B95;

    font-family: "InterVariable", sans-serif;
    @supports (font-variation-settings: normal) {
        :root { font-family: "Inter var", sans-serif; font-optical-sizing: auto; }
    }
}

body {
    font-family: 'InterVariable', sans-serif;
    font-size: 1.125rem;
    font-weight: 350;
    font-style: normal;
    line-height: 1.55;
    position: relative;
    visibility: visible;
    color: #555;
    background-color: #FFFFFF;
}

/* Headlines / hero / menu */
h1, h2, h3, h4, h5, h6, .nav-item a {
    font-family: 'Quicksand', sans-serif;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    line-height: inherit;
    margin: 0;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--highlight2);
}

.keyfact {
    font-weight: 300;
    color: var(--primary);
}

a,
button,
img,
input {
    transition: all 0.25s ease 0s;
}

a {
    color: #333;
}

*:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
    border-radius: 0.375rem;
}

a:hover {
    text-decoration: none;
    color: var(--bs-link-hover-color);
}

.welcome-header, .generic-header, .bg-gradient-dark {
    background: radial-gradient(116.18% 118% at 50% 100%, var(--bg-secondary) 0%, var(--bg-tertiary) 41.83%, var(--bg-primary));

    svg {
        color: var(--highlight2);
    }
}

.bg-gradient-light {
    background: linear-gradient(
            to bottom,
            var(--bg-light) 0%,
            var(--bg-light) 60%,
            color-mix(in srgb, var(--bg-light) 70%, var(--bs-body-bg) 30%) 80%,
            var(--bs-body-bg) 100%
    );
}


.accordion-button {

}

.accordion-button:not(.collapsed) {
    background: radial-gradient(116.18% 118% at 50% 100%, var(--bg-secondary) 0%, var(--bg-tertiary) 41.83%, var(--bg-primary));
    color: var(--highlight2);
}

.bg-size-cover {
    background: radial-gradient(116.18% 118% at 50% 100%, var(--bg-secondary) 0%, var(--bg-tertiary) 41.83%, var(--bg-primary));
}

.contact-stripe {
    background-color: var(--bg-light);
}

#navbarNav {
    .nav-item {
        font-size: 1.25rem;
        font-weight: 500;
        transition: box-shadow 0.25s ease-in-out 0s;
    }

    .nav-item:hover {
        text-decoration: none;
        box-shadow: inset 0 -2px 0 var(--highlight2);
    }

    .active {
        text-decoration: none;
        box-shadow: inset 0 -2px 0 var(--highlight2);
    }

    a:focus-visible {
        box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
        border-radius: 0.375rem;
    }
}

.color-footer {
    background: var(--bg-footer);
}

.color-footer-2 {
    background: var(--bg-footer-2);
}

.btn-primary, .btn-primary-outline {
    padding: 12px 24px;
    border: 1px solid rgba(8, 8, 8, 0.4);
    font-weight: 700;
    font-size: 15px;
    background-color: var(--bg-primary);
    color: #FFFFFF;
    text-transform: capitalize;
    line-height: 1;
    transition: all 0.3s;
}


@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1280px) and (max-width: 1440px), only screen and (min-width: 1441px) {
    .btn-primary, .btn-primary-outline {
        padding: 16px 28px;
    }
}

.btn-primary:hover, .btn-primary-outline:hover, .btn-primary:active, .btn-primary:focus:active, .btn-primary:focus {
    background-color: transparent;
    border-color: rgba(8, 8, 8, 0.4);
    color: rgba(8, 8, 8, 0.95);
}

.btn-lg:hover, .btn-lg:active, .btn-lg:focus:active, .btn-lg:focus {
    background-color: var(--bg-light);
}

.btn-primary:hover .animate-arrow-up, .btn-primary-outline:hover .animate-arrow-up {
    -webkit-animation: moveUp 0.8s linear;
    animation: moveUp 0.8s linear;
}

.btn-primary-outline {
    margin-right: 0;
    background-color: transparent;
    color: #080808;
}

.btn-primary-outline:hover {
    background-color: #080808;
    border-color: #080808;
    color: #FFFFFF;
}

.tab-btn {
    border: 0;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    background-color: #FFFFFF;
    color: #080808;
    line-height: 1;
    border-radius: 8px;
    transition: all 0.3s;
}

h3.addr > span:nth-child(2) {
    display: none;
}

a {
    transition: all linear;
    transition-duration: 300ms;
}

.dot::before {
    display: block;
    content: "";
    top: 2px;
    width: 8px;
    height: 8px;
    background-color: #FF9330;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: -1;
    transform: translateY(-50%);
    border-radius: 100%;
}

span.addr > span:nth-child(2) {
    display: none;
}


.photo-table {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 4/3; /* keeps a consistent rectangle layout */
    margin: auto;
}


.photo-table .photo {
    position: absolute;
    object-fit: cover;
    border-radius: var(--bs-border-radius-lg);
    transition: transform 0.3s, z-index 0.3s;

    /* size restrictions */
    max-width: 400px;
    min-width: 150px;
    height: auto;
    max-height: 400px;
}

/* individual positions, rotations, and sizes */
.photo-1 {
    top: 5%;
    left: 5%;
    width: 26%;
    transform: rotate(-8deg);
}

.photo-2 {
    top: 10%;
    left: 30%;
    width: 28%;
    transform: rotate(6deg);
}

.photo-3 {
    top: 8%;
    left: 60%;
    width: 30%;
    transform: rotate(-4deg);
}

.photo-4 {
    top: 40%;
    left: 45%;
    width: 26%;
    transform: rotate(10deg);
}

.photo-5 {
    top: 45%;
    left: 20%;
    width: 28%;
    transform: rotate(-8deg);
}

/* hover effect */
.photo-table .photo:hover {
    transform: scale(1.25) rotate(0deg);
    z-index: 10;
}

/* responsive tweaks */
@media (max-width: 768px) {
    .photo-1 {
        top: 2%;
        left: 2%;
        width: 35%;
    }

    .photo-2 {
        top: 18%;
        left: 28%;
        width: 38%;
    }

    .photo-3 {
        top: 8%;
        left: 50%;
        width: 36%;
    }

    .photo-4 {
        top: 32%;
        left: 38%;
        width: 35%;
    }

    .photo-5 {
        top: 48%;
        left: 12%;
        width: 38%;
    }
}

.fa-2x {
    width: 2em;
    height: 2em;
}

.bg-light {
    background: #e7e3f5;
    background: radial-gradient(circle at center,
    rgba(247, 202, 201, 0.30) 0%, /* center */ #f8f8f8 100%); /* fade back to gray at edges */

    svg {
        color: var(--primary);
    }
}

/* Horizontal line (large screens) */
.timeline-line {
    top: 0.4em;
    left: 1em; /* container padding */
    right: 1em;
    height: 0.1em;
    z-index: 0;

    background: linear-gradient(
            to right,
            #fff 0%,
            var(--highlight2) 10%,
            var(--highlight2) 90%,
            #fff 100%
    );
}

/* Timeline Dot */
.timeline-dot {
    width: 1em; /* 16px equivalent */
    height: 1em;
    background-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Cards appear below dot */
.timeline-item .card {
    margin-top: 0.75em;
}

/* Flex layout spacing */
.timeline-horizontal {
    gap: 2em;
}

/* Small screens: vertical timeline with left-aligned dot and line */
@media (max-width: 991.98px) {

    .timeline-dot {
        position: absolute;
        left: -0.1em; /* move dot to left of entry */
        top: 1.5em;
    }

    .timeline-line {
        width: 0.1em;
        height: 100%;

        background: linear-gradient(
                to bottom,
                #fff 0%,
                var(--highlight2) 10%,
                var(--highlight2) 90%,
                #fff 100%
        );
    }
}


.references picture {
    transition: opacity .2s ease-in-out, filter .2s ease-in-out;

    filter: grayscale(100%);
    opacity: 0.5;
}

.references picture:hover {
    filter: grayscale(0%);
    opacity: 1;
}