/*بِسْمِ ٱللَّهِ ٱلرَّحْمَـٰنِ ٱلرَّحِيمِ ١*/
/**/
#the_header {
    width: 100vw;
    /*height: 10vh;*/
    /* height: 10vh; */
    /* background-color: white; */
    background-color: rgba(255, 255, 255, 0.242);
    position: fixed;
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
    top: 0px;
    left: 0px;
    z-index: 27;
    /*15-08-2024*/backdrop-filter: blur(10px);
    /*06-11-2024*/height: 7vw;
}

/*#the_header_gradient_shadow {
    width: 100vw;
    /*height: 10vh;*/
    /*height: 10vh;
    background: linear-gradient(to right, #dd8ebe, #ddd957, #56FE83);
    position: fixed;
    top: 7px;
    left: 0px;
    filter: blur(10px);
    opacity: 0.27;
    display: block;
    z-index: 21;
}*/

#name_of_the_website {
    font-family: 'Amiri';
    top: -10%;
    left: 5%;
    width: 100%;
    height: 100%;
    position: absolute;
}

@font-face {
    font-family: 'Amiri';
    src: url("/fonts/amiri.ttf");
}

@font-face {
    font-family: 'Bellefair';
    src: url("/fonts/bellefair.ttf");
}

@font-face {
    font-family: 'Amazing Mother';
    src: url("/fonts/AmazingMother-z89Pa.ttf");
}

@font-face {
    font-family: 'Always in my heart';
    src: url("/fonts/AmazingMother-z89Pa.ttf");
}

@font-face {
    font-family: 'Quicksand Book';
    src: url("/fonts/quicksand_book.otf");
}

@font-face {
    font-family: 'Quicksand Light';
    src: url("/fonts/quicksand_light.otf");
}

@font-face {
    font-family: 'Quicksand Bold';
    src: url("/fonts/quicksand_bold.otf");
}

@font-face {
    font-family: 'Bride';
    src: url("/fonts/Bride.ttf");
}

@font-face {
    font-family: 'Sunny Spells';
    src: url("/fonts/SunnyspellsRegular-MV9ze.otf");
}

@font-face {
    font-family: 'HarmonyOS Sans Regular';
    src: url("/fonts/HarmonyOS_Sans_Regular.ttf");
}

@font-face {
    font-family: 'Playpen Sans';
    src: url("/fonts/PlaypenSans-VariableFont_wght.ttf");
}

#slogan_text_main {
    position: absolute;
    /*top: 27vh;*/
    top: 40vw;
    width: 70%;
    left: 15%;
    right: 15%;
    text-align: center;
    /*font-family: 'Bellefair';*/
    /*font-family: 'Amazing Mother';*/
    font-family: 'Bellefair';
    font-weight: 200;
    font-size: 10vw;
    /*text-shadow: 0.3vh 0.7vh 1.7vw rgba(0, 0, 0, 0.2);*/
    z-index: 7;
}

#tab_1_div {
    position: absolute;
    /*top: 76vh;*/
    top: 131vw;
    width: 40vw;
    height: 10vw;
    left: 0px;border-radius: 0 4vw 0 0;
    /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
    /* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1); */
    /*background: #fdd7ee;*/
    background-color: transparent;
    box-shadow: 3px -1px 4px rgba(0, 255, 38, 0.1);
    display: none;
    z-index: 14;
}

#tab_1_div p {
    position: absolute;
    font-family: 'Quicksand Bold';
    top: -40%;
}

#tab_2_div {
    position: absolute;
    /*top: 76vh;*/
    /*width: 40vw;*/
    /* top: 131vw; */
    /* top: 80vh; */
    /* top: 140vh; */
    width: 45vw;
    height: 10vw;
    /*left: 40vw;*/border-radius: 0 4vw 0 0;
    /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
    box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
    background: #d7fdda;
    left: 0px;
    z-index: 10;
    /*06-11-2024*/top: 10vw;
}

#scrollable_section_white_background {
    width: 100vw;
    height: 100vh;
    /*top: 81.7vh;*/
    top: 140vw;
    left: 0px;
    background-color: whitesmoke;
    position: absolute;
}

#scrollable_section_1 {
    width: 100vw;
    height: 100vh;
    background-color: #fdd7ee;
    position: absolute;
    display: none;
    z-index: 14;
}

#scrollable_section_2 {
    width: 100vw;
    height: 100vh;
    background-color: #d7fdda;
    position: absolute;
    display: block;
    z-index: 10;
}

#shopping_main_text {
    left: 5.5%;
    font-size: 7.7vw;
    top: -1%;
    position: absolute;
    font-family: 'Amiri';
    font-weight: 700;
    color: white;
    text-shadow: 1px 2.7px 3px rgba(0, 0, 0, 0.1);

}

#product_card_1 {
    position: absolute;
    left: 5%;
    top: 31vw;
    width: 45vw;
    height: 45vw;
    /*left: 40vw;*/border-radius: 4vw;
    /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
    box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
    /**background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
    background-size: cover;*/
    z-index: 14;
    /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
    mask-clip: content-box;*/
    /* background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg); */
}

#product_image_1 {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    display: block;
    mask-clip: view-box;
}

#menu_three_lines_icon_vector {
    position: absolute;
    z-index: 14;
    height: 100%;
    /*right: -14.5vw;*/
    top: 1vw;
    /* right: 0vw; */
    scale: 0.6;
    z-index: 28;
    right: 0%;
    /*right: -18vw;*/
}

#cross_icon {
    position: absolute;
    z-index: 14;
    height: 100%;
    /*right: -14.5vw;*/
    top: 1vw;
    right: 0vw;
    scale: 0.6;
    z-index: 28;
    display: none;
}

#search_icon_vector {
    position: absolute;
    z-index: 14;
    height: 100%;
    /*right: -10.9vw;*/
    /*right: -8.9vw;*/
    /* right: -7.91vw; */
    width: 9%;
    /* background-color: #0bc91b; */
    /* left: 87%; */
    top: -3%;
    scale: 0.6;
    left: 87%;
}

#span_text_mesmerise {
    background: linear-gradient(to right,rgb(178.5, 178.5, 255), rgb(255, 178.5, 255), rgb(255, 255, 178)); color: transparent; background-clip: text;
    z-index: 7;
}

/*#span_text_mesmerise::before {
    background: linear-gradient(to right, rgb(178.5, 178.5, 255), rgb(255, 178.5, 255), rgb(255, 255, 178));
    filter: blur(1px);
    color: transparent; background-clip: text;
}*/

#span_text_mesmerise_2 {
    position: absolute;
    transform: translateX(-23vw) translateY(1.7vw);
    filter: blur(7px);
    background: linear-gradient(to right,rgb(178.5, 178.5, 255), rgb(255, 178.5, 255), rgb(255, 255, 178)); color: transparent; background-clip: text;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
}

#product_card_2 {
    position: absolute;
    left: 5%;
    top: 80vw;
    width: 90vw;
    /*height: 40vw;*/
    height: 45vw;
    /*left: 40vw;*/border-radius: 4vw;
    /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
    box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
    background-image: url(/images/MacBook-Air-2018-Wallpaper-02-1242x2688.jpg);
    background-size: cover;
    background-position: center;
    z-index: 14;
    /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
    mask-clip: content-box;*/
}

#product_image_2 {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    display: none;
    mask-clip: view-box;
}

#product_card_3 {
    position: absolute;
    left: 5%;
    top: 129vw;
    width: 90vw;
    /*height: 40vw;*/
    height: 45vw;
    /*left: 40vw;*/border-radius: 4vw;
    /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
    box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
    background-image: url(/images/MacBook-Air-2018-Wallpaper-03-1242x2688.jpg);
    background-size: cover;
    background-position: center 100%;
    z-index: 14;
    /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
    mask-clip: content-box;*/
}

#div_below_header {
    width: 100%;
    /* height: 40vw; */
    height: 90vh;
    background-color: white;
    position: absolute;
    top: 10vh;
    left: 0px;
    z-index: 10;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
    display: none;
}

#tile_1 {
    position: absolute;
    width: 90%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    /*background-color: transparent;*/
    /*border: solid 1.4vh #404040;*/
    /*border: solid 1vw #404040;*/
    border-radius: 1000px;
    left: 5%;
    right: 5%;
    /*background-color: #fdd7ee;*/
    border: solid 0.4vw #fdd7ee;
}


#tile_1 p {
    font-size: 3vh;
    position: absolute;
    /*top: -14%;*/
    top: -1.4vh;
    left: 1vw;
    font-family: 'Quicksand Book';
}

#tile_2 {
    position: absolute;
    width: 90%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    border: solid 1vw #404040;
    border-radius: 1000px;
    left: 5%;
    right: 5%;
    top: 40%;
}

#tile_2 p {
    font-size: 3vh;
    position: absolute;
    /*top: -14%;*/
    top: -1.4vh;
    left: 1vw;
    font-family: 'Quicksand Book';
}

#tab_2_div p {
    font-size: 3vh;
    position: absolute;
    /*top: -14%;*/
    top: -27%;
    left: 1vw;
    font-family: 'Quicksand Bold';
}

lottie-player {
    width: 107vw;
    height: 114vw;
    position: absolute;
    /*top: 3vh;*/
    z-index: 1;
    /*left: 4vw;
    right: 70vw;*/
    top: 3vh;
    left: -10vw;
}

#colourful_bubbles_design {
    position: absolute;
    width: 100vw;
    /* top: 480vh; */
    top: 240vw;
    left: 0px;
    z-index: 10;
}

#colourful_bubbles_divider {
    position: absolute;
    width: 100vw;
    height: 100vw;
    top: 480vh;
    left: 0px;
    z-index: 10;
    /* background-color: transparent; */
    /* background-color: #f74070; */
    display: none;
}

#colourful_bubbles_divider_2 {
    position: absolute;
    width: 100vw;
    height: 100vw;
    top: 480vh;
    left: 0px;
    z-index: 10;
    transform: rotateZ(20deg);
    background-color: transparent;
    display: none;
}

#divider_inside_card_6 {
    position: absolute;
    width: 90%;
    height: 90%;
    /* background-image: url("/images/MacBook-Air-2018-Wallpaper-02-1242x2688.jpg"); */
    background-image: url("/images/image002.jpg");
    background-size: cover;
    top: 5%;
    left: 5%;
    border-radius: 2vw;
    opacity: 1;
}

body {
    overflow-x: hidden;
}

@media (prefers-color-scheme: light) {
    body {
        background-color: black;
    }
}

