/*=========================================================
GALLERY HERO
=========================================================*/

.gallery-hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:92vh;
    overflow:hidden;
    background:url("../images/gallery-hero.png") center center/cover no-repeat;
}

.gallery-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(90deg,
    rgba(10,10,10,.88) 0%,
    rgba(10,10,10,.72) 34%,
    rgba(10,10,10,.30) 68%,
    rgba(10,10,10,.15) 100%);
}

.gallery-hero .container{
    position:relative;
    z-index:2;
}

.gallery-hero-content{
    width:100%;
    max-width:620px;
    padding:180px 0 150px;
}

.gallery-label{
    display:inline-block;
    margin-bottom:22px;
    color:#C59D42;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.gallery-hero-content h1{
    margin:0 0 28px;
    color:#ffffff;
    font-size:74px;
    line-height:1.05;
    font-weight:700;
    letter-spacing:-2px;
}

.gallery-hero-content p{
    max-width:560px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:20px;
    line-height:1.9;
    font-weight:400;
}

.gallery-scroll{
    display:inline-flex;
    align-items:center;
    gap:18px;
    margin-top:55px;
    color:#ffffff;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    text-decoration:none;
    transition:.35s;
}

.gallery-scroll:hover{
    color:#C59D42;
}

.scroll-circle{
    width:56px;
    height:56px;
    border:2px solid rgba(255,255,255,.25);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
}

.gallery-scroll:hover .scroll-circle{
    border-color:#C59D42;
    background:#C59D42;
    color:#111;
}

.scroll-circle i{
    font-size:20px;
}



/*=========================================================
GALLERY STATS
=========================================================*/

.gallery-stats{
    position:relative;
    margin-top:-70px;
    z-index:20;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#161616;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.stat-box{
    display:flex;
    align-items:center;
    gap:22px;
    padding:38px 35px;
    border-right:1px solid rgba(255,255,255,.08);
    transition:.35s;
}

.stat-box:last-child{
    border-right:none;
}

.stat-box:hover{
    background:#1d1d1d;
}

.stat-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    background:rgba(197,157,66,.12);
    border:1px solid rgba(197,157,66,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.stat-icon i{
    font-size:30px;
    color:#C59D42;
}

.stat-content h2{
    margin:0 0 6px;
    color:#ffffff;
    font-size:40px;
    font-weight:700;
    line-height:1;
}

.stat-content span{
    display:block;
    color:#bbbbbb;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
}



/*=========================================================
LARGE DESKTOP
=========================================================*/

@media(min-width:1600px){

.gallery-hero-content{
    max-width:700px;
}

.gallery-hero-content h1{
    font-size:88px;
}

.gallery-hero-content p{
    font-size:22px;
}

.stat-box{
    padding:45px;
}

}



/*=========================================================
STANDARD DESKTOP
=========================================================*/

@media(max-width:1200px){

.gallery-hero-content h1{
    font-size:60px;
}

.gallery-hero-content p{
    font-size:18px;
}

.stat-box{
    padding:30px 25px;
}

.stat-content h2{
    font-size:34px;
}

}
/*=========================================================
FEATURED COLLECTIONS - DESKTOP
=========================================================*/

.featured-section{
    width:100%;
    padding:70px 0;
    background:#f8f7f3;
    overflow:hidden;
}


/* Header */

.featured-header{

    width:calc(100% - 120px);
    margin:0 auto 35px;

    display:flex;
    justify-content:space-between;
    align-items:center;

}


.featured-header h2{

    margin:0;

    font-size:20px;
    line-height:1.2;

    font-family:"Montserrat Alternates", sans-serif;

    letter-spacing:1.5px;
    font-weight:700;

    color:#1e1e1e;

}



.featured-header a{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    font-size:13px;
    font-weight:600;

    letter-spacing:.5px;

    color:#333;

}


.featured-header a span{

    font-size:22px;
    line-height:0;

}



/* Slider */

.featured-slider{

    width:100%;
    overflow:hidden;

}



.featured-track{

    display:flex;

    gap:18px;

    width:max-content;

    animation:collectionScroll 40s linear infinite;

}



.featured-slider:hover .featured-track{

    animation-play-state:paused;

}



/* Card */

.collection-card{

    position:relative;

    width:220px;
    height:160px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:4px;

    cursor:pointer;

}



.collection-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s ease;

}



.collection-card:hover img{

    transform:scale(1.08);

}



/* Dark Overlay */

.collection-card .overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,0.05) 65%
    );

}



/* Content */

.card-content{

    position:absolute;

    left:18px;
    bottom:16px;

    color:#fff;

    z-index:2;

}



.card-content h3{

    margin:0 0 7px;

    font-family:Georgia, serif;

    font-size:18px;

    font-weight:600;

    color:#fff;

}



.card-content p{

    margin:0;

    font-size:12px;

    color:#eee;

    font-family:Arial,sans-serif;

}



/* Infinite Scroll */

@keyframes collectionScroll{

    0%{
        transform:translateX(0);
    }

    100%{

        transform:translateX(-50%);

    }

}



/* Large Desktop */

@media(min-width:1440px){

    .featured-header{

        width:calc(100% - 160px);

    }


    .collection-card{

        width:250px;
        height:180px;

    }


    .featured-track{

        gap:22px;

    }

}

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

.wild-gallery-section{
    width:100%;
    padding:100px 0;
    background:
    url("../images/paper-texture.webp") repeat,
    #f8f5ef;
}


/*=========================================================
HEADER
=========================================================*/

.gallery-header{
    width:90%;
    max-width:1200px;
    margin:0 auto 50px;
    text-align:center;
}


