/*==========================================================
        AARNA DIVINE GALLERY
==========================================================*/

.ads-gallery01{
    position:relative;
    width:100%;
    padding:110px 0 90px;
    background:#faf7f2;
    overflow:hidden;
}

/* Decorative background */

.ads-gallery01::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:360px;
    height:360px;
    background:url("images/pattern-left.png") no-repeat;
    background-size:contain;
    opacity:.06;
    pointer-events:none;
}

.ads-gallery01::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:360px;
    height:360px;
    background:url("images/pattern-right.png") no-repeat;
    background-size:contain;
    opacity:.06;
    pointer-events:none;
}

/*==========================================================*/

.ads-gallery-container01{
    width:92%;
    max-width:1500px;
    margin:auto;
    position:relative;
}

/*==========================================================*/

.ads-gallery-heading01{
    text-align:center;
    margin-bottom:60px;
}

.ads-gallery-heading01 span{
    display:inline-block;
    color:#c79b43;
    font-size:14px;
    letter-spacing:3px;
    font-weight:700;
    text-transform:uppercase;
}

.ads-gallery-heading01 h2{
    margin-top:18px;
    font-size:54px;
    line-height:1.15;
    color:#2b1844;
    font-weight:700;
}

.ads-gallery-heading01 h2 span{
    display:block;
    color:#4b256d;
    font-size:54px;
    letter-spacing:0;
    text-transform:none;
}

.ads-gallery-heading01 p{
    width:760px;
    max-width:100%;
    margin:28px auto 0;
    color:#6b6b6b;
    font-size:18px;
    line-height:1.9;
}

/*==========================================================*/

.ads-gallery-wrapper01{
    overflow:hidden;
    width:100%;
    position:relative;
}

/*==========================================================*/

.ads-gallery-track01{
    display:flex;
    gap:24px;
    transition:.7s ease;
    will-change:transform;
}

/*==========================================================*/

.ads-gallery-card01{
    position:relative;
    min-width:280px;
    height:390px;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    flex-shrink:0;
    background:#fff;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    transition:.45s;
}

.ads-gallery-card01:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,.18);
}

.ads-gallery-card01 img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.8s;
}

.ads-gallery-card01:hover img{
    transform:scale(1.08);
}

/*==========================================================*/

.ads-gallery-overlay01{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:26px 20px;
    background:linear-gradient(to top,
    rgba(37,18,61,.96),
    rgba(37,18,61,.65),
    transparent);
}

.ads-gallery-overlay01 h3{
    color:#fff;
    font-size:24px;
    font-weight:600;
    text-align:center;
}

/*==========================================================*/
/* Arrows */

.ads-gallery-arrow01{
    position:absolute;
    overflow:hidden;
    top:58%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:#4b256d;
    color:#fff;
    font-size:28px;
    transition:.35s;
    z-index:20;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.ads-gallery-arrow01:hover{
    background:#c79b43;
    transform:translateY(-50%) scale(1.08);
}

.ads-gallery-prev01{
    left:10px;
}

.ads-gallery-next01{
    right:10px;
}

/*==========================================================*/
/* Dots */

.ads-gallery-dots01{
    margin-top:40px;
    display:flex;
    justify-content:center;
    gap:12px;
}

.ads-gallery-dot01{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#d4d4d4;
    transition:.3s;
}

.ads-gallery-dot01.active{
    background:#4b256d;
    transform:scale(1.3);
}

/*==========================================================
        POPUP
==========================================================*/

.ads-gallery-popup01{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.82);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:30px;
}

.ads-gallery-popup-box01{
    position:relative;
    width:1200px;
    max-width:95%;
    background:#2d1744;
    border-radius:22px;
    overflow:hidden;
    display:flex;
    align-items:center;
    box-shadow:0 35px 80px rgba(0,0,0,.45);
}

/*==========================================================*/

.ads-popup-image01{
    width:55%;
}

.ads-popup-image01 img{
    width:100%;
    height:720px;
    object-fit:cover;
    display:block;
}

/*==========================================================*/

.ads-popup-content01{
    width:45%;
    padding:70px;
    color:#fff;
}

.ads-popup-content01 span{
    color:#d5b16c;
    font-size:14px;
    letter-spacing:3px;
    text-transform:uppercase;
}

.ads-popup-content01 h2{
    margin:18px 0;
    font-size:42px;
    line-height:1.2;
}

.ads-popup-content01 p{
    font-size:18px;
    line-height:1.9;
    color:#ececec;
}

/*==========================================================*/
/* Close */

.ads-gallery-close01{
    position:absolute;
    right:25px;
    top:18px;
    font-size:42px;
    color:#fff;
    cursor:pointer;
    transition:.3s;
    z-index:50;
}

.ads-gallery-close01:hover{
    color:#d5b16c;
}

/*==========================================================*/
/* Popup arrows */

