@font-face {
    font-family: spaceGrotesk;
    src: url('../images/font/SpaceGrotesk-Bold.ttf');
}
@font-face {
    font-family: spaceGroteskLight;
    src: url('../images/font/SpaceGrotesk-Medium.ttf');
}
html {
    scroll-behavior: smooth;
}
a {
    scroll-behavior: smooth;
}
body
{
    font-family: spaceGrotesk;
    background-color: #000000;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('../images/others/Texture.png');
    background-size: cover;
    opacity: 0.2; 
}
h1
{
    font-size: 52px
}
.font-light
{
    font-family: spaceGroteskLight;
}
.yellow-border
{
    border-top: 4px solid #ffd041;
    border-right: 4px solid #ffd041;
    border-left: 4px solid #ffd041;
    border-radius: 50px  50px 0px 0px;
}

.dark-border
{
    border-bottom: 4px solid #000000;
    border-right: 4px solid #000000;
    border-left: 4px solid #000000;
    border-radius: 0px  0px 50px 50px;
}

.custom-btn
{
    text-decoration: none !important;
    color: black;
    padding: 7px 20px;
    border-radius: 50px;
}

.nav-logo
{
    max-width: 270px;
}
.footer-logo
{
    max-width: 200px;
}
#section1
{
    background: linear-gradient(45deg, #000000d8,  #644c04b2,#ffc002ef);
    padding: 50px 50px 0px 50px;
}

#section2
{
    background: linear-gradient(45deg,  #c99805d2,#ffc002c4);
    padding: 0px 50px 50px 50px;
}

#section3
{
    background-image: url('../images/others/drink-edit.png');
    background-size: cover;
}
.ribbon
{
    background-color: #ffbf00;
    padding: 10px;
    border-radius: 20px 0px 0px 20px;
}





/* Styles for devices with a maximum width of 767px (typical for mobile devices) */
@media (max-width: 767px) {
   
    h1
    {
        font-size: 32px;
    }
    .navbar-collapse
    {
        margin-top: 10px;
        background-color: rgb(31, 30, 30);
        padding: 10px;
        border-radius: 10px;
        border: 2px solid #ffd041;
    }
    nav ul li a{
        color: rgb(255, 226, 60) !important;
    } 
    .nav-logo
    {
        max-width: 200px;
    }
    .footer-logo
    {
        max-width: 200px;
    }
    #section1 
    {
        padding: 10px 10px 0px 10px;
    }
    #section2 
    {
        padding: 0px 10px 10px 10px;
    }
    .ribbon
    {
        font-size: 18px;
    }
}