#mainNav .navbar-nav li.nav-item a.nav-link {
    color: #cca000;
}

#mainNav .navbar-nav li.nav-item a.nav-link:hover {
    color: #FDFFFF;
}

a {
    color: #C0955A;
}

a:hover {
    color: #FDF4EF;
}

.footer {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #FDFFFF;
    color: #D2B68A;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #7997A4 !important;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: #C2DAE3 !important;
}

.masthead-bella {
    width: 100%; 
    height: auto; 
    max-width: 100%;
    max-height: 400px;
}

.modal {
    --bs-modal-margin: 1.75rem;
}

.image-small {
    max-width: 80%;
    height: auto;
}

.container-sm {
    max-width: 500px; 
    margin: auto; 
}

.carousel-inner {
    max-width: 500px; 
    margin: auto; 

.carousel-item img {
    max-width: 200%; 
    height: auto;
}

.portfolio .portfolio-item .portfolio-item-caption {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    background-color: #C2DAE3;
}

.portfolio-modal-title {
    font-size: 24px; 
    color: #333; 
    text-transform: uppercase; 
    margin-bottom: 0; 
}

.text-secondary {
    --bs-text-opacity: 1;
    color: #cca000 !important;
}

.divider-custom .divider-custom-icon {
    color: #cca000;
    font-size: 2rem;
}

.divider-custom .divider-custom-line {
    width: 100%;
    max-width: 7rem;
    height: 0.25rem;
    background-color: #cca000;
    border-radius: 1rem;
    border-color: #2c3e50;
}