.ads-popup-prev01,
.ads-popup-next01{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:#4b256d;
    color:#fff;
    font-size:28px;
    transition:.3s;
    z-index:50;
}

.ads-popup-prev01:hover,
.ads-popup-next01:hover{
    background:#c79b43;
}

.ads-popup-prev01{
    left:18px;
}

.ads-popup-next01{
    right:18px;
}
/*==========================================================
        GALLERY RESPONSIVE CSS
==========================================================*/

/*==============================
        Large Tablet
==============================*/

@media (max-width:1200px){

    .ads-gallery-container01{
        width:95%;
    }

    .ads-gallery-heading01 h2,
    .ads-gallery-heading01 h2 span{
        font-size:46px;
    }

    .ads-gallery-card01{
        min-width:260px;
        height:360px;
    }

    .ads-gallery-arrow01{
        width:52px;
        height:52px;
        font-size:24px;
    }

    .ads-gallery-prev01{
        left:-15px;
    }

    .ads-gallery-next01{
        right:-15px;
    }

    .ads-popup-image01 img{
        height:600px;
    }

    .ads-popup-content01{
        padding:50px;
    }

}


/*==============================
        Tablet
==============================*/

@media (max-width:992px){

    .ads-gallery01{
        padding:80px 0;
    }

    .ads-gallery-heading01{
        margin-bottom:45px;
    }

    .ads-gallery-heading01 h2,
    .ads-gallery-heading01 h2 span{
        font-size:38px;
    }

    .ads-gallery-heading01 p{
        font-size:16px;
        width:100%;
    }

    .ads-gallery-card01{
        min-width:240px;
        height:330px;
    }

    .ads-gallery-overlay01 h3{
        font-size:20px;
    }

    .ads-gallery-arrow01{
        display:none;
    }

    .ads-gallery-popup-box01{

        flex-direction:column;

        width:92%;

        max-height:90vh;

        overflow-y:auto;

    }

    .ads-popup-image01{

        width:100%;

    }

    .ads-popup-image01 img{

        width:100%;

        height:420px;

    }

    .ads-popup-content01{

        width:100%;

        padding:35px;

    }

    .ads-popup-content01 h2{

        font-size:32px;

    }

}


/*==============================
        Mobile
==============================*/

@media (max-width:768px){

    .ads-gallery01{

        padding:70px 0;

    }

    .ads-gallery-heading01{

        margin-bottom:35px;

    }

    .ads-gallery-heading01 span{

        font-size:12px;

        letter-spacing:2px;

    }

    .ads-gallery-heading01 h2,
    .ads-gallery-heading01 h2 span{

        font-size:30px;

        line-height:1.3;

    }

    .ads-gallery-heading01 p{

        font-size:15px;

        line-height:1.8;

        padding:0 10px;

    }

    .ads-gallery-track01{

        gap:16px;

    }

    .ads-gallery-card01{

        min-width:220px;

        height:300px;

        border-radius:14px;

    }

    .ads-gallery-overlay01{

        padding:18px;

    }

    .ads-gallery-overlay01 h3{

        font-size:18px;

    }

    .ads-gallery-dots01{

        margin-top:25px;

    }

    .ads-gallery-dot01{

        width:10px;

        height:10px;

    }

    /* Popup */

    .ads-popup-image01 img{

        height:300px;

    }

    .ads-popup-content01{

        padding:25px;

    }

    .ads-popup-content01 span{

        font-size:12px;

    }

    .ads-popup-content01 h2{

        font-size:26px;

        margin:12px 0;

    }

    .ads-popup-content01 p{

        font-size:15px;

        line-height:1.8;

    }

    .ads-gallery-close01{

        right:18px;

        top:10px;

        font-size:34px;

    }

    .ads-popup-prev01,
    .ads-popup-next01{

        width:45px;

        height:45px;

        font-size:20px;

    }

}


/*==============================
        Small Mobile
==============================*/

@media (max-width:480px){

    .ads-gallery01{

        padding:60px 0;

    }

    .ads-gallery-heading01 h2,
    .ads-gallery-heading01 h2 span{

        font-size:26px;

    }

    .ads-gallery-heading01 p{

        font-size:14px;

    }

    .ads-gallery-track01{

        gap:14px;

    }

    .ads-gallery-card01{

        min-width:190px;

        height:260px;

    }

    .ads-gallery-overlay01 h3{

        font-size:16px;

    }

    .ads-popup-image01 img{

        height:240px;

    }

    .ads-popup-content01{

        padding:20px;

    }

    .ads-popup-content01 h2{

        font-size:22px;

    }

    .ads-popup-content01 p{

        font-size:14px;

    }

    .ads-popup-prev01,
    .ads-popup-next01{

        width:40px;

        height:40px;

        font-size:18px;

    }

}
/*==========================================================
        PART 5 - PREMIUM GALLERY ANIMATIONS
==========================================================*/