.gallery-header h2{
    font-size:42px;
    font-weight:600;
    letter-spacing:2px;
    color:#1c2b23;
    margin-bottom:35px;
    font-family:'Montserrat Alternates', sans-serif;
}


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

.gallery-filter{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
    flex-wrap:wrap;
}


.gallery-filter a{
    position:relative;
    text-decoration:none;
    color:#555;
    font-size:14px;
    letter-spacing:1.5px;
    font-weight:500;
    transition:.3s ease;
}


.gallery-filter a:hover,
.gallery-filter a.active{
    color:#b97548;
}


.gallery-filter a.active:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:100%;
    height:2px;
    background:#b97548;
}



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

.wild-gallery-grid{

    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;

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

    grid-auto-rows:260px;

    gap:20px;

}


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

.gallery-item{

    position:relative;
    overflow:hidden;
    border-radius:4px;
}


.gallery-item img{

    width:100%;
    height:100%;
    object-fit:cover;

    display:block;

    transition:
    transform .6s ease;

}



.gallery-item:hover img{

    transform:scale(1.08);

}



/*=========================================================
GRID SPECIAL SIZE
=========================================================*/


.gallery-item.large{

    grid-column:span 2;
    grid-row:span 2;

}



.gallery-item.wide{

    grid-column:span 2;

}



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


.gallery-item:after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.35),
        transparent
    );

    opacity:0;

    transition:.4s ease;

}



.gallery-item:hover:after{

    opacity:1;

}



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


.gallery-button{

    text-align:center;

    margin-top:55px;

}



.load-more-btn{

    display:inline-block;

    padding:15px 40px;

    border:1px solid #b97548;

    color:#b97548;

    text-decoration:none;

    font-size:14px;

    letter-spacing:2px;

    font-weight:500;

    transition:.3s ease;

}



.load-more-btn:hover{

    background:#b97548;

    color:#fff;

}



/*=========================================================
DESKTOP LARGE SCREEN
=========================================================*/

@media(min-width:1400px){

    .wild-gallery-grid{

        max-width:1350px;

        grid-auto-rows:300px;

    }

}
/*=========================================
PHOTO STORIES SECTION
=========================================*/


.photo-stories-section{
    width:100%;
    background:#0c0d0d;
    padding:60px 0;
    overflow:hidden;
}



/* HEADER */

.photo-stories-header{

    width:100%;
    padding:0 50px;
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;

}


.photo-stories-header h2{

    color:#ffffff;
    font-size:18px;
    letter-spacing:2px;
    font-weight:600;
    margin:0;

}


.view-all{

    color:#c59b52;
    text-decoration:none;
    font-size:13px;
    letter-spacing:1px;
    font-weight:600;

}


.view-all span{

    font-size:22px;
    vertical-align:middle;
    margin-left:8px;

}



/* SLIDER */

.stories-slider{

    width:100%;
    overflow:hidden;

}


.stories-track{

    display:flex;
    gap:10px;
    width:max-content;

    animation:
    storyScroll 25s linear infinite;

}


.stories-slider:hover .stories-track{

    animation-play-state:paused;

}



/* CARD */


.story-card{

    position:relative;
    width:240px;
    height:145px;

    border:1px solid rgba(255,255,255,0.25);

    overflow:hidden;

    flex-shrink:0;

    border-radius:3px;

}



.story-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s ease;

}



.story-card:hover img{

    transform:scale(1.08);

}



/* DARK OVERLAY */


.story-card:after{

    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.85),
        transparent 60%
    );

}



/* CONTENT */


.story-overlay{

    position:absolute;
    bottom:12px;
    left:15px;

    z-index:2;

}



.story-overlay h3{

    color:#fff;

    font-size:15px;
    font-family:
    "Montserrat Alternates",
    sans-serif;

    font-weight:500;

    margin:0 0 8px;

}



.story-overlay span{

    color:#ddd;

    font-size:11px;

    letter-spacing:1px;

}



/* AUTO SCROLL ANIMATION */


@keyframes storyScroll{


    from{

        transform:translateX(0);

    }


    to{

        transform:translateX(-50%);

    }


}
/*=========================================
WILDLIFE CATEGORY SECTION
=========================================*/

.wild-category-section{
    width:100%;
    background:#0d0d0c;
    padding:70px 0;
}


.wild-category-container{
    width:90%;
    max-width:1200px;
    margin:auto;
}


.wild-category-container h2{
    font-family:"Montserrat", sans-serif;
    font-size:18px;
    font-weight:600;
    letter-spacing:1px;
    color:#e6e1d5;
    margin-bottom:25px;
}


/* GRID */

.wild-category-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border:1px solid rgba(183,135,47,0.45);
}


/* BOX */

.wild-category-box{

    height:85px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    border-right:1px solid rgba(183,135,47,0.35);

    transition:0.3s ease;
}


.wild-category-box:last-child{
    border-right:none;
}


/* ICON */

.wild-category-box i{

    font-size:25px;
    color:#b88732;
    margin-bottom:10px;

}


/* TITLE */

.wild-category-box h3{

    margin:0;
    font-size:13px;
    font-family:"Montserrat",sans-serif;
    font-weight:600;
    letter-spacing:1px;
    color:#ddd6c5;

}


/* COUNT */

.wild-category-box span{

    margin-top:4px;
    font-size:12px;
    color:#9d9a91;
    font-family:"Montserrat",sans-serif;

}


/* HOVER */

.wild-category-box:hover{

    background:rgba(184,135,50,0.08);

}


.wild-category-box:hover i{

    color:#d3a64a;

}