/* NAV CONTAINER (MAIN) */


.nav_logo {
    width: 100%;
}

.nav-logo-container {
    width: 20%;
}

.nav_container {
  padding: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  /* background: #111111; */
}

.navbar_container_sizer {
  opacity: 0;
}

.nav {

  display: flex;
  justify-content: space-between;
}

  .ico {width: 10vh;}

#logo_img {
  width: 100%;
  display: block;
}

.ico:hover {
  -webkit-mask-image: none;
}

.ico {
  align-content: center;
}

.ico_img {
  width: 100%;
  display: block; 
}

#main_img_container {
    background: url("../../media/navbar/webp/main.webp") no-repeat;
    background-size: 100%;
    background-position: center;
  }

#main_img_container:hover {
    background: url("../../media/navbar/webp/mainhold.webp") no-repeat;
    background-size: 100%;
    background-position: center;
  }

#main_img_container_onpage {
    background: url("../../media/navbar/webp/mainhold.webp") no-repeat;
    background-size: 100%;
    background-position: center;
}

#shop_img_container_onpage {
    background: url("../../media/navbar/webp/shophold.webp") no-repeat;
    background-size: 100%;
    background-position: center;
}

#music_img_container_onpage {
    background: url("../../media/navbar/webp/musichold.webp") no-repeat;
    background-size: 100%;
    background-position: center;
}

  .nav_pointer {
    background-color: blue;
  }

#phone_img_container {
    background: url("../../media/navbar/webp/contact.webp") no-repeat;
    background-size: 100%;
    background-position: center;
  }

#phone_img_container:hover {
    #main_img_container {
      mask-image: none;
    }
    background: url("../../media/navbar/webp/contacthold.webp") no-repeat;
    background-size: 100%;
    background-position: center;
  }

#shop_img_container {
    background: url("../../media/navbar/webp/shop.webp") no-repeat;
    background-size: 100%;
    background-position: center;
  }

#shop_img_container:hover {
    background: url("../../media/navbar/webp/shophold.webp") no-repeat;
    background-size: 100%;
    background-position: center;
  }

#music_img_container {
    background: url("../../media/navbar/webp/music.webp") no-repeat;
    background-size: 100%;
    background-position: center;
  }

#music_img_container:hover {
    background: url("../../media/navbar/webp/musichold.webp") no-repeat;
    background-size: 100%;
    background-position: center;
  }

.nav_pointer {
  width: 10%;
}

.cart_add {
  width: 2%;
  position: fixed;
  left: 70%;
  top: 2%;
}

#cart_add_cart {
  width: 15%;
  position: relative;
  bottom: 20px;
  left: 20px;
}

.cart_add img {
    width: 100%;
}

#cart_add_cart img {
  width: 100%;
}

#cart_add,
#cart_add_cart {
    opacity: 0; /* Початковий стан: прихований */
    transition: opacity 0.3s ease; /* Плавна зміна прозорості */
}

#cart_add.visible,
#cart_add_cart.visible {
    opacity: 1; /* Коли елемент видимий */
}

#cart_add.hidden,
#cart_add_cart.hidden {
    opacity: 0; /* Коли елемент прихований */
}


        .side_menu_cart {
            position: fixed;
            display: flex;
            justify-content: start;
            top: 60%;
            max-width: 200px; /* або інший підходящий розмір */
            left: 0;
            background: none;
            padding: 20px;
            z-index: 1000; /* Меню будет поверх всех элементов */
            font-family: Arial, sans-serif;
        }

        .side_menu_cart_shop {
            position: fixed;
            display: flex;
            justify-content: start;
            top: 85%;
            left: 0;
            background: none;
            padding: 20px;
            z-index: 1000; /* Меню будет поверх всех элементов */
            font-family: Arial, sans-serif;
        }

        .side_menu_text a {
            user-select: none;
            font-family: Arial;
            font-size: 24px;
            color: white;
            text-decoration: none;
            display: block;
            margin: 10px 0;
        }

        #bg_sidemenu_text {
                        background-color: blue;
        }

        .side_menu_cart a:hover {
            text-decoration: underline;
        }

#pointer_main,
#pointer_phone,
#pointer_shop,
#pointer_music {
  opacity: 0;
}