/* Smooth Scroll */

html{
    scroll-behavior:smooth;
}

/*====================================
        Heading Animation
====================================*/

.ads-gallery-heading01{

    animation:adsGalleryFadeUp 1s ease;

}

.ads-gallery-heading01 span{

    animation:adsGalleryFadeUp .8s ease;

}

.ads-gallery-heading01 h2{

    animation:adsGalleryFadeUp 1.1s ease;

}

.ads-gallery-heading01 p{

    animation:adsGalleryFadeUp 1.4s ease;

}

@keyframes adsGalleryFadeUp{

    from{

        opacity:0;
        transform:translateY(50px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*====================================
      Card Animation
====================================*/

.ads-gallery-card01{

    animation:adsCardShow .8s ease both;
    transition:.45s;

}

.ads-gallery-card01:nth-child(1){

    animation-delay:.1s;

}

.ads-gallery-card01:nth-child(2){

    animation-delay:.2s;

}

.ads-gallery-card01:nth-child(3){

    animation-delay:.3s;

}

.ads-gallery-card01:nth-child(4){

    animation-delay:.4s;

}

.ads-gallery-card01:nth-child(5){

    animation-delay:.5s;

}

@keyframes adsCardShow{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*====================================
        Premium Hover
====================================*/

.ads-gallery-card01:hover{

    transform:translateY(-15px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.18);

}

/*====================================
        Image Zoom
====================================*/

.ads-gallery-card01 img{

    transition:transform .8s ease;

}

.ads-gallery-card01:hover img{

    transform:scale(1.1);

}

/*====================================
      Overlay Animation
====================================*/

.ads-gallery-overlay01{

    transition:.45s;

}

.ads-gallery-card01:hover .ads-gallery-overlay01{

    background:linear-gradient(
    to top,
    rgba(43,24,68,.96),
    rgba(43,24,68,.6),
    transparent);

}

/*====================================
      Golden Border
====================================*/

.ads-gallery-card01::before{

    content:"";

    position:absolute;

    inset:0;

    border:3px solid transparent;

    border-radius:18px;

    transition:.35s;

    pointer-events:none;

}

.ads-gallery-card01:hover::before{

    border-color:#d4af37;

}

/*====================================
      Shining Effect
====================================*/

.ads-gallery-card01::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-20deg);

}

.ads-gallery-card01:hover::after{

    animation:adsShine .8s;

}

@keyframes adsShine{

    to{

        left:150%;

    }

}

/*====================================
        Overlay Text
====================================*/

.ads-gallery-overlay01 h3{

    transition:.35s;

}

.ads-gallery-card01:hover h3{

    transform:translateY(-5px);

    color:#ffd977;

}

/*====================================
        Arrow Hover
====================================*/

.ads-gallery-arrow01{

    transition:.35s;

}

.ads-gallery-arrow01:hover{

    transform:translateY(-50%) scale(1.12);

}

/*====================================
        Dot Animation
====================================*/

.ads-gallery-dot01{

    transition:.35s;

}

.ads-gallery-dot01.active{

    transform:scale(1.5);

    background:#d4af37;

}

/*====================================
        Popup Animation
====================================*/

.ads-gallery-popup01{

    animation:popupFade .35s ease;

}

@keyframes popupFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.ads-gallery-popup-box01{

    animation:popupScale .45s ease;

}

@keyframes popupScale{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*====================================
        Popup Image Zoom
====================================*/

.ads-popup-image01 img{

    transition:.8s;

}

.ads-popup-image01:hover img{

    transform:scale(1.05);

}

/*====================================
      Button Hover
====================================*/

.ads-popup-prev01,
.ads-popup-next01{

    transition:.3s;

}

.ads-popup-prev01:hover,
.ads-popup-next01:hover{

    background:#d4af37;

    color:#fff;

}

/*====================================
      Close Button
====================================*/

.ads-gallery-close01{

    transition:.35s;

}

.ads-gallery-close01:hover{

    transform:rotate(90deg);

    color:#d4af37;

}

/*====================================
      Floating Animation
====================================*/

.ads-gallery-card01:nth-child(odd){

    animation:adsFloatOdd 5s ease-in-out infinite;

}

.ads-gallery-card01:nth-child(even){

    animation:adsFloatEven 6s ease-in-out infinite;

}

@keyframes adsFloatOdd{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes adsFloatEven{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(6px);

    }

    100%{

        transform:translateY(0);

    }

}

/*====================================
      Cursor
====================================*/

.ads-gallery-card01{

    cursor:pointer;

}

/*====================================
      Image Loading Effect
====================================*/

.ads-gallery-card01 img{

    filter:brightness(.95);

}

.ads-gallery-card01:hover img{

    filter:brightness(1);

}