/*==================================================
 AL FAJR FOUNDATION
 MEDIA GALLERY
 Premium Version
==================================================*/


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

.media-section{

    position:relative;

    overflow:hidden;

    padding:150px 0;

    background:

        linear-gradient(
            180deg,
            #f7f3e9 0%,
            #ffffff 45%,
            #faf7f1 100%
        );

}


/*=========================================
MORNING LIGHT
=========================================*/

.media-light{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    pointer-events:none;

}

.media-light.one{

    width:650px;

    height:650px;

    left:-240px;

    top:-180px;

    background:

        rgba(212,175,55,.12);

}

.media-light.two{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-150px;

    background:

        rgba(6,20,45,.08);

}


/*=========================================
GALLERY GRID
=========================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:30px;

    margin-top:90px;

}


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

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-lg);

    background:#fff;

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

    box-shadow:var(--shadow-md);

    transition:

        .45s;

}

.gallery-card:hover{

    transform:

        translateY(-12px);

    border-color:

        rgba(212,175,55,.42);

    box-shadow:

        0 35px 80px rgba(0,0,0,.12);

}


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

.gallery-image{

    position:relative;

    overflow:hidden;

    height:280px;

}

.gallery-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    object-position:center;

    background:#FAF5EB;

    transition:

        transform .8s ease,

        filter .45s ease;

}

.gallery-card:hover .gallery-image img{

    transform:scale(1.08);

    filter:saturate(115%);

}


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

.gallery-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(6,20,45,.60),

            rgba(6,20,45,.05)

        );

}


/*=========================================
CATEGORY
=========================================*/

.gallery-category{

    position:absolute;

    left:22px;

    top:22px;

    padding:10px 18px;

    border-radius:999px;

    background:

        rgba(255,255,255,.92);

    color:var(--navy);

    font-weight:700;

    font-size:.82rem;

    letter-spacing:.08em;

}


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

.gallery-content{

    padding:30px;

}

.gallery-content h3{

    margin:0;

    font-family:

        "Playfair Display",

        serif;

    font-size:1.55rem;

    color:var(--navy);

    transition:.35s;

}

.gallery-card:hover h3{

    color:var(--gold);

}
/*==================================================
 PART 2
 FOOTER • BUTTON • SHINE • HOVER
==================================================*/


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

.gallery-footer{

    margin-top:28px;

    display:flex;

    justify-content:flex-start;

    align-items:center;

}


/*=========================================
VIEW BUTTON
=========================================*/

.gallery-view{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:var(--navy);

    font-weight:700;

    transition:all .35s ease;

}

.gallery-view i{

    transition:transform .35s ease;

}

.gallery-card:hover .gallery-view{

    color:var(--gold);

}

.gallery-card:hover .gallery-view i{

    transform:translateX(8px);

}


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

.gallery-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:55%;

    height:100%;

    z-index:5;

    pointer-events:none;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.55),

            transparent

        );

    transform:skewX(-22deg);

}

.gallery-card:hover::before{

    animation:galleryShine 1.2s ease;

}


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

.gallery-card:hover .gallery-image{

    box-shadow:

        inset 0 0 80px rgba(0,0,0,.12);

}


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

.gallery-image{

    border-bottom:

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

}


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

.empty-gallery{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:70px 40px;

}

.gallery-empty-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    background:

        linear-gradient(

            135deg,

            var(--gold),

            #e8cb63

        );

    color:#fff;

    font-size:2rem;

    box-shadow:

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

}

.empty-gallery h3{

    margin-bottom:18px;

    color:var(--navy);

    font-family:

        "Playfair Display",

        serif;

}

.empty-gallery p{

    margin:0;

    color:var(--muted);

    line-height:2;

}


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

.gallery-cta{

    margin-top:100px;

    padding:60px;

    border-radius:34px;

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    background:

        linear-gradient(

            135deg,

            var(--navy),

            #102b54

        );

    box-shadow:

        0 28px 75px rgba(6,20,45,.22);

}

