*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

.body-container {
    font-family: 'Lora', serif;
    height: auto;
    /*background-color: #000; *//* Fondo negro como en tu imagen 
    color: #fff; /* Texto blanco */
}
#termCond h6{
font-size: 15px;
}

header {
    position: sticky;
    top: 0;
    background-color: #000;
    padding: 15px 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   
}

.container {
    width: 80%;
    min-width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.logos h1 {
    font-size: 21px;
    font-weight: normal;
    color: #fff;
}

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

nav ul li {
    margin: 0 12px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    position: relative;
}

nav ul li a:hover {
    color: #007bff; /* Cambia el color cuando pasas el cursor */
}

nav ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -5px;
}

nav ul li a:hover::after {
    width: 100%; /* Subraya el enlace al pasar el ratón */
}
footer{
    width: 100%;
    position: relative;
    bottom: 0px;
    left: auto;
    right: auto;
    text-align: center;
    justify-content: space-between;
    background-color: #f2f3f4;
}
#listb a,img{
    display: inline;
    text-decoration: none;
    
}
#list a{
    display: block;
    text-decoration: none;
    
}
.list a{
    display: block;
    text-decoration: none;
}
.list a:hover{
    
    text-decoration: underline;
}
.listp a{
    display: inline;
    text-decoration: none;
}
.listp a:hover{
    
    text-decoration: underline;
}
.logos img{
    right: 0px;
}
.under_border{
    width: 80%;
    
}
#list a:hover{
   text-decoration: underline;
    
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.ham-menu {
    list-style: none;
    display: none; /* Initially hidden */
    margin-left: auto; /* Pushes the hamburger menu to the right */
    padding-right: 20px; /* Optional: add some padding to the right */
}

#cont-menu-info {
    display: flex;           /* Activate Flexbox */
    justify-content: space-between;  /* Ensures content is spaced */
    align-items: center;     /* Vertically aligns content in the middle */
    width: 100%;             /* Make sure it takes full width */
}
/*#cont-menu-info{
    display: none;
}*/

#ham-menu {
    flex-grow: 1;            /* Makes "Los Profesionales" take up all available space */
    text-align: left;        /* Align text to the left */
    font-size: 18px;
    padding-right: 150px;
}
#ham-menu a{
    font-size: 21px;
    text-decoration: none;
}
#ham-menu h1{
    font-size: 21px;
}


#ham-icon {
    text-align: right;       /* Aligns the hamburger icon to the right */
    padding-left: 50px;
    text-decoration: underline;
}

/* Hamburger icon styles */
#hams-icon:hover {
    text-decoration: underline;
    color: #007bff; /* Changes color on hover */
}

#hams-icon::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -5px;
}

#hams-icon:hover::after {
    width: 100%; /* Animate underline on hover */
}

/* Cart icon styles */
.carts-menus-icon:hover {
    text-decoration: underline;
    color: #007bff; /* Changes color on hover */
}

.carts-menus-icon::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -5px;
}

.carts-menus-icon:hover::after {
    width: 100%; 
}



/*#ham-icon::after {
    width: 100%; 
}*/

/* VIEWPROD PAGE CSS START */
#ham-menu-viewProd {
    flex-grow: 1;            /* Makes "Los Profesionales" take up all available space */
    text-align: left;        /* Align text to the left */
    font-size: 18px;
    padding-right: 150px;
}
#ham-menu-viewProd a{
    font-size: 21px;
    text-decoration: none;
}
#ham-menu-viewProd h1{
    font-size: 21px;
}


#ham-icon-viewProd {
    text-align: right;       /* Aligns the hamburger icon to the right */
    padding-left: 50px;
    text-decoration: underline;
}

#ham-icon-viewProd:hover {
     text-decoration: underline;
     color: #007bff; /* Cambia el color cuando pasas el cursor */
}
#ham-icon-viewProd::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -5px;
}

/* VIEWPROD PAGE CSS END */

/*GOCART PAGE CSS START*/


