:root {
    --blush: #E9BEBE;
    --gray: #7D7474;
    --mint: #D1EFE4;
    --slate: #BBBBBB;
    --dust: #EEEEEE;
}

html, body {
    background-color: var(--blush);
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-drag: none;
}

/* have to use !important here to override Bootstrap's background color */

.bg-body-tertiary {
    background-color: var(--blush) !important;
}

.BB--logo {
    width: 40%;
    margin-bottom: 10px;
}

.btn-outline-success {
    color: var(--gray);
    border-color: var(--gray);
}

.btn-outline-success:hover {
    background-color: var(--mint);
    color: var(--gray);
    border-color: var(--gray);
}

.nav-link:hover {
    background-color: var(--mint);
}

.dropdown-item:hover {
    background-color: var(--mint);
}

#BB--home-header {
    background-color: var(--mint);
    color: var(--gray);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.BB--home--wedding-gallery--caption-header, .BB--home--wedding-gallery--caption-credit {
    color: var(--gray);
    background-color: var(--blush);
}

.carousel {
}

footer {
    background-color: var(--gray);
    color: var(--blush);
    font-size: .75em;
    bottom: 0;
    width: 100%;
    padding: 10px;
    position: fixed;
}

.mint-bg {
    background-color: rgba(209,239, 228, .5);
}

#moreReviews {
    display: block;
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 3em;
}

.see-more a {
    text-decoration: none;
}

.gray-text {
    color: var(--gray);
}

.blush-text {
    color: var(--blush);
}

.home, .service-menu {
    margin-top: 3em;
    display: flex;
    gap: 3em;
    justify-content: center;
    align-items: center;
}

.home-left {
    place-content: center;
}

.home-right img {
    width: 50vw;
}

.home-left h1 {
    font-size: 5vw;
}

.home-left h3, .service-left h3, .service-right h3 {
    font-size: 3.5vw;
}

.home-left p, .service-left p, .service-right p {
    font-size: 2.5vw;
    font-weight: 300;
}

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

.service-left, .service-right {
    width: 50%;
}

.blog .card {
    background-color: var(--blush);
    color: var(--gray);
}

.card-img-top {
    height: 50vh; /* Set a fixed height */
    object-fit: cover; /* Ensures the image scales properly */
    width: 100%; /* Ensures the image spans the card width */
}

.team-img {
    width: 35vw;
}

.team-card {
    width: 35vw;
    margin: auto;
    text-align: center;
    color: var(--gray);
    background-color: var(--mint);
}

.row {
    margin-bottom: 1.5em;
}

.blog-post {
    display: inline-block;
    text-align: center;
}

.blog-post h1 {
    font-size: 5vw;
    color: var(--gray);
    text-align: center;
}

.blog-post img {
    width: 65vw;
    margin-left: auto;
    margin-right: auto;
}

.byline img {
    width: 4vw;
    margin-right: 2vw;
    border-radius: 10%;
    border: none;
    padding: 0;
}

.byline {
    margin-bottom: 3vh;
    text-align: center;
    background-color: var(--mint);
    width: 65vw;
    padding: 5px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}

.byline p {
    color: var(--gray);
    font-family: inherit;
    font-size: 2.3vw;
}

.blog-content p {
    color: var(--gray);
    font-family: inherit;
    font-size: 1.5vw;
}
.blog-content {
    width: 65vw;
    text-align: left;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.blog-post hr {
    width: 65vw;
    margin-left: auto;
    margin-right: auto;
}

.blog-content h1 {
    font-size: 3vw;
    text-align: left;
}

/* Responsive media queries */
@media (min-width: 601px) {
    .team-mbl {
        display: none;
    }
}
@media (max-width: 600px) {
    .team {
        display: none;
    }
}

.team-mbl {
    color: var(--gray);
    margin-left: 1.5em;
}

.team-mbl h2 {
    background-color: var(--slate);
    margin-right: 1.5em;
    text-align: center;
    box-shadow: .25px .25px .25px .25px var(--dust);
    border-radius: 3px;
    color: var(--dust);
}

.team-mbl p {
    margin-right: 1.5em;
    font-style: italic;
}

.mb-3 {
    width: 60%;
    margin: auto;
    color: var(--gray);
}

/* Contact Page */

.mb-3 input::placeholder {
    color: var(--gray);
}

.mb-3 input:focus, .mb-3 textarea:focus {
    color: var(--gray);
    background-color: var(--mint);
    border: none;
}

.contact .see-more {
    width: 60%;
    margin: auto;
    text-align: center;
}