.navTransparent {
    background: linear-gradient(90deg, #2D2D2E 0.01%, #2A2A2C 21.64%, #212223 48.56%, #1C1B1E 62.5%, #141615 82.14%, #0F0F0F 100%);
    color: var(--bg);
}

.navTransparent .navItem::after {
    background: rgb(255, 255, 255) !important;
}

.navTransparent .connect {
    background: rgba(255, 252, 245, 1) !important;
    color: black !important;
}

.navTransparent .connect img {
    filter: invert(1);
}

main.bowlsncolanders {
    background: url(../images/bowlsncolandersBG.webp);
}

main.traysnpans {
    background: url(../images/traysnpans/traysnpansBG.webp);
}

main.tableware {
    background: url(../images/tableware/tablewareBG.webp);
}

main.petware {
    background: url(../images/petware/petwareBG.webp);
}

main.barware {
    background: url(../images/barware/barwareBG.webp);
}

main.kitchentools {
    background: url(../images/kitchentools/kitchentoolsBg.webp);
}

main.cutlery {
    background: url(../images/cutlery/cutleryBG.webp);
}

main.horeca {
    background: url(../images/horeca/horecaBG.webp);
}

main.triply {
    background: url(../images/triply/triplyBG.webp);
}

main.products {
    width: 100vw;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1920 / 960;
    box-sizing: border-box;
    padding-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5vw;
}

main .heading {
    font-family: Libre Baskerville;
    font-weight: 600;
    font-size: 2.5vw;
    color: white;
}

main .tagline {
    font-size: 1.25vw;
    width: 72.5%;
    text-align: center;
    margin-top: 1vh;
}

section.metlineSpecial {
    width: 100vw;
    height: max-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 7vh;
}

.longSpecial {
    width: 49.75vw;
    max-width: 49.75vw;
    height: 25vw;
    max-height: 25vw;
    margin-bottom: 0.5vw;
}

.white {
    color: white;
}

section.metlineSpecial>div>img {
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

section.metlineSpecial>div:hover>img {
    transform: scale(1.1);
}

.thinSpecial {
    width: calc(99vw / 3);
    height: 25vw;
    background: black;
}

section.metlineSpecial>div {
    position: relative;
    overflow: hidden;
}

section.metlineSpecial>div>.imgDetail {
    position: absolute;
    bottom: 1.75vw;
    left: 1.75vw;
    width: max-content;
    height: max-content;
    box-sizing: border-box;
}

.detailHeading {
    font-family: Libre Baskerville;
    font-weight: 600;
    font-size: 1.75vw;
}

.detailDesc {
    font-size: 1.25vw;
}

.triplyTypes {
    margin-top: 7vh;
}

section.types {
    width: 100vw;
    height: max-content;
    margin-bottom: 7vh;
    box-sizing: border-box;
    padding: 0 8%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 1.575vw;
}

.rowHeading {
    font-size: 1.75vw;
    font-family: Libre Baskerville;
    font-weight: 700;
    margin-top: 1.575vw;
}

.rowHeading:nth-child(1) {
    margin-top: 0;
}

.typeRow {
    height: max-content;
    width: 100%;
    display: flex;
    gap: 1.575vw;
}

.typeCont {
    width: 19.81875vw;
    aspect-ratio: 376 / 421;
    max-height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.typeContImg {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}

.typeContImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.typeContImg:hover>img {
    transform: scale(1.1);
}

.typeContImg:hover>.info {
    top: 0%;
}

.typeContImg .info {
    position: absolute;
    width: 100%;
    aspect-ratio: 1 / 1;
    left: 0;
    top: 100%;
    transition: top 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 1.72%, rgba(0, 0, 0, 0.56) 55.49%, rgba(0, 0, 0, 0.75) 100%);
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.infoCont {
    width: 100%;
    height: max-content;
    margin-bottom: 2vw;
    box-sizing: border-box;
    padding: 0 2vw;
    display: flex;
}

.code,
.size {
    display: flex;
    flex-direction: column;
}

.code {
    margin-right: 2vw;
}

.infoContHeading {
    color: rgba(204, 204, 204, 1);
    font-size: 0.65vw;
}

.infoContValue {
    color: rgba(255, 255, 255, 1);
    font-size: 1.3vw;
}

.typeDesc {
    font-size: 1.25vw;
}

section.types>.btnConnectCont {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.types .btnConnect {
    width: 13.375vw;
}

section.ourPromo {
    width: 100vw;
    background: rgba(38, 38, 38, 1);
    aspect-ratio: 1920 / 480;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7vh;
    position: relative;
}

.promoContent {
    height: 78%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    position: absolute;
    left: 5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.promoHeading {
    font-family: Libre Baskerville;
    font-weight: 600;
    font-size: 1.7vw;
    margin-bottom: 1vh;
}

.promoTagline {
    color: rgba(204, 204, 204, 1);
    font-size: 0.85vw;
    margin-bottom: 5vh;
    width: 40.5vw;

}

.ourPromo .promoImg {
    height: 100%;
    min-width: 60%;
    width: auto;
    position: absolute;
    right: 0;
    z-index: 2;
}

.promoImg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(38, 38, 38, 1) 10%, rgba(38, 38, 38, 0));
}

.promoImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

section.ourPromo .btnConnectCont {
    width: 40.5vw;
}

section.ourPromo .btnConnect {
    width: 13.375vw;
    background: rgba(255, 255, 255, 1);
    color: black;
}

.widthFull {
    width: 100% !important;
    object-fit: cover;
    height: auto;
}

@media (max-width: 599px) {
    main.products {
        aspect-ratio: 1920 / 2000;
        padding-top: 8vh;
        margin-bottom: 1.5vw;
    }

    main .heading {
        font-size: 6vw;
    }

    main .tagline {
        font-size: 3vw;
        width: 90%;
    }


    section.metlineSpecial {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 3vh;
        gap: 1vw;
    }

    .longSpecial {
        width: 97vw;
        height: max-content;
        margin-bottom: 0vw;
    }

    section.metlineSpecial>div>img {
        height: auto;
        width: 100%;
        max-width: 100%;
        object-fit: cover;
        transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    section.metlineSpecial>div:hover>img {
        transform: scale(1.1);
    }

    .thinSpecial {
        width: calc(96vw / 3);
        height: max-content;
        background: transparent;
    }

    .detailHeading {
        font-family: Libre Baskerville;
        font-weight: 600;
        font-size: 3vw;
    }

    section.types {
        width: 100vw;
        margin-bottom: 3vh;
        box-sizing: border-box;
        padding: 0 2.5vw;
        gap: 2.5vw;
    }

    .rowHeading:nth-child(1) {
        margin-top: 0;
    }

    .typeRow {
        height: max-content;
        width: 100%;
        display: flex;
        gap: 2.5vw;
    }

    .typeCont {
        width: 46.25vw;
        aspect-ratio: 376 / 421;
        max-height: max-content;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        position: relative;
    }

    .typeDesc {
        font-size: 3vw;
    }

    .infoContHeading {
        color: rgba(204, 204, 204, 1);
        font-size: 2vw;
    }

    .code {
        margin-right: 4vw;
    }

    .infoContValue {
        color: rgba(255, 255, 255, 1);
        font-size: 3vw;
    }

    .infoCont {
        margin-bottom: 4vw;
        padding: 0 4vw;
    }

    section.types .btnConnect {
        width: 29vw;
    }

    section.ourPromo {
        width: 100vw;
        background: rgba(38, 38, 38, 1);
        aspect-ratio: 1920 / 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 3vh;
    }

    .promoContent {
        height: 78%;
        padding-left: 4vw;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .promoHeading {
        font-family: Libre Baskerville;
        font-weight: 600;
        font-size: 3vw;
        margin-bottom: 1vh;
    }

    .promoTagline {
        color: rgba(204, 204, 204, 1);
        font-size: 2vw;
        margin-bottom: 5vh;
        width: 40.5vw;

    }

    .ourPromo .promoImg {
        height: 100%;
        aspect-ratio: 851 / 480;
        position: relative;
    }

    .ourPromo .promoImg {
        aspect-ratio: 851 / 480;
    }

    section.ourPromo .btnConnect {
        width: 29vw;
        background: rgba(255, 255, 255, 1);
        color: black;
    }
}