* {
    padding: 0%;
    margin: 0%;
    box-shadow: none;
}

.security {
    position: absolute;
    display: flex;
    color: #fdfdfd;
    padding-left: 700px;
    padding-top: 10px;

    a {
        text-decoration: none;
        color: #fdfdfd;
        padding: 10px;
        justify-content: center;
        text-align: center;
        align-items: center;

    }
}

.search-product {

    padding: 35px;
    padding-top: 5%;
    justify-content: center;
    align-items: center;
    text-align: center;

    .catagory {

        p a {
            text-decoration: none;
            color: #6a6666;
            font-family: "Roboto", sans-serif;

            i {
                color: rgb(211, 211, 32);
                transform: scaleX(-70%);
                font-size: 20px;
            }

            .email {
                background: none;

                font-size: 25px;
            }

        }
    }

    .search {

        form {
            input {
                background: #fff none repeat scroll 0 0;
                border-top: 2px solid #d5d5d5;
                border-bottom: 2px solid #d5d5d5;
                border-left: 2px solid #d5d5d5;
                border-right: 1px solid #d5d5d5;
                margin: 0;
                width: 328px;
                padding: 20px 0;
                height: 60px;
            }

            button {
                background: #f39c12 none repeat scroll 0 0;
                border: medium none;
                color: #fff;
                font-size: 24px;
                height: 60px;
                margin-left: -4px;
                padding-bottom: 4px;
                width: 55px;

            }
        }
    }
}

.barra-tienda {

    display: flex;
    text-align: center;
    justify-content: space-between;


    ul {
        display: flex;
        text-align: center;
        gap: 2em;

        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
        unicode-bidi: isolate;
        font-size: 25px;
        font-weight: 400;
        font-weight: bold;

        li {
            list-style: none;
            text-align: center;

            text-align: -webkit-match-parent;
            unicode-bidi: isolate;

            a {
                text-decoration: none;
                text-align: center;
                color: rgb(80, 76, 76);
                font-weight: 400;
                font-weight: bold;
            }
        }
    }

    .car {
        padding-right: 40px;
        justify-content: center;
        text-align: right;

        p {
            color: rgb(99, 95, 95);
            justify-content: center;
            align-items: center;
            font-size: 30px;

            i {
                padding-top: 25px;
                color: black;
                justify-content: center;
                align-items: center;
                font-size: 30PX;
                color: #f39c12;

            }

            sup {
                font-size: 25px;
            }
        }

    }

    .logo {
        padding-left: 125px;
        padding-top: 15px;
        text-decoration: none;
        color: black;


        h2 {
            font-size: 40px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            color: rgb(44, 44, 240);
        }
    }
}

.contenido {
    
   
    display: grid;
    padding-right: 20px;
    width: 95%;
    justify-content: center;
    align-items: center;
    grid-template-columns: 20% 75%;
    gap: 5em;
    padding: 15px ;    
    margin: 20px 50px;
    z-index: 1000px;     
    position: relative;    
    overflow: hidden;

}

.barralef {
    width: 250px;
    height: 100%;
    border: 1px solid;
    background-color: none;
    border: 1px solid rgb(49, 214, 34);
}

