﻿.menu-desktop {
    background: #ffffffd1;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}
.menu-desktop ul {
    display:flex;
    flex-direction:column;
    gap:1rem;
   
}
    .menu-desktop ul a {
        color: #000;
        word-wrap: normal;
        word-break: keep-all !important;
        width: 10rem !important;
    }
    .menu-desktop h5 {
        word-wrap: normal;
        word-break: keep-all !important;
        width:10rem!important;
    }
    .menu-desktop .category-list {
        word-wrap: normal;
        word-break: keep-all !important;
        gap:0;
    }
    .menu-desktop ul li .category-list h5 {
        display: inline-block;
    }
        .menu-desktop ul li .category-list h5:hover{
            letter-spacing:0.5px;
        }
        .menu-desktop ul li .category-list:after {
            content: '';
            width: 0px;
            height: 0.2rem;
            display: block;
            /* margin-top: 0.1rem;*/
            background: #12cbb3;
            transition: 500ms;
            margin-top: 1.1rem;
            margin-left: -10rem;
        }

    .menu-desktop ul li .category-list:hover:after {
        width: 30%;
       
    }
.linkbar{
    font-size:0.9rem;
    font-weight:500;
}
.category-menu .category-list h6 a:hover {
    letter-spacing: 0.1px;
    color: #3e7e89;
    transition: .3s ease-in-out;
}
.top-container-sm{
    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:center;
    width:100%;
    gap:0rem;
}

    .bold {
        font-weight: 700 !important;
        color: #0baf9a !important;
    }

    .arrow-left-adm {
        border-radius: 50%;
        background-color: white;
    }

    .product-box-4 {
        width: 100% !important;
        height: 100% !important;
        background-color: #fbfbfb;
        padding: 1rem !important;
        border-radius: 1rem !important;
    }

    .product-detail h6 {
        font-size: 0.8rem !important;
        width: 100% !important;
        color: #676767;
    }

    .product-detail h5 {
        font-size: 0.8rem !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    .name {
        padding: 0rem !important;
    }

    .category-menu {
        border-radius: 1rem !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        background-color: #ffffffdc !important;
    }

    .g-8 {
        margin: 0 !important;
    }

    .counter {
        background-color: #fff !important;
    }

        .counter input {
            background-color: #fff !important;
        }

    .path-products {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        gap: 0.5rem;
    }

    .path-container {
        display: inline-block;
        padding-bottom: 1rem;
        padding-left: 1rem;
    }

    /*    .path-container:after {
            content: '';
            width: 0px;
            height: 0.3rem;
            display: block;
            background: #12cbb3;
            transition: 300ms;
        }

        .path-container:hover:after {
            width: 100%;
        }*/



    .special-container {
        position: absolute;
    }

    .special-logo-img {
        width: 2rem !important;
        height: 2rem !important;
        border-radius: 1rem !important;
    }

    .font-h4-st {
        letter-spacing: 1px;
        cursor: pointer;
    }

    .font-h4-md {
        cursor: default;
    }

    .font-h4-en {
        color: #0baf9a;
        font-weight: 700;
        letter-spacing: 1px;
        cursor: pointer;
    }

        .font-h4-en:hover {
            letter-spacing: 2px;
        }

    .menu-xl ul {
        padding-bottom: 2rem;
    }

    .button-background {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .menu-post {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0.9rem;
        border: none;
        border-radius: 1rem;
        font-size: 0.7rem;
        font-weight: 700;
        font-family: "Public Sans", sans-serif;
        color: #fff;
        background-color: #0baf9a;
        gap: 0.3rem;
    }

        .menu-post:hover {
            background-color: #10d0b8;
        }

    .buy-button:hover {
        background-color: #10d0b8 !important;
    }

    .service-box .service-detail h5:hover {
        cursor: default;
    }

    /*.bg-effect {
    background-position: none !important;
    
}*/

    .theme-color-2 {
        background-color: #eaeaea;
        color: #333;
        font: 100% Lato,Arial,Sans Serif;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    #background-wrap {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: -1;
    }




    .category-menu ul .category-list h6 {
        color: #0baf9a;
        padding-left: 0.5rem;
    }

    .bubble {
        border-radius: 50%;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1), inset 0px 10px 30px 5px rgba(255,255,255,1);
        height: 200px;
        position: absolute;
        width: 200px;
    }

        .bubble::after {
            background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
            box-shadow: inset 0 20px 30px rgba(255,255,255,0.3);
            content: "";
            height: 180px;
            left: 10px;
            position: absolute;
            width: 180px;
        }

    .x1 {
        animation: animateBubble 25s linear infinite, sideways 2s ease-in-out infinite alternate;
        left: -5%;
        top: 5%;
        transform: scale(0.6);
    }

    .x2 {
        animation: animateBubble 20s linear infinite, sideways 4s ease-in-out infinite alternate;
        left: 5%;
        top: 80%;
        transform: scale(0.4);
    }

    .x3 {
        animation: animateBubble 28s linear infinite, sideways 2s ease-in-out infinite alternate;
        left: 10%;
        top: 40%;
        transform: scale(0.7);
    }

    .x4 {
        animation: animateBubble 22s linear infinite, sideways 3s ease-in-out infinite alternate;
        left: 20%;
        top: 0%;
        transform: scale(0.3);
    }

    .x5 {
        animation: animateBubble 29s linear infinite, sideways 4s ease-in-out infinite alternate;
        left: 30%;
        top: 50%;
        transform: scale(0.5);
    }

    .x6 {
        animation: animateBubble 21s linear infinite, sideways 2s ease-in-out infinite alternate;
        left: 50%;
        top: 0%;
        transform: scale(0.8);
    }

    .x7 {
        animation: animateBubble 25s linear infinite, sideways 2s ease-in-out infinite alternate;
        left: -5%;
        top: 5%;
        transform: scale(0.6);
    }

    .x8 {
        animation: animateBubble 25s linear infinite, sideways 2s ease-in-out infinite alternate;
        left: 65%;
        top: 70%;
        transform: scale(0.8);
    }

    .x9 {
        animation: animateBubble 29s linear infinite, sideways 4s ease-in-out infinite alternate;
        left: 90%;
        top: 50%;
        transform: scale(0.6);
    }

    .x10 {
        animation: animateBubble 26s linear infinite, sideways 2s ease-in-out infinite alternate;
        left: 80%;
        top: 80%;
        transform: scale(0.3);
    }


    @keyframes animateBubble {
        0% {
            margin-top: 1000px;
        }

        1000% {
            margin-top: -100px;
        }
    }

    @keyframes sideways {
        0% {
            margin-left: 0px;
        }

        10000% {
            margin-left: 50px;
        }
    }

.search-box {
    padding-bottom: 1rem;
}

    .search-box .input-group {
        align-items: inherit !important;
    }
    /*-------------------------------------*/
@media (max-width:640px) {
}

@media (min-width: 992px) {
    .col-lg-3 {
        min-width: 18rem;
    }
}

@media (min-width:640px) {
    .top-container-sm {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        width: 100%;
        /*gap: 3rem;*/
    }
    .path-container{
        display:flex;
        justify-content:start;
        align-items:center;
     /*   width:90%;*/
        font-size:0.9rem!important;
    }
    .font-h4-st,.font-h4-md,.font-h4-en{
        font-size:1rem!important;
    }
    .font-h4-st{
        min-width:7rem;
    }
    .font-h4-en{
       min-width:12rem;
    }
    
}
/*@media (min-width:775px) {
    .path-container{
        width:74%;
    }
}
@media (min-width:991px) {
    .path-container {
        width: 92%;
    }
}
@media (min-width:1024px) {
    .path-container {
        width: 70%;
    }
}
@media (min-width:1246px) {
    .path-container {
        width: 60%;
    }
}
@media (min-width:1300px) {
    .path-container {
        width: 50%;
    }
}*/
.searchbox-container {
    width:100%;
}
.search-box .input-group{
    max-width:96%!important;
}