/*------------------------------------*\
    #Image Hot Pointer
\*------------------------------------*/
.img-hotspot {
    .img-hotspot-wrap {
        position : relative;
        max-width: 100%;

        @media screen and (max-width:567px) {
            max-width: 470px;
        }

        @media #{$maxTablet} {
            margin   : 0 auto 40px;
        }

        .img-hotspot-bg {
            img {
                max-width: 100%;
            }
        }

        .img-hotspot-pointers {
            position: absolute;
            width   : 100%;
            height  : 100%;
            top     : 0;
            left    : 0;
            right   : 0;

            .img-hotspot-pointer {
                position       : absolute;
                display        : flex;
                justify-content: center;
                align-items    : center;

                .pointer-icon {
                    width          : 22px;
                    height         : 22px;
                    cursor         : pointer;
                    border         : 2px solid var(--global--color-primary);
                    border-radius  : 50%;
                    position       : relative;
                    display        : flex;
                    justify-content: center;
                    align-items    : center;

                    &::after {
                        content         : '';
                        background-color: var(--global--color-primary);
                        width           : 8px;
                        height          : 8px;
                        border-radius   : 50%;
                    }
                }

                &:hover {
                    .info {
                        transform : translate(-50%, -50%) scale(1);
                        opacity   : 1;
                        visibility: visible;
                    }
                }

                .info {
                    position  : absolute;
                    top       : 50%;
                    left      : 50%;
                    z-index   : 1;
                    transform : translate(-50%, -50%) scale(0);
                    opacity   : 0;
                    visibility: hidden;
                    transition: 0.3s ease-in-out;

                    .border-outer {
                        width          : 96px;
                        height         : 96px;
                        cursor         : pointer;
                        border         : 2px solid var(--global--color-primary);
                        border-radius  : 50%;
                        position       : relative;
                        display        : flex;
                        justify-content: center;
                        align-items    : center;

                        .border-inner {
                            width          : 82px;
                            height         : 82px;
                            cursor         : pointer;
                            border         : 2px solid var(--global--color-primary);
                            border-radius  : 50%;
                            position       : relative;
                            display        : flex;
                            justify-content: center;
                            align-items    : center;

                            i {
                                display         : flex;
                                justify-content : center;
                                align-items     : center;
                                width           : 68px;
                                height          : 68px;
                                background-color: var(--global--color-primary);
                                border-radius   : 50%;

                                &::before {
                                    color      : var(--global--color-white);
                                    font-size  : 50px;
                                    margin-left: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.img-hotspot-2 {
        .img-hotspot-wrap {
            .img-hotspot-pointers {
                .img-hotspot-pointer {
                    position       : absolute;
                    display        : flex;
                    justify-content: center;
                    align-items    : center;
                    width          : 42px;
                    height         : 42px;
                    padding        : 4px;
                    border         : 2px solid var(--global--color-heading);
                    border-radius  : 50%;
                    cursor         : pointer;
                    transition     : 0.3s ease-in-out;

                    &::after {
                        position     : absolute;
                        content      : '';
                        width        : 56px;
                        height       : 56px;
                        border       : 2px solid var(--global--color-primary);
                        border-radius: 50%;
                        opacity      : 0;
                        visibility   : hidden;
                        transform    : scale(0);
                        transition   : 0.3s ease-in-out;
                    }

                    &:hover {
                        border-color: var(--global--color-primary);

                        &::after {
                            opacity   : 1;
                            visibility: visible;
                            transform : scale(1);
                        }

                        .info {
                            opacity   : 1;
                            visibility: visible;
                            transform : translateY(0);
                        }
                    }

                    img {
                        max-width    : 100%;
                        border-radius: 50%;
                    }

                    .info {
                        background-color: var(--global--color-white);
                        box-shadow      : 0px 5px 83px 0px rgba(9, 29, 62, 0.15);
                        border-radius   : 8px;
                        position        : relative;
                        width           : max-content;
                        position        : absolute;
                        max-width       : 330px;
                        z-index         : 2;
                        transition      : 0.3s ease-in-out;
                        padding         : 23px 28px;
                        opacity         : 0;
                        visibility      : hidden;
                        transform       : translateY(10px);

                        &::before {
                            content         : '';
                            bottom          : -9px;
                            width           : 10px;
                            height          : 10px;
                            background-color: var(--global--color-white);
                            position        : absolute;
                        }

                        &.left {
                            &::before {
                                clip-path: polygon(100% 0, 0 0, 0 100%);
                                ;
                                left : auto;
                                right: 30px;
                            }
                        }

                        &.right {
                            &::before {
                                clip-path: polygon(100% 0, 0 0, 100% 100%);
                                left     : 30px;
                            }
                        }

                        span {
                            font-family   : var(--global--font-body);
                            font-size     : 15px;
                            font-weight   : 700;
                            line-height   : 26px;
                            color         : var(--global--color-secondary);
                            text-transform: capitalize;
                        }
                    }
                }
            }
        }
    }

    &.img-hotspot-3 {
        .img-hotspot-wrap {
            .img-hotspot-pointers {
                .img-hotspot-pointer {
                    position: absolute;
                    width   : 28px;
                    height  : 28px;
                    cursor  : pointer;

                    &:hover {
                        .info {
                            opacity   : 1;
                            visibility: visible;
                            transform : translateY(0);
                        }
                    }

                    .pointer-icon {
                        border-color: var(--global--color-secondary);

                        &::after {
                            background-color: var(--global--color-secondary);
                        }
                    }

                    .info {
                        background-color: var(--global--color-white);
                        box-shadow      : 0px 5px 83px 0px rgba(9, 29, 62, 0.15);
                        border-radius   : 10px 10px 10px 0px;
                        position        : relative;
                        width           : max-content;
                        position        : absolute;
                        max-width       : 170px;
                        z-index         : 2;
                        transition      : 0.3s ease-in-out;
                        padding         : 15px 20px;
                        opacity         : 0;
                        visibility      : hidden;
                        transform       : translateY(10px);

                        &::before {
                            content         : '';
                            bottom          : -9px;
                            width           : 10px;
                            height          : 10px;
                            background-color: var(--global--color-white);
                            position        : absolute;
                        }

                        &.left {
                            border-radius: 10px 10px 0 10px;

                            &::before {
                                clip-path: polygon(100% 0, 0 0, 100% 100%);
                                left     : auto;
                                right    : 0;
                            }
                        }

                        &.right {
                            border-radius: 10px 10px 10px 0px;

                            &::before {
                                clip-path: polygon(100% 0, 0 0, 0 100%);
                                ;
                                left: 0;
                            }
                        }

                        span {
                            font-family   : var(--global--font-body);
                            font-size     : 14px;
                            line-height   : 24px;
                            color         : var(--global--color-body);
                            text-transform: capitalize;
                        }
                    }
                }
            }
        }
    }
}