/*==================================================
    DDS GALLERY.CSS
    PREMIUM CINEMATIC GALLERY
    CENTERED FILTER SYSTEM
    SMOOTH RESPONSIVE ANIMATION
==================================================*/


/*==================================================
    ROOT
==================================================*/

:root{

    --dds-gold:#d4af37;
    --dds-gold-light:#f5d76e;
    --dds-gold-dark:#9d7b16;

    --dds-black:#070707;
    --dds-dark:#0d0d0d;
    --dds-dark2:#151515;
    --dds-dark3:#1c1c1c;

    --dds-white:#ffffff;
    --dds-muted:#a8a8a8;

}


/*==================================================
    RESET
==================================================*/

*{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    padding:0;

    overflow-x:hidden;

    background:var(--dds-black);

    color:var(--dds-white);

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

}

button{

    font-family:inherit;

}

/*==================================================
    GALLERY HERO
    PREMIUM VIDEO BACKGROUND
==================================================*/

/*==================================================
    DDS GALLERY HERO
    PREMIUM CINEMATIC VIDEO
==================================================*/

#dds-gallery-hero{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    min-height:100vh;

    overflow:hidden;

    background:#000;

    isolation:isolate;

}

/* VIDEO */

.dds-gallery-video{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:-3;

    transform:scale(1.08);

    filter:brightness(.95) contrast(1.08) saturate(1.08);

    animation:ddsHeroVideo 25s ease-in-out infinite alternate;

}

/* VIDEO ZOOM */

@keyframes ddsHeroVideo{

    0%{

        transform:scale(1.08);

    }

    50%{

        transform:scale(1.13);

    }

    100%{

        transform:scale(1.18);

    }

}

/* DARK OVERLAY */

.dds-gallery-overlay{

    position:absolute;

    inset:0;

    z-index:-2;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.35) 100%
    );

}

/* GOLD GLOW */

#dds-gallery-hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-180px;

    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,175,55,.18),
        transparent 72%
    );

    filter:blur(35px);

    z-index:-1;

}

/* BOTTOM FADE */

#dds-gallery-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:220px;

    background:
    linear-gradient(
        transparent,
        #070707
    );

    z-index:-1;

}

/* HERO CONTENT */

.dds-gallery-hero-content{

    position:relative;

    z-index:10;

    max-width:760px;

    padding:140px 0;

    animation:heroContent 1.3s ease;

}

.dds-gallery-hero-content span{

    display:inline-block;

    color:var(--dds-gold-light);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:20px;

}

.dds-gallery-hero-content h1{

    margin:0 0 25px;

    font-size:clamp(48px,6vw,86px);

    line-height:1.08;

    color:#fff;

    font-weight:700;

}

.dds-gallery-hero-content h1 strong{

    color:var(--dds-gold);

}

.dds-gallery-hero-content p{

    max-width:650px;

    color:#ddd;

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;

}

/* CONTENT ANIMATION */

@keyframes heroContent{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* TABLET */

@media(max-width:991px){

    #dds-gallery-hero{

        min-height:800px;

    }

    .dds-gallery-hero-content{

        padding:130px 30px 90px;

    }

}

/* MOBILE */

@media(max-width:767px){

    #dds-gallery-hero{

        min-height:700px;

    }

    .dds-gallery-video{

        transform:scale(1.25);

    }

    .dds-gallery-hero-content{

        text-align:center;

        padding:120px 20px 80px;

        margin:auto;

    }

    .dds-gallery-hero-content h1{

        font-size:44px;

    }

    .dds-gallery-hero-content p{

        font-size:15px;

    }

}

/* SMALL MOBILE */

@media(max-width:575px){

    #dds-gallery-hero{

        min-height:620px;

    }

    .dds-gallery-hero-content h1{

        font-size:36px;

    }

}
/*==================================================
    PRIMARY BUTTON
==================================================*/