@media screen and (min-width: 700px) and (max-width: 999px) {
    #the_header {
        width: 100vw;
        /*height: 10vh;*/
        height: 9vw;
        background-color: white;
        position: fixed;
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
        top: 0px;
        left: 0px;
        z-index: 27;
    }

    body {
        background-color: white;
    }

    #name_of_the_website {
        font-family: 'Amiri';
        /*top: -15%;
        left: 3.5%;*/
        /* top: 0px; */
        /* margin-top: 2.1%; */
        left: 0px;
        margin-left: 3.5%;
        /* margin-bottom: 2.1vw; */
        width: 100%;
        height: 100%;
        font-size: 3vw;
        position: absolute;
        background-color: red;
        /*New lines*/
        color: black;
        text-decoration: none;
        /*06-11-2024*/top: -1vw;
    }

    #tile_1 {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    /*background-color: transparent;*/
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    top: 10%;
    /*width: 100%;*/
    left: 2.5%;
    background-color: transparent;
    transition: border 1.4s;
    border: solid 0.4vw transparent;
    }

    #tile_1:hover {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    /*background-color: transparent;*/
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    top: 10%;
    /*width: 100%;*/
    left: 2.5%;
    background-color: transparent;
    border: solid 0.4vw #fdd7ee;
    }

    #tile_1 p {
        font-family: 'Quicksand Bold';
        font-size: 5vw;
        width: 100vw;
        text-align: center;
        top: -25%;
    }

    #tile_2 {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    /*top: 37%;*/
    /*width: 100%;*/
    left: 2.5%;
    border: solid 0.4vw transparent;
    top: 40%;
    transition: border 1.4s;
    }

    #tile_2:hover {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    top: 40%;
    /*width: 100%;*/
    left: 2.5%;
    border: solid 0.4vw #d7fdda;
    }

    #tile_2 p {
        font-family: 'Quicksand Bold';
        font-size: 5vw;
        width: 100vw;
        text-align: center;
        top: -25%;
    }

    #tile_3 {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    /*top: 37%;*/
    /*width: 100%;*/
    left: 2.5%;
    border: solid 0.4vw transparent;
    /* top: 56%; */
    top: 70%;
    transition: border 1.4s;
    }

    #tile_3:hover {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    /* top: 56%; */
    /*width: 100%;*/
    left: 2.5%;
    border: solid 0.4vw #c6e7fc;
    }

    #tile_3 p {
        position: absolute;
        font-family: 'Quicksand Bold';
        font-size: 5vw;
        width: 100vw;
        text-align: center;
        top: -25%;
    }

    #scrollable_section_2 {
        width: 100vw;
        height: 40vw;
        background-color: #d7fdda;
        position: absolute;
        top: -62vw;
        display: block;
        z-index: 10;
    }

    #tab_2_div {
            position: absolute;
            /*top: 76vh;*/
            /*width: 40vw;*/
            /* top: 131vw; */
            /* top: 80vh; */
            top: 69vw;
            width: 45vw;
            height: 10vw;
            /*left: 40vw;*/border-radius: 0 4vw 0 0;
            /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
            box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
            background: #d7fdda;
            left: 0px;
            z-index: 10;
    }

    #tab_2_div p {
        font-family: 'Quicksand Bold';
        top: -15%;
        left: 7.5%;
        width: 100%;
        height: 100%;
        font-size: 4vw;
        position: absolute;
    }

    #shopping_main_text {
        left: 5.5%;
        font-size: 7.7vw;
        top: -109%;
        position: absolute;
        font-family: 'Amiri';
        font-weight: 700;
        color: white;
        text-shadow: 1px 2.7px 3px rgba(0, 0, 0, 0.1);
    
    }

    #div_below_header {
        width: 100%;
        height: 40vw;
        background-color: white;
        position: absolute;
        /*top: 10vh;*/
        top: -100vh;
        left: 0px;
        z-index: 10;
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
        display: block;
        transition: all 1.7s;
    }

    #slogan_text_main {
        position: absolute;
        /*top: 27vh;*/
        top: 10.4vw;
        width: 51%;
        /*left: 15%;
        right: 15%;*/
        left: 24.5%;
        right: 24.5%;
        text-align: center;
        /*font-family: 'Bellefair';*/
        /*font-family: 'Amazing Mother';*/
        font-family: 'Bellefair';
        font-weight: 200;
        font-size: 6vw;
        /*text-shadow: 0.3vh 0.7vh 1.7vw rgba(0, 0, 0, 0.2);*/
        z-index: 14;
    }

    #span_text_1 {
        scale: 1;
    }

    #span_text_1::selection {
    color: #2200ff;
    }

    #search_icon_vector {
        position: absolute;
        /* right: -2vw; */
         left: 85%; 
    }

    lottie-player {
        width: 107vw;
        height: 114vw;
        position: absolute;
        top: -40vh;
        z-index: 1;
    }

    #product_card_5 {
        position: absolute;
        /*left: 5%;*/
        left: 3%;
        top: 1vw;
        /*width: 45vw;
        height: 45vw;*/
        /*left: 40vw;*/border-radius: 4vw;
        /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
        box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
        /*background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        background-size: cover;*/
        background-color: #f6f6f6;
        z-index: 14;
        /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        mask-clip: content-box;*/
        width: 35vw;
        height: 35vw;
    }

    #product_card_6 {
        position: absolute;
        /*left: 5%;*/
        /* left: 63%; */
        left: 40%;
        top: 1vw;
        /*width: 45vw;
        height: 45vw;*/
        /*left: 40vw;*/border-radius: 4vw;
        /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
        box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
        /*background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        background-size: cover;*/
        background-color: #f6f6f6;
        z-index: 14;
        /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        mask-clip: content-box;*/
        width: 35vw;
        height: 35vw;
    }

    #product_card_7 {
        position: absolute;
        /*left: 5%;*/
        /* left: 63%; */
        right: 3%;
        top: 1vw;
        /*width: 45vw;
        height: 45vw;*/
        /*left: 40vw;*/border-radius: 4vw;
        /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
        box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
        /*background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        background-size: cover;*/
        background-color: #f6f6f6;
        z-index: 14;
        /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        mask-clip: content-box;*/
        /* width: 20vw; */
        /* height: 20vw; */
        width: 17vw;
        height: 17vw;
    }

    #product_card_8 {
        position: absolute;
        /*left: 5%;*/
        /* left: 63%; */
        right: 3%;
        top: 19.4vw;
        /*width: 45vw;
        height: 45vw;*/
        /*left: 40vw;*/border-radius: 4vw;
        /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
        box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
        /*background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        background-size: cover;*/
        background-color: #f6f6f6;
        z-index: 14;
        /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        mask-clip: content-box;*/
        /* width: 20vw; */
        /* height: 20vw; */
        width: 17vw;
        height: 17vw;
    }

    #menu_three_lines_icon_vector {
        position: absolute;
        z-index: 14;
        height: 100%;
        /*right: -14.5vw;*/
        /*top: -0.7vw;*/
        right: 0.27vw;
        scale: 0.6;
        z-index: 28;
        /*right: -18vw;*/
        top: -0.4vw;
    }

    #cross_icon {
        position: absolute;
        z-index: 14;
        height: 100%;
        /*right: -14.5vw;*/
        /*top: -0.7vw;*/
        top: -0.4vw;
        right: 0vw;
        scale: 0.6;
        z-index: 28;
        display: none;
        transform: rotateX(270deg);
    }

    #divider_inside_card_5 {
        position: absolute;
        width: 90%;
        height: 90%;
        /* background-image: url("/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg"); */
        background-size: cover;
        top: 5%;
        left: 5%;
        border-radius: 2vw;
        opacity: 1;
        background-image: url("/images/image1-6.jpg");
        background-size: 103%;
    }

    #divider_inside_card_5_on_product_page_1 {
        position: absolute;
        /*width: 40vw;
        height: 40vw;*/
        /*width: 33vw;
        height: 33vw;*/
        width: 38vw;
        height: 38vw;
        /* background-image: url("/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg"); */
        background-size: cover;
        /*top: 15%;*/
        /*top: 23%;*/
        top: 21%;
        left: 3%;
        border-radius: 2vw;
        animation-name: enter_image_anim_on_product_page_1;
        animation-duration: 2s;
        /* animation-timing-function: cubic-bezier(0.3,0.74,0.76,1.05); */
        animation-timing-function: cubic-bezier(0.47,0.8,0,1);
        background-image: url("/images/image1-6.jpg");
        background-size: 101%;
        opacity: 1;
    }

    body {
        background-color: #f6f6f6;
    }

    #pencil_sharpner_text_large {
        /* font-size: 10vh; */
        font-size: 7.9vh;
        left: 45%;
        color: black;
        top: 10vh;
        position: absolute;
        /*font-family: 'Quicksand Bold';*/
        font-family: 'Quicksand Bold';
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 700;
        opacity: 1;
        animation-name: enter_text_1_anim_on_product_page_1;
        animation-duration: 1.5s;
    }

    #underline_number_1 {
        /*width: 40vw;*/
        width: 41vw;
        height: 0.5vh;
        background-color: rgba(0, 0, 0, 0.27);
        position: absolute;
        /* top: 33vh; */
        /* top: 27.4vh; */
        left: 45%;
        border-radius: 100px;
        animation-name: underline_animation;
        animation-duration: 1.7s;
        animation-delay: 1.8s;
        animation-fill-mode: backwards;
        top: 14vw;
    }

    #description_1 {
        /* font-size: 5vh; */
        left: 45%;
        color: black;
        /* top: 33vh; */
        /* top: 27.6vh; */
        position: absolute;
        font-family: 'HarmonyOS Sans Regular';
        word-spacing: 0.5vw;
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 300;
        /*New line of style*//*font-size: 2.7vh;*/
        width: 50%;
        font-size: 2.7vw;
        top: 35vw;
    }

    #quantity_text_1 {
        position: absolute;
        top: 75vh;
        left: 45vw;
        font-family: 'Quicksand Book';
        /* font-size: 2.7vh; */
        font-size: 4vh;
        display: none;
    }

    #circle_colour_one_svg {
        width: 10vw;
        height: 10vw;
        position: absolute;
        top: 10vh;
    }

    #circle_colour_one_main_circle {
        fill: red;
    }

    #circle_button_1 {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 51vh;
        left: 45vw;
        border: none;
        background-color: rgb(226, 14, 14);
        /* box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.9); */
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(155, 0, 0, 0.9), 0.2vw 0.2vw 1vh rgba(155, 0, 0, 0.4);
        transition: all 0.45s;
        animation-name: colourful_circle_button_scale_anim;
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.11,0.66,0.55,1);
        scale: 1;
    }

    #circle_button_1:hover {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        /* top: 48vh; */
        top: 49.9vh;
        left: 45vw;
        border: none;
        background-color: rgb(226, 14, 14);
        /* box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.9); */
        /* box-shadow: inset -0.2vw -0.2vw 1vh rgba(155, 0, 0, 0.9), 0.2vw 0.2vw 1vh rgba(155, 0, 0, 0.4); */
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(155, 0, 0, 0.9), 0.2vw 0.7vw 1.4vh rgba(155, 0, 0, 0.4);
    }

    #circle_button_2 {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 51vh;
        left: 49.7vw;
        border: none;
        background-color: rgb(237, 219, 15);
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(237, 182, 3, 0.9), 0.2vw 0.2vw 1vh rgba(174, 119, 1, 0.4);/*7px*/
        transition: all 0.45s;
        animation-name: colourful_circle_button_scale_anim;
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.11,0.66,0.55,1);
        scale: 1;
        animation-delay: 0.7s;
        animation-fill-mode: backwards;
    }

    #circle_button_2:hover {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        /* top: 50vh; */
        top: 49.9vh;
        left: 49.7vw;
        border: none;
        background-color: rgb(237, 219, 15);
        /*box-shadow: inset -0.2vw -0.2vw 1vh rgba(237, 182, 3, 0.9), 0.2vw 0.2vw 1vh rgba(174, 119, 1, 0.4);*//*7px*/
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(237, 182, 3, 0.9), 0.2vw 0.7vw 1.4vh rgba(174, 119, 1, 0.4);
    }

    #circle_button_3 {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 51vh;
        left: 54.4vw;
        border: none;
        background-color: rgb(138, 247, 21);
        /* box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.9); */
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(120, 180, 0, 0.9), 0.2vw 0.2vw 1vh rgba(103, 155, 0, 0.4);/*rgba(103, 155, 0, 0.9)*/
        transition: all 0.45s;
        animation-name: colourful_circle_button_scale_anim;
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.11,0.66,0.55,1);
        scale: 1;
        animation-delay: 1.4s;
        animation-fill-mode: backwards;
    }

    #circle_button_3:hover {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 49.9vh;
        left: 54.4vw;
        border: none;
        background-color: rgb(138, 247, 21);
        /* box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.9); */
        /*box-shadow: inset -0.2vw -0.2vw 1vh rgba(120, 180, 0, 0.9), 0.2vw 0.2vw 1vh rgba(103, 155, 0, 0.4);*//*rgba(103, 155, 0, 0.9)*/
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(120, 180, 0, 0.9), 0.2vw 0.7vw 1.4vh rgba(103, 155, 0, 0.4);
    }

    #circle_button_4 {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 51vh;
        left: 59.1vw;
        border: none;
        background-color: rgb(7, 131, 240);
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(0, 65, 177, 0.9), 0.2vw 0.2vw 1vh rgba(0, 65, 177, 0.4);/*7px*/
        transition: all 0.45s;
        animation-name: colourful_circle_button_scale_anim;
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.11,0.66,0.55,1);
        scale: 1;
        animation-delay: 2.1s;
        animation-fill-mode: backwards;
    }

    #circle_button_4:hover {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 49.9vh;
        left: 59.1vw;
        border: none;
        background-color: rgb(7, 131, 240);
        /*box-shadow: inset -0.2vw -0.2vw 1vh rgba(0, 65, 177, 0.9), 0.2vw 0.2vw 1vh rgba(0, 65, 177, 0.4);*//*7px*/
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(0, 65, 177, 0.9), 0.2vw 0.7vw 1.4vh rgba(0, 65, 177, 0.4);
    }

    #add_to_basket_button {
        position: absolute;
        top: 89%;
        width: 8vw;
        height: 5vw;
        /* left: 87vw; */
        border-radius: 10vw;
        border: none;
        /* right: 20vw; */
        /* right: 16.4vw; */
        right: 17.4vw;
        background-color: #ff98d6;
        box-shadow: inset 0 0 1.2vh rgba(255, 40, 199, 0.4);
    }

    #add_to_basket_button:hover {
        box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5);
    }

    #add_to_basket_button svg {
        position: absolute;
        /* top: 10%; */
        top: 0%;
        width: 8vw;
        height: 5vw;
        left: 0px;
        /* scale: 0.47; */
        scale: 0.51;
    }

    #checkout_button {
        position: absolute;
        top: 89%;
        width: 15vw;
        height: 5vw;
        /* left: 87vw; */
        border-radius: 10vw;
        border: none;
        background-color: #d7fdda;
        /* box-shadow: inset 0 0 1.2vh rgba(0, 40, 177, 0.4); */
        box-shadow: inset 0 0 1.2vh rgba(11, 201, 27, 0.40);/*rgba(40, 140, 70, 0.4);*/
        right: 2.4vw;
        font-family: 'Quicksand Book';
        font-size: 1.7vw;
        color: #08902a;
    }

    #description_button {
        position: absolute;
        top: 89%;
        width: 18vw;
        height: 5vw;
        /* left: 87vw; */
        border-radius: 10vw;
        border: none;
        /* right: 20vw; */
        /* right: 16.4vw; */
        left: 45vw;
        background-color: #f6f6f6;
        /* box-shadow: 0 0.78vh 1.4vh rgba(0, 0, 0, 0.27); */
        box-shadow: 0 0.78vh 1.4vh rgba(0, 0, 0, 0.14);
        font-family: 'Quicksand Bold';
        /* font-size: 2.7vw; */
        font-size: 1.9vw;
        color: #404040;
        transition: all 0.78s;
    }

    #description_button:hover {
        top: 87%;
        box-shadow: 0 3vh 1.4vh rgba(0, 0, 0, 0.14);
    }

    #quantity_text_1 {
        position: absolute;
        /* top: 75vh; */
        /* top: 67vh; */
        top: 54vh;
        left: 45vw;
        font-family: 'Quicksand Book';
        /* font-size: 2.7vh; */
        font-size: 4vh;
    }

    #quantity_input_field {
        position: absolute;
        /* top: 70vh; */
        /* left: 45vw; */
        /* left: 53.4vw; */
        /* border-radius: 1vh; */
        /* border-radius: 1.7vh; */
        /* left: 54.7vw; */
        left: 55.6vw;
        border-radius: 2.7vh;
        /* width: 2.7vw; */
        width: 4vw;
        height: 4vw;
        font-family: 'Quicksand Book';
        font-size: 3vh;
        border: solid 1vh #0bc91b;
        color: #0bc91b;
        background-color: transparent;
        /* transition: border 1s; */
        /* top: 70.4vh; */
        /* top: 63vh; */
        top: 57.9vh;
        transition: all 0.4s;
        display: none;
    }

    #quantity_input_field:focus {
        /* position: absolute; */
        /* top: 70vh; */
        /* left: 45vw; */
        /* left: 53.4vw; */
        border-radius: 2.7vh;
        /* width: 2.7vw; */
        /* width: 4vw; */
        /* height: 4vw; */
        /* font-family: 'Quicksand Book'; */
        /* font-size: 3vh; */
        border: solid 1vh #ff98d6;
        color: #ff98d6;
        background-color: transparent;
        transition: all 0.4s;/*border 1s;*/
    }

    #contents_text_1 {
        position: absolute;
        /* top: 75vh; */
        /* top: 65vh; */
        left: 45vw;
        font-family: 'Quicksand Book';
        /* font-size: 2.7vh; */
        font-size: 4vh;
        top: 65vh;
    }

    #contents_text_2 {
        position: absolute;
        /* top: 75vh; */
        /* top: 65vh; */
        top: 75vh;
        left: 45vw;
        font-family: 'HarmonyOS Sans Regular';
        /* font-size: 2.7vh; */
        font-size: 4vh;
    }

    #price_text_block {
        left: 71.7%;
        color: black;
        /* top: 33vh; */
        top: 38.6vh;
        position: absolute;
        font-family: 'HarmonyOS Sans Regular';
        word-spacing: 0.5vw;
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 300;
        /*New line of style*/font-size: 7vh;
        width: 50%;
    }

    #number_of_items_left_div {
        position: absolute;
        left: 45vw;
        /* border: solid 0.4vh var(--sharperner_red_colour); */
        /* border: solid 0.7vh var(--sharperner_red_colour); */
        /* top: 56vh; */
        /* top: 62vh; */
        /* width: 50vw; */
        /* width: 33vw; */
        /* width: 27vw; */
        /* top: 50vh; */
        /* top: 50%; */
        /* top: 25vw; */
        /* top: 53%; */
        /* top: 46%; */
        top: 48.4%;
        width: 25vw;
        height: 5vh;
        border-radius: 10vw;
        /* font-family: 'HarmonyOS Sans Regular'; */
        background: linear-gradient(to left, #d7fdda, #ff98d6);
        box-shadow: inset 0.5vh 0.5vh 1.4vh rgba(251, 121, 199, 0.5), inset -0.5vh -0.5vh 1.4vh rgba(128, 252, 159, 0.4);/*inset 0.5vh 0.5vh 1.4vh rgba(251, 121, 199, 0.7), inset -0.5vh -0.5vh 1.4vh rgba(128, 252, 159, 0.7);*/
        display: none;
    }

    #number_of_items_left_div p {
        position: absolute;
        /* top: -40%; */
        color: white;/*var(--sharperner_red_colour);*/
        left: 2.4%;
        font-family: 'Quicksand Bold';
        font-size: 3vh;
        /* top: 0px; */
        top: -2vh;
        display: none;
    }

    #number_of_items_left_div p::selection {
        color: white;
        background-color: #e0ccfd;
    }

    #basket_icon_vector {
        position: absolute;
        right: 10vw;

        z-index: 14;
        height: 100%;
        /*right: -14.5vw;*/
        /*top: -0.7vw;*/
        scale: 0.86;
        z-index: 28;
        /*right: -18vw;*/
        top: -0.33vw;
    }

    #_text_block_1 {
        position: absolute;
        width: 70%;
        font-family: 'Quicksand Book';
        left: 15%;
        right: 15%;
        /* font-size: 1vw; */
        /* font-size: 2vh; */
        /* top: 16vh; */
        top: 15.7vh;
        font-size: 4.7vh;
        text-align: center;

    }

    #_text_block_2 {
        position: absolute;
        width: 70%;
        font-family: 'Quicksand Book';
        left: 15%;
        right: 15%;
        /* font-size: 1vw; */
        /* font-size: 2vh; */
        /* top: 16vh; */
        /* top: 55.7vh; */
        /* top: 67.8vh; */
        top: 71vh;
        font-size: 4.7vh;
        text-align: center;

    }

    #divider_inside_card_6 {
        /* position: absolute; */
        width: 90%;
        height: 90%;
        /* background-image: url("/images/MacBook-Air-2018-Wallpaper-02-1242x2688.jpg"); */
        /* background-image: url("/images/image002.jpg"); */
        /* background-size: cover; */
        top: 5%;
        left: 5%;
        border-radius: 2vw;
        /* opacity: 1; */
    }

    #_large_text_block_1 {
        position: absolute;
        /* top: -50%; */
        top: -40%;
        left: 3%;
        text-align: center;
        font-family: 'HarmonyOS Sans Regular';
        /* font-size: 1.2vh; */
        /* font-size: 4vh; */
        font-size: 4vh;
    }

    #_large_text_block_2 {
        width: 100%;
        text-align: center;
        font-family: 'Quicksand Bold';
        font-size: 10vh;
    }

    #_large_text_block_3::selection {
        color: #0bc91b;
        background-color: #d7fdda;
    }

    #star_vector_icon {
        /* width: 10vw; */
        width: 7vw;
        position: absolute;
        left:45%;
        right: 45%;
        top: -4%;
    }

    #three_four_pointed_stars_vector_icon {
        /* width: 10vw; */
        width: 7vw;
        position: absolute;
        left:45%;
        right: 45%;
        /* top: 70%; */
        /* top: 78%; */
        /* top: 89%; */
        top: 139%;
    }
    
    #_large_text_block_3 {
        width: 100%;
        text-align: center;
        font-family: 'Quicksand Bold';
        font-size: 10vh;
        position: absolute;
        top: 55vh;
    }

    #_large_text_block_4 {
        width: 100%;
        text-align: center;
        font-family: 'Quicksand Bold';
        font-size: 10vh;
        position: absolute;
        top: 105vh;
    }

    #_text_block_3 {
        position: absolute;
        width: 70%;
        font-family: 'Quicksand Book';
        left: 15%;
        right: 15%;
        /* font-size: 1vw; */
        /* font-size: 2vh; */
        /* top: 16vh; */
        /* top: 55.7vh; */
        /* top: 67.8vh; */
        /* top: 114vh; */
        top: 121vh;
        font-size: 4.7vh;
        text-align: center;

    }

    #_text_block_2::selection {
        color: #0bc91b;
        background-color: #d7fdda;
    }

    #_text_block_3::selection {
        color:rgb(7, 131, 240);
        background-color: #c6e7fc;
    }

    #_large_text_block_4::selection {
        color:rgb(7, 131, 240);
        background-color: #c6e7fc;
    }

    #my_shopping_basket_text_large {
        font-size: 10vh;
        left: 3%;
        color: black;
        top: 10vh;
        position: absolute;
        /*font-family: 'Quicksand Bold';*/
        font-family: 'Quicksand Bold';
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 700;
        opacity: 1;
    }

    #underline_number_2 {
        width: 94vw;
        height: 0.5vh;
        background-color: rgba(0, 0, 0, 0.27);
        position: absolute;
        top: 33vh;
        left: 3%;
        border-radius: 100px;
        animation-name: underline_animation_2;
        animation-duration: 1.7s;
        animation-delay: 1.8s;
        animation-fill-mode: backwards;
    }

    #product_card_on_basket_page {
        width: 80vw;
        /* height: 15vh; */
        height: 18vh;
        background-color: #f6f6f6;
        position: absolute;
        top: 36vh;
        left: 3%;
        border-radius: 1vh;
        border-radius: 4vw;
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
        display: none;
    }

    #product_card_on_basket_page_picture_1 {
        width: 15vh;
        height: 70%;
        background-image: url("/images/MacBook-Air-2018-Wallpaper-02-1242x2688.jpg");
        background-size: cover;
        position: absolute;
        top: 15%;
        left: 3.7%;
        border-radius: 1vh;
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
    }

    #cross_icon_1 {
        position: absolute;
        /* right: 10%; */
        /*width: 10vw;*/
        /* width: 7vw; */
        width: 6.9vw;
        /* top: 32vh; */
        /* top: 40vh; */
        /* right: 5.5%; */
        top: 38.9vh;
        right: 5.45%;
    }

    #conformation_dialog_ { 
        width: 40vw;
        height: 25vw;
        /* position: absolute; */
        position: fixed;
        background: white;
        /* border-radius: 1.4vh; */
        border-radius: 1.4vh;
        box-shadow: 0 1.4vh 2.4vh rgba(0, 0, 0, 0.1);/*0 1.4vh 2.4vh rgba(0, 0, 0, 0.439);*/
        transition: opacity 0.7s;
        /* top: 6vw; */
        /* top: 14vw; */
        /* top: 14vw; */
        top: 14vh;
        border: none; 
        opacity: 1;
        z-index: 10;
        /* display: block; */
    }

    /*#conformation_dialog_::backdrop { 
        /* backdrop-filter: blur(10px); */
        /*background-color: rgba(255, 255, 255, 0.27);
        backdrop-filter: blur(1vh);
    }*/

    #conformation_dialog_::backdrop {
        background-color: transparent;
    }

    #_button_no_conformation_dialog_1 {
        position: absolute;
        /* bottom: 1%; */
        width: 10vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 3%; */
        bottom: 4.5%;
        right: 4%;
        border-radius: 1.4vh;
        /* background-color: #ff98d6; */
        background-color: #d7fdda;
        border: none;
        /* box-shadow: inset 0 0 7vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.4), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5); */
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0 0 0 rgba(8, 144, 42, 0.7);
        /* color: white; */
        font-family: 'Quicksand Book';
        /* font-size: 1.7vh; */
        font-size: 2.7vh;
        transition: all 1s;
    }

    #_button_no_conformation_dialog_1:hover {
        position: absolute;
        /* bottom: 1%; */
        width: 10vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 4.5%; */
        bottom: 6.9%;
        right: 4%;
        border-radius: 1.4vh;
        /* background-color: #ff98d6; */
        background-color: #d7fdda;
        border: none;
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.27);
        z-index: 19;
    }

    #_button_no_conformation_dialog_1:active {
        bottom: 4.5%;
        box-shadow: inset 0 0 2.7vh rgba(11, 201, 27, 0.4), 0 0 0 rgba(8, 144, 42, 0.7);
    }

    #_button_dismiss_description_dialog_1 {
        position: absolute;
        /* bottom: 1%; */
        width: 10vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 3%; */
        bottom: 4.5%;
        right: 4%;
        border-radius: 1.4vh;
        /* background-color: #ff98d6; */
        background-color: #d7fdda;
        border: none;
        /* box-shadow: inset 0 0 7vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.4), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5); */
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0 0 0 rgba(8, 144, 42, 0.7);
        /* color: white; */
        font-family: 'Quicksand Book';
        /* font-size: 1.7vh; */
        font-size: 2.7vh;
        transition: all 1s;
    }

    #_button_dismiss_description_dialog_1:hover {
        position: absolute;
        /* bottom: 1%; */
        width: 10vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 4.5%; */
        bottom: 6.9%;
        right: 4%;
        border-radius: 1.4vh;
        /* background-color: #ff98d6; */
        background-color: #d7fdda;
        border: none;
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.27);
        z-index: 19;
    }

    #_button_dismiss_description_dialog_1:active {
        bottom: 4.5%;
        box-shadow: inset 0 0 2.7vh rgba(11, 201, 27, 0.4), 0 0 0 rgba(8, 144, 42, 0.7);
    }

    #_button_yes_conformation_dialog_1 {
        position: absolute;
        /* bottom: 1%; */
        width: 9vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 3%; */
        bottom: 4.5%;
        /* right: 27%; */
        /* right: 27%; */
        right: 29%;
        border-radius: 1.4vh;
        /* background-color: #d7fdda; */
        background: #ff98d6;
        border: none;
        /* box-shadow: inset 0 0 7vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.4), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        /* color: black; */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5); */
        box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0 0 0 rgba(255, 0, 153, 0.5);
        color: white;
        font-family: 'Quicksand Book';
        font-size: 2.7vh;
        transition: all 1s;
    }

    #_button_yes_conformation_dialog_1:hover {
        bottom: 6.9%;
        border: none;
        box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5);
        font-size: 2.7vh;
    }

    #_button_yes_conformation_dialog_1:active {
        bottom: 4.5%;
        background: #ff98d6;
        box-shadow: inset 0 0 2.7vh rgba(255, 0, 153, 0.274), 0 0 0 rgba(255, 0, 153, 0.5);
    }

    #title_of_conformation_dialog {
        font-family: 'Quicksand Bold';
        /* font-size: 1vh; */
        font-size: 4.5vh;
        top: -2%;
        position: absolute;
        width: 88%;
        /* left: 2.5%; */
        left: 4%;
    }

    #title_of_description_dialog {
        font-family: 'Quicksand Bold';
        /* font-size: 1vh; */
        font-size: 4.5vh;
        top: -2%;
        position: absolute;
        width: 88%;
        /* left: 2.5%; */
        left: 4%;
    }

    #description_text {
        font-family: 'Quicksand Book';
        /* font-size: 1vh; */
        font-size: 3.3vh;
        /* top: 2%; */
        top: 10%;
        position: absolute;
        width: 88%;
        /* left: 2.5%; */
        left: 4%;
    }

    #backdrop_of_dialog_proper {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(2555, 255, 255, 0.7);
        top: 0px;
        left: 0px;
        z-index: 29;
        display: none;
        transition: all 0.63s;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    #final_large_text {
        position: absolute;
        top: 490vh;
        /* font-size: 4vh; */
        font-size: 14vh;
        z-index: 19;
        font-family: 'Sunny Spells';
        /* width: 100vw; */
        /* width: 80vw; */
        /* width: 50vw; */
        text-align: center;
        /* backdrop-filter: blur(10px); */
        /* color: transparent; */
        /* background: linear-gradient(green, blue); */
        /* background-clip: text; */
        color: black;
        /* left: 10vw; */
        /* left: 40vw; */
        left: 7vw;
        /* width: 93vw; */
        width: 91vw;
        /* background-color: red; */
    }

    #description_dialog { 
        width: 40vw;
        height: 25vw;
        /* position: absolute; */
        position: fixed;
        background: white;
        /* border-radius: 1.4vh; */
        border-radius: 1.4vh;
        box-shadow: 0 1.4vh 2.4vh rgba(0, 0, 0, 0.1);/*0 1.4vh 2.4vh rgba(0, 0, 0, 0.439);*/
        transition: opacity 0.7s;
        /* top: 6vw; */
        /* top: 14vw; */
        /* top: 14vw; */
        top: 14vh;
        border: none; 
        opacity: 1;
        z-index: 10;
        /* display: block; */
    }

    #search_results_container {
        position: fixed;
        top: 20vh;
        /*width: 18vw;
        height: 18vw;*/
        /*width: 18vw;
        height: 18vw;*/
        /*width: 24.5vw;
        height: 24.5vw;*/
        width: 0vw;
        height: 0vw;
        /* background: #0bc91b; */
        background: #f6f6f6;
        right: 2vw;
        /*z-index: 10;*/
        z-index: 70;
        box-shadow: 2vh 1vh 3vh rgba(0, 0, 0, 0.1), -2vh -1vh 3vh white;
        border-radius: 2vh;
        /* border: solid #404040 0.27vw; */
        /* border: solid #ffffff 0.27vw; */
        border: solid #fafafa 0.27vw;
    }

    #result_text_1 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        top: -2vw;
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
        z-index: 14;
    }

    #result_text_2 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        /* top: 3vw; */
        top: 13%;
        /* box-shadow: 0 0.7vh 0 #cccccc; */
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
        z-index: 14;
    }

    #result_text_3 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        top: 32%;
        /* box-shadow: 0 0.7vh 0 #cccccc; */
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
    }

    #result_text_4 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        top: 50%;
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
        z-index: 14;
    }

    #result_text_5 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        top: 68%;
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
        z-index: 14;
    }

    #underline_1 {
        position: absolute;
        width: 92%;
        /* height: 0.47vw; */
        /* background-color: #404040; */
        background-color: #404040;
        top: 5vw;
        left: 4%;
        height: 0.27vw;
        border-radius: 10vw;
    }

    #underline_2 {
        position: absolute;
        width: 92%;
        height: 0.27vw;
        background-color: #404040;
        /* top: 10vw; */
        top: 40%;
        left: 4%;
        border-radius: 10vw;
    }

    #underline_3 {
        position: absolute;
        width: 92%;
        height: 0.27vw;
        background-color: #404040;
        top: 60%;
        left: 4%;
        border-radius: 10vw;
    }

    #selector_container {
        position: absolute;
        width: 92%;
        height: 5vw;
        background-color: #ff000040;
        left: 4%;
        top: 3%;
        border-radius: 1vw;
        box-shadow: inset -1vw 0 2vw #f74070;
        mix-blend-mode: hard-light;
    }

    #lowest_div {
        width: 110vw;
        height: 100vh;
        /* top: 1000%; */
        position: absolute;
        /* background: rgba(255, 0, 0, 0.4); */
        /*left: -10vw;*/
        /* top: 450%; */
        /* top: 630%; */
        /* top: 700%; */
        /* top: 680%; */
        z-index: 11;
        /* backdrop-filter: blur(1vh); */
        /* filter: blur(10px); */
        /* background: rgba(255, 255, 255, 0.4); */
        /* filter: blur(10px); */
        /* background: linear-gradient(rgba(255,255,255,0), rgba(0,255,255,1)); */
        /* top: 630%; */
        /* filter: blur(70px); */
        /* background: linear-gradient(to bottom, transparent, white); */
        /* filter: blur(14px); */
        filter: blur(40px);
        left: -11vw;
        /* background-color: #08902a; */
        /* top: 310vw; */
        /* top: 327vw; */
        /* top: 340vw; */
        top: 290vw;
        /* border: solid 1vw black; */
    }

    #name_of_the_website_at_the_footer {
        font-family: 'Amiri';
        /* top: 850%; */
        /* top: 700%; */
        /*top: 750%;*/
        left: 3.5%;
        /*width: 100%;*/
        height: 100%;
        /* font-size: 3vw; */
        font-size: 3.4vw;
        position: absolute;
        /*New lines*/
        color: black;
        text-decoration: none;
        top: 400vw;
    }

    #_view_image_context_menu_1 {
        /*width: 10%;
        height: 10%;*/
        width: 17%;
        height: 15%;
        /*background-color: #F7F7F7;*/
        background: linear-gradient(rgb(251, 233, 248), rgb(230, 232, 253));
        box-shadow: 0.63vw 1vh /*0.7vh*/ /*6vh*/ /*7vh*/ 3.7vh rgba(0, 0, 0, 0.1);
        border-radius: 7vw;
        opacity: 1;
        display: block  ;
        /* transition: all 2s; */
    }

    #_view_image_context_menu_1 p {
        width: 100%;
        text-align: center;
        font-family: 'HarmonyOS Sans Regular';
        font-size: 1.7vw;
        height: 35%;
        /*top: 1%;*/
        top: 3.4%;
        position: absolute;
    }

    #contact_the_supplier_text {
        position: absolute;
        /* top: 70%; */
        bottom: 10%;
        font-size: 2vw;
        color: #f74070;
        right: 2.4vw;
        font-family: 'Quicksand Bold';
        text-decoration: underline;
    }

    #contact_the_supplier_text:hover {
        color: #e0ccfd;
        cursor: pointer;
    }

    #contact_us_text_large {
        font-size: 10vh;
        left: 3%;
        color: black;
        top: 10vh;
        position: absolute;
        /*font-family: 'Quicksand Bold';*/
        font-family: 'Quicksand Bold';
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 700;
        opacity: 1;
    }

    #message_box_input_field {
        position: absolute;
        left: 3vw;
        top: 35vh;
        height: 60%;
        border: solid #0bc91b 0.87vh;
        /* box-shadow: 0 1.4vh 2.7vh rgba(8, 144, 42, 0.7), inset 0 1.4vh 2.7vh rgba(8, 144, 42, 0.4); */
        box-shadow: 0 0.7vh 2.7vh rgba(8, 144, 42, 0.7), inset 0 0.7vh 2.7vh rgba(8, 144, 42, 0.4);
        background: transparent;
        width: 94vw;
        border-radius: 8vh;
        resize: none;
        /* font-size: 3vh; */
        font-size: 7vh;
        font-family: 'HarmonyOS Sans Regular';
        color: #0bc91b;
        transition: all 1.7s;
        /* display: block; */
    }

    #message_box_input_field:focus {
        position: absolute;
        left: 3vw;
        top: 35vh;
        height: 60%;
        border: solid #ff98d6 0.87vh;
        /* box-shadow: 0 1.4vh 2.7vh rgba(8, 144, 42, 0.7), inset 0 1.4vh 2.7vh rgba(8, 144, 42, 0.4); */
        box-shadow: 0 0.7vh 2.7vh rgba(144, 8, 101, 0.7), inset 0 0.7vh 2.7vh rgba(144, 8, 101, 0.4);
        color: #ff98d6;
        background: transparent;
        width: 94vw;
        border-radius: 8vh;
        resize: none;
        /* font-size: 3vh; */
        font-size: 7vh;
        /* font-family: 'Quicksand Book'; */
        font-family: 'HarmonyOS Sans Regular';
        outline: none;
    }
}

