/*============================
    24. Location
============================*/

@use "../utils/mixins" as *;
@use '../variables' as *;

.location-item {
    border-radius: $border-radius-md;
    text-align: center;
    position: relative;
    @include transition(all 0.5s);
    z-index: 1;
    overflow: hidden;
    height: 250px;
    .location-img {
        border-radius: $border-radius-md $border-radius-md;
        @include transition(all 0.5s);
        overflow: hidden;
        img {
            border-radius: $border-radius-md $border-radius-md;
            @include transition(all 0.5s);
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;

        }
    }
    .location-content {
        background: rgba(255, 255, 255, 0.8980392157);
        border-radius: $border-radius-md $border-radius-md;
        padding: 20px;
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        h5 {
            a {
                &:hover {
                    color: $primary;
                }
            }
        }
        p {
            font-size: 14px;
        }
    }
    &:hover {
        @include transition(all 0.5s);
        img {
			transform: rotate(2deg) scale(1.1);
		    @include transition(all 0.5s);
		}
    }
    &-two {
        .location-img {
            position: relative;
            border-radius: $border-radius-md;
            overflow: hidden;
            @include transition(all 0.5s);
            &::before {
                position: absolute;
                content: '';
                width: 100%;
                height: 100%;
                left: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.3);
                border-radius: $border-radius-md;
            }
            img {
                border-radius: $border-radius-md;
            }
        }
        .location-content {
            padding: 20px;
            .bg-light {
                padding: 12px;
            }
        }
    }
}
.locations-section {
    overflow: hidden; 
    .location-bg1 {
        position: absolute;
        right: 0;
        top: -9%;
        animation: rotate360 10s linear infinite;
    }
}