.primary-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:52px;

    padding:14px 30px;

    overflow:hidden;

    border:1px solid var(--dds-gold);

    border-radius:5px;

    background:var(--dds-gold);

    color:#080808 !important;

    font-size:14px;

    font-weight:700;

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    background .35s ease,

    color .35s ease;

}

.primary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    transform:skewX(-25deg);

    transition:left .7s ease;

}

.primary-btn:hover::before{

    left:130%;

}

.primary-btn:hover{

    transform:translateY(-4px);

    background:transparent;

    color:var(--dds-gold-light) !important;

    box-shadow:

    0 12px 35px rgba(212,175,55,.22);

}


/*==================================================
    SECTION
==================================================*/

.section-gap{

    padding:105px 0;

}


/*==================================================
    SECTION TITLE
==================================================*/

.dds-section-title span{

    display:block;

    margin-bottom:15px;

    color:var(--dds-gold);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}

.dds-section-title h2{

    margin:0 0 20px;

    color:#fff;

    font-size:clamp(30px,4vw,50px);

    line-height:1.2;

}

.dds-section-title p{

    max-width:700px;

    margin:0 auto;

    color:var(--dds-muted);

    font-size:16px;

    line-height:1.8;

}


/*==================================================
    GALLERY SECTION
==================================================*/

#dds-gallery-section{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        180deg,
        #080808,
        #111111
    );

}

#dds-gallery-section::before{

    content:"";

    position:absolute;

    top:15%;

    left:-250px;

    width:500px;

    height:500px;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.08),
        transparent 70%
    );

    pointer-events:none;

}


/*==================================================
    FILTER
==================================================*/

.dds-gallery-filter{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:60px;

}


/* FILTER BUTTON */

.dds-gallery-filter button{

    position:relative;

    padding:13px 24px;

    overflow:hidden;

    border:1px solid rgba(212,175,55,.3);

    border-radius:40px;

    outline:none;

    background:rgba(255,255,255,.035);

    color:#aaa;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:

    color .35s ease,

    background .35s ease,

    border-color .35s ease,

    transform .35s ease,

    box-shadow .35s ease;

}

.dds-gallery-filter button:hover{

    color:#fff;

    border-color:var(--dds-gold);

    transform:translateY(-3px);

}

.dds-gallery-filter button.active{

    background:var(--dds-gold);

    border-color:var(--dds-gold);

    color:#080808;

    box-shadow:

    0 8px 25px rgba(212,175,55,.25);

}
/*==================================================
    BEFORE & AFTER SHOWCASE
    PART 1
    PREMIUM LAYOUT
==================================================*/

#dds-before-after{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #070707 0%,
        #101010 100%
    );

}


/*====================================
BACKGROUND GLOW
====================================*/

#dds-before-after::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-300px;

    left:-220px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,175,55,.12),
        transparent 70%
    );

}

#dds-before-after::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-250px;

    bottom:-250px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,175,55,.08),
        transparent 70%
    );

}


/*====================================
TITLE
====================================*/

#dds-before-after .dds-section-title{

    margin-bottom:90px;

}

#dds-before-after .dds-section-title span{

    color:var(--dds-gold);

    font-size:14px;

    letter-spacing:4px;

    font-weight:700;

}

#dds-before-after .dds-section-title h2{

    color:#fff;

    font-size:48px;

    margin:20px 0;

    line-height:1.2;

}

#dds-before-after .dds-section-title p{

    max-width:750px;

    margin:auto;

    color:#bdbdbd;

    font-size:17px;

    line-height:1.9;

}


/*====================================
CARD
====================================*/

.dds-before-card{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:70px 0 35px;

    overflow:hidden;

    border-radius:24px;

    background:#111;

    border:1px solid rgba(212,175,55,.15);

    box-shadow:

    0 25px 60px rgba(0,0,0,.45);

}


/*====================================
IMAGE BOX
====================================*/

.dds-before-img,
.dds-after-img{

    position:relative;

    width:50%;

    overflow:hidden;

    background:#000;

}

