html{scroll-behavior:smooth}

/* Home */
/* ------------------------------------------- */

.item--1 { grid-area: item1; }
.item--2 { grid-area: item2; }
.item--3 { grid-area: item3; }
.item--4 { grid-area: item4; }
.item--5 { grid-area: item5; }
.item--6 { grid-area: item6; }
.item--7 { grid-area: item7; }
.item--8 { grid-area: item8; }
.item--9 { grid-area: item9; }

.ngItems{
    margin-top: 20px;
}

.item {
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.item:not(:last-child){
    margin-bottom: 1.5rem;
}

.item__action {
    background: rgb(0 54 99 / 60%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid #fff;

    --outline : 15px;
    outline: 1px solid white;
    outline-offset: calc(var(--outline) - (var(--outline)*2)) !important;

    transition: all 0.5s ease-in-out;
    transform: scale(1);

    padding: var(--outline);
}

.item:hover .item__action{
    transition: all 0.5s ease-in-out;
    transform: scale(1);
} 

.item img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.item__action a h3, .item__action a i {
    text-transform: uppercase;
    font-weight: bold !important;
    color: #fff;
}

.item__action a h3{
    font-size: 18px;
    position: relative;
}

.item__action a h3:before {
    content: '';
    height: 2px;
    width: 0%;
    background: #fff;
    position: absolute;
    bottom: -7px;
    left: 2px;
    right: 0;
    margin: 0 auto;

    transition: all 0.5s ease-in-out;
}

.item__action:hover a h3:before {
    transition: all 0.5s ease-in-out;
    width: 50%;
}

.item__action a i {
    font-size: 20px;
    margin-bottom: 1rem;
}

.item__action a {
    line-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width:481px) {
    .ngItems{
    
        --ngGridColumns: repeat(2,1fr);
        --ngGridRow    : repeat(5, 250px);

        display: grid;
        gap: 15px;
        grid-template-columns: var(--ngGridColumns);
        grid-template-rows: var(--ngGridRow);
      
        grid-template-areas: 
        "item1 item2"
        "item3 item4"
        "item5 item6"
        "item7 item8"
        "item9 item9";
    }

    .item{
        margin-bottom: 0 !important;
    }
}

@media screen and (min-width:992px) {
    .ngItems{
    
        --ngGridColumns: repeat(3,1fr);
        --ngGridRow    : repeat(3, 300px);

        grid-template-areas: 
        "item1 item2 item3"
        "item4 item5 item6"
        "item7 item8 item9";
    }
}

@media screen and (min-width:1140px) {
    .ngItems{
    
        --ngGridColumns: 360px 1fr 1fr 1fr 1fr;
        --ngGridRow    : 180px 180px;

        grid-template-areas: 
        "item1 item2 item3 item4 item5"
        "item1 item6 item7 item8 item9";
    }

    /* .item__action {
        transform: scale(0);
    } */
}


/* Enginnering */
/* ------------------------------------------- */
.wwd-lists ul {
    list-style: none;
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.wwd-lists ul li{
    flex: 1 0 265px;
    margin: 0;
}

.wwd-lists a {
    text-align: center;
    padding: 15px;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    box-shadow: 0 5px 12px rgb(0 0 0 / 10%) !important;
}

.wwd-lists img {
    max-width: 5rem !important;
    margin-bottom: 10px;
}

.wwd-lists h3 {
    font-size: 1.2em;
}

.wwd-lists a:hover {
    background: #ED1B24;
}

.wwd-lists a:hover > * {
    color: #fff;
}

.wwd-lists a:hover > img {
    filter: invert(1);
}

/* Product */
/* ------------------------------------------- */

.post-type-archive-product .elementor-element-2af293d6, .single-product .elementor-element-b94f227{ display: none; }

.post-type-archive-product .elementor-element-52c2f186, .single-product .elementor-element-0efd7b3{
    box-shadow: inset 0 20px 15px rgb(0 0 0 / 10%);
}

.tax-product_cat .elementor-element-2af293d6{ display: none; }

.tax-product_cat .elementor-element-52c2f186{ box-shadow: inset 0 20px 15px rgb(0 0 0 / 10%); }

.filter-wrap .header {
    padding: 8px 17px;
    font-size: 1.3em;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
}

.filter-wrap .header::after {
    content: '';
    position: absolute;
    display: block;
    left: 15px;
    width: 50%;
    height: 3px;
    background: #e91a23;
}

.filter-wrap .nav > li > a {
    border-radius: 0;
    padding: 10px 14px;
}

.filter-wrap .nav > li {
    margin: 0;
    padding: 0 !important;
}

.filter-wrap .nav {
    padding: 0;
}

.filter-wrap .nav li > a > span:after{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    font-size: 10px;
}

.filter .nav > li > ul > li > a {
    border-radius: 0;
    padding: 10px 5px;
}

.filter-wrap .nav li > a > span:after{
    content: '\f067' !important;
}

.nav li.open > a > span:after {
    content: '\f068' !important;
}

.filter-wrap .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: #1f6997;
    color: #fff !important;
}

.filter .nav > li > a:hover {
    background: #1f6997;
    color: #fff;
}

ul.grandCild a {
    border-radius: 0;
    padding: 10px 10px;
    font-size: 11px;
}

ul.grandCild a:hover {
    background: #228ecf;
}

/* Product - Single Page */
/* ------------------------------------------- */
.single-col-1 {
    background: #fff;
    margin: 0 15px;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}

.elementor-element-3b37bb6 .elementor-column-wrap, .single-box {
    background: #fff !important;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
    padding: 38px 15px !important;
    border-radius: 10px;
}

.elementor-element-3b37bb6 .product_meta {
    border-bottom: 0;
    padding: 0;
}

section.elementor-element.elementor-element-e67871e {
    margin: 0 15px;
}

@media  (max-width:1024px) {
    .single-col-1 {
        padding: 40px 0px;
    }
}

.single-product_advantage-wrap .header{
    margin-bottom: 2rem;
}

.single-product_advantage-wrap .advs-list{
    list-style: none;
    padding: 0;
}

.single-product_advantage-wrap .advs-item::before {

    --listColor : #ED1B24;

    content: '\f559';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: block;
    padding: 5px 0px;
    color: var( --listColor);
    align-self: flex-start;
}

.single-product_advantage-wrap .advs-item {
    position: relative;
    display: flex;
    flex-grow: 1;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
}