/* VARIABLES */
*{--primary: #000000;
--link1: #000000c1;
--title:#363636;
--font1: SF;
--white: #fff;
--semi-white: #BABBBF;
--red-grad: #991c21;
--red-grad2: linear-gradient(45deg, #991c21 20%, #bc0006 100%);
}

/**/

@keyframes loading{
  0%{opacity: 0;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}
body{animation: loading 0.6s ease-in;width: 100%;background-color: var(--white);margin: 0;padding: 0;font-family: var(--font1);display: flex;flex-direction: column;justify-content: center;align-items: center;}
.main{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 95%;overflow: hidden;}

/*Nabar*/
.navigation_bar{padding: 20px 0;z-index: 99;top: 0;left: 2vw;width: 96vw;position: fixed;background-color: var(--white);display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;}
.navigation_bar .buttons,.navigation_bar .logo,.navigation_bar .links{width: 33.33%}
.navigation_bar .logo{display: flex;flex-direction: row;justify-content: start;align-items: start;}
.navigation_bar .logo img{height: 65px;margin: 0 10px;}
.navigation_bar .links{gap: 8%;display: flex;text-align: center;flex-direction: row;justify-content: center;align-items: center;flex-wrap: nowrap;}
.navigation_bar .links .nav-link{position: relative;font-weight: 600;text-transform: capitalize;color: var(--link1);text-decoration: none;display: flex;flex-direction: column;justify-content: center;align-items: center;  transition: 0.5s ease-in-out;}
.navigation_bar .links .nav-link i{display: none;}
.navigation_bar .buttons{background-color: var(--white); z-index: 2;display: flex;flex-direction: row;justify-content: end;align-items: center;gap: 1vw;}
.stroke-primary{border: solid 2px var(--primary);background-color: transparent;color: var(--primary);}
.btn{background: var(--red-grad);color: var(--white);line-height: 0;text-transform:capitalize;text-align: center;padding: 22px 35px;box-shadow: none;outline: none;border: solid 2px transparent;font-size: 16px;border-radius: 4000px;overflow: hidden;position: relative;text-decoration: none;transition: .2s transform ease-in-out;z-index: 0;justify-content: center;align-items: center;display: flex;}
.btn::after{ background-color: var(--white); border-radius: 3rem;content: '';display: block;  height: 100%; width: 100%; position: absolute; left: 0; top: 0; transform: translate(-100%, 0) rotate(10deg); transform-origin: top left; transition: .2s transform ease-out; will-change: transform; z-index: -1;}
.btn:hover::after{transform: translate(0, 0);}
.btn:hover{ border: 2px solid transparent;color: var(--red-grad);}
.btn-iconed{width: 40px;height: 40px;border-radius: 100%;box-shadow: none;outline: none;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;line-height: 0;}
.btn-iconed svg{width: 20px;height: 20px;}
.edge-left,.edge-right { position: absolute; width: 50px;top: 105px;}
.edge-left{left: 0vw;}
.edge-right{ transform: scaleX(-1);right: 0vw;}
.marquee-hero {
    margin: 0 0vw;
    width: 100%;
    height: 10vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

    .marquee-hero .left {
        width: 100%;
        height: fit-content;
        overflow: hidden;
        height: 10vw;
    }

        .marquee-hero .left .wrapper {
            
            gap: 10vw;
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: center;
            height: 100%;
            width: fit-content;
        }

        .marquee-hero .left::after {
            position: absolute;
            content: '';
            width: 60.8vw;
            height: 10vw;
            margin-top: -10vw;
            box-shadow: inset 1vw 0vw 2vw 1vw var(--bgcolor--);
        }

        .marquee-hero .left img {
           
            opacity: 0.5;
            height: 1.8vw;
            width: 5vw;
            object-fit: contain;
        }

/**/
.drop-trigger{font-weight: 600;text-transform: capitalize;color: var(--link1);text-decoration: none;
  margin: 0!important;text-decoration: none;
}
.dropdown{
  display: flex;gap: 40px;justify-content: center;row-gap: 0px;align-items: center;flex-direction: row;box-shadow: 0 22px 20px 1px rgba(0, 0, 0, 0.075);
	background: var(--white);
  opacity: 0;flex-wrap: wrap;
width: 1500%!important;border-radius: 35px;right: -710%;
	position: absolute;
  transition: 1s ease-in-out;height: 80px;padding-top: 30px;padding-left:20px;padding-right: 20px;
  margin-top: 155px;padding-bottom: 20px;
  display: none;
  visibility: hidden;
}

.drop-trigger:hover ~ .dropdown,
.dropdown:hover {
  visibility: visible;
  opacity: 1;
  display: flex;
}

.dropdown a {margin: 0;font-weight: 600;text-transform: capitalize;color: var(--link1);text-decoration: none;opacity: 0.7;
	font-size: 15px;

}
.hidden2{display: none;}

.slider{width: 100%;background-color: var(--primary);height: 600px;margin-top: 110px;position: relative;overflow: hidden;border-radius: 35px;}
.slider .list{position: absolute;width: max-content; height: 600px;left: 0;top: 0;display: flex; transition: 1s;}
.slider .list .item{text-align: center; background-image: url(../ASSETS/IMG/hero_slider_1.png);background-repeat: no-repeat;background-size: cover; width: 96vw; height: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;}
    .slider .list .item h1{margin: 0;font-size: 64px;color: var(--white);width: 70%;font-weight: 800;text-transform: capitalize;}
    .slider .list .item h2{margin-top: 30px;max-width: 800px;font-size: 17px;line-height: 25px;color: var(--semi-white);font-weight: 100;}
    .slider .list .item a{transition: 0.4s;margin-top: 30px;padding: 18px 0;font-size: 14px;line-height: 0;text-transform:capitalize; padding: 20px 50px;text-align: center;border: solid 2px var(--white);border-radius: 4000px; color: var(--white);overflow: hidden;position: relative;text-decoration: none;transition: .2s transform ease-in-out;z-index: 0;}
    .slider .list .item a::after{ background-color: var(--white); border-radius: 3rem;content: '';display: block;  height: 100%; width: 100%; position: absolute; left: 0; top: 0; transform: translate(-100%, 0) rotate(10deg); transform-origin: top left; transition: .2s transform ease-out; will-change: transform; z-index: -1;}
      .slider .list .item a:hover::after{transform: translate(0, 0);}
      .slider .list .item a:hover{ border: 2px solid transparent;color: var(--primary);}
    .slider .buttons{position: absolute;top: 45%;left: 5%;width: 90%;display: flex;justify-content: space-between;}
.slider .buttons button{ width: 30px;height: 30px; border-radius: 50%; background-color: #ffffff45;backdrop-filter: blur(10px); color: #fff;border: none;font-family: monospace;font-weight: bold;}
.slider .dots{ position: absolute;bottom: 10px;left: 0;color: #fff;width: 100%;margin: 0; padding: 0; display: flex;justify-content: center;}
.slider .dots li{transition: 0.7s;list-style: none; width: 10px;height: 10px;background-color: #ffffff49;margin: 10px; border-radius: 20px;}
.slider .dots li.active{width: 30px;    background-color: white;}
/**/

.custom-select {
    position: relative;
    font-family: Arial;
}

    .custom-select select {
        display: none;
    }

.select-selected {
    border-radius: 1000px;
    width: 170px;
    font-size: 15px;
    height: 25px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: var(--primary);
}

    .select-selected:after {
        position: absolute;
        content: "";
        top: 20px;
        right: 25px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #fff transparent transparent transparent;
    }

    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 7px;
    }

.select-items div, .select-selected {
    color: #ffffff;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(255, 255, 255, 0.1) transparent;
    cursor: pointer;
    user-select: none;
}

.select-items {position: absolute;background-color: var(--primary);
    border-radius: 10px;
    margin-top: 10px;top: 100%;left: 0;right: 0;z-index: 99;}

.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(192, 192, 192, 0.1);
}
@media screen and (max-width: 1000px) {
    .select-selected {
        border-radius: 1000px;font-size:10px;
        width: 100px;}
    .select-items {font-size:10px;}
    }
   
    .filter {
        margin-top: 10px;
        margin-bottom: 100px;
        width: 90%;
        gap: 20px;
        padding: 0 5%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

        .filter .secondary-btn, .filter .all {
            font-size: 18px;
            transition: 0.2s ease-in-out;
            height: 50px;
            padding: 0 25px;
            border: solid 1px var(--primary);
            background-color: white;
            border-radius: 1000px;
        }

        .filter .all {
            background-color: var(--primary);
            color: var(--white);
            margin-inline-end: 20px;
            position: relative;
            ;
        }

            .filter .all::before {
                z-index: 0;
                content: '';
                position: absolute;
                right: -20px;
                top: 0;
                width: 1px;
                height: 100%;
                background-color: var(--title);
                opacity: 0.6;
            }

        .filter .secondary-btn:hover {
            background-color: var(--primary);
            color: var(--white);
        }

    .dropdwn {
        position: relative;
        z-index: 2;
    }

        .dropdwn .dropbtn {
            position: relative;
            display: flex;
            flex-direction: row;
            line-height: 0;
            justify-content: center;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            transition: 0.2s ease-in-out;
            height: 50px;
            padding: 0 25px;
            border: solid 1px var(--primary);
            background-color: white;
            border-radius: 1000px;
            background-color: var(--primary);
            color: var(--white);
            position: relative;
        }

            .dropdwn .dropbtn:hover {
                background-color: rgba(0, 0, 0, 0.888);
            }

            .dropdwn .dropbtn span {
                font-size: 22px;
            }

        .dropdwn .content {
            display: none;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            align-items: center;
            position: absolute;
            top: 58px;
            border-radius: 20px;
            overflow: hidden;
        }

            .dropdwn .content .sub {
                text-align: center;
                text-decoration: none;
                transition: 0.2s ease-in-out;
                color: var(--white);
                background-color: var(--primary);
                width: 100%;
                font-size: 15px;
                padding: 15px 0;
                border: 0;
                border-bottom: solid 1px rgba(255, 255, 255, 0.292);
            }

                .dropdwn .content .sub:hover {
                    background-color: rgba(0, 0, 0, 0.878);
                }

        .dropdwn .dropbtn:focus + .content {
            display: flex;
        }

        .dropdwn .content:hover {
            display: flex;
        }

    @media screen and (max-width: 1000px) {
        .filter {
            margin-top: 10px;
            margin-bottom: 100px;
            gap: 5px;
            row-gap: 10px;
        }

            .filter .secondary-btn, .filter .all {
                font-size: 14px;
                height: 40px;
                padding: 0 15px;
            }

        .dropdwn .dropbtn {
            gap: 0px;
            font-size: 14px;
            height: 40px;
            padding: 0 10px;
        }

            .dropdwn .dropbtn span {
                font-size: 20px;
            }

        .dropdwn .content {
            top: 48px;
            border-radius: 10px;
        }
    }



    /* BEST FRONTEND FILTER MADE IN LIFE*/








    /* Section-offers*/
    .section {
        margin-top: 20px;
        margin-bottom: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .products {
        position: relative;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        gap: 2vw;
        row-gap: 4vw;
        width: 90%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .section_header {
        font-weight: 900;
        margin-bottom: 90px;
        font-size: 38px;
        color: var(--link1);
        font-weight: 500;
        text-align: center;
    }

    .prod {
        width: 260px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

        .prod .prod_img {
            overflow: hidden;
            border-radius: 20px;
            width: 100%;
            height: 320px;
        }

            .prod .prod_img .img {
                transition: 0.2s ease-in-out;
                height: 100%;
                filter: brightness(80%);
            }

        .prod .label {
            text-transform: uppercase;
            padding: 8px 18px;
            border-radius: 1000px;
            position: absolute;
            margin-top: -308px;
            margin-inline-start: 10px;
            background-color: var(--primary);
            color: var(--white);
            font-size: 15px;
        }

        .prod a:hover img {
            transform: scale(110%);
        }

        .prod .buy {
            transition: 0.3s;
            position: absolute;
            margin-top: -90px;
            margin-inline-start: 175px;
            background-color: transparent;
            width: 70px;
            height: 70px;
            background-image: url(../ASSETS/ITEMS/buy.svg);
            background-position: -5px -3px;
            background-size: 85px;
            border: none;
            backdrop-filter: blur(10px);
            border-radius: 100%;
        }

            .prod .buy:hover {
                background-color: rgba(0, 0, 0, 0.751);
            }

        .prod .prod_info {
            width: 100%;
            margin-top: 12px;
            height: 190px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
        }

            .prod .prod_info .review {
                pointer-events: none;
                width: 100px;
            }

            .prod .prod_info .title {
                width: 100%;
                margin-bottom: 10px;
                font-size: 18px;
                color: var(--title);
            }

            .prod .prod_info .price {
                font-weight: 900;
                font-size: 22px;
                color: var(--primary);
            }

    .section .more {
        background-color: var(--primary);
        transition: 0.4s;
        margin: 100px 0;
        width: 50vw;
        padding: 18px 0;
        border-radius: 4000px;
        color: var(--white);
        font-size: 18px;
        border: solid 1px rgba(0, 0, 0, 0);
        border: 2px solid var(--primary);
        overflow: hidden;
        position: relative;
        text-decoration: none;
        transition: .2s transform ease-in-out;
        z-index: 0;
    }

        .section .more::after {
            background-color: var(--white);
            border-radius: 3rem;
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transform: translate(-100%, 0) rotate(10deg);
            transform-origin: top left;
            transition: .2s transform ease-out;
            will-change: transform;
            z-index: -1;
        }

        .section .more:hover::after {
            transform: translate(0, 0);
        }

        .section .more:hover {
            border: inset 2px solid transparent;
            color: var(--primary);
            transform: scale(1.02);
            will-change: transform;
        }
    /**/

    /* AD BANNER */
    .ad {
        background-attachment: fixed;
        border-radius: 35px;
        overflow: hidden;
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-image: url(../ASSETS/IMG/banner.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

        .ad.rfq {
            background-attachment: fixed;
            border-radius: 35px;
            overflow: hidden;
            width: 100%;
            height: 300px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background-image: url(../ASSETS/IMG/banner.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .ad h1 {
            margin: 0 5vw;
            font-size: 50px;
            font-weight: 900;
            color: var(--white);
        }

            .ad h1 span {
                font-weight: 100;
                color: var(--semi-white);
            }

        .ad h2 {
            margin: 0 5vw;
            ;
            max-width: 700px;
            font-size: 19px;
            font-weight: 300;
            color: var(--white);
        }

        .ad .arrow {
            margin: 0 5vw;
        }

            .ad .arrow:hover img {
                transform: rotate(45deg);
            }

            .ad .arrow img {
                width: 120px;
                transition: 0.5s;
            }
    /**/

    /* Main products cards */
    .cards {
        width: 100%;
        display: flex;
        gap: 1.5%;
        justify-content: center;
        align-items: center;
    }

        .cards.vertical {
            flex-direction: column;
            width: 100%;
            margin: 1.5vw 0;
            gap: 1vw;
        }

        .cards.horizontal .card {
            height: 700px;
            width: fit-content;
            flex-direction: column;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            justify-content: space-between;
            padding: 0 3%;
            border-radius: 35px;
        }

            .cards.horizontal .card h1 {
                margin: 80px 0;
                font-size: 60px;
                color: var(--white);
            }

            .cards.horizontal .card h2 {
                margin: 70px 0;
                font-size: 20px;
                width: 80%;
                color: var(--white);
                font-weight: 300;
            }

            .cards.horizontal .card .info {
                margin: 70px 0;
            }

        .cards .card a {
            padding: 18px 60px;
            transition: 0.5s;
            background-color: rgba(255, 255, 255, 0);
            border-radius: 3000px;
            text-transform: capitalize;
            border: solid 1px var(--white);
            font-size: 16px;
            color: var(--white);
            text-decoration: none;
        }

            .cards .card a:hover {
                border: solid 1px transparent;
                background-color: var(--white);
                color: var(--primary);
            }

        .cards.vertical .card {
            height: 260px;
            gap: 5%;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 35px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

            .cards.vertical .card h1 {
                width: 40%;
                color: var(--white);
                font-size: 60px;
            }

            .cards.vertical .card h2 {
                width: 30%;
                color: var(--white);
                font-size: 20px;
                font-weight: 300;
            }
    /**/
    /*PREFOOTER*/
    .prefooter {
        margin: 60px 0;
        text-align: center;
        border-radius: 35px;
        width: 99.7%;
        border: solid 2px var(--primary);
        height: 770px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 60px;
    }

        .prefooter .thread {
            position: absolute;
            right: 1vw;
            top: 1vw;
            border-radius: 25px;
        }

        .prefooter h1 {
            text-transform: uppercase;
            margin: 0;
            font-size: 64px;
            font-weight: 700;
            color: var(--primary);
        }

        .prefooter h2 {
            text-transform: capitalize;
            margin: 0;
            width: 50%;
            ;
            font-size: 18px;
            font-weight: 100;
            color: var(--link1);
        }

        .prefooter div {
            margin: 20px 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

            .prefooter div .black {
                box-shadow: 0 0 30px 2px #00000046;
                background: var(--red-grad);
                color: var(--white);
                border: none;
            }

            .prefooter div a {
                text-transform: capitalize;
                transition: 0.3s;
                color: var(--primary);
                border-radius: 1000px;
                text-decoration: none;
                font-size: 14px;
                font-weight: 900;
                padding: 16px 80px;
                border: solid 1px var(--primary);
            }

                .prefooter div a:hover {
                    opacity: 0.8;
                }
    /**/

    /* FOOTER */
    .footer {
        margin: 50px 0;
        overflow: hidden;
        position: relative;
        border-radius: 35px;
        height: fit-content;
        ;
        background: var(--primary);
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        width: 100%;
    }

        .footer .upper {
            padding: 90px 0;
            width: 80%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

            .footer .upper .left {
                display: flex;
                flex-direction: column;
                justify-content: start;
                align-items: start;
                row-gap: 40px;
            }

                .footer .upper .left h1 {
                    color: var(--white);
                    font-weight: 500;
                    font-size: 27px;
                    margin: 0;
                }

                .footer .upper .left img {
                    filter: contrast(0%) brightness(600%);
                    height: 50px;
                    opacity: 60%;
                }

                .footer .upper .left h2 {
                    font-size: 19px;
                    color: var(--white);
                    font-weight: 100;
                    opacity: 60%;
                    margin: 0;
                }

            .footer .upper .right {
                gap: 4vw;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: start;
            }

                .footer .upper .right .group {
                    row-gap: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: start;
                    align-items: start;
                }

                    .footer .upper .right .group h1 {
                        margin-bottom: 8px;
                        color: var(--white);
                        font-size: 18px;
                        font-weight: 500;
                        margin-top: 0;
                    }

                    .footer .upper .right .group a {
                        text-transform: lowercase;
                        color: var(--white);
                        font-size: 16px;
                        font-weight: 100;
                        opacity: 0.6;
                        text-decoration: none;
                        font-weight: 100;
                    }

        .footer a:hover {
            filter: contrast(0%);
        }

        .footer .lower {
            padding-bottom: 100px;
            opacity: 80%;
            padding-top: 25px;
            border-top: solid 1px rgba(255, 255, 255, 0.31);
            width: 80%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: start;
        }

            .footer .lower p {
                font-size: 14px;
                font-weight: 100;
                color: var(--semi-white);
            }

            .footer .lower .social {
                display: flex;
                flex-direction: row;
                justify-content: start;
                align-items: start;
                gap: 20px;
            }

                .footer .lower .social a img {
                    height: 25px;
                }

        .footer a {
            transition: 0.3s;
        }
    /**/



    /* fonts */
    @font-face {
        font-family: 'SF';
        src: url('../FONTS/sf-ui.woff') format('woff2'),url('../FONTS/sf-ui.woff2') format('woff');
        font-display: swap;
        font-weight: 100,200,300,400,500,600,700,800,900;
    }
    /**/


    @media screen and (max-width: 1000px) {
        .marquee-hero {
            margin: 40px 0;
            width: 100%;
            height: 15vw;
        }

            .marquee-hero .left {
                width: 100%;
            }

                .marquee-hero .left .wrapper {
                    margin-left: 0vw;
                    height: 100%;
                    gap: 12vw;
                }

                .marquee-hero .left::after {
                    position: absolute;
                    content: '';
                    width: 100%;
                    height: 10vw;
                    margin-top: -10vw;
                    box-shadow: inset 1vw 0vw 2vw 1vw var(--bgcolor--);
                }

                .marquee-hero .left img {
                    filter: brightness(0%);
                    opacity: 0.5;
                    height: 5vw;
                    width: 10vw;
                    object-fit: contain;
                }

        body {
            width: 100%;
        }

        .main {
            width: 94%;
        }
        /*Nabar*/
        .navigation_bar {
            justify-content: space-between;
            padding: 14px 0;
        }

            .navigation_bar div {
                width: 80%
            }

            .navigation_bar .buttons, .navigation_bar .logo, .navigation_bar .links {
                width: 80%
            }

                .navigation_bar .logo img {
                    height: 50px;
                }

            .navigation_bar .links {
                gap: 30px;
                border: solid 1px white;
                backdrop-filter: blur(10px);
                box-shadow: 2px 2px 20px 5px rgba(0, 0, 0, 0.2);
                position: fixed;
                width: 84vw;
                bottom: 2vw;
                height: 90px;
                background-color: rgba(255, 255, 255, 0.615);
                border-radius: 18px;
                padding: 0 6vw;
                justify-content: space-evenly;
            }

                .navigation_bar .links .nav-link {
                    font-weight: 600;
                    row-gap: 10px;
                    font-size: 10px;
                    text-transform: capitalize;
                    color: rgba(0, 0, 0, 0.443);
                }

                    .navigation_bar .links .nav-link.active {
                        color: var(--primary);
                    }

                        .navigation_bar .links .nav-link.active i {
                            color: var(--primary)
                        }

                        .navigation_bar .links .nav-link.active::after {
                            margin-top: -80px;
                            position: absolute;
                            content: '';
                            width: 16vw;
                            height: 10px;
                            border-radius: 0 0 50px 50px;
                            background-color: var(--primary);
                        }

                    .navigation_bar .links .nav-link i {
                        color: rgba(0, 0, 0, 0.431);
                        display: block;
                        font-size: 19px;
                    }

        .btn {
            font-size: 13px
        }

        .btn-iconed {
            width: 38px;
            height: 38px;
        }

            .btn-iconed svg {
                width: 18px;
                height: 18px;
            }

        .edge-left, .edge-right {
            position: absolute;
            width: 50px;
            top: 76px;
        }

        .edge-left {
            left: 0vw;
        }

        .edge-right {
            transform: scaleX(-1);
            right: 0;
        }
        /**/
        .hiddenonphone {
            display: none !important
        }

        .hidden2 {
            display: flex;
        }
        /* hero slider*/
        .slider {
            height: 650px;
            margin-top: 75px;
        }

            .slider .list {
                height: 650px
            }

                .slider .list .item h1 {
                    font-size: 40px;
                    width: 70%;
                }

                .slider .list .item h2 {
                    margin-top: 30px;
                    max-width: 65%;
                    font-size: 13px;
                    line-height: 19px;
                }

            .slider .buttons button {
                font-size: 11px;
            }
        /**/



        /* Section-offers*/

        .products {
            gap: 5vw;
            row-gap: 4vw;
            width: 100%;
        }

        .section_header {
            margin-bottom: 50px;
            font-size: 30px;
        }

        .prod {
            width: 160px;
        }

            .prod .prod_img {
                border-radius: 20px;
                width: 100%;
                height: 180px;
            }

            .prod .label {
                padding: 5px 15px;
                margin-top: -175px;
                margin-left: 10px;
                font-size: 10px;
            }

            .prod .buy {
                margin-top: -72px;
                margin-left: 92px;
                width: 60px;
                height: 60px;
                background-position: -5px -3px;
                background-size: 73px;
            }

            .prod .prod_info {
                margin-top: 12px;
                height: 130px;
            }

                .prod .prod_info .review {
                    width: 80px;
                }

                .prod .prod_info .title {
                    width: 100%;
                    margin-bottom: 0px;
                    font-size: 12px;
                }

                .prod .prod_info .price {
                    font-size: 18px
                }

        .section.offers .more {
            margin: 80px 0;
            padding: 12px 0;
            font-size: 12px;
            border: solid 1px var(--primary);
        }

        .section .more {
            margin: 80px 0;
            width: 80%;
            padding: 12px 0;
            font-size: 12px;
            border: solid 1px var(--primary);
        }

        /**/

        /* AD BANNER */
        .ad {
            height: 180px;
            margin-bottom: 30px;
        }

            .ad.rfq {
                height: 180px;
            }

            .ad h1 {
                margin: 0 5vw;
                font-size: 30px;
            }

            .ad h2 {
                margin: 0 5vw;
                max-width: 50vw;
                font-size: 12px;
                font-weight: 100;
            }

            .ad .arrow {
                margin: 0 5vw;
            }

                .ad .arrow:hover img {
                    transform: rotate(45deg);
                }

                .ad .arrow img {
                    width: 30px;
                    transition: 0.5s;
                }
        /**/

        /* Main products cards */
        .cards {
            width: 80%;
            display: flex;
            gap: 1.5%;
            position: relative;
        }

            .cards.vertical {
                flex-direction: column;
                margin: 1.5vw 0;
                gap: 1vw;
                width: 80%;
            }

            .cards.horizontal {
                flex-direction: column;
                gap: 1.5vw;
                width: 80%;
            }

                .cards.horizontal .card {
                    height: fit-content;
                    padding: 0 5vw;
                    width: 100%;
                }

                    .cards.horizontal .card h1 {
                        margin-top: 30px;
                        margin-bottom: 0;
                        font-size: 30px;
                    }

                    .cards.horizontal .card h2 {
                        margin-top: 0px;
                        margin-bottom: 40px;
                        font-size: 15px;
                        width: 90%;
                        color: var(--white);
                    }

                    .cards.horizontal .card .info {
                        margin: 50px 0;
                    }

            .cards .card a {
                padding: 15px 40px;
                font-size: 13px;
            }

            .cards.vertical .card {
                padding: 40px 5vw;
                width: 100%;
                height: fit-content;
                gap: 0px;
                flex-direction: column;
                justify-content: start;
                align-items: start;
            }

                .cards.vertical .card h1 {
                    width: 100%;
                    color: var(--white);
                    font-size: 30px;
                    margin-top: 0px;
                    margin-bottom: 60px
                }

                .cards.vertical .card h2 {
                    margin-top: 0px;
                    margin-bottom: 25px;
                    font-size: 15px;
                    width: 90%;
                    color: var(--white);
                }
        /**/
        /* VARIABLES */

        /*PREFOOTER*/
        .prefooter {
            margin-top: 30px;
            margin-bottom: 20px;
            width: 99%;
            height: 450px;
            row-gap: 20px;
            border-radius: 25px;
        }

            .prefooter .thread {
                right: 2vw;
                top: 2vw;
                width: 160px;
                border-radius: 15px;
            }

            .prefooter h1 {
                font-size: 30px;
            }

            .prefooter h2 {
                width: 70%;
                font-size: 12px;
            }

            .prefooter div {
                margin: 20px 0;
                gap: 10px;
            }

                .prefooter div a {
                    font-size: 12px;
                    padding: 14px 30px;
                }
        /**/
        /* FOOTER */
        .footer {
            margin: 30px 0;
            width: 100%;
            border-radius: 15px;
        }

            .footer .upper {
                padding: 60px 0;
                width: 80%;
                display: flex;
                flex-direction: column;
                justify-content: start;
                align-items: start;
                row-gap: 20px;
            }

                .footer .upper .left {
                    row-gap: 20px;
                    margin-bottom: 0px;
                }

                    .footer .upper .left h1 {
                        font-size: 29px;
                    }

                    .footer .upper .left img {
                        height: 46px
                    }

                    .footer .upper .left h2 {
                        font-size: 12px;
                    }

                .footer .upper .right {
                    gap: 3vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: start;
                    align-items: start;
                }

                    .footer .upper .right .group {
                        row-gap: 15px;
                        display: flex;
                        flex-direction: column;
                        justify-content: start;
                        align-items: start;
                    }

                        .footer .upper .right .group h1 {
                            margin-top: 50px;
                            margin-bottom: 8px;
                            font-size: 25px;
                        }

                        .footer .upper .right .group a {
                            font-size: 20px;
                        }

            .footer .lower {
                padding-top: 25px;
                flex-direction: column-reverse;
                justify-content: center;
                align-items: center;
            }

                .footer .lower p {
                    font-size: 11px;
                    text-align: center;
                    margin: 20px 0;
                }
    }


    /* About Page ////////////////////////////////////////////////////////////////////////////////////////*/

    .hero {
        margin-top: 110px;
        border-radius: 35px;
        width: 100%;
        height: 35vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }

        .hero .context {
            height: 100%;
            width: 80%;
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            font-family: var(--font1);
            color: var(--white);
        }

            .hero .context h1 {
                font-size: 80px;
                font-weight: 600;
                margin-bottom: 20px;
                line-height: 90px;
            }

            .hero .context h2 {
                line-height: 30px;
                font-size: 17px;
                font-weight: 400;
                font-family: var(--font1);
                width: 730px;
                margin-bottom: 55px;
            }

        .hero .sector {
            margin-left: 30vw;
            margin-top: 12px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

            .hero .sector .right .box {
                padding: 70px 60px;
                width: 330px;
                border-top: solid 7px var(--color-1);
                background-color: white;
                box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.113);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: start;
            }

                .hero .sector .right .box h1 {
                    margin: 0px;
                    color: #000;
                    font-family: var(--font1);
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                }

                .hero .sector .right .box h2 {
                    margin-top: 10px;
                    margin-bottom: 0;
                    color: #00215B;
                    font-family: var(--font1);
                    font-size: 35px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                }

    .aboutus {
        width: 100%;
        margin: 30px 0;
        height: 700px;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        .aboutus .box {
            height: 100%;
            border-radius: 35px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

            .aboutus .box.primary {
                background-image: url(../ASSETS/IMG/hero_slider_4.png);
                width: 28.5%;
                background-color: var(--red-grad);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                justify-content: center;
            }

            .aboutus .box.secondary {
                width: 70%;
                border: solid 2px var(--primary);
                height: 99%;
                justify-content: center;
                align-items: center;
            }

                .aboutus .box.secondary .context {
                    width: 80%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: start;
                }

                    .aboutus .box.secondary .context h1 {
                        font-size: 45px;
                        color: var(--primary);
                        margin-top: 0;
                    }

                    .aboutus .box.secondary .context h2 {
                        font-size: 18px;
                        line-height: 26px;
                        color: var(--link1);
                        font-weight: 100;
                    }

        .aboutus::after {
            width: 35px;
            height: 35px;
            background-color: var(--red-grad);
            bottom: 2vw;
            right: 2vw;
            position: absolute;
            border-radius: 100%;
            content: '';
        }

    @media screen and (max-width: 1000px) {
        .hero {
            height: 200px;
            background-size: cover;
            border-radius: 25px;
        }

            .hero .context {
                width: 80%;
            }

                .hero .context h1 {
                    font-size: 40px;
                    margin-bottom: 0px;
                    line-height: 60px;
                }

                .hero .context h2 {
                    line-height: 1px;
                    font-size: 13px;
                    width: 100%;
                }

        .aboutus {
            flex-direction: column;
            width: 99%;
            height: 650px;
        }

            .aboutus .box {
                border-radius: 25px;
            }

                .aboutus .box.primary {
                    display: none;
                }

                .aboutus .box.secondary {
                    width: 99%;
                }

                    .aboutus .box.secondary .context h1 {
                        font-size: 30px;
                        padding-top: 0px;
                    }

                    .aboutus .box.secondary .context h2 {
                        font-size: 14px;
                        line-height: 20px;
                    }

            .aboutus::after {
                width: 35px;
                height: 35px;
                background-color: var(--red-grad);
                bottom: 5vw;
                right: 5vw;
            }
    }
    /* NEWS PAGE ////////////////////////////////////////////////////////////////////////////////////////*/
    .news {
        margin: 100px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

        .news h4 {
            font-size: 35px;
            color: var(--title);
            text-align: center;
        }

    .news_wrapper {
        margin: 30px 0;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 3vw;
        row-gap: 3vw;
    }

        .news_wrapper .card {
            height: 500px;
            width: 300px;
            border-radius: 35px;
            position: relative;
            box-shadow: 0 0 15px #00000017;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: start;
            overflow: hidden;
            text-decoration: none;
        }

            .news_wrapper .card img {
                transition: 0.3s ease-in-out;
                width: 100%;
                height: 200px;
                position: relative;
                object-fit: cover
            }

            .news_wrapper .card .genre {
                margin: 20px 20px;
                margin-top: 5px;
                border-radius: 1000px;
                padding: 6px 20px;
                width: fit-content;
                color: var(--white);
                background-color: var(--red-grad);
                font-size: 13px;
            }

            .news_wrapper .card h1 {
                font-size: 19px;
                color: var(--link1);
                margin: 10px 20px;
                width: 80%;
            }

            .news_wrapper .card h2 {
                font-size: 15px;
                width: 80%;
                color: var(--link1);
                opacity: 0.8;
                font-weight: 100;
                margin: 10px 20px;
            }

            .news_wrapper .card::after {
                transition: 0.3s ease-in-out;
                border-radius: 100%;
                width: 35px;
                height: 35px;
                content: '';
                position: absolute;
                left: 20px;
                bottom: 20px;
                background-color: var(--red-grad);
            }

            .news_wrapper .card:hover img {
                transform: translateY(-5%);
            }

            .news_wrapper .card:hover::after {
                left: 10%;
            }

    @media screen and (max-width: 1000px) {
        .news {
            margin: 40px 0;
        }

        .news_wrapper {
            margin: 10px 0;
        }

        .news h4 {
            font-size: 25px;
        }

        .news_wrapper .card {
            height: 300px;
            width: 40%;
            border-radius: 15px;
        }

            .news_wrapper .card img {
                width: 100%;
                height: 200px;
            }

            .news_wrapper .card .genre {
                margin: 10px 10px;
                padding: 4px 10px;
                font-size: 10px;
            }

            .news_wrapper .card h1 {
                font-size: 14px;
                margin: 10px 10px;
                width: 90%;
            }

            .news_wrapper .card h2 {
                font-size: 11px;
                width: 90%;
                margin: 0px 10px;
            }

            .news_wrapper .card::after {
                width: 22px;
                height: 22px;
                left: 10px;
                bottom: 10px;
            }
    }
    /* CART Page ////////////////////////////////////////////////////////////////////////////////////////*/




    .cart {
        width: 100%;
        margin-top:60px;
        margin-bottom: 130px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
        flex-wrap: wrap;
        row-gap: 30px;
    }

        .cart .items {
            padding: 3%;
            width: 60%;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: solid 1px #0000005e;
            ;
            transition: 0.2s ease-in-out;
        }

            .cart .items .item:last-child {
                border-bottom: none;
            }

            .cart .items .item {
                padding: 10px 0;
                height: 300px;
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: start;
                border-bottom: solid 1px #0000004a;
                transition: 0.2s ease-in-out;
            }

            .cart .items h6 {
                width: 100%;
                text-align: start;
                font-size: 25px;
                margin-top: 10px;
                margin-bottom: 15px;
                font-weight: 100;
            }

            .cart .items .item .preview {
                width: 30%;
                height: 90%;
                object-fit: cover;
                border-radius: 15px;
                transition: 0.2s ease-in-out;
                pointer-events: none;
            }

            .cart .items .item .info {
                margin: 0 3%;
                width: 47%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: start;
                height: 80%;
            }

                .cart .items .item .info h1 {
                    font-size: 23px;
                    margin: 14px 0;
                    margin-top: 0;
                    width: 100%;
                }

                .cart .items .item .info p {
                    font-size: 18px;
                    color: var(--link1);
                    margin: 0;
                }

                .cart .items .item .info .controlers {
                    gap: 2%;
                    margin-top: 20px;
                    display: flex;
                    flex-direction: row;
                    justify-content: start;
                    align-items: center;
                    align-self: flex-end;
                    width: 100%;
                    transition: 0.2s ease-in-out;
                }

                    .cart .items .item .info .controlers .btn_2 {
                        gap: 8px;
                        padding: 12px 22px;
                        border-radius: 7px;
                        background-color: transparent;
                        color: #000;
                        border: solid 1px #00000057;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        flex-wrap: nowrap;
                    }

                        .cart .items .item .info .controlers .btn_2:focus {
                            animation: click 0.4s ease-in-out;
                        }

            .cart .items .item .interaction {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: end;
                height: 80%;
                width: 30%;
            }

                .cart .items .item .interaction .controlers {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: end;
                    width: 200px;
                }

                    .cart .items .item .interaction .controlers .btns {
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        width: 70%;
                        height: 45px;
                        border-radius: 11px;
                        border: solid 1px #00000057;
                    }

                        .cart .items .item .interaction .controlers .btns .control {
                            height: 100%;
                            width: 30%;
                            background-color: transparent;
                            border: none;
                            font-size: 20px;
                            transition: 0.2s ease-in-out;
                        }

                            .cart .items .item .interaction .controlers .btns .control:focus {
                                box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.732);
                                border-radius: 11px;
                            }

                        .cart .items .item .interaction .controlers .btns .num {
                            font-size: 17px;
                            width: 40%;
                            text-align: center;
                        }

                    .cart .items .item .interaction .controlers .note {
                        font-size: 14px;
                        color: var(--title);
                        font-weight: 100;
                        opacity: 0.8;
                        text-align: center;
                        width: 70%;
                    }

                .cart .items .item .interaction .price {
                    font-size: 26px;
                    margin: 0;
                    font-weight: 900;
                }

                    .cart .items .item .interaction .price span {
                        font-size: 22px;
                        opacity: 0.5;
                    }

        .cart .total {
            padding: 3%;
            width: 25%;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: solid 1px #0000005e;
            transition: 0.2s ease-in-out;
        }

            .cart .total .title {
                font-size: 25px;
                margin-bottom: 20px;
            }

            .cart .total .half {
                padding: 20px 0;
                color: #000000c7;
                row-gap: 10px;
                border-bottom: solid 1px #00000029;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
                align-items: center;
                width: 100%;
            }

                .cart .total .half .left {
                    font-size: 14px;
                    text-align: start;
                    width: 50%;
                }

                .cart .total .half .right {
                    font-size: 14px;
                    text-align: end;
                    width: 50%;
                }

                .cart .total .half.bold {
                    color: #000;
                    border: none;
                    font-weight: 900;
                }

            .cart .total .checked {
                transition: 0.3s ease-in-out;
                margin-top: 30px;
                width: 100%;
                border-radius: 1000px;
                background-color: var(--red-grad);
                border: none;
                height: 45px;
                color: white;
                font-size: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-decoration: none;
                text-align: center;
            }

                .cart .total .checked:hover {
                    width: 80%;
                }

    @media screen and (max-width: 1000px) {
        .cart .items .item .preview {
            width: 30%;
            height: 78%;
        }

        .cart {
            flex-direction: column-reverse;
            align-items: center
        }

            .cart .items h6 {
                font-size: 18px;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .cart .items {
                width: 93%;
                border-radius: 15px;
            }

            .cart .total {
                width: 93%;
                border-radius: 15px;
            }

            .cart .items .item {
                height: 200px;
                width: 100%;
            }

                .cart .items .item .info {
                    width: 60%;
                    height: 80%;
                    margin-inline-end: 0;
                }

                    .cart .items .item .info h1 {
                        font-size: 15px;
                        margin: 0px 0;
                        margin-bottom: 10px;
                    }

                    .cart .items .item .info p {
                        font-size: 11px;
                    }

                    .cart .items .item .info .controlers {
                        margin-top: 10px;
                    }

                        .cart .items .item .info .controlers .btn_2 {
                            padding: 10px 13px;
                            font-size: 9px;
                        }


                .cart .items .item .interaction {
                    height: 80%;
                    width: 40%;
                }

                    .cart .items .item .interaction .controlers {
                        width: 100%;
                    }

                        .cart .items .item .interaction .controlers .btns {
                            width: 100%;
                        }

                            .cart .items .item .interaction .controlers .btns .control {
                                height: 100%;
                                width: 35%;
                                font-size: 17px;
                            }

                            .cart .items .item .interaction .controlers .btns .num {
                                font-size: 15px;
                                width: 30%;
                            }

                        .cart .items .item .interaction .controlers .note {
                            font-size: 10px;
                            text-align: end;
                            width: 100%;
                        }

                    .cart .items .item .interaction .price {
                        font-size: 20px;
                    }

                        .cart .items .item .interaction .price span {
                            font-size: 15px;
                        }
    }

    @keyframes click {
        0% {
            transform: scale(110%);
        }

        100% {
            transform: scale(100%);
        }
    }