/* NAV CONTAINER (MAIN) */


.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: 10vw;}

#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;
}

  #pointer_main {
    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%;
}

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

        .side_menu_cart {
                position: fixed;
                width: 100%;
                top: 88%;
                z-index: 1000;
        }

        .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;
        }

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

    #cart_add_cart {
        width: 6%;
        position: relative;
        bottom: 60px;
        left: 69%;
    }

.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_text {
    display: flex;
    justify-content: center;
    width: 100%;
            font-family: Arial, sans-serif;
            font-size: 24px;
}

.side_menu_text a {
    z-index: 1000; /* Меню будет поверх всех элементов */
    padding: 5px;
    background-color: blue;
}

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