.adv{
    position: relative;
    .item{
        position: relative;
        text-decoration: none;
        display: block;
        box-shadow: 0 10px 20px -9px rgba(0,0,0,0.8);
        h1{ 
            position: absolute;
            width: 100%;
            text-align: center;
            text-decoration: none;
            bottom: 20px;
            font-family: var(--ff-primary);
            color: var(--clr-neutral-100);
            font-size: var(--fs-20);
            letter-spacing: 2px;
            transition: 0.3s;
        }
        h3{ 
            position: absolute;
            width: 100%;
            text-align: center;
            text-decoration: none;
            bottom: 0;
            font-family: var(--ff-secondary);
            color: var(--clr-neutral-100);
            font-size: var(--fs-14);
            font-style: italic;
            font-weight: var(--fw-semibold);
            letter-spacing: 1px;
            opacity: 0;
            transition: 0.3s;
            span{
                position: relative;
                &::before{
                    content: '';
                    position: absolute;
                    height: 1px;
                    width: 100%;
                    background-color: var(--clr-neutral-100);
                    bottom: -1px;
                    opacity: 0.5;
                }
            }
            &:hover{
                span{
                    &::before{
                        opacity: 1;
                    }
                }
            }
        }
        &:hover{
            h1{
                bottom: 60px;
            }
            h3{
                bottom: 40px;
                opacity: 1;
            }
        }
    }
}
.videoWrapper{
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    @media screen and (max-width:980px) {
        height: 50vw;
    }
    video{
        position: absolute;
        width: 100%;
        object-fit: cover;
        min-height: 100%;
        object-position: center bottom;
        bottom: 0;
        
    }

    
    .video-container {
        width: 640px;
        border-radius: 4px;
        margin: 0 auto;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: 0px 8px 20px rgba(black, 0.4);

        .video-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    
    .play-button-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        pointer-events: none;
        #circle-play-b {
            cursor: pointer;
            pointer-events: auto;

            svg {
                width: 100px;
                height: 100px;
                fill: #fff;
                stroke: #fff;
                cursor: pointer;
                background-color: rgba(black, 0.2);
                border-radius: 50%;
                opacity: 0.9;
            }
        }
    }

}
.bestProducts{
    .productSlider{
        .slide-arrow{
            width: 60px;
            height: 60px;
            top: 35%;
            &.prev-arrow{
                left: -150px;
                opacity: 0;
                transition: 0.3s;
            }
            &.next-arrow{
                right: -150px;
                opacity: 0;
                transition: 0.3s;
            }
        }
        &:hover{
            
            .slide-arrow{
                width: 60px;
                height: 60px;
                top: 35%;
                &.prev-arrow{
                    left: -50px;
                    opacity: 1;
                }
                &.next-arrow{
                    right: -50px;
                    opacity: 1;
                }
            }
        }
    }
    .item{
        position: relative;
        padding: 0 10px;
        .imgWrap{
            position: relative;
            width: 100%;
            overflow: hidden;
            img{
                position: relative;
                width: 100%;
            }
            .hover_img{
                position: absolute;
                top: 0;
                opacity: 0;
                z-index: 2;
                transition: transform 8s, opacity 1s;
            }
            &:hover{
                .hover_img{
                    position: absolute;
                    top: 0;
                    opacity: 1;
                    transform: scale(1.2);
                }
            }
            .options{
                position: absolute;
                background-color: var(--clr-neutral-100);
                width: 50px;
                height: fit-content;
                z-index: 3;
                display: flex;
                flex-direction: column;
                top: 10px;
                right: -60px;
                transition: 0.5s;
                a{
                    display: inline-block;
                    margin: 15px;
                    img{
                        width: 20px;
                    }
                }
                
                @media screen and (max-width:980px) {
                    right: 10px;
                }
            }
            .compare{
                position: absolute;
                background-color: var(--clr-neutral-100);
                width: 100%;
                z-index: 2;
                bottom: -60px;
                display: flex;
                justify-content: flex-end;
                transition: 0.5s;
                a{
                    display: inline-block;
                    margin: 15px;
                    img{
                        width: 20px;
                    }
                }
            }
        }
        h2{
            text-align: center;
            font-family: var(--ff-primary);
            font-weight: var(--fw-semibold);
            font-size: var(--fs-18);
            margin-top: 10px;
        }
        p{
            text-align: center;
            font-size: var(--fs-14);
            margin-top: 0;
            font-weight: var(--fw-semibold);
        }
        &:hover{
            .options{
                right: 10px;
            }
            .compare{
                bottom: 0;
            }
        }
    }
}
.productPageDetails{
    position: relative;
    h1{
        position: relative;
        font-family: var(--ff-primary);
        font-size: 30px;
    }
    .price{
        position: relative;
        font-family: var(--ff-primary);
        font-size: 26px;
    }
    .size{
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        h3{
            font-size: var(--fs-16);
            font-weight: var(--fw-semibold);
            margin: 0;
        }
        a{
            text-decoration: none;
            color: var(--clr-neutral-800);
            font-size: var(--fs-16);
        }
    }
    .outofstock{
        position: relative;
        font-size: var(--fs-16);
        font-weight: var(--fw-semibold);
        margin-top: 15px;
        color: red;
    }
    .addCart{
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 15px;
        .number{
            display: flex;
            align-items: center;
		}
		.minus, .plus{
            position: relative;
            display: flex;
            justify-content: center;
            width: 30px;
            align-items: center;
            font-size: var(--fs-22);
            font-weight: var(--fw-semibold);
            color: var(--clr-neutral-600);
            height: 42px;
            padding: 0 15px;
            border: 2px solid var(--clr-neutral-400);
            cursor: pointer;
		}
        input, select{
            position: relative;
            width: 50px;
            font-size: var(--fs-14);
            height: 42px;
            text-align: center;
            border: 2px solid var(--clr-neutral-400);
            &:focus{
                outline: none;
            }
        }
    }
    .guid{
        margin-top: 15px;
        display: flex;
        gap: 25px;
        a{
            position: relative;
            font-size: var(--fs-14);
            font-weight: var(--fw-semibold);
            color: var(--clr-neutral-900);
            display: flex;
            gap: 7px;
            img{
                width: 16px;
            }
            &:hover{
                text-decoration: none;
                opacity: 0.8;
            }
        }
    }
    .otherDetails{
        position: relative;
        margin-top: 15px;
        padding-top: 15px;
        display: block;
        border-top: 1px solid var(--clr-neutral-400);
        h3{
            font-size: var(--fs-16);
            font-weight: var(--fw-semibold);
            margin: 0;
        }
        .share{
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        a{
            position: relative;
            font-size: var(--fs-14);
            font-weight: var(--fw-semibold);
            color: var(--clr-neutral-900);
            display: flex;
            gap: 7px;
            img{
                width: 26px;
            }
            &:hover{
                text-decoration: none;
                opacity: 0.8;
            }
        }
    }
}
.productImage{
    position: relative;
    .productPage-nav{
        .slick-current{
            background-color: var(--clr-neutral-200);
        }
        .item{
            padding: 10px;
        }
        .slide-arrow{
            background-color: #ffffffab;
            width: 30px;
            height: 30px;
            margin:0 5px;
        }
    }
}

.slideBar{
    position: relative;
    width: 100%;
    h3{
        font-size: var(--fs-16);
        font-weight: var(--fw-semibold);
        text-transform: uppercase;
    }
    .categories{
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
        li{
            position: relative;
            padding: 5px 0;
            a{
                position: relative;
                color: #838383;
                font-weight: var(--fw-medium);
            }
            &:hover, &.active{
                a{
                    text-decoration: none;
                    font-weight: var(--fw-semibold);
                    color: var(--clr-neutral-900);
                }
            }
        }
    }
    .products{
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
        li{
            position: relative;
            padding: 5px 0;
            display: flex;
            padding: 10px 0;
            gap: 10px;
            border-bottom: 1px solid #dee2e6;
            a{
                position: relative;
                img{
                    width: 70px;
                }

            }
            .details{
                padding-top: 10px;
                h2{
                    font-family: var(--ff-primary);
                    font-weight: var(--fw-semibold);
                    font-size: var(--fs-18);
                    color: var(--clr-neutral-900);
                }
                h3{
                    font-size: var(--fs-12);
                    color: var(--clr-neutral-900);
                    span{
                        text-decoration: line-through;
                        color: var(--clr-neutral-500);
                        font-weight: var(--fw-regular);
                    }
                }
            }
            &:hover, &.active{
                a{
                    text-decoration: none;
                    font-weight: var(--fw-semibold);
                    color: var(--clr-neutral-900);
                }
            }
        }
    }
    .price-range{
        .range{
            margin-top: 20px;
            position: relative;
            display: flex;
            font-size: var(--fs-14);
            color: var(--clr-neutral-800);
            align-items: center;
            #slider-range-value1, #slider-range-value2{
                color: var(--clr-neutral-900);
                font-weight: var(--fw-medium);
                margin: 0 5px;
            }
        }
        .slider-labels {
            margin-top: 10px;
          }
          
          /* Functional styling;
           * These styles are required for noUiSlider to function.
           * You don't need to change these rules to apply your design.
           */
          .noUi-target,.noUi-target * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -ms-touch-action: none;
            touch-action: none;
            -ms-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
          }
          
          .noUi-target {
            position: relative;
            direction: ltr;
          }
          
          .noUi-base {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 1;
          /* Fix 401 */
          }
          
          .noUi-origin {
            position: absolute;
            right: 0;
            top: 0;
            left: 0;
            bottom: 0;
          }
          
          .noUi-handle {
            position: relative;
            z-index: 1;
          }
          
          .noUi-stacking .noUi-handle {
          /* This class is applied to the lower origin when
             its values is > 50%. */
            z-index: 10;
          }
          
          .noUi-state-tap .noUi-origin {
            -webkit-transition: left 0.3s,top .3s;
            transition: left 0.3s,top .3s;
          }
          
          .noUi-state-drag * {
            cursor: inherit !important;
          }
          
          /* Painting and performance;
           * Browsers can paint handles in their own layer.
           */
          .noUi-base,.noUi-handle {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
          }
          
          /* Slider size and handle placement;
           */
          .noUi-horizontal {
            height: 2px;
          }
          
          .noUi-horizontal .noUi-handle {
            width: 3px;
            height: 18px;
            left: 0px;
            top: -7px;
            background-color: var(--clr-primary-400);
          }
          
          /* Styling;
           */
          .noUi-background {
            background: #D6D7D9;
          }
          
          .noUi-connect {
            background: var(--clr-primary-400);
            -webkit-transition: background 450ms;
            transition: background 450ms;
          }
          
          .noUi-origin {
            border-radius: 2px;
          }
          
          .noUi-target {
            border-radius: 2px;
          }
          
          /* Handles and cursors;
           */
          .noUi-draggable {
            cursor: w-resize;
          }
          
          .noUi-vertical .noUi-draggable {
            cursor: n-resize;
          }
          
          .noUi-handle {
            cursor: default;
            -webkit-box-sizing: content-box !important;
            -moz-box-sizing: content-box !important;
            box-sizing: content-box !important;
          }
          
          .noUi-handle:active {
            border: 8px solid rgba(187,151,77, .5);
            border: 8px solid rgba(187,151,77, .5);
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            left: -14px;
            top: -14px;
          }
          
          /* Disabled state;
           */
          [disabled].noUi-connect,[disabled] .noUi-connect {
            background: #B8B8B8;
          }
          
          [disabled].noUi-origin,[disabled] .noUi-handle {
            cursor: not-allowed;
          }
    }
}
.about{
    h1{
        position: relative;
        font-family: var(--ff-primary);
        font-size: var(--fs-24);
        text-align: center;
        font-weight: var(--fw-semibold);
        text-decoration: underline;
    }
    p{
        position: relative;
        text-align: center;
        max-width: 1000px;
        margin: 0 auto;
    }
}
.faqs{
    .pl{
        padding-left: 25px;
        @media screen and (max-width:980px) {
            padding: 0;
        }
    }
    .pr{
        padding-right: 50px;
        border-right: 1px solid var(--clr-neutral-400);
        @media screen and (max-width:980px) {
            padding: 0;
            border-right: none;
        }
    }
    .accordion{
        
        .accordion-item:first-of-type, .accordion-item:last-of-type .accordion-button.collapsed,.accordion-item:last-of-type, .accordion-item:first-of-type .accordion-button, .accordion-item:last-of-type .accordion-collapse{
            border-radius: 0;
        }
        .accordion-button{
            padding-left:0 ;
            padding-right:0 ;
            font-family: var(--ff-primary);
            font-size: var(--fs-18);
            font-weight: var(--fw-semibold);
            &:focus{
                border: none;
                box-shadow: none;
            }
            &:not(.collapsed){
                background-color: transparent;
            }
        }
        .accordion-item{
            border: none;
            border-top:1px solid #ccc;
            &:last-child{
                border-bottom:1px solid #ccc;
            }
        }
        .accordion-body{
            padding-left:0 ;
            padding-right:0 ;
        }
    }
}
.pagenotfound{
    .wrapper{
        position: relative;
        width: 100%;
        padding: 50px 0;
    }
    h1{
        position: relative;
        font-size: 170px;
        font-weight: bold;
        text-align: center;
        color: var(--clr-neutral-200);
    }
    span{
        position: absolute;
        display: flex;
        width: 100%;
        text-align: center;
        justify-content: center;
        font-family: var(--ff-primary);
        font-size: 32px;
        font-weight: var(--fw-semibold);
        color: var(--clr-primary-400);
        top: 50%;
        transform: translateY(-50%);
    }
    form{
        padding-bottom: 50px;
        h3{
            text-align: center;
            font-family: var(--ff-primary);
            color: var(--clr-neutral-900);
        }
        p{
            text-align: center;
        }
        .search{
            position: relative;
            max-width: 400px;
            margin: 0 auto;
            button{
                position: absolute;
                background-color: transparent;
                top: 0px;
                right: 5px;
                width: fit-content;
                img{
                    width: 30px;
                }
            }
        }
    }
}

.account{
    .dashboardLink{
        position: relative;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 1px solid #ccc;
        transition: 0.3s;
        gap: 10px;
        img{
            height: 50px;
        }
        span{
            text-decoration: none;
            font-size: var(--fs-14);
            font-weight: var(--fw-semibold);
            color: var(--clr-neutral-900);
        }
        &:hover{
            text-decoration: none;
            background: var(--clr-neutral-200);
            span{
                color: var(--clr-primary-400);
            }
        }
    }
    .leftMenu{
        position: relative;
        margin-top: 20px;
        list-style: none;
        padding: 0;
        li{
            position: relative;
            a{
                position: relative;
                display: block;
                padding:12px 10px;
                color: var(--clr-neutral-900);
                font-weight: var(--fw-medium);
                
            }
            &:hover, &.active{
                background: var(--clr-neutral-200);
                a{
                    text-decoration: none;
                }
            }
        }
    }
}