@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@200;300;400;500;700&display=swap");

@font-face {
    font-family: 'Diastema';
    src: url('Diastema Bold.woff') format('woff'), /* Modern Browsers */
         url('Diastema Bold.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    font-display: swap;
}

:root {
    --bs-font-sans-serif: "Spartan", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --bb-color-primary: #9C7F5B;
    --bb-color-secondary: #c9a67b;

    --carousel-offset: 80px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

header {
    position: fixed;
}

body {
    margin: 0;
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(23, 31, 56, 0);
}

.divider {
    width: 100%;
    height: 1rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, .1), inset 0 0.125em 0.5em rgba(0, 0, 0, .15);
}

section >* .display-1 {
    font-family: "Diastema" !important;
}

a {
    color: #9C7F5B;
    text-decoration: none;
}

.row >* p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
}

div {
    overflow: hidden;
}

.fw-500 {
    font-weight:500;
}

.feature-icon-small {
    min-width: 3.75rem !important;
    max-width: 3.75rem !important;
    height: 3.75rem !important;
    padding-top: 0.25rem;
    color: white !important;
    background-color: var(--bb-color-primary) !important;
}

a.btn-primary {
    background-color: var(--bb-color-primary) !important;
    border-color: var(--bb-color-primary) !important;
}


/* custom layout */
.cl-color-primary {
    color: var(--bb-color-primary);
}

/* carousel restyle */
.carousel {
    margin-bottom: var(--carousel-offset);
    overflow:visible;
}
.carousel div {
    overflow:visible;
}
.carousel-indicators {
    bottom: calc(var(--carousel-offset) * -1);
}
.carousel-caption {
    bottom: calc(var(--carousel-offset) * -1 + 1.25rem);
}
/* carousel phone mockup */
.carousel-item .pm-p {
    position: relative;
    top: 0;
    left: 0;
    width:calc(100% - 120px) !important;
    margin: auto !important;
    background-color:white;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.carousel-item .pm-1 {
    position: relative;
    top: 0;
    left: 0;
}
.carousel-item .pm-2 {
    width: calc(100% - 4%) !important;
    height: calc(100% - 2%) !important;
    position: absolute;
    top: 1%;
    left: 2%;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/* accordion restyle */
:root {
    --bs-primary-bg-subtle: var(--bb-color-primary) !important;
}
.accordion {
    --bs-accordion-btn-padding-y: 1rem;
}
.accordion-body {
    font-size: small;
}
.accordion-button:not(.collapsed) {
    background-color: var(--bb-color-secondary) !important
}
.accordion-button:focus {
    z-index: 3;
    border-color: var(--bs-accordion-btn-focus-border-color);
    outline: 0;
    box-shadow: none;
}

/* headroom adjustments */
.headroom {
    background-color:gray;
    z-index: 999;
    will-change: transform;
    background-color: inherit;
    transition: all 0.2s ease;
}
.headroom--pinned {
    transform: translateY(0%);
    display: block;
}
.headroom--unpinned {
    transform: translateY(-100%);
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .headroom {
        transition: none;
    }
}