.product-gallery {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;   
    left: -80px;
    overflow: hidden;
    padding:  20px;
    margin: 20px;
    overflow: hidden;
   
    justify-content: center;
    align-items: center;  
   

   .detalles-del-producto{
      
     overflow: hidden;
      
        position: relative;
        height: 600px;
        justify-content: center;
        align-items: center;
        
    }

   .add-to-cart-btn{

    background-color: #28a745;      /* Color de fondo verde */
    color: white;                   /* Color de icono blanco */
    font-size: 1.5em;               /* Tamaño del icono */
    width: 60px;                    /* Anchura del botón */
    height: 60px;                   /* Altura del botón */
    border: none;                   /* Sin borde */
    border-radius: 50%;             /* Hace que el botón sea un círculo */
    cursor: pointer;                /* Cursor de mano al pasar por encima */
    display: flex;                  /* Flexbox para centrar el icono */
    align-items: center;            /* Centra el icono verticalmente */
    justify-content: center;        /* Centra el icono horizontalmente */
    box-shadow: 0 4px 6px rgb(250, 249, 249); /* Añade una sombra suave */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
   

    position: absolute;
    top: 50%;
    left: 75%;
    display: flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: transform 0.5s ease; /* Transición para el icono al hover */
    i{
        
        font-size: 35px;
       
       
        border-radius: 50%;            /* Redondea la sombra del icono */
        padding: 5px;                  /* Añade un poco de padding al icono */
        transition: transform 0.5s ease; /* Transición para el icono al hover */
       
    }
    
   }
   .add-to-cart-btn:hover{
   
    background-color: #218838;      /* Color más oscuro en hover */
    transform: scale(1.1);   
    i{
        font-size: 40px;
        transition: transform 0.2s ease;
    }
   }

   .add-to-cart-btn:active{
    background-color: #1e7e34;      /* Color aún más oscuro al hacer clic */
    transform: scale(1);  
   }
   .add-to-cart-btn:focus{
    outline: none;                  /* Elimina el borde predeterminado del enfoque */
    box-shadow: 0 0 0 3px rgba(72, 180, 97, 0.5); /* Sombra adicional para enfoque */
   }
   figure{
   
    overflow: hidden;
    height: 400px;
   
   
    
   }

    img {
        margin: 25px;
        position: relative;
        width: 25%;      
        transition: all .5s ease;      
        overflow: hidden;

    }

    img:hover {
        transition: all .5s ease;
        transform: scale(1.4);
      
       
    }

    a {
        color: black;
    }

    .product-card {
        position: relative;
        overflow: hidden;
        width:75vw;
        height:auto;
        padding: 20px;
        margin: 10px;
        



    }

    .product-title {
        font-size: 18px;
        text-transform: uppercase;
    }

    .info-product {
        
        .product-price {
           position: relative;
           overflow: auto;
            font-size: 1.2em;
            /* Aumenta el tamaño de la fuente */
            font-weight: bold;
            /* Hace que el texto sea más grueso */
            color: #ff4d4f;
            /* Un rojo atractivo para llamar la atención */
            padding: 5px 10px;
            /* Añade algo de espacio alrededor del precio */
            background-color: #f8f8f8;
            /* Un fondo ligero para hacer resaltar el texto */
            border-radius: 5px;
            /* Bordes redondeados para un look más suave */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            /* Añade una sombra ligera */
            display: inline-block;
            /* Asegura que el padding y background se aplican correctamente */
            text-align: center;
            /* Centra el texto dentro del span */
            margin-top: 10px;
        }

        .product-price::before {
            position: relative;
            content: 'Precio: ';
            /* Texto que aparece antes del precio */
            font-weight: normal;
            /* Hace que el prefijo no sea tan grueso como el precio */
            color: #333;
        }
    }

   

  
}







@media only screen and (max-width : 1200px) {
    .barralef {
       display: none;
    }
    .contenido{
        position: relative;
        
        padding-left: 10% ;
       
       
        .product-gallery {
            position: relative;
            width: 90vw;
           
           
           display: grid;
           grid-template-columns: auto auto;
            padding-right: 10%;    
            margin: 5%;
           
        
           .detalles-del-producto{
              
             overflow: hidden;
             
                position: relative;
                height:auto;
                justify-content: center;
                align-items: center;

                
            }   

            .product-card {
               position: relative;
               justify-content: center;
               align-items: center;
               
               
                img{
                    width: 45%;
                }


                
        
            }
           
            
           
        
          
        }
       
    
    }
  
}

@media only screen and (max-width : 1000px) {
    .barra-tienda{
        display: none;
    }
  
}


@media only screen and (max-width : 666px) {
    .barralef {
       display: none;
    }
    body{
        padding-left: 0px;
        position: relative;
    }
    .contenido{
        
       
        justify-content: center;
        align-items: center;
        width:85%;
        position: relative;
        padding-left: 20%;
        
       
       
       
        .product-gallery {
            position: relative;
            width: 90vw;
           
           
           display: grid;
           grid-template-columns: auto ;
            padding-right: 10%;    
            margin: 5%;
           
        
          
            .product-card {
               position: relative;
               justify-content: center;
               align-items: center;
               
               
                img{
                    width: 85%;
                }


                
        
            }
           
            
           
        
          
        }
       
    
    }
  
}

@media only screen and (max-width : 465px) {
    
       
    .search-product {

        padding: 35px;
        padding-top: 5%;
        justify-content: center;
        align-items: center;
        text-align: center;
    
        .catagory {
    
            p a {
                text-decoration: none;
                color: #6a6666;
                font-family: "Roboto", sans-serif;
    
                i {
                    color: rgb(211, 211, 32);
                    transform: scaleX(-70%);
                    font-size: 20px;
                }
    
                .email {
                    background: none;
    
                    font-size: 25px;
                }
    
            }
        }
    
        .search {
    
            form {
                input {
                    background: #fff none repeat scroll 0 0;
                    border-top: 2px solid #d5d5d5;
                    border-bottom: 2px solid #d5d5d5;
                    border-left: 2px solid #d5d5d5;
                    border-right: 1px solid #d5d5d5;
                    margin: 0;
                    width: 250px;
                    padding: 20px 0;
                    height: 60px;
                }
    
                button {
                    background: #f39c12 none repeat scroll 0 0;
                    border: medium none;
                    color: #fff;
                    font-size: 24px;
                    height: 60px;
                    margin-left: -4px;
                    padding-bottom: 4px;
                    width: 55px;
    
                }
            }
        }
    }
   
}