* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

@font-face {
    font-family: 'Poppins';
    src: url('../assets/fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: 'Roboto';
    src: url('../assets/fonts/Roboto_Regular.ttf');
}

@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/MontserratAlternates-Regular.ttf');
}

@font-face {
    font-family: 'Pacifico';
    src: url('../assets/fonts/pacifico.ttf');
}




.font-pacifico {
    font-family: 'Pacifico';
}

.letra-naranja{
    color: rgb(245, 98, 30);
}


/* WRAP */
.wrap {
    flex-wrap: wrap;
}
.nowrap {
    flex-wrap: nowrap;
}

/* FlexBox */
.flex {
    display: flex;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
.justify-center {
    justify-content: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}
.justify-evenly{
    justify-content: space-evenly;
}
.align-center {
    align-items: center;
}
.align-start {
    align-items: start;
}
.align-end {
    align-items: end;
}


/* Paddings */
.p-5{
    padding: 5px;
}
.p-10{
    padding: 10px;
}


/* Margins */
.m-5{
    margin: 5px;
}
.m-10{
    margin: 10px;
}
.m-20{
    margin: 20px;
}


/* Gaps */
.gap-5{
    gap: 5px;
}
.gap-10{
    gap: 10px;
}
.gap-15{
    gap: 15px;
}

 li {
    list-style: none;
 }

 a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
 }

 a:hover {
    color: orange;
 }


 
/* HEADER */
header {
    position: relative;
    padding: 0 2rem;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.9),
        rgba(0,0,0,0.1));
    
    /* border-bottom: 1px solid blue; */
}

.navbar {
    width: 100%;
    height: 90px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a {
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar .links {
    display: flex;
    gap: 2rem;
}

.navbar .toggle_btn {
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

/* DROPDOWN MENU */
.dropdown_menu {
    display: none;
    position: absolute;
    right: 2rem;
    top: 90px;
    height: 0;
    width: 300px;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow: hidden;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu.open {
    height: 240px;
}

.dropdown_menu li {
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}





/* Home container */
.home-container {
    /* background-color: rgba(128, 128, 128, 0.4); */
    max-width: 1200px;
}
.home-container img {
    width: 200px;
}
.naranja-palido{
    color: rgb(228, 169, 82);
}
.welcome-container {
    margin: 20px auto;
    padding: 30px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.4);
}
.welcome-container h2 {
    margin: 30px auto;
}
.welcome-container p {
    font-size: 20px;
}
.home-button{
    width: 150px;
    text-align: center;
    margin: 25px;
    color: #fff;
    border-radius: 15px;
    padding: 10px;
    cursor: pointer;
    background-color: orange;
    transition: 0.3s;
}
.home-button a {
    font-size: 18px;
}
.home-button a:hover {
    color: #fff;
}
.home-button:hover {
    color: #fff;
    background-color: rgb(247, 90, 28);
}





/* Main Container */
.main-container{
    /* border: 1px solid orange; */
    width: 90%;
    max-width: 1200px;
    margin: 10px auto;
    height: auto;
    min-height: calc(100vh - 180px);
}


/* products container */
.products-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Contact Container */
.contact-container {
    margin: auto;
    padding: 20px;
    width: 350px;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.418);
    border-radius: 20px;
}



/* Product Card */
.string-code{
    color: rgb(85, 116, 177);
    font-size: 15px;
}
.product-card{
    margin: 10px;
    width: 350px;
    height: 500px;
    overflow: hidden;
    border-radius: 10px;
    background-color: rgb(21, 32, 54);
    border: 1px solid gray;
}
.product-card .image{
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.product-card img {
    width: 100%;
}
.body-card{
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: space-between;
}
.footer-card{
    padding: 10px;
}
.button-link{
    padding: 5px;
    width: 100px;
    text-align: center;
    color: white;
    background-color: rgb(241, 153, 71);
    border-radius: 10px;
    transition: all 0.4s ease-in-out;
}
.button-link:hover {
    background-color: rgb(231, 97, 8);
    color: white;
    cursor: pointer;
}




/* Product info Card */
.product-info-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.product-info-card {
    border-radius: 15px;
    padding: 10px;
    width: 350px;
    height: 500px;
    border: 1px solid grey;
    overflow: hidden;
    background-color: rgb(32, 32, 53);
}
.product-title {
    color: rgb(235, 135, 69);
}
.product-info-image {
    width: 350px;
    height: 500px;
    border: 1px solid grey;
    overflow: hidden;
    border-radius: 15px;
}
.product-info-image img {
    width: auto;
    height: 100%;
}
.product-box-info {
    /* border: 1px solid rgb(173, 175, 250); */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    background-color: rgb(38, 40, 117);
    padding: 5px;
    height: 55px;
    font-size: 15px;
    border-radius: 10px;
}



/* Category Selector */
.category-selector {
    /* border: 1px solid purple; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, .2);
    max-width: 1200px;
}
.category-selector select {
    background-color: rgba(0, 0, 0, 0.76);
    font-size: medium;
    color: white;
    border-radius: 10px;
    padding: 5px;
    height: 35px;
    width: 250px;
}
.category-selector select .selector-count {
    color: green;
}





/* Footer */
.footer {
    width: 100%;
    height: 90px;
    /* background-color: linear-gradient(
        to bottom,
        rgba(0,0,0,0.1),
        rgba(0,0,0,0.9)); */
    background-color: rgb(235, 111, 28);

    /* border-top: 1px solid green; */
}
.logo-footer {
    width: 70px;
}





/* RESPONSIVE DESIGN */
@media (max-width: 992px){
    .navbar .links,
    .navbar .action_btn {
        display: none;
    }

    .navbar .toggle_btn {
        display: block;
    }

    .dropdown_menu {
        display: block;
    }

    .main-container{
        width: 95%;
    }
}

@media (max-width: 576px){
    .dropdown_menu {
        left: 2rem;
        width: unset;
    }
    .main-container{
        width: 98%;
    }

    .product-info-card{
        width: 98%;
        height: 600px;
    }

    .footer {
        flex-direction: column;
        padding-top: 10px;
        height: auto;
    }
}