/* Huvudcontainer */
.hotspot-section-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 90vw;
    margin: 5% auto;
}

/* Bild-Container */
.hotspot-container {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.half-width {
    flex: 0 0 calc(50% - 10px); /* 50% bredd med mellanrum */
}

/* Hotspot Punkt */
.hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

/* Hotspot Punkt */
.hotspot-dot {
    position: relative;
    width: 20px; /* Storlek på punkten */
    height: 20px;
    background-color: transparent; /* Transparent bakgrund */
    border: 2px solid #fff; /* Vit border */
    border-radius: 50%; /* Rund form */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* Färg för plustecknet */
    font-size: 14px; /* Storlek för plustecknet */
    font-weight: bold;
    text-align: center;
    animation: pulse 1.5s infinite; /* Pulseringsanimation */
}

.hotspot-dot::before {
    content: "+"; /* Plustecknet */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Pulseringsanimation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.hotspot:hover .hotspot-dot {
    transform: scale(1.3);
}

/* Tooltip Info */
.hotspot-info {
    display: none;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 10px;
    font-size: 0.9rem;
    border-radius: 4px;
    white-space: nowrap;
}

.hotspot:hover .hotspot-info {
    display: block;
}

/* Responsiv Anpassning */
@media (max-width: 768px) {
    .half-width {
        flex: 0 0 100%; /* Bilder staplas vertikalt på mindre skärmar */
    }
    .hotspot-container.half-width img {
        max-height: 350px !important;
        object-fit: cover;
        min-height: 350px !important;
    }
}


.hotspot-container.half-width img {
    max-height: 600px;
    object-fit: cover;
    min-height: 600px;
}


/* Fade-in Effekt - Grundläggande styling */
.fade-in {
    opacity: 0; /* Start med att dölja sektionen */
    transform: translateY(20px); /* Flytta ner sektionen något */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Tidsstyrd animation */
}

/* När sektionen är synlig */
.fade-in.show {
    opacity: 1; /* Full synlighet */
    transform: translateY(0); /* Flytta tillbaka till sin position */
}