

/*--- body-start ---*/

body {
    background-color: var(--secondary-color);
    overflow-x: hidden;
}

main{
    padding: 20px 30px;
}

/*--- body-end ---*/
main .gallery-2 {
    position: relative;
    z-index: 10;
}

main .gallery-2 .item{
    /* padding-bottom: 20px; */
    margin-bottom: 10px;
    overflow: hidden;
    transition: 0.3s;
    aspect-ratio: 1;
}

main .gallery-2 .owl-prev {
    position: absolute;
    top: 50%;
    z-index: 999;
    left: 40px;
    color: white;
    background-color: var(--primary-color);
    transition: .3s;
}

main .gallery-2 .owl-next {
    position: absolute;
    top: 50%;
    z-index: 999;
    right: 40px;
    color: white;
    background-color: var(--primary-color);
    transition: .3s;
}

main .gallery-2 .owl-next i, main .gallery-2 .owl-prev i{
    color: white;
}

main .gallery-2 .owl-next::after {
    content: '';
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 17px);
    width: 250%;
    height: 150%;
    background-color: rgba(1, 11, 1, 0.539);
    color: var(--secondary-color);
    z-index: -1;
    border-radius: 50%;
}

main .gallery-2 .owl-next:hover::after {
    background-color: rgba(1, 11, 1, 0.539);
}

main .gallery-2 .owl-prev:hover::after {
    background-color: rgba(1, 11, 1, 0.539);
}

main .gallery-2 .owl-prev::after {
    content: '';
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 17px);
    width: 250%;
    height: 150%;
    background-color: rgba(0, 0, 0, 0.702);
    color: var(--secondary-color);
    z-index: -1;
    border-radius: 50%;
}

main .gallery-2 .owl-prev:hover::after {
    background-color: rgba(1, 11, 1, 0.539);
}

 main .gallery-2 .owl-prev:hover::after {
    background-color: rgba(1, 11, 1, 0.539);
}

main .gallery-2 .item{
    /* padding-bottom: 20px; */
    margin-bottom: 10px;
    aspect-ratio: 1;
    overflow: hidden;
    transition: 0.3s;
}
main .gallery-1 .item img, 
main .gallery-2 .item img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main .gallery-1 .item:hover img, 
main .gallery-2 .item:hover img{
    transform: scale(1.1);
    overflow: hidden;
    transition: .5s;
}

/*---- gallery-end ----*/

