.product-offer-text{
    position: relative;
    top: -37%;
    left: 12%;
    background: white;
    padding: 6px;
    
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 2px;
    font-family: var(--primary-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
}
.product-offer-text-trending{
    position: relative;
    top: -37%;
    left: 12%;
    background: var(--rog-red-background);
    padding: 6px;
    

    color: var(--rog-red);
    border: 1px solid var(--rog-red);
    border-radius: 2px;
    font-family: var(--rog-red);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
}
.product-offer {
    font-family: var(--primary-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    color: var(--rog-red);
    background: var(--rog-red-background);
    border-radius: 2px;
    padding: 10px;
}

.product-description {
    font-family: var(--primary-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    padding-bottom: 8px;
    color: var(--tertiary-color);
}

@media screen and (max-width:820px) {
    .product-offer-text-trending{
        position: relative;
        top: -40%;
        left: 25%;
        background: var(--rog-red-background);
        padding: 6px;
        
    
        color: var(--rog-red);
        border: 1px solid var(--rog-red);
        border-radius: 2px;
        font-family: var(--rog-red);
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
    }
    #header{
        display:block !important;
    }
    .arrow-icon{
        display:none
    }   

    .product-offer {
        padding: 5px 10px;
    }

    .product-description {
        font-size: 12px;
        padding-bottom: 8px;
        margin-top: -12px;
    }

    .zenbook-text{
        display:none !important;
    }
    
}

@media screen and (max-width:500px) {
    .product-offer-text {
        left: 25% !important;
        padding: 4px;
    }

    .carousel__item {
        width:75px;
        height:75px;
        position: absolute;
        left: 100%;
        text-align: center;
        font-size: 45px;
        animation: slide var(--duration) linear infinite;
        animation-delay: calc((var(--duration) / var(--quantity)) * (var(--position) - var(--quantity))) !important;

    }
}

.specs-list {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    font-family: var(--primary-text);
    color: var(--tertiary-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
}

.specs-list li {
    padding-bottom: 5px;
}

.active {
    background: var(--primary-color);
    color: white;
}
.fade-out {
    opacity: 0;
    transition: opacity 0.9s ease; /* Match the duration with your JS setTimeout */
}

.fade-in {
    opacity: 0;
    transition: opacity 0.9s ease; /* Match the duration with your JS */
}

.fade-in.show {
    opacity: 1;
}

/*hotspot css */
.hotspot-container {
    position: relative;
    width: 100%;

}

.hotspot {
    position: absolute;
    cursor: pointer;
}
.hotspot1{
    top: 30%; right: 50%;
}
.hotspot2{
    top: 37%; right: 20%;
}
.hotspot .popup {
    position: absolute;
    background: white;
    color: black;
    padding: 10px 10px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    display: none;
    transform: translateX(-50%);
    width:241px;
    text-align: center;
    overflow: hidden;
    text-overflow: clip;
    z-index: 999;

}

.hotspot:hover .popup {
    display: block;
}
.hotspot-active {
    display: block;

}
.hotspot1-popup{
    top: 0px; left: 127px;
}
.hotspot2-popup{
    top: 15px;left:110px
}
@media screen and (max-width:500px) {
    .hotspot1{
        top: 20%; left : 15%;
    }
    .hotspot2{
        top: 13%; right: 16%;
    }
    .hotspot-image{
        width: 25px;
    }
    .hotspot1-popup{
        top: 13px;
        left: -84px;
    }
    .hotspot2-popup{
        top: 13px;
        left: -84px;
    }
}

/* Hotspot Section Start */
.hotspot-hover-point {
    position: absolute;
    background-color: #133ED4;
    border: 1px solid #133ED4;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    padding: 0.4rem;
    border-radius: 50%;
  }
  .hotspot-hover-point .ripple-1,
  .hotspot-hover-point .ripple-2,
  .hotspot-hover-point .ripple-3{
    height: 1rem;
    width: 1rem;
    position: absolute;
    top: -0.6rem;
    background-color: #909BBF99;
    border-radius: 50%;
    transform: translate3d(-50%, 50%, 0);
    animation-name: ripple;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    will-change: transform, opacity;
  }
  .hotspot-hover-point .ripple-1{
    animation-delay: 0;
  }
  .hotspot-hover-point .ripple-2{
    animation-delay: 1s;
  }
  .hotspot-hover-point .ripple-3{
    animation-delay: 1s;
  }
  @keyframes ripple{
    0%{
      transform: translate3d(-50%, 50%, 0) scale(0);
      opacity: 1;
    }
    100%{
      transform: translate3d(-50%, 50%, 0) scale(4);
      opacity: 0;
    }
  }
  
  /* Hotspot Section End */