@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@0400,500;600;700;800&display=swap');

* {


  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}


body {
  font-family: 'poppins', san-serif;
  background-color: #6b3315;
  word-wrap: break-word;
}

img {
  max-width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

   
    header
   
    {
         background-image: url(Imag/Fondo.jpeg);
         background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
     min-height: 80vh;
     padding: 80px 0;
background-color: #883905;
    }
    .Rd {


      background-color: rgba(110, 110, 110, 0.915);
    
    
      display: flex;
    
      height: 40px;
      width: 100%;
    
      position: absolute;
    
      top: 2px;
    
      margin: 0;
      align-content: center;
      line-height: 55px;
    }
    
    .Rd a {
      text-shadow: 1px 1px #0000008f;
      font-weight: 600;
    }
    
    .RedSocialF {
    
      margin-left: 60px;
      width: 28px;
    
    
      height: 30px;
      margin-top: 2px;
    }
    
    .RedSocialX {
    
      margin-left: 10px;
      width: 28px;
      margin-top: 2px;
    
    }
    
    .RedSocialI {
    
      margin-left: 10px;
      width: 28px;
    
    
      margin-top: 2px;
    }
    
    .RedSocialG {
    
      margin-left: 10px;
      width: 30px;
    
      margin-right: 15px;
      margin-top: 2px;
    }
    
    .RedSocialI:hover {
      border-radius: 1%;
      box-shadow: 0px 0px 6px 0px rgba(18, 134, 115, 0.75);
      transition: 0.6s ease;
    }
    
    .RedSocialG:hover {
      border-radius: 1%;
      box-shadow: 0px 0px 6px 0px rgba(18, 134, 115, 0.75);
      transition: 0.6s ease;
    }
    
    .RedSocialX:hover {
      border-radius: 1%;
      box-shadow: 0px 0px 6px 0px rgba(18, 134, 115, 2);
      transition: 0.6s ease;
    }
    
    .RedSocialF:hover {
      border-radius: 1%;
      box-shadow: 0px 0px 6px 0px rgba(18, 134, 115, 2);
      transition: 0.6s ease;
    }
    
    .Tel {
   

      overflow: hidden;
      justify-content: space-between;
      display: flex;
      margin-right: 45px;
      position: relative;
      animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      margin-top: 0;
      margin-bottom: 0;
      font-size: 22px;
      padding-top: 0;
      padding-bottom: 0px;
    }
    
    a {
      color: rgb(255, 255, 255);
    }
    
    a:hover {
      color: rgb(5, 5, 5);
      font-weight: 800;
    }
    
    a:active {
      color: blue;
    }
    
    a[href^="tel:"]:before {
      content: "\260E";
      color: #c56a39;
    
      justify-content: space-between;
      margin-right: 10px;
      margin-left: 60px;
      line-height: 5px;
      padding-top: 8px;
      font-size: 25px;
      text-shadow: 1px 1px 1px black;
    
    }
    
    /*---------------Logo*/
.logo-e {
 
  display: flex;
  padding-top: 0px;
  height: 90;
  line-height: 40px;
  position: absolute;
  margin-left: 0;
  width: 320px;
  top: 40px;
  left: -80px;
 
}

.logo-e:hover {
transition: 0.56s ease;
}
/* ---------------------- */
    
    .menu {
    
      position: absolute;
      top: 12px;
      left: 0;
      right: 0;
    
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 0;
      padding-top: 25px;
      line-height: 6px;
    }
    
    .logo {
      color: rgb(53, 53, 50);
      font-size: 25px;
      font-weight: 600;
      text-transform: uppercase;
      text-align: left;
    
    
    
      line-height: 45px;
    
      display: flex;
    
    
    
    
    
    
    }
    
    /* Nomber Empresa*/
.logo2 {
  display: flex;
  position: absolute;
  top: 120px;
  width: 100%;
  height: 100px;
  align-items: center;
 }
 
 .log{
 
  display: flex;
  color: rgb(246, 241, 241);
  font-size: clamp(1.1rem, 5vw, 4.2rem);
  text-shadow: 4px 4px 4px rgb(0, 0, 0);
  position: relative;

  align-items: center;
  left: 3%;
  height: 75px;
  margin: 0px auto;
  border-radius: 20px;
  background-color: rgba(121, 121, 121, 0.903);
 }
 
 .logo2 .log a:hover {
   width: 100%;
   color: rgba(152, 152, 152, 0.64);
 }
 
 
 /*----------------------------------------------*/
.portad1{

  box-shadow:1px 2px 2px #080808;
  position:relative;
  width: 100%;
 background-color: #0b16a5;
  top:0px;
  margin: 0px auto;

}
.portad1 img{
 
  height: 90;
     box-shadow:1px 2px 2px #7b0404;
   
    }
    .menu  .navbar ul li 
    {
       
        float: left;
       
    }

    .menu .navbar ul li a {
      font-size: 20px;
      padding: 15px;
      color: #ffffff;
      ;
      font-weight: 800;
      display: block;
      margin-top: 8px;
      margin-left: 10px;
      margin-right: 0;
    
      height: 30px;
    
      text-shadow: 1px 2px 2px black,
        0px 1px 0px black,
        -1px 0px 0px black,
        0px -1px 0px black;
    }
    

     .menu  .navbar ul li a:hover
     { 
      color: #da7605;
  font-weight: 900;
  -webkit-transform:scale(1.1);transform:scale(1.1);
  
  transition: 0.55s ease; 
  box-shadow: 2px 2px 2px 2px #fffdfd;
  border-radius: 0px;
     }
     #menu
     {
         display: none;
     }
     .menu-icono
     {
         width: 25px;
 
     }

     
     .menu label
     {
         cursor: pointer;
         display: none;
     }
 
     .header-content
     {
         display: flex;
     }
    

   

     
     
     .header-txt
     {
    position: relative;
    top: 70px;


margin-left: 0px;
 margin: 0px auto;
  }
  /* All You Hard To Get Metals ! T*/
.header-txt h2 {
  position: relative;
  width: 100%;
  color: #ffffff;
  margin: 0px auto;
  font-size: clamp(1.5rem, 2.5vw, 3.5rem);
  display: block;
  padding-left: 0%;
  margin-top: 15px;
  margin-bottom: 50px;
  text-shadow: 2px 2px 2px rgb(0, 0, 0);

}

     .header-txt h1
     {
         font-size: 45px;
         color: #fcfcfc;
         line-height: 1.1;
         margin-top: 190px;
         margin-bottom: 25px;
         margin-left: 30px;
         margin-right: 0;
         text-align-last: center;
         text-shadow:1px 2px 2px #000000;
         
         left: 2px;
       
      
         
     }
 
     .header-txt span
     {
         color: #ffffff;
 text-shadow: 1px 2px 2px rgb(0, 0, 0);
     }
     
     .header-txt p
     {
      position: relative;
      font-size: 25px;
      color: #000000;
      margin-bottom: 55px;
      margin-left: 10px;
      margin-right: 10px;
      left: 0px;
     
      background-color: rgba(224, 224, 224, 0.7);
      text-align: center;
      border-radius: 20px;
      top: 25px;
      text-shadow: 0px 1px 1px rgb(184, 184, 184);
     }

     /* All You Hard To Get Metals ! T*/

.Titulo2 {
  position: absolute;
  width: 100%;
  color: #ffffff;
  margin: 0px auto;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
display: block;
  text-align: center;
  top: 240px;
  left: 0px;
  padding-left: 0px;
  text-shadow: 2px 2px 2px rgb(0, 0, 0);
margin-bottom: 50px;
}

/* ----------------------------------*/
     .butons
     {
        display: flex;
        align-content: center;
        justify-content: center;
     }

     .btn-1 ,.btn-2,.btn-3{
        display: inline-block;
        padding: 11px 35px;
        border: 2px solid #000000;
        border-radius: 25px;
        margin-right: 0px;
        font-size: 19px;
        color:rgb(255, 255, 255);
        margin-left: 30%;
      position: relative;
    margin-bottom: 5px;
       margin-top: 20px;
     }

     .btn-2:hover {
             background-color: #ddd9d8;
      }

      .popular 
      {
        
        padding: 60px ;
        text-align: center;
        margin-right: 80px;
    
        padding-left: 0;

 
      align-content: center;
      }
      h2 {color: #302f2f;
        font-size: 35px;
        margin-bottom: 60px;
        
      
      }
     
      .popular-content
      {
      
       display: flex;
        align-content: center;
        justify-content: space-between;
    
      }

      .popular-content img
      {
        width:  200px;
        justify-content: space-between;
        margin-right: 1px;
        background-color: #386c4a;
      }

      .Product-container
      {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 50px;
       
       width: 100%;
       margin: 0px auto;
     left: 0px;
       
      }
      
      .Product-1 {
        background-color:rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
        transition: 0.6s ease;

   
}
      .Product-1.active img{
        z-index: 3;
        width: 700px;
        height: 700px;
      }
        
      .Product-1::after {
       position: relative;
	content: '';
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0, 70, 12, 0.459);
      }
      
