/* Colors */
:root {
    --color-default: #364d59;
    --color-primary: #feb900;
    --color-black: rgb(12, 12, 12);
    --color-white: #fff;
  }

.bg-product{
    background-image: linear-gradient(#ffffff5d,#ffffff30),url(../images/lasercut-industry.jpg);
    width: 100%;
    height: 340px;
    background-size: cover;
    background-position-y: center;
    color: var(--color-white);
}
.text-product h1{
    margin-top: 100px;
    text-transform: uppercase;

}
.text-product p a{
    text-decoration: none;
    color: var(--color-white);
}


/* ===========================================Products==================================================== */

#main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto; 
}


.nav-1 {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    flex: 1 1 auto;
    padding: 10px 20px;
    margin-top: 40px;
}

.nav-item-1 {
    position: relative;
    padding: 0 10px;
    margin: 0 10px;
    /* font: {
        size: 1.5em;
        weight: 700;
    } */
    color: var(--color-black);
    text-decoration: none;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: bold;
    
    &:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--color-primary);
        transition: all 500ms;
    }
    
    &.active {
        color: var(--color-primary);
        transition: all 350ms;
        
        &:before {
            width: 100%;
        }
    }
}


.portfolio {
    display: flex;
    flex-flow: row wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.project {
    position: relative;
    flex: 1 0 calc(100% - 20px);
    margin: 10px;
   
    &:hover {
        .project-info {
            background-color: rgba(grey,.5);
            
        }
    }
    
    @media (min-width: 520px) {
        flex: 0 0 calc((100% / 2) - 20px);
    }
    
    @media (min-width: 860px) {
        flex: 0 0 calc((100% / 3) - 20px);
    }
}

.project-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
   
    
}



.project-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: beige;
    background: rgba(128, 128, 128, 0.66);
    opacity: 0;
    transition: all 350ms ease-in;
    
   
    
    @media (max-width: 520px) {
        opacity: 0;
    }
}

.project-info:hover{
    opacity: 1;
}
.project-info-title {
    margin: 0 0 .5em; 
    font-size: 1.5em;
    color: var(--color-black);
    text-align: center;
    transform:uppercase;

   

}

.project-info-button {
    padding: .5em 1em;
    color: var(--color-white);
    
       text-decoration: none;
    
    /* border: 1px solid beige; */
    border-radius: 3px;
    transition: all 350ms;
    background-color: var(--color-black);
    
    &:hover {
        color: var(--color-black);
        background: var(--color-primary);
        /* border-color: var(--color-black); */
    }
}


/* -----------================================ Products-all-Css ------------------------================================ */

.Enquiry-form label{
    margin-bottom: 5px;
    margin-top: 8px;
    font-weight: 600;
}
.Enquiry-form .btn-secondary{
    background-color: var(--color-black) !important;
    

}