@use '../utils' as *;

/*----------------------------------------*/
/*  13. GALLERY CSS START
/*----------------------------------------*/

.tp-gallery-area {
    @media #{$xs} {
        padding-bottom: 70px;
    }
}

.tp-gallery {
    & img {
        width: 100%;
        height: 100%;
    }
}

.tpgallery {
    &__content {
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30px;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        transform: translateY(50px);

        @media #{$lg} {
            padding: 20px;
        }

        & p {
            font-weight: 600;
            font-size: 16px;
            text-transform: uppercase;
            color: #e7713a;
        }
    }

    &__title {
        font-weight: 800;
        font-size: 30px;
        letter-spacing: -0.01em;
        color: #FFFFFF;
        margin-bottom: 20px;

        @media #{$md} {
            font-size: 18px;
        }

        & a {
            &:hover {
                color: #e7713a;
            }
        }
    }
}

.tpgallery-btn {
    position: absolute;
    text-align: center;
    transform: translateY(50px);
    color: #fff;
    width: 156px;
    height: 156px;
    border: 1px solid #e7713a;
    background: #e7713a;
    border-radius: 100%;
    font-weight: 500;
    font-size: 30px;
    line-height: 5;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 50%;
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    transition: .3s;

    @media #{$lg} {
        width: 140px;
        height: 140px;
        line-height: 140px;
    }

    @media #{$md,$sm,$xs} {
        width: 100px;
        height: 100px;
        line-height: 5;
        font-size: 20px;
    }
}


.tpgallery-wrapper:hover .tpgallery__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    transition-delay: .3s;
}

.tpgallery-wrapper:hover .tpgallery-btn {
    opacity: 1;
    visibility: visible;
    color: #fff;
    transform: translateY(-50%) scale(1);
    transition-delay: .2s;
}

.tpgallery-wrapper {
    height: 100%;
    &:hover {
        & .tp-gallery {
            &::before {
                opacity: 1;
            }
        }
    }

}

.tp-gallery {
    position: relative;
    @include transition(.3s);
    height: 100%;
    &::before {
        content: '';
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(0.76deg, #121212 19.4%, rgba(18, 18, 18, 0) 97.43%);
        opacity: 0;
        transition: .3s;
    }
}


////////////////
// home 1 sass
////////////////

.tpgallery-bg {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0;
    left: 0;
}

.tpgallery-2-img {
    & img {
        max-width: 100%;
    }
}

.tpgallery-shape {
    & .tpgallery-shape-1 {
        position: absolute;
        width: 10px;
        height: 10px;
        background: #121212;
        border-radius: 10px;
        top: 130px;
        left: 485px;
        display: block;
    }

    & .tpgallery-shape-2 {
        position: absolute;
        width: 10px;
        height: 10px;
        background: #e7713a;
        border-radius: 10px;
        top: 115px;
        right: 880px;

        @media #{$xl} {
            top: 18px;
            right: 890px
        }
    }

    & .tpgallery-shape-3 {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #121212;
        border-radius: 10px;
        top: 30px;
        right: 405px;
    }

    & .tpgallery-shape-4 {
        position: absolute;
        width: 12px;
        height: 12px;
        bottom: 150px;
        background: #e7713a;
        right: 330px;
        border-radius: 10px;
    }

    & .tpgallery-shape-5 {
        position: absolute;
        background: #121212;
        width: 9px;
        height: 9px;
        border-radius: 10px;
        bottom: 105px;
        right: 860px;
    }

    & .tpgallery-shape-6 {
        position: absolute;
        background: #e7713a;
        height: 9px;
        width: 9px;
        border-radius: 10px;
        bottom: 135px;
        left: 275px;

        @media #{$xl} {
            left: 180px;
        }
    }
}