.Product-1:hover{
  box-shadow: 0px 0px 20px 0px rgba(228, 224, 224, 0.90);
      }
      .Product-txt{
        padding: 50px 40px;
       
      }
      h3{
        font-size: 20px;
        color: #000000;
        margin-bottom: 20px;
        text-align: center;

       

	transition: 0.55s ease;
	overflow: hidden;
      }
      h3 :hover{
        text-align: center;
	transform: translate(-50%, -50%);
      }
      .Price {
        
        justify-content: space-between;
        text-align: center;
        color: #999593;

      }
       h2{
text-align: center;
  
}
      .Price p {
        font-size: 17px;
        color: #ff5a2c;
        margin-right: 0;
      }
      .Contac  {
        padding: 150px 300px;
      
       
      
      }
.Contac {
  border: 3px black;
text-justify: auto;
}
      .Contact-content
      {
        background-color: #fff;
        text-align: center;
        padding: 50px;
        border-radius: 50px;
       
      }

      form{
        display: flex;
        justify-content: center;
        margin-top: 20px;
        height: 60px;
        margin-top: 80px;
      }

      input{
        padding:18px 25px ;
        background-color: #24221f;
        border: 0;
        border-radius: 25px;
        outline: none;
        margin-right: 14px;
        color: #fff;
        font-size: 17px;
      }
      
    ::placeholder{
        color: aliceblue;
        font-size: 17px;
    text-align: center;
    
      }
      .btn-3{
        background-color:#0b16a5;
        cursor: pointer;
        margin-right: 0;


      }
      .footer{
        display: flex;
        
        padding: 50px 0 ;
  
      }
     
      link {
        margin: 0px auto;
        width: 100%;
      
        top: 5%;
        position: relative;
        background-color: #0b16a5;
      }
      
      .link ul {
      
      
        position: relative;
        margin-top: 10px;
      
      
      }
      
      .link ul li a {
      
        font-size: 20px;
        color: #f8f8f8;
        margin: 0px auto;
        display: flex;
        font-weight: 400;
        margin-left: -15px;
        width: 100%;
        margin-right: 20px;
      
      }
      
      .link ul li a:hover {
        background-color: #ffffff;
        color: #0e110f;
      }
      .Contact-container h3{
        height: 20px;
     
        padding-top: 40px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        
      }

      .logo-final{
        
        width: 60px;
      
        position: relative;
        display: flex;
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 25px;
 
      }
      
      .Rdf {
        background-color: rgba(224, 224, 224, 0.5);
      
        margin: 0;
      
      
      
        display: flex;
      
        height: 40px;
      
      
        position: relative;
      
        top: 0px;
        left: 0px;
      
        align-content: center;
        line-height: 20px;
      
      }
      
        .email{
          position: relative;
    
          font-size: 18px;
     font-weight: 400;
width: 100%;

padding: 0px;
margin: 0 auto;
   
         

        }
        .email1{
        
          width: 30px;
          margin-right: 20px;
       height: 30px;
     
        }

        .email2{
          position: relative;
    
          font-size: 18px;
     font-weight: 400;
width: 100%;

padding: 0px;
margin: 0 auto;
        
   
         

        }
        
        .email-2{
          position: relative;
          width: 30px;
         
       height: 30px;
    margin-right: 8px;
        }

        .email3{
   
          position: relative;
          text-align: center;
    width: 100%;
          font-size: 18px;
      
margin-top: 0px;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
        }
       
        .email-3{
          width: 31px;
        margin-left: 4px;
       height: 33px;

       position: relative;
padding-top:  15px;
overflow: hidden;
padding-top: 0;
        }
        .legal{
    
        font-size: 12px;
        justify-content: space-between;
      
        }
      
     
        .legal h4 {
margin-left: 10px;
text-align: center;
color: #ffffff;
        }

