.ce-hotspot{
    position:relative;
    
    .image{
        aspect-ratio: 16/9;
        img{
            object-fit: cover;
            width:100%;
            height:100%;
        }
    }
    .location{
        position:absolute;
        .spot{
            cursor:pointer;
            width:20px;
            height:20px;
            background:var(--codeless-primary-color);
            -webkit-animation: r2 2s 0.5s ease-out infinite;
            -moz-animation: r2 2s 0.5s ease-out infinite;
            animation: r2 2s 0.5s ease-out infinite;
            border:4px solid #fff;
            border-radius:50%;
            
        }
        .info{
            opacity:0;
            transform:translateY(10px);
            @include transition(all 0.3s);
            background:var(--codeless-secondary-color);
            padding:30px 40px;
            width:286px;
            border-radius:6px;
            margin-left: 15px;
            margin-top: 15px;
            z-index:99999;
            position:absolute;
            box-shadow: 10px 41px 57px -17px rgba(0, 0, 0, 0.22);
            h4{
                color:#fff;
                margin-bottom:15px;
            }
        }
        &:hover{
            .info{
                transform:translateY(0px);
                opacity:1;
            }
        }

        .icon-t{
            display: flex;
            align-items: flex-start;
            margin-top: 10px;
            i{
                color: var(--codeless-primary-color);
                font-size: 32px;
                margin-right: 7px;
                margin-top: 4px;
            }
        }
    }
}
@keyframes r2{
    0% {
        box-shadow: 0 0 8px 6px rgba(244, 114, 44, 0), 0 0 0px 0px rgba(244, 114, 44, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(244, 114, 44, 0.3), 0 0 2px 10px rgba(244, 114, 44, 0.3);
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(244, 114, 44, 0), 0 0 20px 60px rgba(244, 114, 44, 0);
    }
}