@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* nav bar styles*/

.headline p{
    color:#DA4735;
    margin:0;
    font-weight: 600;
}

.cart, .profile {
    text-align: center;
}

.navbar {
    color: rgb(218, 71, 53);
    font-weight:600;
    background-image: url(../images/bkg-navbar-large.svg);
}

nav ul {
    list-style-type: none;
    flex: 1 1 auto;
}

.navbar-brand{
    display: flex;
    align-items:center;
    gap: 1em;
}

.navbar-brand img{
    margin-bottom: 1em;
}

.navbar-expand .navbar-nav{
    align-items:flex-end;
}

li.cart{
    padding:0;
}

.navbar-nav > li, .navbar-expand .navbar-nav .nav-link {
    padding: 0 3px;
}

.navbar > .container {
    justify-content: center;
}

.navbar a:link, .navbar a:visited { color: #DA4735; }
.navbar a.current:link, .navbar a.current:visited { color: #DA4735; }

.navbar a:focus, .navbar a:hover, .navbar a:active { color: #DA4735; }

.navbar a, .navbar a.current {
    text-decoration: none;
}

 .cart .nav-link::before, .profile .nav-link::before {
        height: 3em;
        width: 4.25em;
        content:"";
        display:block;
        margin: 2px auto;
    }

    .cart .nav-link::before {
        background: 5% center / contain no-repeat url(../images/Cart_Icon.png);
    }

    .profile .nav-link::before{
        background: center / contain no-repeat url(../images/Profile_Icon.png)
    }

.navbar a:hover{
    text-decoration: underline;
}

footer a:hover{
    text-decoration:underline;
}

/* main body styles */

body {
    font-family: "lato", sans-serif !important;
    background-color: #FFF7F7 !important;
    margin-top: 80px !important;
    margin: 0;
    color: #4B220F !important;
}

main{
    margin-top:150px;
}

h1, h2, h3, h4 {
    color: #4B220F;
}

.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #DA4735 !important;
    --bs-btn-border-color: #DA4735 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #c33421 !important;
    --bs-btn-hover-border-color: #c33421 !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #c33421 !important;
    --bs-btn-active-border-color: #c33421 !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #DA4735 !important;
    --bs-btn-disabled-border-color: #DA4735 !important;
}

.card {
    --bs-card-bg: #FFF7F7 !important;
    --bs-card-color: #4B220F !important;
}

.action-bar {
  background-color: #DA4735 !important;
    --bs-card-border-radius: 0.375rem;
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(0.375rem - 1px);
    --bs-card-cap-padding-y: 0.5rem;
    border-radius: var(--bs-card-border-radius);
}

/* START Changes/Additions Kaitlyn added 6/10/25 */
.hero {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* END Changes/Additions Kaitlyn added 6/10/25 */


/* Footer bar */
footer {
    background-color: #4B220F;
    color: #ffffff;
}

footer ul {
    list-style-type: none;
}

footer a:link, footer a:visited { color: #ffffff; }
footer a.current:link, footer a.current:visited { color: #ffffff; }

footer a:focus, footer a:hover, footer a:active { color: #ffffff; }

footer a, footer a.current {
    text-decoration: none;
}

@media screen and (max-width: 992px) {
    .navbar.fixed-top {
        top: auto;
        bottom: 0;
        background-color:rgb(218, 71, 53);
        font-size:11px;
    }

    .navbar{
        background-image:none;
        display: inline-flex !important;
        align-items: center !important;
        justify-content:space-between !important;
        width:100% !important;
    }

    .navbar-brand{
        position:fixed;
        top:0;
        left: 0px;
        right: 0px;
        width: 100%;
        padding-left:1em;
        padding-right:1em;
        background-image: url(../images/bkg-navbar-paper-cup.svg);
    }

    .navbar-nav > li:not(:first-of-type) {
    border-left: 1px solid #fff;
}

    .navbar a:link,
    .navbar a:visited,
    .navbar a.current:link,
    .navbar a.current:visited, 
    .navbar a:focus,
    .navbar a:hover,
    .navbar a:active {
        color: #FFF7F7;
    }

    /* Rule for setting up common nav icon styles */
    .navbar-nav .nav-link::before {
        height: 3em;
        width: 4.25em;
        content:"";
        display:block;
        margin: 2px auto 10px;
        background: center / contain no-repeat;
        flex: 1 1 auto;
        align-items:flex-start;

        /* style this with height, width, and any other properties common to all the icons */
    }

    /* Example rule for adding a nav icon to a specific item */
    .ourchocolates .nav-link::before {
        background-image:url(../images/chocolate_icon.svg);
        /* Set the icon as content or background-image */
    }

    .forwholesalers .nav-link::before{
        background-image:url(../images/wholesaler_boxes_icon.svg);
    }

    .about .nav-link::before{
        background-image:url(../images/about_icon.svg);
    }

    .cart .nav-link::before{
     background: 5% center / contain no-repeat url(../images/cart_icon.svg);
    }

    .profile .nav-link::before{
        background-image:url(../images/profile_icon.svg);
        padding-right: 10px;
    }

    footer{
        margin-bottom:4em;
    }
}

@media screen and (max-width:576px){
        a.nav-link{
        padding:0 !important;
    }
}