.dds-before-img img,
.dds-after-img img{

    width:100%;

    height:520px;

    display:block;

    object-fit:cover;

    transition:1s;

}


/*====================================
LABEL
====================================*/

.dds-label{

    position:absolute;

    left:20px;

    top:20px;

    z-index:5;

    padding:10px 22px;

    background:#d62d2d;

    color:#fff;

    font-size:13px;

    font-weight:700;

    border-radius:50px;

    letter-spacing:2px;

}

.dds-label.after{

    background:var(--dds-gold);

    color:#111;

}


/*====================================
ARROW
====================================*/

.dds-arrow{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:85px;

    height:85px;

    border-radius:50%;

    background:var(--dds-gold);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:10;

    color:#111;

    font-size:32px;

    box-shadow:

    0 0 35px rgba(212,175,55,.45);

}


/*====================================
CONTENT
====================================*/

.dds-before-content{

    margin-bottom:70px;

    text-align:center;

}

.dds-before-content h3{

    color:#fff;

    font-size:34px;

    margin-bottom:18px;

}

.dds-before-content p{

    color:#b5b5b5;

    max-width:820px;

    margin:auto;

    line-height:1.9;

    font-size:16px;

}


/*====================================
HOVER
====================================*/

.dds-before-card:hover{

    border-color:rgba(212,175,55,.7);

    box-shadow:

    0 35px 70px rgba(212,175,55,.15);

}

.dds-before-card:hover img{

    transform:scale(1.08);

}


/*====================================
IMAGE OVERLAY
====================================*/

.dds-before-img::after,
.dds-after-img::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.55),

    transparent

    );

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

.dds-before-card{

flex-direction:column;

}

.dds-before-img,
.dds-after-img{

width:100%;

}

.dds-arrow{

transform:translate(-50%,-50%) rotate(90deg);

}

.dds-before-img img,
.dds-after-img img{

height:400px;

}

}


@media(max-width:767px){

#dds-before-after{

padding:80px 0;

}

#dds-before-after .dds-section-title h2{

font-size:34px;

}

.dds-before-img img,
.dds-after-img img{

height:280px;

}

.dds-arrow{

width:65px;

height:65px;

font-size:22px;

}

.dds-before-content h3{

font-size:25px;

}

.dds-before-content p{

font-size:15px;

line-height:1.8;

}

}
/*==================================================
    BEFORE & AFTER SHOWCASE
    PART 2
    CINEMATIC ANIMATIONS
==================================================*/


/*==========================================
GOLD BORDER GLOW
==========================================*/

.dds-before-card{

    transition:
    .6s ease;

}

.dds-before-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:25px;

    padding:2px;

    background:
    linear-gradient(
        135deg,
        transparent,
        rgba(212,175,55,.9),
        transparent
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.5s;

}

.dds-before-card:hover::before{

    opacity:1;

}


/*==========================================
SHINE EFFECT
==========================================*/

.dds-before-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.18) 50%,
        transparent 80%
    );

    transform:translateX(-150%);

}

.dds-before-card:hover::after{

    animation:ddsShine 1.2s linear;

}

@keyframes ddsShine{

100%{

transform:translateX(180%);

}

}


/*==========================================
IMAGE HOVER
==========================================*/

.dds-before-card:hover img{

    transform:

    scale(1.12)

    rotate(1deg);

    filter:

    brightness(.75)

    contrast(1.08);

}


/*==========================================
LABEL GLOW
==========================================*/

.dds-label{

    box-shadow:

    0 0 20px rgba(255,70,70,.45);

}

.dds-label.after{

    box-shadow:

    0 0 25px rgba(212,175,55,.55);

}


/*==========================================
FLOATING ARROW
==========================================*/

.dds-arrow{

animation:

arrowFloat 2.2s infinite ease-in-out,

arrowPulse 2s infinite;

}

