html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@font-face {
    font-family: raleway;
    src: url(/fonts/Raleway-Regular.ttf);
}

html {
    position: relative;
    min-height: 100%;
    font-family: raleway, sans-serif !important;
}

.carousel-caption a {
    color: white !important; /* Ensure white text for links in carousel */
    text-decoration: none; /* Remove underline for consistency */
}

.centered {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto; /* Override Bootstrap's default bottom positioning */
    width: auto; /* Prevent stretching */
    text-align: center; /* Ensure text is centered */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    backdrop-filter: blur(6px); /* Keep blur effect */
    padding: 15px; /* Add padding for better appearance */
    border-radius: 5px; /* Optional: Match .my-button styling */
}

/*.my-button {
    display: inline-block;
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
} */

    /*.my-button:hover {
        background: rgba(0, 0, 0, 0.8);*/ /* Optional: Hover effect */
    /*}*/

body {
    margin-bottom: 60px;
    font-family: raleway, sans-serif !important;
}

/* sets main color buttons */
.main-green-bg {
    background-color: #008000;
}

.main-red-bg {
    background-color: #9b332a !important;
    border-color: #9b332a !important;
}

    .main-red-bg.btn-primary:hover,
    .main-red-bg.btn-primary:focus {
        background-color: #7a2721 !important;
        /* Darker shade for hover */
        border-color: #7a2721 !important;
    }

a.main-red-bg, button.main-red-bg, .white-font-bold, a.main-green-bg {
    color: #fff !important;
}

a {
    color: #9b332a !important;
}

.main-red-text {
    color: #9b332a !important;
}

.sec-tan-bg {
    background-color: #fcfcf4 !important;
    border-color: #fcfcf4 !important;
}

/* remove transparency of menu links */
ul.navbar-nav li.nav-item a.nav-link, span.navbar-text a.nav-link {
    color: #f9f9f9 !important;
    display: inline-block !important;
    padding: 0px 10px !important;
}

/* manually adjust carousel max height */
.carousel .carousel-item img {
    max-height: 480px !important;
    object-fit: cover !important;
    min-width: 100% !important;
}

.carousel .carousel-link {
    color: #f9f9f9 !important;
    text-decoration: none; /* Remove underline from <a> */
}

.cart-img {
    max-width: 80px;
}

.detail-img {
    max-width: 200px;
}

.text-small {
    font-size: .75em;
}

#site-message {
    display: none;
    padding: 1em;
}

.table-padding tr td {
    padding: 10px;
}

.item-sku-cart {
    width: 100px !important;
}

@media only screen and (max-width: 600px) {
    #cart-table {
        font-size: .75em !important;
    }
}

/* Navbar background */
.navbar {
    background-color: #f9f9f9 !important;
    /* White background */
}

/* Navbar links */
.navbar.navbar-light .navbar-nav .nav-item .nav-link,
.navbar.navbar-light .navbar-text .nav-link {
    color: #9b332a !important;
    /* Reddish-brown text */
}

/* Hover and active states for links */
.navbar.navbar-light .navbar-nav .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-link:focus,
.navbar.navbar-light .navbar-nav .nav-link.active {
    color: #7a2721 !important;
    /* Slightly darker shade for hover/active */
}

/* Navbar brand (if present) */
.navbar.navbar-light .navbar-brand {
    color: #9b332a !important;
    /* Reddish-brown for brand */
}

.navbar.navbar-light .navbar-brand:hover,
.navbar.navbar-light .navbar-brand:focus {
    color: #7a2721 !important;
    /* Darker shade for hover */
}

/* Navbar text */
.navbar.navbar-light .navbar-text {
    color: #9b332a !important;
    /* Reddish-brown for text */
}

/* Navbar toggler icon */
.navbar.navbar-light .navbar-toggler {
    border-color: #9b332a !important;
    /* Reddish-brown border */
    color: #9b332a !important;
    /* Reddish-brown icon */
}

/*
.navbar.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%239b332a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
*/

/* remove transparency of menu links */
/*
ul.navbar-nav li.nav-item a.nav-link, span.navbar-text a.nav-link {
    color: #9b332a !important;
    display: inline-block !important;
    padding: 0px 10px !important;
}
*/

/* Social media icons div */
.social-icons {
    background-color: #f9f9f9 !important;
    /* White background to match navbar */
}

/* Social media icons */
/*.social-icons .nav-link {
    color: #9b332a !important;
}*/

/*.social-icons .nav-link svg {
    fill: #9b332a !important;
}*/

/*.social-icons .nav-link:hover,
.social-icons .nav-link:focus {
    color: #7a2721 !important;
}*/

/*.social-icons .nav-link:hover svg,
.social-icons .nav-link:focus svg {
    fill: #7a2721 !important;
}*/

/* Override inline color:black */
/*.social-icons .nav-link[style] {
    color: #9b332a !important;
}*/