:root{
    --sepia:#2b1f16;
    --offwhite:#f5efe4;
    --gold:#C5A059;
    --text-gold:#a67c2e;
}
body.welcome-page {
    font-family:  "Roboto", sans_serif;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
        url('../images/background.jpg');
        
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}
/*Start welcome bage*/
.welcome{
    color: var(--offwhite);
}
.btn{
    background-color: var(--gold);
    color: var(--sepia);
}
.page-1 .btn:hover{
    background-color: var(--text-gold);
    color: var(--offwhite);
}
/*End welcome bage*/
/*Start Menu bage*/
body.menu-page {
    font-family:  "Roboto", sans_serif;
    background-color: var(--offwhite);
}
/*start navbar*/
.navbar {
    background-color: var(--sepia);
}
.navbar .nav-item .nav-link{
    color: var(--offwhite);
}
.navbar .nav-item .nav-link:hover{
    color: var(--gold);
}
.navbar .nav-item .btn:hover{
    background-color: var(--text-gold);
    color: var(--offwhite);
}
.navbar-toggler-custom-icon {
    display: flex;
    width: 32px; 
    height: 32px;
    align-items: center;
    justify-content: center;
}

.navbar-toggler-custom-icon svg {
    width: 100%;  
    height: 100%; 
    fill: var(--offwhite);
}
.navbar-toggler:focus,
.navbar-toggler:focus-visible {
    outline: none !important;
    
    box-shadow: var(--gold) !important; 
}
/*End navbar*/
/*start footer*/
footer ul li a.facebook{
    width: 50px;  
}
footer ul li a.instagram{
    width: 45px; 
}
footer ul li a.tiktok{
    width: 45px;  
}
.social-icon {
    transition: all 0.3s ease; 
    cursor: pointer;
}
.social-icon:hover {
    transform: scale(1.15);
    opacity: 0.8;
}
/*End footer*/
/*End Menu bage*/