.Contact h3{
font-size: 25px;
font-variant-ligatures: discretionary-ligatures;
color: #ffffff;

text-shadow: 2px 2px 2px rgb(0, 0, 0);

}
.Contact p{
  font-size: 19px;
  color: aliceblue;
  text-align: justify;
  border: 3px  solid rgba(0, 0, 0, 0.479);
  border-radius: 10px;
 margin-left: 20px;
padding: 3% 5% 3% 5%;
 text-shadow: 2px 2px 2px black;
 width: 100%;
 display: flex;
}

.portad {
position: relative;
  width: 250px;
  height: 300px;
display: flex;

left:0%;
top: 160px;
margin-bottom: 60px;
border-radius: 15px;
padding: 0px ;
       
margin: 0px auto;
}

@media (max-width:991px) {
  body{
   
  }
    .Rd{
     
      display: flex;
    
     left: 0;
  width:100%;
    padding-left: 2px;
     
      padding-right: 0px;
      
    }
    .RedSocialG{
     position: relative;
        
      width: 50px;
  
   
     height: 40px;
     margin-top: 0px;
     margin-left: 2px;
     }
    .RedSocialF{
      position: relative;
      
      width: 50px;
  margin-left: 2px;
   
     
     margin-top: 0px;
     }
     .RedSocialX{
      position: relative;
       margin-left: 2px;
       width: 50px;
      
       margin-top: 0px;
      }
      .RedSocialI{
        position: relative;
       margin-left: 2px;
       width: 50px;
    margin-top: 0px;
   
      }
    .Tel{
      position: relative;
  
   font-size: 18px;
   top: 8px;
   line-height: 30px;
  margin-right: 0px;
   width:100%;
   margin-left: 0px;
   height: 30px;
   color: #ffffff;
   text-align: center;
  
   padding: 0;
   
  
     }
     
     a[href^="tel:"]:before {
      content: "\260E";
  
  padding-right: 0;
      margin-right: 6px;
   margin-left: 15px;
  
  }
.Tel a{
  color: #ffffff;
}

a:hover{
  color: rgb(255, 255, 255);
}

a:active{
  color: blue;
}
  .mov{
    position: relative;
    display: none;
    
  }

  
.Contact h3{
  font-size: 25px;
  font-variant-ligatures: discretionary-ligatures;
  color: #C0C0C0;
  
  text-shadow: 2px 2px 2px black;
  
  }
  .Contact p{
    font-size: 19px;
    color: aliceblue;
    text-align: justify;
    border: 3px  solid rgba(207, 203, 203, 0.479);
    border-radius: 10px;
   margin-left: 1%;
   padding-left:2% ;
   padding-right: 2%;
   text-shadow: 2px 2px 2px black;
   width: 98%;
   
   display: flex;
  }
  .Titulo2 {

    margin-left: 0px;
    font-size: clamp(0.8rem, 2.5vw, 3.5rem);
top: 220px;




  }
  .btn-1 ,.btn-2,.btn-3{
    display: inline-block;
    padding: 11px 35px;
    border: 2px solid #000000;
    border-radius: 25px;
   margin: 10px 20px 20px auto;
    font-size: 19px;
  
    right: 20%;
    
    position: relative;
 }
  .Img2{
    margin-top: -50px;
    width: 90%;
 padding-left: 11%;
  }
  .logo-e {
width: 140px;
top: 60px;
left: 0px;
  }
 
 .logo-e {
    width: 116px;
    top: 55px;
  }

  .logo2 .log {
      color: white;
    height: 50px;
   
display: flex;
padding: 3% 3% 3% 3%;
margin-left: 17%;
    text-align: center;
font-weight: 600;
font-size: clamp(1.3rem, 3.5vw, 4.5rem);
    top: -22px;
    text-shadow: 2px 2px 2px black;
  }

              .menu {
           
         
             top:25px ;
             right: 15px;
             }
              .menu label {
             display: initial;

             }
               .menu  .navbar {
                position: absolute;
                top: 120%;
                left: 0;
                right: 0;
                background-color: #c0c0c0;
                display: none;
                z-index: 1;
                }
              .menu  .navbar ul li a:hover{
                color: #060000;
              }
              .menu  .navbar ul li{
                width: 100%;
              }
              .menu .navbar ul li a {
                font-size: 18px;
                color: blanchedalmond;
                margin-bottom: -5px;
                margin-top: 1px;
                width: 100%;
              }
              #menu:checked ~ .navbar{
                display:initial ;
              }
             .header{
              min-height: 0vh;
              padding: 80px 30px 50px 30px;
             } 
             .header-txt {
         margin: 0px auto;
          
              top: 40px;
            }
            .portad{
         padding: 0px ;
       
          margin: 0px auto;
            }
             .header-txt h1 {
              font-size: 40px;
    margin-bottom: 15px;


    text-align: center;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;

    top: 0%;
    text-shadow: 2px 2px 2px #000000;
             }
              .header-txt p{
                padding: 3% 3% 3% 3%;
                width: 100%;
           margin-left: 0px;
             left: 0px;

                right: 0px;
                text-align: left;
              }
            
              
   
             .butons {
              justify-content: center;
             }
             .btn-2:last-of-type{
              margin-right: 0;
              
             }
             .btn-2{
             align-content: center;
             margin-left: 160px ;
             }
             .popular{
              display: none;
              
             }
            
             .Product-container
             {
              grid-template-columns: repeat(1,1fr);
              gap:50px ;
             }

             .Contac  {
              padding: 0px 0px;
            
             margin: 0px;
            
            }
      .Contac {
        border: 3px black;
 
      }
      .link ul li a {
    
            font-size: 20px;
            color: #f8f8f8;
            margin: 0px auto;
            display: flex;
            font-weight: 400;
          margin-left: -5px;
            width: 100%;
            margin-right: 10px;
          
          }
              
             }
              

             .Product-1 img{
              padding: 30px;
              width: 400%;
             }
           
form{
  flex-direction: column;
}
input{
  margin: 0 0 20px 0;
}
.footer{
  flex-direction: column;
  text-align: center;
}

.link{
  align-self: center;
  padding: 0;
  margin: 0;
 
position: relative;
bottom: 20px;

height: 20px;
width: 300px;
top: 0px;
left: 0;
right: 60px;
padding-top: 0px;
}
.link ul {
  display: flex;
margin: 0;
position: relative;
left: 0px;
top: 0px;
bottom: 0px;

bottom: 200PX;
}
.Rdf{
   

  


  display: flex;
  
  height: 40px;
  width: 100%;
  
  position: relative;
  
 top: 40px;
 
  margin: 0;
  align-content: center;
  line-height: 40px;
 
  left: 0;
  }
  .logo-final{
        
    width: 40px;

   position: relative;
    top: 5px;

   left: 10px;
  }
  


/*icono whatsapp*/
        .whatsapp-button {
            position: fixed;
            bottom: 15px;
            right: 15px;
            background-color: #4cc370;
            color: #fff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 24px;
            line-height: 50px;
            box-shadow: 2px 2px 3px #999;
            text-decoration: none;
        }

        .whatsapp-button:hover {
            background-color: #3d9e5a;
        }