@keyframes arrowFloat{

0%,100%{

transform:
translate(-50%,-50%);

}

50%{

transform:
translate(-50%,-60%);

}

}

@keyframes arrowPulse{

0%{

box-shadow:

0 0 0 rgba(212,175,55,.3);

}

50%{

box-shadow:

0 0 40px rgba(212,175,55,.8);

}

100%{

box-shadow:

0 0 0 rgba(212,175,55,.3);

}

}


/*==========================================
TEXT ANIMATION
==========================================*/

.dds-before-content h3{

position:relative;

display:inline-block;

}

.dds-before-content h3::after{

content:"";

position:absolute;

left:0;

bottom:-12px;

width:0;

height:3px;

background:var(--dds-gold);

transition:.6s;

}

.dds-before-card:hover + .dds-before-content h3::after{

width:100%;

}


/*==========================================
IMAGE DARK OVERLAY
==========================================*/

.dds-before-img::before,
.dds-after-img::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.45)

);

z-index:1;

}


/*==========================================
SCROLL REVEAL
==========================================*/

.dds-before-card{

opacity:0;

transform:

translateY(80px);

animation:

ddsReveal .9s forwards;

}

.dds-before-card:nth-of-type(1){

animation-delay:.2s;

}

.dds-before-card:nth-of-type(2){

animation-delay:.4s;

}

.dds-before-card:nth-of-type(3){

animation-delay:.6s;

}

.dds-before-card:nth-of-type(4){

animation-delay:.8s;

}

@keyframes ddsReveal{

to{

opacity:1;

transform:none;

}

}


/*==========================================
CONTENT FADE
==========================================*/

.dds-before-content{

animation:

fadeText 1s forwards;

opacity:0;

}

.dds-before-content:nth-of-type(2){

animation-delay:.5s;

}

.dds-before-content:nth-of-type(4){

animation-delay:.7s;

}

.dds-before-content:nth-of-type(6){

animation-delay:.9s;

}

.dds-before-content:nth-of-type(8){

animation-delay:1.1s;

}

@keyframes fadeText{

to{

opacity:1;

transform:none;

}

from{

opacity:0;

transform:translateY(40px);

}

}


/*==========================================
GOLD PARTICLES
==========================================*/

#dds-before-after{

position:relative;

}

#dds-before-after span.spark{

position:absolute;

width:6px;

height:6px;

border-radius:50%;

background:var(--dds-gold);

animation:particle 10s linear infinite;

opacity:.4;

}

@keyframes particle{

0%{

transform:

translateY(120px)

scale(.3);

opacity:0;

}

50%{

opacity:1;

}

100%{

transform:

translateY(-900px)

scale(1);

opacity:0;

}

}


/*==========================================
GLASS EFFECT
==========================================*/

.dds-before-content{

padding:35px;

background:

rgba(255,255,255,.03);

backdrop-filter:blur(10px);

border:

1px solid rgba(255,255,255,.05);

border-radius:18px;

}


/*==========================================
HOVER CONTENT
==========================================*/

.dds-before-card:hover + .dds-before-content{

transform:

translateY(-8px);

transition:.5s;

}


/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:991px){

.dds-arrow{

animation:none;

}

.dds-before-content{

padding:25px;

}

}

@media(max-width:767px){

.dds-before-card:hover img{

transform:scale(1.05);

}

.dds-before-content{

padding:18px;

}

.dds-before-content h3{

font-size:24px;

}

}

@media(max-width:575px){

.dds-before-card{

border-radius:18px;

}

.dds-arrow{

width:58px;

height:58px;

font-size:20px;

}

.dds-label{

font-size:11px;

padding:8px 15px;

}

}

/*==================================================
    IMPORTANT GRID FIX
==================================================*/

.dds-gallery-grid{

    position:relative;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:stretch;

    width:100%;

}


/*==================================================
    GALLERY ITEM
==================================================*/

