/** Shopify CDN: Minification failed

Line 9:62 Unexpected "{"
Line 9:71 Expected ":"
Line 9:78 Unexpected "{"

**/
/* Container & Header */
.image-banner-hotspot .image-banner-hotspot .hotspot-section-{{ section.id }} {
  padding: 60px 0;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.image-banner-hotspot  .main-section{
     position: relative;
}
.image-banner-hotspot .hotspot-container {
    text-align: center;
    background-size: 1600px 686px;
    background-position: center top;
    height: 686px;
    padding: 55px 0;
    position: relative; 
}

/* Image Switching Logic */
.image-banner-hotspot .hotspot-image {
  width: 100%;
  display: block;
  height: 686px;
  object-fit: cover;

}

@media (min-width: 769px) {
  .hidden--desktop { display: none !important; }
}
@media (max-width: 768px) {
  .hidden--mobile { display: none !important; }
}

/* Hotspot Icon & Pulse */
.hotspot-point {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  top: var(--top-mobile);
  left: var(--left-mobile);
}

/* Desktop Positioning */
@media (min-width: 769px) {
  .hotspot-point {
    top: var(--top-desktop);
    left: var(--left-desktop);
  }
}
.image-banner-hotspot .hotspot-point.is-active {
  z-index: 0;
}
.image-banner-hotspot .hotspot-header{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    z-index: 1;
    text-align: center;
    padding-top: 50px;
    width: 35%;
    margin: 0 auto;
}
.image-banner-hotspot .hotspot-icon-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  background: #1a5fb4; 
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 30;
}

.image-banner-hotspot .icon-circle svg {
  width: 22px;
  height: 22px;
  fill: white;
}

.icon-minus { display: none; }

/* Active State Logic */
.image-banner-hotspot .hotspot-point.is-active .hotspot-icon-wrapper {
  background: #ffffff;
  border: solid 2px #1a5fb4;
}
.image-banner-hotspot .hotspot-point.is-active .icon-plus { display: none; }
.image-banner-hotspot .hotspot-point.is-active .icon-minus { 
  display: block; 
  fill: #1a5fb4;
}

/* THE MOCKUP CONTENT BOX: Vertical & Centered Below */
.image-banner-hotspot .hotspot-content-wrapper {
display: none;
  position: absolute;
  top: 100%; 
  margin-top: 15px; 
  left: 50%;
  transform: translateX(-50%);
  width: 170px; 
  z-index: 20;
}

.image-banner-hotspot .hotspot-point.is-active .hotspot-content-wrapper {
  display: block;
}

.image-banner-hotspot .hotspot-content-inner {
  background: white;
  padding: 25px 15px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  position: relative;
}

/* White Arrow pointing UP to the icon */
.image-banner-hotspot .hotspot-arrow {
 position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.image-banner-hotspot .hotspot-text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0;
  text-align: center;
  word-wrap: break-word;
}

/* Pulse Animation */
@keyframes hotspot-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.image-banner-hotspot .hotspot-icon-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #1a5fb4;
  animation: hotspot-pulse 2s infinite ease-in-out;
  z-index: -1;
}

.image-banner-hotspot .hotspot-point.is-active .hotspot-icon-wrapper::before {
  display: none;
}

@media (max-width: 1300px) {
  .image-banner-hotspot .hotspot-header {
    width: 50%;
    padding: 50px 10px 25px 10px;
  }
}

@media (max-width: 999px) {
  .image-banner-hotspot .hotspot-header {
    width: 70%;
  }
}


@media (max-width: 768px) {
  .image-banner-hotspot .hotspot-header {
    width: 100%;
  }
}