#ham-menu-go {
    flex-grow: 1;            /* Makes "Los Profesionales" take up all available space */
    text-align: left;        /* Align text to the left */
    font-size: 18px;
    padding-right: 130px;
}
#ham-menu-go a{
    font-size: 21px;
    text-decoration: none;
}
#ham-menu-go h1{
    font-size: 21px;
}


#ham-icon-go {
    text-align: right;       /* Aligns the hamburger icon to the right */
    padding-left: 50px;
    text-decoration: underline;
}

#ham-icon-go:hover {
     text-decoration: underline;
     color: #007bff; /* Cambia el color cuando pasas el cursor */
}
#ham-icon-go::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -5px;
}


/*GOCART PAGE CSS END*/

/*LOGIN PAGE CSS START*/


#ham-menu-log {
    flex-grow: 1;            /* Makes "Los Profesionales" take up all available space */
    text-align: left;        /* Align text to the left */
    font-size: 18px;
    padding-right: 130px;
}
#ham-menu-log a{
    font-size: 21px;
    text-decoration: none;
}
#ham-menu-log h1{
    font-size: 21px;
}


#ham-icon-log {
    text-align: right;       /* Aligns the hamburger icon to the right */
    padding-left: 50px;
    text-decoration: underline;
}

#ham-icon-log:hover {
     text-decoration: underline;
     color: #007bff; /* Cambia el color cuando pasas el cursor */
}
#ham-icon-log::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -5px;
}


/*LOGIN PAGE CSS END*/





/*SHIP PAGE CSS START*/


#ham-menu-ship {
    flex-grow: 1;            /* Makes "Los Profesionales" take up all available space */
    text-align: left;        /* Align text to the left */
    font-size: 18px;
    padding-right: 130px;
}
#ham-menu-ship a{
    font-size: 21px;
    text-decoration: none;
}
#ham-menu-ship h1{
    font-size: 21px;
}


#ham-icon-ship {
    text-align: right;       /* Aligns the hamburger icon to the right */
    padding-left: 50px;
    text-decoration: underline;
}

#ham-icon-ship:hover {
     text-decoration: underline;
     color: #007bff; /* Cambia el color cuando pasas el cursor */
}
#ham-icon-ship::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -5px;
}


/*SHIP PAGE CSS END*/


/*TRX PAGE CSS START*/


#ham-menu-trx {
    flex-grow: 1;            /* Makes "Los Profesionales" take up all available space */
    text-align: left;        /* Align text to the left */
    font-size: 18px;
    padding-right: 130px;
}
#ham-menu-trx  a{
    font-size: 21px;
    text-decoration: none;
}
#ham-menu-trx  h1{
    font-size: 21px;
}


#ham-icon-trx  {
    text-align: right;       /* Aligns the hamburger icon to the right */
    padding-left: 50px;
    text-decoration: underline;
}

#ham-icon-trx:hover {
     text-decoration: underline;
     color: #007bff; /* Cambia el color cuando pasas el cursor */
}
#ham-icon-trx::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -5px;
}


/*TRX PAGE CSS END*/





@media(max-width: 768px){

.nav-links{
    display: none;
    cursor: pointer;
}
.logos h1{
    display: none;
}

.ham-menu {
    display: block; /* Show hamburger menu */
    cursor: pointer;
    margin-left: auto; /* Pushes the hamburger menu to the right */
}

/*#ham-menu li {
 display: block;
}*/
#ham-menu h1 {
    
    font-size: 21px;
   
   
   }
   #listp{
    display: inline;
    text-decoration: none;
   }

}











/*  SLIDE MENU START/*


/* Styling for the menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Start off the screen */
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Transparent black background */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.4s ease-in-out; /* Smooth slide-in effect */
}

.mobile-menu ul {
    list-style-type: none;
    text-align: center;
}

.mobile-menu ul li {
    margin: 20px 0;
}

.mobile-menu ul li a {
    color: white;
    font-size: 24px;
    text-decoration: none;
}

/* Show the mobile menu */
.show-menu {
    right: 0; /* Slide menu to visible on screen */
}

/* Hamburger icon positioning */
#ham-icon {
    text-align: right;
}

#ham-menu {
    flex-grow: 1;
    text-align: left;
}

/* Close button styling */
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: #ff0000; /* Change to red when hovered */
}