:root {
    --dark-khaki: #322A14ff;
    --dusty-olive: #718154ff;
    --frosted-mint: #E6FCCCff;
    --dark-coffee: #301C0Fff;
    --white: #FFFFFFff;

}

body {
    scroll-behavior: smooth;
}

.hero {
    background-image: url('/media/images/cup.jpg');
    background-size: cover;
    background-color: var(--dusty-olive);
    background-blend-mode: darken;
    background-position: center;
    color: var(--white);
    padding: 120px 0;
}



/* Palette overrides for Bootstrap-based landing page */
.navbar,
.navbar-dark.bg-dark {
    background-color: var(--dark-coffee) !important;
}
.navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--frosted-mint) !important;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--white) !important;
}

.bg-light {
    background-color: var(--frosted-mint) !important;
}

.bg-main {
    background-color: var(--dusty-olive) !important;
}

.bg-secondary {
    background-color: var(--dark-khaki) !important;
}

.text-primary {
    color: var(--dusty-olive) !important;
}
.text-secondary {
    color: var(--dark-khaki) !important;
}

.text-light {
    color: var(--frosted-mint) !important;
}

.section {
    padding: 60px 0;
    background-color: var(--frosted-mint);
    color: var(--dark-coffee);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
}

p {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.card,
.accordion-item,
.form-control {
    background-color: var(--white);
    color: var(--dark-coffee);
    border-color: var(--dark-khaki);
}

.card {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--dark-coffee) 12%, transparent);
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--dark-khaki) !important;
    border-color: var(--dark-khaki) !important;
    color: var(--white) !important;
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--dusty-olive) !important;
    border-color: var(--dusty-olive) !important;
    color: var(--white) !important;
}

.accordion-button {
    background-color: var(--white);
    color: var(--dark-coffee);
    border: 1px solid var(--dark-khaki);
}

.accordion-button:not(.collapsed) {
    background-color: var(--dark-khaki);
    color: var(--white);
}

.accordion-body {
    background-color: var(--frosted-mint);
}

footer,
footer .bg-dark {
    background-color: var(--dark-coffee) !important;
    color: var(--white) !important;
}

footer a,
footer .text-white {
    color: var(--white) !important;
}

/* Reviews Carousel */
#reviewsCarousel {
    width: 100%;
}

.reviews-swiper {
    width: 100%;
    padding-bottom: 2rem;
}

.reviews-swiper .swiper-wrapper {
    align-items: stretch;
}

.reviews-swiper .swiper-slide {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.review-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    min-height: 320px;
}

.review-card p {
    margin-bottom: 0;
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--dusty-olive);
}

.swiper-pagination-bullet {
    background: var(--dusty-olive);
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

@media (max-width: 767px) {
    .reviews-swiper .swiper-button-prev,
    .reviews-swiper .swiper-button-next {
        display: none;
    }
}

#sizes .offering-card {
    min-height: 385px;
    display: flex;
    flex-direction: column;
}

#sizes .offering-card img {
    height: 240px;
    object-fit: cover;
}

#sizes .offering-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.carousel-inner {
    min-height: 300px;
}

.carousel-item {
    padding: 20px 0;
}



.hero .btn {
    min-width: 160px;
}

.section h2,
.hero h1,
.card h5,
.team-info-main h5,
.team-info-extra h6,
footer h5 {
    color: var(--dusty-olive);
}


.team-card:hover {
    box-shadow: 0 8px 16px color-mix(in srgb, var(--dark-coffee) 20%, transparent);
}

.team-card {
    height: 300;
}

/* Scrollbar styling */
body::-webkit-scrollbar {
  width: 1rem;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px var(--dusty-olive);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--dark-khaki);
  border-radius: 35px;
  outline: 1px solid var(--frosted-mint);
}
/* End Scrollbar styling */