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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* ######################################################################### */
/* ########################### MAIN STRUCTURE ############################## */
/* ######################################################################### */

.hero {
    width: 100vw;
    height: 100vh;
    /* background-image: linear-gradient(rgb(42, 42, 55, 0.8), rgb(42, 42, 55, 0.8)); */
    background: #2a2a37;
    position: relative;
    /* display: flex;
    padding: 0 5%;
    align-items: center;
    justify-content: center; */
}

.logo_nav {
    width: 210px;
    height: 50px;
    z-index: 1;
}

.logo_content {
    position: relative;
    width: 200px;
    height: 200px;
    z-index: 1;
}

/* ######################################################################### */
/* ########################### BACKGROUND VIDEO ############################ */
/* ######################################################################### */

.background-video {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
}

@media (min-aspect-ratio: 16/9) {
    .background-video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    .background-video {
        width: auto;
        height: 100%;
    }
}


/* ######################################################################### */
/* ########################### NAVEGATION MENU ############################# */
/* ######################################################################### */

nav {
    display: flex;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 3%;
    align-items: center;
    justify-content: space-between;
}

nav ul li {
    list-style: none;
    display: inline-block;
    margin-left: 40px;
}
nav ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 17px;
}

nav ul li a:hover {
    font-weight: bold;
    color: #ffc000;
}

/* For underline effect */
nav ul li a {
    display: inline-block;
    position: relative;
  }
  
  nav ul li a::after {
    content: '\25e4';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffc000;
    transform-origin: bottom right;
    transition: transform 0.10s ease-out;
  }
  
  nav ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

/* ######################################################################### */
/* ################################# CONTENT ############################### */
/* ######################################################################### */

.content {
    display: block;
    height: min-content;
    text-align: center;
}

.content h1 {
    position: relative;
    /* color: cornflowerblue; */
    color: #ffc000;
    font-size: 50px;
    z-index: 1;
    line-height: 50px;
}

/* ######################################################################### */
/* ###########################                ############################## */
/* ######################################################################### */


.title-1 {
    padding: 70px 0px 50px 0px;
}
.title-2 {
    padding: 20px 0px 0px 0px;
}
    .title-1 h1,
    .title-2 h1 {
        font-family: "Raleway", sans-serif;
        font-size: clamp(2rem, 4.28vw, 3.21rem);;
    }


.showcase {
    display: flex;
    width: 100%;
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}

    .shelf {
        display: flex; 
        flex-direction: row; 
        flex-wrap: wrap; 
        width: 50vw;
        width: fit-content; 
        padding: 0px 0px 0px 0px; 
        align-items: center; 
        justify-content: center;
    }

        .drawer {
            padding: 0px 20px 0px 20px;
        }

img {
    /* width: 300px; */
    /* height: auto; */
    width: auto;
    height: 75px;
}