/*
    IMPORTANT:

    display:none removes the hidden card
    from the Bootstrap grid completely.

    Therefore:

    1 card  = center
    2 cards = center
    3 cards = center
    4 cards = centered rows

*/

.gallery-item{

    display:block;

    animation:

    galleryItemShow .65s cubic-bezier(
        .22,
        .61,
        .36,
        1
    ) both;

}


/* HIDDEN */

.gallery-item.gallery-hide{

    display:none;

}


/* SHOW */

.gallery-item.gallery-show{

    display:block;

    animation:

    galleryItemShow .65s cubic-bezier(
        .22,
        .61,
        .36,
        1
    ) both;

}


/* APPEAR ANIMATION */

@keyframes galleryItemShow{

    from{

        opacity:0;

        transform:

        translateY(35px)
        scale(.92);

    }

    to{

        opacity:1;

        transform:

        translateY(0)
        scale(1);

    }

}


/*==================================================
    GALLERY CARD
==================================================*/

.dds-gallery-card{

    position:relative;

    height:420px;

    overflow:hidden;

    border:1px solid rgba(212,175,55,.18);

    border-radius:18px;

    background:#111;

    box-shadow:

    0 15px 40px rgba(0,0,0,.5);

    transition:

    transform .5s cubic-bezier(
        .22,
        .61,
        .36,
        1
    ),

    border-color .5s ease,

    box-shadow .5s ease;

}

.dds-gallery-card:hover{

    transform:translateY(-12px);

    border-color:rgba(212,175,55,.7);

    box-shadow:

    0 25px 60px rgba(0,0,0,.75),

    0 0 30px rgba(212,175,55,.13);

}


/*==================================================
    IMAGE
==================================================*/

.dds-gallery-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform 1s cubic-bezier(
        .22,
        .61,
        .36,
        1
    ),

    filter .6s ease;

}

.dds-gallery-card:hover img{

    transform:scale(1.12);

    filter:brightness(.58);

}


/*==================================================
    CARD OVERLAY
==================================================*/

.dds-gallery-card::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:

    linear-gradient(
        to top,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.8) 32%,
        rgba(0,0,0,.2) 72%,
        transparent 100%
    );

}


/*==================================================
    CARD CONTENT
==================================================*/

.dds-gallery-card-content{

    position:absolute;

    right:25px;

    bottom:25px;

    left:25px;

    z-index:2;

}

.dds-gallery-card-content span{

    display:inline-block;

    margin-bottom:8px;

    color:var(--dds-gold-light);

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

}

.dds-gallery-card-content h3{

    margin:0 0 15px;

    color:#fff;

    font-size:23px;

    line-height:1.3;

    font-weight:600;

}

.dds-gallery-card-content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#fff;

    font-size:14px;

    font-weight:600;

    transition:

    color .3s ease,

    gap .3s ease;

}

.dds-gallery-card-content a:hover{

    gap:15px;

    color:var(--dds-gold-light);

}


/*==================================================
    CTA
==================================================*/

#dds-gallery-cta{

    position:relative;

    padding:95px 0;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        #171717,
        #080808
    );

    border-top:1px solid rgba(212,175,55,.15);

    border-bottom:1px solid rgba(212,175,55,.15);

}

#dds-gallery-cta::before{

    content:"";

    position:absolute;

    right:-180px;

    top:-180px;

    width:450px;

    height:450px;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.1),
        transparent 70%
    );

}

#dds-gallery-cta h2{

    margin:0 0 15px;

    color:#fff;

    font-size:clamp(30px,4vw,50px);

}

#dds-gallery-cta p{

    margin:0;

    color:#aaa;

    font-size:17px;

}


/*==================================================
    FOOTER
==================================================*/

.footer-area{

    background:#050505;

}

.single-footer-widget h5{

    margin-bottom:20px;

    color:var(--dds-gold);

    font-size:20px;

}

.single-footer-widget p{

    color:#999;

    line-height:1.8;

}

.single-footer-widget p i{

    width:25px;

    color:var(--dds-gold);

}

