/* vCarousel Wrapper */
.vCarousel-wrapper2 {
    position: relative;
    top: 45%;
    left: 20px; 
    width: 55px;
    /*height: 425px;*/ /* 6 items */
    height: 300px;/* 4 items */
    background-color: rgb(165 124 53 / 70%);
    border-radius: 30px;
    /* overflow: hidden; */
    padding: 5px 0;
    transform: translateY(-50%);
    z-index: 999;
}

  

.vCarousel-container2 {
    position: relative;
    width: 100%;
    /*height: 365px;*/ /* 6 items */
    height: 245px; /* 4 items */
    overflow: hidden;
}

.vCarousel2 {
    position: absolute;
    top: 0;
    width: 100%;
    transition: top 0.3s ease;
}

.vCarousel2 a {
    display: block;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    width: 55px;
    height:50px;
}

.vCarousel2 a:hover {
    background-color:rgba(0, 0, 0, .5);  
}

.vCarousel2 .info2 {
    display: none; 
}

.vCarousel2 a img {
    width: 40px;     
    /* display: block; */
    margin: 5px auto;
}

/* Initially hidden info box in the separate container */
#info-box-container2 {
    position: absolute;
    left: 0px; /* Adjust this to position the info box outside the carousel wrapper */ 
    top: -30px; /* Adjust as needed */
    z-index: 9999;
}

#info-box-container2 .info-box2 {
    position: absolute;
    background-color: white;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.info-box2 {
    background-color: #fff;
    color: #333;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.info-box2 img{
    width: 200px;
    cursor: pointer;
}

.info-box2.show {
    opacity: 1;
    pointer-events: auto;
}

/* Arrow buttons */
.up-arrow2,
.down-arrow2 {
    width: 100%;
    height: 35px;
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
}
 
.down-arrow2 {
    position: absolute;
    bottom: 5px;
    left: 1px; 
}

/* Show the info box on hover */
.vCarousel2 a:hover ~ #info-box-container2 .info-box2,
#info-box-container2:hover .info-box2 {
    opacity: 1;
    pointer-events: auto;
}

.widget-title2 {
    font-size: 1.2em !important;
    letter-spacing: normal !important;
    position: absolute;
    top: -11%;
    left: -10px;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    z-index: 999;
    background: rgb(165 124 53 / 70%);
    padding: 0 7px 5px;
    border-radius: 30px;
}