@media screen and (min-width: 1000px)/*newly edited value [01-06-2024](min-width: 750px)*/ and (max-width: 1500px) {
    #the_header {
        width: 100vw;
        /*height: 10vh;*/
        height: 7vw;
        background-color: rgba(255, 255, 255, 0.17);
        position: fixed;
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
        top: 0px;
        left: 0px;
        z-index: 27;
        backdrop-filter: blur(10px);
        /*06-11-2024*/-webkit-backdrop-filter: blur(10px);
    }

    /*body {
        overflow-x: hidden;
        background-color: white;
    }*/

    #name_of_the_website {
        font-family: 'Amiri';
        /*top: -15%;
        left: 3.5%;*/
        /* top: 0px; */
        /* margin-top: 2.7vh; */
        width: 100%;
        height: 100%;
        /* background-color: red; */
        font-size: 3vw;
        position: absolute;
        /*New lines*/
        color: black;
        text-decoration: none;
        /*06-11-2024*/margin: 0px;
        top: 15%;
        left: 2.7vw;/*end*/
    }

    #tile_1 {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    /*background-color: transparent;*/
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    top: 10%;
    /*width: 100%;*/
    left: 2.5%;
    background-color: transparent;
    transition: border 1.4s;
    border: solid 0.4vw transparent;
    }

    #tile_1:hover {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    /*background-color: transparent;*/
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    top: 10%;
    /*width: 100%;*/
    left: 2.5%;
    background-color: transparent;
    border: solid 0.4vw #fdd7ee;
    }

    #tile_1 p {
        font-family: 'Quicksand Bold';
        font-size: 5vw;
        width: 100vw;
        text-align: center;
        top: -25%;
    }

    #tile_2 {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    /*top: 37%;*/
    /*width: 100%;*/
    left: 2.5%;
    border: solid 0.4vw transparent;
    top: 40%;
    transition: border 1.4s;
    }

    #tile_2:hover {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    top: 40%;
    /*width: 100%;*/
    left: 2.5%;
    border: solid 0.4vw #d7fdda;
    }

    #tile_2 p {
        font-family: 'Quicksand Bold';
        font-size: 5vw;
        width: 100vw;
        text-align: center;
        top: -25%;
    }

    #tile_3 {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    /*top: 37%;*/
    /*width: 100%;*/
    left: 2.5%;
    border: solid 0.4vw transparent;
    /* top: 56%; */
    top: 70%;
    transition: border 1.4s;
    }

    #tile_3:hover {
        position: absolute;
        width: 95%;
    height: 27%;
    /*left: 5%;
    right: 5%;*/
    background-color: transparent;
    /*border: solid 1.4vh #404040;*/
    /*border: solid .3vw #404040;*/
    border-radius: 1000px;
    /* top: 56%; */
    /*width: 100%;*/
    left: 2.5%;
    border: solid 0.4vw #c6e7fc;
    }

    #tile_3 p {
        position: absolute;
        font-family: 'Quicksand Bold';
        font-size: 5vw;
        width: 100vw;
        text-align: center;
        top: -25%;
    }

    #scrollable_section_2 {
        width: 100vw;
        height: 40vw;
        background-color: #d7fdda;
        position: absolute;
        top: -62vw;
        display: block;
        z-index: 10;
    }

    #tab_2_div {
            position: absolute;
            /*top: 76vh;*/
            /*width: 40vw;*/
            /* top: 131vw; */
            /* top: 80vh; */
            top: 69vw;
            width: 45vw;
            height: 10vw;
            /*left: 40vw;*/border-radius: 0 4vw 0 0;
            /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
            box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
            background: #d7fdda;
            left: 0px;
            z-index: 10;
    }

    #tab_2_div p {
        font-family: 'Quicksand Bold';
        top: -15%;
        left: 7.5%;
        width: 100%;
        height: 100%;
        font-size: 4vw;
        position: absolute;
    }

    #shopping_main_text {
        left: 5.5%;
        font-size: 7.7vw;
        top: -109%;
        position: absolute;
        font-family: 'Amiri';
        font-weight: 700;
        color: white;
        text-shadow: 1px 2.7px 3px rgba(0, 0, 0, 0.1);
    
    }

    #div_below_header {
        width: 100%;
        height: 40vw;
        background-color: white;
        position: absolute;
        /*top: 10vh;*/
        top: -100vh;
        left: 0px;
        z-index: 10;
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
        display: block;
        transition: all 1.7s;
    }

    #slogan_text_main {
        position: absolute;
        /*top: 27vh;*/
        top: 10.4vw;
        width: 51%;
        /*left: 15%;
        right: 15%;*/
        left: 24.5%;
        right: 24.5%;
        text-align: center;
        /*font-family: 'Bellefair';*/
        /*font-family: 'Amazing Mother';*/
        font-family: 'Bellefair';
        font-weight: 200;
        font-size: 6vw;
        /*text-shadow: 0.3vh 0.7vh 1.7vw rgba(0, 0, 0, 0.2);*/
        z-index: 14;
    }

    #span_text_1 {
        scale: 1;
    }

    #span_text_1::selection {
    color: #2200ff;
    }

    #search_icon_vector {
        position: absolute;
        /* right: -2vw; */
        left: 87.6%;
    }

    lottie-player {
        width: 107vw;
        height: 114vw;
        position: absolute;
        top: -40vh;
        z-index: 1;
    }

    #product_card_5 {
        position: absolute;
        /*left: 5%;*/
        left: 3%;
        top: 1vw;
        /*width: 45vw;
        height: 45vw;*/
        /*left: 40vw;*/border-radius: 4vw;
        /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
        box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
        /*background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        background-size: cover;*/
        background-color: #f6f6f6;
        z-index: 14;
        /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        mask-clip: content-box;*/
        width: 35vw;
        height: 35vw;
    }

    #product_card_6 {
        position: absolute;
        /*left: 5%;*/
        /* left: 63%; */
        left: 40%;
        top: 1vw;
        /*width: 45vw;
        height: 45vw;*/
        /*left: 40vw;*/border-radius: 4vw;
        /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
        box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
        /*background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        background-size: cover;*/
        background-color: #f6f6f6;
        z-index: 14;
        /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        mask-clip: content-box;*/
        width: 35vw;
        height: 35vw;
    }

    #product_card_7 {
        position: absolute;
        /*left: 5%;*/
        /* left: 63%; */
        right: 3%;
        top: 1vw;
        /*width: 45vw;
        height: 45vw;*/
        /*left: 40vw;*/border-radius: 4vw;
        /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
        box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
        /*background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        background-size: cover;*/
        background-color: #f6f6f6;
        z-index: 14;
        /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        mask-clip: content-box;*/
        /* width: 20vw; */
        /* height: 20vw; */
        width: 17vw;
        height: 17vw;
    }

    #product_card_8 {
        position: absolute;
        /*left: 5%;*/
        /* left: 63%; */
        right: 3%;
        top: 19.4vw;
        /*width: 45vw;
        height: 45vw;*/
        /*left: 40vw;*/border-radius: 4vw;
        /*box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);*/
        box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.1);
        /*background-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        background-size: cover;*/
        background-color: #f6f6f6;
        z-index: 14;
        /*mask-image: url(/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg);
        mask-clip: content-box;*/
        /* width: 20vw; */
        /* height: 20vw; */
        width: 17vw;
        height: 17vw;
    }

    #menu_three_lines_icon_vector {
        position: absolute;
        z-index: 14;
        height: 100%;
        /*right: -14.5vw;*/
        /*top: -0.7vw;*/
        right: 0.27vw;
        scale: 0.6;
        z-index: 28;
        /*right: -18vw;*/
        top: -0.4vw;
    }

    #cross_icon {
        position: absolute;
        z-index: 14;
        height: 100%;
        /*right: -14.5vw;*/
        /*top: -0.7vw;*/
        top: -0.4vw;
        right: 0vw;
        scale: 0.6;
        z-index: 28;
        display: none;
        transform: rotateX(270deg);
    }

    #divider_inside_card_5 {
        position: absolute;
        width: 90%;
        height: 90%;
        /* background-image: url("/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg"); */
        background-size: cover;
        top: 5%;
        left: 5%;
        border-radius: 2vw;
        opacity: 1;
        background-image: url("/images/image1-6.jpg");
        background-size: 103%;
    }

    #divider_inside_card_5_on_product_page_1 {
        position: absolute;
        /*width: 40vw;
        height: 40vw;*/
        /*width: 33vw;
        height: 33vw;*/
        width: 38vw;
        height: 38vw;
        /* background-image: url("/images/MacBook-Air-2018-Wallpaper-01-1242x2688.jpg"); */
        background-size: cover;
        /*top: 15%;*/
        /*top: 23%;*/
        top: 21%;
        left: 3%;
        border-radius: 2vw;
        animation-name: enter_image_anim_on_product_page_1;
        animation-duration: 2s;
        /* animation-timing-function: cubic-bezier(0.3,0.74,0.76,1.05); */
        animation-timing-function: cubic-bezier(0.47,0.8,0,1);
        background-image: url("/images/image1-6.jpg");
        background-size: 101%;
        opacity: 1;
        z-index: 33;
    }

    body {
        background-color: #f6f6f6;
    }
    /*11-11-2024*//*#cleanWhitePage {
        position: absolute;
        width: 100vw;
        height: 100vh;
        background-color: red;
        z-index: 90;
    }*/

    #pencil_sharpner_text_large {
        /* font-size: 10vh; */
        /* font-size: 7.9vh; */
        font-size: 3.5vw;
        left: 45%;
        color: black;
        top: 10vh;
        position: absolute;
        /*font-family: 'Quicksand Bold';*/
        font-family: 'Quicksand Bold';
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 700;
        opacity: 1;
        animation-name: enter_text_1_anim_on_product_page_1;
        animation-duration: 1.5s;
    }

    #underline_number_1 {
        /*width: 40vw;*/
        width: 41vw;
        height: 0.5vh;
        background-color: rgba(0, 0, 0, 0.27);
        position: absolute;
        /* top: 33vh; */
        top: 27.4vh;
        left: 45%;
        border-radius: 100px;
        animation-name: underline_animation;
        animation-duration: 1.7s;
        animation-delay: 1.8s;
        animation-fill-mode: backwards;
    }

    #description_1 {
        /* font-size: 5vh; */
        left: 45%;
        color: black;
        /* top: 33vh; */
        /* top: 27.6vh; */
        position: absolute;
        font-family: 'HarmonyOS Sans Regular';
        word-spacing: 0.5vw;
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 300;
        /*New line of style*//*font-size: 2.7vh;*/
        width: 50%;
        font-size: 1.7vw;
        top: 14vw;
    }

    #quantity_text_1 {
        position: absolute;
        top: 75vh;
        left: 45vw;
        font-family: 'Quicksand Book';
        /* font-size: 2.7vh; */
        font-size: 4vh;
        display: none;
    }

    #circle_colour_one_svg {
        width: 10vw;
        height: 10vw;
        position: absolute;
        top: 10vh;
    }

    #circle_colour_one_main_circle {
        fill: red;
    }

    #circle_button_1 {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 51vh;
        left: 45vw;
        border: none;
        background-color: rgb(226, 14, 14);
        /* box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.9); */
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(155, 0, 0, 0.9), 0.2vw 0.2vw 1vh rgba(155, 0, 0, 0.4);
        transition: all 0.45s;
        animation-name: colourful_circle_button_scale_anim;
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.11,0.66,0.55,1);
        scale: 1;
    }

    #circle_button_1:hover {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        /* top: 48vh; */
        top: 49.9vh;
        left: 45vw;
        border: none;
        background-color: rgb(226, 14, 14);
        /* box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.9); */
        /* box-shadow: inset -0.2vw -0.2vw 1vh rgba(155, 0, 0, 0.9), 0.2vw 0.2vw 1vh rgba(155, 0, 0, 0.4); */
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(155, 0, 0, 0.9), 0.2vw 0.7vw 1.4vh rgba(155, 0, 0, 0.4);
    }

    #circle_button_2 {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 51vh;
        left: 49.7vw;
        border: none;
        background-color: rgb(237, 219, 15);
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(237, 182, 3, 0.9), 0.2vw 0.2vw 1vh rgba(174, 119, 1, 0.4);/*7px*/
        transition: all 0.45s;
        animation-name: colourful_circle_button_scale_anim;
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.11,0.66,0.55,1);
        scale: 1;
        animation-delay: 0.7s;
        animation-fill-mode: backwards;
    }

    #circle_button_2:hover {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        /* top: 50vh; */
        top: 49.9vh;
        left: 49.7vw;
        border: none;
        background-color: rgb(237, 219, 15);
        /*box-shadow: inset -0.2vw -0.2vw 1vh rgba(237, 182, 3, 0.9), 0.2vw 0.2vw 1vh rgba(174, 119, 1, 0.4);*//*7px*/
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(237, 182, 3, 0.9), 0.2vw 0.7vw 1.4vh rgba(174, 119, 1, 0.4);
    }

    #circle_button_3 {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 51vh;
        left: 54.4vw;
        border: none;
        background-color: rgb(138, 247, 21);
        /* box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.9); */
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(120, 180, 0, 0.9), 0.2vw 0.2vw 1vh rgba(103, 155, 0, 0.4);/*rgba(103, 155, 0, 0.9)*/
        transition: all 0.45s;
        animation-name: colourful_circle_button_scale_anim;
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.11,0.66,0.55,1);
        scale: 1;
        animation-delay: 1.4s;
        animation-fill-mode: backwards;
    }

    #circle_button_3:hover {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 49.9vh;
        left: 54.4vw;
        border: none;
        background-color: rgb(138, 247, 21);
        /* box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.9); */
        /*box-shadow: inset -0.2vw -0.2vw 1vh rgba(120, 180, 0, 0.9), 0.2vw 0.2vw 1vh rgba(103, 155, 0, 0.4);*//*rgba(103, 155, 0, 0.9)*/
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(120, 180, 0, 0.9), 0.2vw 0.7vw 1.4vh rgba(103, 155, 0, 0.4);
    }

    #circle_button_4 {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 51vh;
        left: 59.1vw;
        border: none;
        background-color: rgb(7, 131, 240);
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(0, 65, 177, 0.9), 0.2vw 0.2vw 1vh rgba(0, 65, 177, 0.4);/*7px*/
        transition: all 0.45s;
        animation-name: colourful_circle_button_scale_anim;
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.11,0.66,0.55,1);
        scale: 1;
        animation-delay: 2.1s;
        animation-fill-mode: backwards;
    }

    #circle_button_4:hover {
        position: absolute;
        width: 3.7vw;
        height: 3.7vw;
        border-radius: 20vw;
        top: 49.9vh;
        left: 59.1vw;
        border: none;
        background-color: rgb(7, 131, 240);
        /*box-shadow: inset -0.2vw -0.2vw 1vh rgba(0, 65, 177, 0.9), 0.2vw 0.2vw 1vh rgba(0, 65, 177, 0.4);*//*7px*/
        box-shadow: inset -0.2vw -0.2vw 1vh rgba(0, 65, 177, 0.9), 0.2vw 0.7vw 1.4vh rgba(0, 65, 177, 0.4);
    }

    #add_to_basket_button {
        position: absolute;
        top: 89%;
        width: 8vw;
        height: 5vw;
        /* left: 87vw; */
        border-radius: 10vw;
        border: none;
        /* right: 20vw; */
        /* right: 16.4vw; */
        right: 17.4vw;
        background-color: #ff98d6;
        box-shadow: inset 0 0 1.2vh rgba(255, 40, 199, 0.4);
    }

    #add_to_basket_button:hover {
        box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5);
    }

    #add_to_basket_button svg {
        position: absolute;
        /* top: 10%; */
        top: 0%;
        width: 8vw;
        height: 5vw;
        left: 0px;
        /* scale: 0.47; */
        scale: 0.51;
    }

    #checkout_button {
        position: absolute;
        top: 89%;
        width: 15vw;
        height: 5vw;
        /* left: 87vw; */
        border-radius: 10vw;
        border: none;
        background-color: #d7fdda;
        /* box-shadow: inset 0 0 1.2vh rgba(0, 40, 177, 0.4); */
        box-shadow: inset 0 0 1.2vh rgba(11, 201, 27, 0.40);/*rgba(40, 140, 70, 0.4);*/
        right: 2.4vw;
        font-family: 'Quicksand Book';
        font-size: 1.7vw;
        color: #08902a;
    }

    #description_button {
        position: absolute;
        top: 89%;
        width: 18vw;
        height: 5vw;
        /* left: 87vw; */
        border-radius: 10vw;
        border: none;
        /* right: 20vw; */
        /* right: 16.4vw; */
        left: 45vw;
        background-color: #f6f6f6;
        /* box-shadow: 0 0.78vh 1.4vh rgba(0, 0, 0, 0.27); */
        box-shadow: 0 0.78vh 1.4vh rgba(0, 0, 0, 0.14);
        font-family: 'Quicksand Bold';
        /* font-size: 2.7vw; */
        font-size: 1.9vw;
        color: #404040;
        transition: all 0.78s;
    }

    #description_button:hover {
        top: 87%;
        box-shadow: 0 3vh 1.4vh rgba(0, 0, 0, 0.14);
    }

    #quantity_text_1 {
        position: absolute;
        /* top: 75vh; */
        /* top: 67vh; */
        top: 54vh;
        left: 45vw;
        font-family: 'Quicksand Book';
        /* font-size: 2.7vh; */
        font-size: 4vh;
    }

    #quantity_input_field {
        position: absolute;
        /* top: 70vh; */
        /* left: 45vw; */
        /* left: 53.4vw; */
        /* border-radius: 1vh; */
        /* border-radius: 1.7vh; */
        /* left: 54.7vw; */
        left: 55.6vw;
        border-radius: 2.7vh;
        /* width: 2.7vw; */
        width: 4vw;
        height: 4vw;
        font-family: 'Quicksand Book';
        font-size: 3vh;
        border: solid 1vh #0bc91b;
        color: #0bc91b;
        background-color: transparent;
        /* transition: border 1s; */
        /* top: 70.4vh; */
        /* top: 63vh; */
        top: 57.9vh;
        transition: all 0.4s;
        display: none;
    }

    #quantity_input_field:focus {
        /* position: absolute; */
        /* top: 70vh; */
        /* left: 45vw; */
        /* left: 53.4vw; */
        border-radius: 2.7vh;
        /* width: 2.7vw; */
        /* width: 4vw; */
        /* height: 4vw; */
        /* font-family: 'Quicksand Book'; */
        /* font-size: 3vh; */
        border: solid 1vh #ff98d6;
        color: #ff98d6;
        background-color: transparent;
        transition: all 0.4s;/*border 1s;*/
    }

    #contents_text_1 {
        position: absolute;
        /* top: 75vh; */
        /* top: 65vh; */
        left: 45vw;
        font-family: 'Quicksand Book';
        /* font-size: 2.7vh; */
        font-size: 4vh;
        /* top: 65vh; */
        bottom: 17vh;
    }

    #contents_text_2 {
        position: absolute;
        /* top: 75vh; */
        /* top: 65vh; */
        /* top: 75vh; */
        left: 45vw;
        font-family: 'HarmonyOS Sans Regular';
        /* font-size: 2.7vh; */
        font-size: 4vh;
        bottom: 15vh;
    }

    #price_text_block {
        /* left: 71.7%; */
        color: black;
        /* top: 33vh; */
        /* top: 38.6vh; */
        position: absolute;
        font-family: 'HarmonyOS Sans Regular';
        word-spacing: 0.5vw;
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 300;
        /*New line of style*/font-size: 7vh;
        width: 50%;
        /*24-08-2024*/top: 23vw;
        left: 44.7%;/*end*/
    }

    #number_of_items_left_div {
        position: absolute;
        left: 45vw;
        /* border: solid 0.4vh var(--sharperner_red_colour); */
        /* border: solid 0.7vh var(--sharperner_red_colour); */
        /* top: 56vh; */
        /* top: 62vh; */
        /* width: 50vw; */
        /* width: 33vw; */
        /* width: 27vw; */
        /* top: 50vh; */
        /* top: 50%; */
        /* top: 25vw; */
        /* top: 53%; */
        /* top: 46%; */
        top: 48.4%;
        width: 25vw;
        height: 5vh;
        border-radius: 10vw;
        /* font-family: 'HarmonyOS Sans Regular'; */
        background: linear-gradient(to left, #d7fdda, #ff98d6);
        box-shadow: inset 0.5vh 0.5vh 1.4vh rgba(251, 121, 199, 0.5), inset -0.5vh -0.5vh 1.4vh rgba(128, 252, 159, 0.4);/*inset 0.5vh 0.5vh 1.4vh rgba(251, 121, 199, 0.7), inset -0.5vh -0.5vh 1.4vh rgba(128, 252, 159, 0.7);*/
        display: none;
    }

    #number_of_items_left_div p {
        position: absolute;
        /* top: -40%; */
        color: white;/*var(--sharperner_red_colour);*/
        left: 2.4%;
        font-family: 'Quicksand Bold';
        font-size: 3vh;
        /* top: 0px; */
        top: -2vh;
    }

    #number_of_items_left_div p::selection {
        color: white;
        background-color: #e0ccfd;
    }

    #basket_icon_vector {
        position: absolute;
        right: 10vw;

        z-index: 14;
        height: 100%;
        /*right: -14.5vw;*/
        /*top: -0.7vw;*/
        scale: 0.86;
        z-index: 28;
        /*right: -18vw;*/
        top: -0.33vw;
    }

    #_text_block_1 {
        position: absolute;
        width: 70%;
        font-family: 'Quicksand Book';
        left: 15%;
        right: 15%;
        /* font-size: 1vw; */
        /* font-size: 2vh; */
        /* top: 16vh; */
        top: 15.7vh;
        font-size: 4.7vh;
        text-align: center;

    }

    #_text_block_2 {
        position: absolute;
        width: 70%;
        font-family: 'Quicksand Book';
        left: 15%;
        right: 15%;
        /* font-size: 1vw; */
        /* font-size: 2vh; */
        /* top: 16vh; */
        /* top: 55.7vh; */
        /* top: 67.8vh; */
        top: 71vh;
        font-size: 4.7vh;
        text-align: center;

    }

    #divider_inside_card_6 {
        /* position: absolute; */
        width: 90%;
        height: 90%;
        /* background-image: url("/images/MacBook-Air-2018-Wallpaper-02-1242x2688.jpg"); */
        /* background-size: cover; */
        top: 5%;
        left: 5%;
        border-radius: 2vw;
        /* opacity: 1; */
    }

    #_large_text_block_1 {
        position: absolute;
        /* top: -50%; */
        top: -40%;
        left: 3%;
        text-align: center;
        font-family: 'HarmonyOS Sans Regular';
        /* font-size: 1.2vh; */
        /* font-size: 4vh; */
        font-size: 4vh;
    }

    #_large_text_block_2 {
        width: 100%;
        text-align: center;
        font-family: 'Quicksand Bold';
        font-size: 10vh;
    }

    #_large_text_block_3::selection {
        color: #0bc91b;
        background-color: #d7fdda;
    }

    #star_vector_icon {
        /* width: 10vw; */
        width: 7vw;
        position: absolute;
        left:45%;
        right: 45%;
        top: -4%;
    }

    #three_four_pointed_stars_vector_icon {
        /* width: 10vw; */
        width: 7vw;
        position: absolute;
        left:45%;
        right: 45%;
        /* top: 70%; */
        /* top: 78%; */
        /* top: 89%; */
        top: 139%;
    }
    
    #_large_text_block_3 {
        width: 100%;
        text-align: center;
        font-family: 'Quicksand Bold';
        font-size: 10vh;
        position: absolute;
        top: 55vh;
    }

    #_large_text_block_4 {
        width: 100%;
        text-align: center;
        font-family: 'Quicksand Bold';
        font-size: 10vh;
        position: absolute;
        top: 105vh;
    }

    #_text_block_3 {
        position: absolute;
        width: 70%;
        font-family: 'Quicksand Book';
        left: 15%;
        right: 15%;
        /* font-size: 1vw; */
        /* font-size: 2vh; */
        /* top: 16vh; */
        /* top: 55.7vh; */
        /* top: 67.8vh; */
        /* top: 114vh; */
        top: 121vh;
        font-size: 4.7vh;
        text-align: center;

    }

    #_text_block_2::selection {
        color: #0bc91b;
        background-color: #d7fdda;
    }

    #_text_block_3::selection {
        color:rgb(7, 131, 240);
        background-color: #c6e7fc;
    }

    #_large_text_block_4::selection {
        color:rgb(7, 131, 240);
        background-color: #c6e7fc;
    }

    #my_shopping_basket_text_large {
        font-size: 10vh;
        left: 3%;
        color: black;
        top: 10vh;
        position: absolute;
        /*font-family: 'Quicksand Bold';*/
        font-family: 'Quicksand Bold';
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 700;
        opacity: 1;
    }

    #underline_number_2 {
        width: 94vw;
        height: 0.5vh;
        background-color: rgba(0, 0, 0, 0.27);
        position: absolute;
        top: 33vh;
        left: 3%;
        border-radius: 100px;
        animation-name: underline_animation_2;
        animation-duration: 1.7s;
        animation-delay: 1.8s;
        animation-fill-mode: backwards;
    }

    #product_card_on_basket_page {
        width: 80vw;
        /* height: 15vh; */
        height: 18vh;
        background-color: #f6f6f6;
        position: absolute;
        top: 36vh;
        left: 3%;
        border-radius: 1vh;
        border-radius: 4vw;
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
        display: none;
    }

    #product_card_on_basket_page_picture_1 {
        width: 15vh;
        height: 70%;
        background-image: url("/images/MacBook-Air-2018-Wallpaper-02-1242x2688.jpg");
        background-size: cover;
        position: absolute;
        top: 15%;
        left: 3.7%;
        border-radius: 1vh;
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
    }

    #cross_icon_1 {
        position: absolute;
        /* right: 10%; */
        /*width: 10vw;*/
        /* width: 7vw; */
        width: 6.9vw;
        /* top: 32vh; */
        /* top: 40vh; */
        /* right: 5.5%; */
        top: 38.9vh;
        right: 5.45%;
    }

    #conformation_dialog_ { 
        width: 40vw;
        height: 25vw;
        /* position: absolute; */
        position: fixed;
        background: white;
        /* border-radius: 1.4vh; */
        border-radius: 1.4vh;
        box-shadow: 0 1.4vh 2.4vh rgba(0, 0, 0, 0.1);/*0 1.4vh 2.4vh rgba(0, 0, 0, 0.439);*/
        transition: opacity 0.7s;
        /* top: 6vw; */
        /* top: 14vw; */
        /* top: 14vw; */
        top: 14vh;
        border: none; 
        opacity: 1;
        z-index: 10;
        /* display: block; */
    }

    /*#conformation_dialog_::backdrop { 
        /* backdrop-filter: blur(10px); */
        /*background-color: rgba(255, 255, 255, 0.27);
        backdrop-filter: blur(1vh);
    }*/

    #conformation_dialog_::backdrop {
        background-color: transparent;
    }

    #_button_no_conformation_dialog_1 {
        position: absolute;
        /* bottom: 1%; */
        width: 10vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 3%; */
        bottom: 4.5%;
        right: 4%;
        border-radius: 1.4vh;
        /* background-color: #ff98d6; */
        background-color: #d7fdda;
        border: none;
        /* box-shadow: inset 0 0 7vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.4), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5); */
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0 0 0 rgba(8, 144, 42, 0.7);
        /* color: white; */
        font-family: 'Quicksand Book';
        /* font-size: 1.7vh; */
        font-size: 2.7vh;
        transition: all 1s;
    }

    #_button_no_conformation_dialog_1:hover {
        position: absolute;
        /* bottom: 1%; */
        width: 10vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 4.5%; */
        bottom: 6.9%;
        right: 4%;
        border-radius: 1.4vh;
        /* background-color: #ff98d6; */
        background-color: #d7fdda;
        border: none;
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.27);
        z-index: 19;
    }

    #_button_no_conformation_dialog_1:active {
        bottom: 4.5%;
        box-shadow: inset 0 0 2.7vh rgba(11, 201, 27, 0.4), 0 0 0 rgba(8, 144, 42, 0.7);
    }

    #_button_dismiss_description_dialog_1 {
        position: absolute;
        /* bottom: 1%; */
        width: 10vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 3%; */
        bottom: 4.5%;
        right: 4%;
        border-radius: 1.4vh;
        /* background-color: #ff98d6; */
        background-color: #d7fdda;
        border: none;
        /* box-shadow: inset 0 0 7vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.4), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5); */
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0 0 0 rgba(8, 144, 42, 0.7);
        /* color: white; */
        font-family: 'Quicksand Book';
        /* font-size: 1.7vh; */
        font-size: 2.7vh;
        transition: all 1s;
    }

    #_button_dismiss_description_dialog_1:hover {
        position: absolute;
        /* bottom: 1%; */
        width: 10vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 4.5%; */
        bottom: 6.9%;
        right: 4%;
        border-radius: 1.4vh;
        /* background-color: #ff98d6; */
        background-color: #d7fdda;
        border: none;
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.27);
        z-index: 19;
    }

    #_button_dismiss_description_dialog_1:active {
        bottom: 4.5%;
        box-shadow: inset 0 0 2.7vh rgba(11, 201, 27, 0.4), 0 0 0 rgba(8, 144, 42, 0.7);
    }

    #_button_yes_conformation_dialog_1 {
        position: absolute;
        /* bottom: 1%; */
        width: 9vw;
        height: 13%;
        /* right: 1%; */
        /* bottom: 3%; */
        bottom: 4.5%;
        /* right: 27%; */
        /* right: 27%; */
        right: 29%;
        border-radius: 1.4vh;
        /* background-color: #d7fdda; */
        background: #ff98d6;
        border: none;
        /* box-shadow: inset 0 0 7vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.4), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.4); */
        /* box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.7); */
        /* color: black; */
        /* box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5); */
        box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0 0 0 rgba(255, 0, 153, 0.5);
        color: white;
        font-family: 'Quicksand Book';
        font-size: 2.7vh;
        transition: all 1s;
    }

    #_button_yes_conformation_dialog_1:hover {
        bottom: 6.9%;
        border: none;
        box-shadow: inset 0 0 1.4vh rgba(255, 0, 153, 0.27), 0.7vh 1.4vh 3vh rgba(255, 0, 153, 0.5);
        font-size: 2.7vh;
    }

    #_button_yes_conformation_dialog_1:active {
        bottom: 4.5%;
        background: #ff98d6;
        box-shadow: inset 0 0 2.7vh rgba(255, 0, 153, 0.274), 0 0 0 rgba(255, 0, 153, 0.5);
    }

    #title_of_conformation_dialog {
        font-family: 'Quicksand Bold';
        /* font-size: 1vh; */
        font-size: 4.5vh;
        top: -2%;
        position: absolute;
        width: 88%;
        /* left: 2.5%; */
        left: 4%;
    }

    #title_of_description_dialog {
        font-family: 'Quicksand Bold';
        /* font-size: 1vh; */
        font-size: 4.5vh;
        top: -2%;
        position: absolute;
        width: 88%;
        /* left: 2.5%; */
        left: 4%;
    }

    #description_text {
        font-family: 'Quicksand Book';
        /* font-size: 1vh; */
        font-size: 3.3vh;
        /* top: 2%; */
        top: 10%;
        position: absolute;
        width: 88%;
        /* left: 2.5%; */
        left: 4%;
    }

    #backdrop_of_dialog_proper {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(2555, 255, 255, 0.7);
        top: 0px;
        left: 0px;
        z-index: 29;
        display: none;
        transition: all 0.63s;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    #final_large_text {
        position: absolute;
        top: 490vh;
        /* font-size: 4vh; */
        font-size: 14vh;
        z-index: 19;
        font-family: 'Sunny Spells';
        /* width: 100vw; */
        /* width: 80vw; */
        /* width: 50vw; */
        text-align: center;
        /* backdrop-filter: blur(10px); */
        /* color: transparent; */
        /* background: linear-gradient(green, blue); */
        /* background-clip: text; */
        color: black;
        /* left: 10vw; */
        /* left: 40vw; */
        left: 7vw;
        /* width: 93vw; */
        width: 91vw;
        /* background-color: red; */
    }

    #description_dialog { 
        width: 40vw;
        height: 25vw;
        /* position: absolute; */
        position: fixed;
        background: white;
        /* border-radius: 1.4vh; */
        border-radius: 1.4vh;
        box-shadow: 0 1.4vh 2.4vh rgba(0, 0, 0, 0.1);/*0 1.4vh 2.4vh rgba(0, 0, 0, 0.439);*/
        transition: opacity 0.7s;
        /* top: 6vw; */
        /* top: 14vw; */
        /* top: 14vw; */
        top: 14vh;
        border: none; 
        opacity: 1;
        z-index: 10;
        /* display: block; */
    }

    #search_results_container {
        position: fixed;
        top: 20vh;
        /*width: 18vw;
        height: 18vw;*/
        /*width: 18vw;
        height: 18vw;*/
        /*width: 24.5vw;
        height: 24.5vw;*/
        width: 0vw;
        height: 0vw;
        /* background: #0bc91b; */
        background: #f6f6f6;
        right: 2vw;
        /*z-index: 10;*/
        z-index: 70;
        box-shadow: 2vh 1vh 3vh rgba(0, 0, 0, 0.1), -2vh -1vh 3vh white;
        border-radius: 2vh;
        /* border: solid #404040 0.27vw; */
        /* border: solid #ffffff 0.27vw; */
        border: solid #fafafa 0.27vw;
    }

    #result_text_1 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        top: -2vw;
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
        z-index: 14;
    }

    #result_text_2 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        /* top: 3vw; */
        top: 13%;
        /* box-shadow: 0 0.7vh 0 #cccccc; */
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
        z-index: 14;
    }

    #result_text_3 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        top: 32%;
        /* box-shadow: 0 0.7vh 0 #cccccc; */
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
    }

    #result_text_4 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        top: 50%;
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
        z-index: 14;
    }

    #result_text_5 {
        position: absolute;
        /* left: 3%; */
        /* font-family: 'Quicksand Bold'; */
        font-family: 'HarmonyOS Sans Regular';
        /* width: 96%; */
        padding-bottom: 1vh;
        /* box-shadow: 0 3vh 0 red; */
        /* font-size: 4vw; */
        font-size: 2.7vw;
        /* top: -1.8vw; */
        left: 4%;
        top: 68%;
        /* box-shadow: 0 0.47vh 0 #cccccc; */
        width: 92%;
        color: #707070;
        text-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.14);
        z-index: 14;
    }

    #underline_1 {
        position: absolute;
        width: 92%;
        /* height: 0.47vw; */
        /* background-color: #404040; */
        background-color: #404040;
        top: 5vw;
        left: 4%;
        height: 0.27vw;
        border-radius: 10vw;
    }

    #underline_2 {
        position: absolute;
        width: 92%;
        height: 0.27vw;
        background-color: #404040;
        /* top: 10vw; */
        top: 40%;
        left: 4%;
        border-radius: 10vw;
    }

    #underline_3 {
        position: absolute;
        width: 92%;
        height: 0.27vw;
        background-color: #404040;
        top: 60%;
        left: 4%;
        border-radius: 10vw;
    }

    #selector_container {
        position: absolute;
        width: 92%;
        height: 5vw;
        background-color: #ff000040;
        left: 4%;
        top: 3%;
        border-radius: 1vw;
        box-shadow: inset -1vw 0 2vw #f74070;
        mix-blend-mode: hard-light;
    }

    #lowest_div {
        width: 110vw;
        height: 100vh;
        /* top: 1000%; */
        position: absolute;
        /* background: rgba(255, 0, 0, 0.4); */
        /*left: -10vw;*/
        /* top: 450%; */
        /* top: 630%; */
        /* top: 700%; */
        /* top: 680%; */
        z-index: 11;
        /* backdrop-filter: blur(1vh); */
        /* filter: blur(10px); */
        /* background: rgba(255, 255, 255, 0.4); */
        /* filter: blur(10px); */
        /* background: linear-gradient(rgba(255,255,255,0), rgba(0,255,255,1)); */
        /* top: 630%; */
        /* filter: blur(70px); */
        /* background: linear-gradient(to bottom, transparent, white); */
        /* filter: blur(14px); */
        filter: blur(40px);
        left: -11vw;
        /* background-color: #08902a; */
        /* top: 310vw; */
        /* top: 327vw; */
        /* top: 340vw; */
        top: 290vw;
        display: none;
        /* border: solid 1vw black; */
    }

    #name_of_the_website_at_the_footer {
        font-family: 'Amiri';
        /* top: 850%; */
        /* top: 700%; */
        /* top: 750%; */
        top: 400vw;
        left: 3.5%;
        /*width: 100%;*/
        height: 100%;
        /* font-size: 3vw; */
        font-size: 3.4vw;
        position: absolute;
        /*New lines*/
        color: black;
        text-decoration: none;
    }

    #_view_image_context_menu_1 {
        /*width: 10%;
        height: 10%;*/
        width: 17%;
        height: 15%;
        /*background-color: #F7F7F7;*/
        background: linear-gradient(rgb(251, 233, 248), rgb(230, 232, 253));
        box-shadow: 0.63vw 1vh /*0.7vh*/ /*6vh*/ /*7vh*/ 3.7vh rgba(0, 0, 0, 0.1);
        border-radius: 7vw;
        opacity: 1;
        display: block  ;
        /* transition: all 2s; */
    }

    #_view_image_context_menu_1 p {
        width: 100%;
        text-align: center;
        font-family: 'HarmonyOS Sans Regular';
        font-size: 1.7vw;
        height: 35%;
        /*top: 1%;*/
        top: 3.4%;
        position: absolute;
    }

    #contact_the_supplier_text {
        position: absolute;
        /* top: 70%; */
        top: 78%;
        font-size: 2vw;
        color: #f74070;
        right: 2.4vw;
        font-family: 'Quicksand Bold';
        text-decoration: underline;
    }

    #contact_the_supplier_text:hover {
        color: #e0ccfd;
    }

    #contact_us_text_large {
        font-size: 10vh;
        left: 3%;
        color: black;
        top: 10vh;
        position: absolute;
        /*font-family: 'Quicksand Bold';*/
        font-family: 'Quicksand Bold';
        text-shadow: 0 1.4vh 1vh rgba(0, 0, 0, 0.1);
        font-weight: 700;
        opacity: 1;
    }

    #message_box_input_field {
        position: absolute;
        left: 3vw;
        top: 35vh;
        height: 60%;
        border: solid #0bc91b 0.87vh;
        /* box-shadow: 0 1.4vh 2.7vh rgba(8, 144, 42, 0.7), inset 0 1.4vh 2.7vh rgba(8, 144, 42, 0.4); */
        box-shadow: 0 0.7vh 2.7vh rgba(8, 144, 42, 0.7), inset 0 0.7vh 2.7vh rgba(8, 144, 42, 0.4);
        background: transparent;
        width: 94vw;
        border-radius: 8vh;
        resize: none;
        /* font-size: 3vh; */
        font-size: 7vh;
        font-family: 'HarmonyOS Sans Regular';
        color: #0bc91b;
        transition: all 1.7s;
    }

    #message_box_input_field:focus {
        position: absolute;
        left: 3vw;
        top: 35vh;
        height: 60%;
        border: solid #ff98d6 0.87vh;
        /* box-shadow: 0 1.4vh 2.7vh rgba(8, 144, 42, 0.7), inset 0 1.4vh 2.7vh rgba(8, 144, 42, 0.4); */
        box-shadow: 0 0.7vh 2.7vh rgba(144, 8, 101, 0.7), inset 0 0.7vh 2.7vh rgba(144, 8, 101, 0.4);
        color: #ff98d6;
        background: transparent;
        width: 94vw;
        border-radius: 8vh;
        resize: none;
        /* font-size: 3vh; */
        font-size: 7vh;
        /* font-family: 'Quicksand Book'; */
        font-family: 'HarmonyOS Sans Regular';
        outline: none;
    }

    #send_button {
        position: absolute;
        /* right: 70%; */
        right: 3vw;
        width: 10%;
        height: 10%;
        background-color: #d7fdda;
        top: 20vh;
        border-radius: 10vw;
        border: none;
        /* font-size: 6vh; */
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0 0 3vh rgba(8, 144, 42, 0);
        font-size: 4vh;
        color: #08902a;
        font-family: 'Quicksand Bold';
        transition: all 0.63s;
    }

    #send_button:hover {
        top: 19vh;
        right: 3.3vw;
        box-shadow: inset 0 0 1.4vh rgba(11, 201, 27, 0.4), 0.7vh 1.4vh 3vh rgba(8, 144, 42, 0.27);
    }

    #send_button:active {
        top: 20vh;
        right: 3vw;
        box-shadow: inset 0 0 2.7vh rgba(11, 201, 27, 0.4), 0 0 3vh rgba(8, 144, 42, 0);
    }
    /*07-11-2024*/
    /*#cleanWhitePage {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: 90;*/
    /*end*/