.footer-nav{

    padding:0;

    margin:0;

    list-style:none;

}

.footer-nav li{

    margin-bottom:10px;

    color:#999;

    transition:color .3s ease;

}

.footer-nav li:hover{

    color:var(--dds-gold);

}

.footer-area hr{

    margin:40px 0 25px;

    border-color:rgba(255,255,255,.1);

}

.footer-area .text-center p{

    margin:0;

    color:#777;

}


/*==================================================
    FLOATING BUTTONS
==================================================*/

.dds-whatsapp-float,
.dds-call-float{

    position:fixed;

    right:25px;

    z-index:999;

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    border-radius:50%;

    color:#fff;

    font-size:23px;

    transition:

    transform .3s ease,

    box-shadow .3s ease;

}

.dds-whatsapp-float{

    bottom:95px;

    background:#25d366;

}

.dds-call-float{

    bottom:25px;

    background:var(--dds-gold);

    color:#080808;

}

.dds-whatsapp-float:hover,
.dds-call-float:hover{

    transform:scale(1.12);

    box-shadow:

    0 8px 25px rgba(0,0,0,.4);

}


/*==================================================
    TABLET
==================================================*/

@media(max-width:991px){

    #dds-gallery-hero{

        min-height:580px;

    }

    .dds-gallery-hero-content{

        padding-top:100px;

    }

    .dds-gallery-card{

        height:390px;

    }

    #dds-gallery-cta{

        text-align:center;

    }

    #dds-gallery-cta .primary-btn{

        margin-top:25px;

    }

}


/*==================================================
    MOBILE
==================================================*/

@media(max-width:767px){

    .section-gap{

        padding:75px 0;

    }

    #dds-gallery-hero{

        min-height:570px;

        background-position:center;

    }

    .dds-gallery-hero-content{

        padding:100px 15px 50px;

        text-align:center;

    }

    .dds-gallery-hero-content > span{

        justify-content:center;

        font-size:10px;

        letter-spacing:1.5px;

    }

    .dds-gallery-hero-content h1{

        font-size:44px;

    }

    .dds-gallery-hero-content p{

        font-size:15px;

        line-height:1.7;

    }

    .dds-gallery-filter{

        gap:9px;

        margin-bottom:45px;

        padding:0 10px;

    }

    .dds-gallery-filter button{

        padding:10px 15px;

        font-size:11px;

    }

    .dds-gallery-card{

        height:380px;

        border-radius:15px;

    }

    .dds-gallery-card-content h3{

        font-size:20px;

    }

}


/*==================================================
    SMALL MOBILE
==================================================*/

@media(max-width:575px){

    .section-gap{

        padding:65px 0;

    }

    #dds-gallery-hero{

        min-height:540px;

    }

    .dds-gallery-hero-content{

        padding-top:85px;

    }

    .dds-gallery-hero-content h1{

        font-size:38px;

    }

    .dds-gallery-hero-content p{

        font-size:14px;

    }

    .dds-gallery-filter{

        padding:0;

    }

    .dds-gallery-filter button{

        padding:9px 12px;

        font-size:10px;

    }

    .dds-gallery-card{

        height:350px;

    }

    .dds-gallery-card-content{

        right:20px;

        bottom:20px;

        left:20px;

    }

    .dds-gallery-card-content h3{

        font-size:18px;

    }

    .dds-whatsapp-float,
    .dds-call-float{

        right:15px;

        width:48px;

        height:48px;

        font-size:20px;

    }

    .dds-whatsapp-float{

        bottom:80px;

    }

    .dds-call-float{

        bottom:20px;

    }

}


/*==================================================
    VERY SMALL DEVICES
==================================================*/

@media(max-width:380px){

    .dds-gallery-hero-content h1{

        font-size:34px;

    }

    .dds-gallery-filter button{

        padding:8px 10px;

        font-size:9px;

    }

}


/*==================================================
    REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}