.gallery-cta::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-170px;

    right:-180px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.25),

            transparent 70%

        );

    filter:blur(35px);

}


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

.gallery-cta-content{

    position:relative;

    z-index:2;

    max-width:680px;

}

.gallery-cta-content span{

    display:inline-block;

    margin-bottom:14px;

    color:#f2d46d;

    font-weight:700;

    letter-spacing:.25em;

    font-size:.82rem;

}

.gallery-cta-content h3{

    margin:0 0 20px;

    color:#fff;

    font-family:

        "Playfair Display",

        serif;

    font-size:2.5rem;

}

.gallery-cta-content p{

    margin:0;

    color:rgba(255,255,255,.82);

    line-height:2;

}


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

.gallery-cta-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

    position:relative;

    z-index:2;

}

.gallery-cta-buttons a{

    text-decoration:none;

    text-align:center;

}
/*==================================================
 PART 3
 RESPONSIVE • ANIMATIONS • FINAL POLISH
==================================================*/


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

.gallery-card{

    opacity:0;

    transform:translateY(60px);

    animation:galleryFade .85s ease forwards;

}

.gallery-card:nth-child(1){animation-delay:.10s;}
.gallery-card:nth-child(2){animation-delay:.20s;}
.gallery-card:nth-child(3){animation-delay:.30s;}
.gallery-card:nth-child(4){animation-delay:.40s;}
.gallery-card:nth-child(5){animation-delay:.50s;}
.gallery-card:nth-child(6){animation-delay:.60s;}
.gallery-card:nth-child(7){animation-delay:.70s;}
.gallery-card:nth-child(8){animation-delay:.80s;}
.gallery-card:nth-child(9){animation-delay:.90s;}


/*=========================================
LIGHT ANIMATION
=========================================*/

.media-light.one{

    animation:mediaGlowOne 18s ease-in-out infinite;

}

.media-light.two{

    animation:mediaGlowTwo 24s ease-in-out infinite;

}


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

@keyframes galleryShine{

    from{

        left:-120%;

    }

    to{

        left:170%;

    }

}


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

@keyframes galleryFade{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================
LIGHT GLOW
=========================================*/

@keyframes mediaGlowOne{

    0%,100%{

        transform:translate(0,0) scale(1);

        opacity:.45;

    }

    50%{

        transform:translate(35px,30px) scale(1.08);

        opacity:.85;

    }

}

@keyframes mediaGlowTwo{

    0%,100%{

        transform:translate(0,0);

        opacity:.35;

    }

    50%{

        transform:translate(-30px,-25px);

        opacity:.70;

    }

}


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

@media(max-width:1200px){

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:992px){

.gallery-cta{

flex-direction:column;

text-align:center;

padding:55px 40px;

}

.gallery-cta-buttons{

width:100%;

max-width:340px;

}

}


@media(max-width:768px){

.media-section{

padding:110px 0;

}

.gallery-grid{

grid-template-columns:1fr;

gap:28px;

}

.gallery-image{

height:240px;

}

.gallery-content{

padding:26px;

}

.gallery-content h3{

font-size:1.55rem;

}

.gallery-cta{

padding:45px 30px;

}

.gallery-cta-content h3{

font-size:2rem;

}

}


@media(max-width:520px){

.gallery-card{

border-radius:22px;

}

.gallery-image{

height:210px;

}

.gallery-content{

padding:22px;

}

.gallery-content h3{

font-size:1.35rem;

}

.gallery-content p{

font-size:.95rem;

line-height:1.9;

}

.gallery-cta{

padding:35px 20px;

border-radius:24px;

}

.gallery-cta-content h3{

font-size:1.55rem;

}

.gallery-cta-buttons{

max-width:100%;

}

.gallery-cta-buttons a{

width:100%;

}

}