body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#panorama {
    width: 100%;
    height: 80vh;
}

#panorama.fullscreen {
    height: 100vh;
}



.hotspot {
    position: absolute;
    width: 30px;  /* قطر دایره قرمز */
    height: 30px;
    border: 4px solid red;  /* حلقه قرمز */
    border-radius: 50%;
    animation: blink 1s infinite; /* چشمک زدن دایره‌ها */
    box-sizing: border-box;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hotspot::before {
    content: '';
    position: absolute;
    width: 60px;  /* قطر دایره سفید بزرگ‌تر */
    height: 60px;
    top: 50%;  /* قرارگیری در مرکز */
    left: 50%; /* قرارگیری در مرکز */
    transform: translate(-50%, -50%); /* انتقال به مرکز واقعی */
    border: 4px solid white;  /* حلقه سفید */
    border-radius: 50%;
    background: transparent;
    animation: blink 1s infinite; /* چشمک زدن دایره‌ها */
}

.tooltip {
    position: absolute;
    top: 220%; /* قرارگیری یک برابر دیگر پایین‌تر زیر دایره‌ها */
    left: 50%;
    transform: translateX(-50%);
    color: white; /* رنگ متن سفید */
    font-size: 12px; /* اندازه فونت */
    text-align: center;
    white-space: nowrap; /* جلوگیری از شکستن خط */
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    z-index: 10;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  
}

button {
    padding: 7px 10px;
    font-size: 16px;
    cursor: pointer;
      background-color: rgba(0,0,0,0.5);
      border-radius: 6px;
      color: white;
      font-weight: 800;
}


.exit-button {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
}
.MyExitBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
}   