/*}*/
}   

#span_text_2::selection {
    color: #0bc91b;
}

::selection {
    color: #ff98d6;
    background-color: #d7ddfd;
}

:root {
    --sharperner_red_colour: rgb(226, 14, 14);
    --sharperner_yellow_colour: rgb(237, 219, 15);
    --sharperner_green_colour: rgb(138, 247, 21);
    --sharperner_blue_colour: rgb(7, 131, 240);
}

::-webkit-scrollbar {
    /* display: none; */
    display: none;
}

@keyframes menu_div_slide_away {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50vh); }
}

@keyframes flip_menu_icon_vector_out {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(270deg); }
}

@keyframes show_the_product_animation {
    0% { transform: rotateX(0deg); width: 35vw; height: 35vw; left: 3%; border-radius: 4vw; z-index: 27; }
    50% { transform: rotateX(180deg); width: 35vw; height: 35vw; left: 3%; border-radius: 4vw; z-index: 27; }
    100% { transform: rotateX(180deg); width: 100vw; height: 100vh; left: 0%; border-radius: 0; z-index: 27; }
}

@keyframes image_should_fade_away {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes enter_image_anim_on_product_page_1 {
    /*0% { left: -10vw; }*/
    0% { left: -38vw; }
    100% { left: 3%; }
}

@keyframes enter_text_1_anim_on_product_page_1 {
    /*0% { left: -10vw; }*/
    0% { opacity: 0; top: 18vh }
    100% { opacity: 1; top: 10vh }
}

@keyframes colourful_circle_button_scale_anim {
    0% { scale: 0; }
    100% { scale: 1; }
}

@keyframes underline_animation {
    0% { width: 0vw; }
    100% { width: 41vw; }
}

@keyframes underline_animation_2 {
    0% { width: 0vw; }
    100% { width: 94vw; }
}

@keyframes wobble_large_bubbly_text_anim {
    /*0% { scale: 1 1; }
    25% { scale: 0.7 1; }
    50% { scale: 0.7 0.7; }
    75% { scale: 1 0.7; }
    100% { scale: 1 1; }*/
    0% { scale: 1; }
    25% { scale: 0.7; }
    50% { scale: 0.7; }
    75% { scale: 1; }
    100% { scale: 1; }
}

/*#FFAEDF, #FFFA6A, #56FE83*/
/*07-11-2024*/
/*.white-overlay {
    /*position: fixed;
    width: 100vw;
    height: 100vh;
    background: red;
    margin: 0px;
    top: 0px;
    left: 0px;
    z-index: 90;*/
/*}*/