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

.gallery-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #ffffff,
    #f8fafc);

    padding:150px 0;
}

/* CONTENT */

.gallery-hero-content{

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:5;
}

.gallery-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:#eef7f0;

    color:#0B7A3E;

    font-weight:700;

    margin-bottom:30px;
}

.gallery-hero-content h1{

    font-size:
    clamp(4rem,9vw,8rem);

    line-height:.95;

    color:#14532D;

    margin-bottom:35px;

    font-weight:800;
}

.gallery-hero-content p{

    max-width:750px;

    margin:auto;

    color:#64748b;

    line-height:2;

    font-size:18px;
}

/* FLOATING IMAGES */

.gallery-floating{

    position:absolute;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);

    animation:
    floatPhoto 6s ease-in-out infinite;
}

.gallery-floating img{

    width:100%;
    height:100%;

    object-fit:cover;
}

/* POSITIONS */

.gallery-1{

    width:260px;
    height:180px;

    top:120px;
    left:80px;
}

.gallery-2{

    width:240px;
    height:160px;

    top:180px;
    right:100px;

    animation-delay:1s;
}

.gallery-3{

    width:230px;
    height:170px;

    bottom:120px;
    left:150px;

    animation-delay:2s;
}

.gallery-4{

    width:280px;
    height:190px;

    bottom:100px;
    right:80px;

    animation-delay:3s;
}

@keyframes floatPhoto{

    0%,100%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-18px);
    }
}

/* MOBILE */

@media(max-width:992px){

    .gallery-floating{

        opacity:.25;
    }
}

@media(max-width:768px){

    .gallery-hero{

        min-height:auto;

        padding:120px 0;
    }

    .gallery-hero-content h1{

        font-size:60px;
    }

    .gallery-floating{

        display:none;
    }
}
/* ===================================
   IMPACT THROUGH THE LENS
=================================== */

.lens-section{

    padding:30px 0;

    background:#ffffff;
}

.lens-layout{

    display:grid;

    grid-template-columns:
    1.2fr .8fr;

    gap:80px;

    align-items:center;
}

/* IMAGE */

.lens-image{

    position:relative;

    overflow:hidden;

    border-radius:35px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);
}

.lens-image img{

    width:100%;
    height:650px;

    object-fit:cover;

    transition:.6s;
}

.lens-image:hover img{

    transform:scale(1.08);
}

/* CONTENT */

.lens-content h2{

    font-size:
    clamp(2.5rem,4vw,4.5rem);

    line-height:1.1;

    color:#14532D;

    margin:25px 0;
}

.lens-content p{

    color:#64748b;

    line-height:2;

    margin-bottom:20px;
}

/* KEYWORDS */

.lens-keywords{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:40px;
}

.lens-keywords span{

    padding:12px 22px;

    border-radius:50px;

    background:#eef7f0;

    color:#14532D;

    font-weight:600;

    transition:.3s;
}

.lens-keywords span:hover{

    background:#14532D;

    color:#fff;

    transform:translateY(-3px);
}

/* MOBILE */

@media(max-width:991px){

    .lens-layout{

        grid-template-columns:1fr;
    }

    .lens-image img{

        height:450px;
    }
}
/* ===================================
   EVENT ALBUM CORRIDOR
=================================== */

.album-corridor{

    padding:30px 0;

    background:#f8fafc;
}

.album-header{

    text-align:center;

    max-width:850px;

    margin:auto;

    margin-bottom:80px;
}

.album-header h2{

    font-size:
    clamp(2.5rem,4vw,4rem);

    color:#14532D;

    margin:25px 0;
}

.album-header p{

    color:#64748b;

    line-height:2;
}

/* LIST */

.album-list{

    max-width:1200px;

    margin:auto;
}

.album-item{

    display:grid;

    grid-template-columns:
    1fr 180px 80px;

    align-items:center;

    gap:30px;

    padding:35px 0;

    border-bottom:
    1px solid #e2e8f0;

    transition:.4s;
}

.album-item:hover{

    padding-left:20px;
}

.album-info h3{

    font-size:30px;

    color:#14532D;

    margin-bottom:10px;
}

.album-info span{

    color:#64748b;
}

/* IMAGE */

.album-preview{

    width:180px;
    height:120px;

    border-radius:20px;

    overflow:hidden;

    opacity:.85;

    transition:.4s;
}

.album-preview img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.album-item:hover .album-preview{

    opacity:1;

    transform:scale(1.05);
}

/* ARROW */

.album-arrow{

    font-size:40px;

    color:#14532D;

    transition:.3s;
}

.album-item:hover .album-arrow{

    transform:
    translateX(12px);
}

/* MOBILE */

@media(max-width:768px){

    .album-item{

        grid-template-columns:1fr;

        text-align:center;
    }

    .album-preview{

        margin:auto;
    }
}
/* ===================================
   PHOTO DOCUMENTARY TIMELINE
=================================== */

.timeline-gallery{

    padding:30px 0;

    background:#ffffff;
}

.timeline-header{

    text-align:center;

    max-width:850px;

    margin:auto;

    margin-bottom:90px;
}

.timeline-header h2{

    font-size:
    clamp(2.5rem,4vw,4rem);

    color:#14532D;

    margin:25px 0;
}

.timeline-header p{

    color:#64748b;

    line-height:2;
}

/* TIMELINE */

.timeline-wrapper{

    position:relative;

    max-width:1100px;

    margin:auto;
}

.timeline-wrapper::before{

    content:"";

    position:absolute;

    left:120px;

    top:0;

    width:3px;

    height:100%;

    background:#dbeafe;
}

.timeline-item{

    display:grid;

    grid-template-columns:
    120px 1fr;

    gap:50px;

    margin-bottom:60px;

    position:relative;
}

.timeline-year{

    font-size:22px;

    font-weight:700;

    color:#14532D;

    position:relative;
}

.timeline-year::after{

    content:"";

    position:absolute;

    top:10px;
    right:-18px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#0B7A3E;

    z-index:2;
}

.timeline-content{

    display:grid;

    grid-template-columns:
    260px 1fr;

    gap:30px;

    align-items:center;

    background:#f8fafc;

    padding:25px;

    border-radius:28px;

    transition:.35s;
}

.timeline-content:hover{

    transform:
    translateX(12px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);
}

.timeline-content img{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:20px;
}

.timeline-content h3{

    color:#14532D;

    margin-bottom:12px;

    font-size:24px;
}

.timeline-content p{

    color:#64748b;

    line-height:1.8;
}

/* MOBILE */

@media(max-width:768px){

    .timeline-wrapper::before{

        display:none;
    }

    .timeline-item{

        grid-template-columns:1fr;
    }

    .timeline-content{

        grid-template-columns:1fr;
    }

    .timeline-year::after{

        display:none;
    }
}
/* ===================================
   FEATURED IMPACT STORIES
=================================== */

.featured-stories{

    padding:30px 0;

    background:#f8fafc;
}

.featured-header{

    text-align:center;

    max-width:850px;

    margin:auto;

    margin-bottom:100px;
}

.featured-header h2{

    font-size:
    clamp(2.5rem,4vw,4rem);

    color:#14532D;

    margin:25px 0;
}

.featured-header p{

    color:#64748b;

    line-height:2;
}

/* STORY */

.feature-story{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:120px;
}

.feature-story.reverse{

    direction:rtl;
}

.feature-story.reverse .feature-content{

    direction:ltr;
}

/* IMAGE */

.feature-image{

    overflow:hidden;

    border-radius:35px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.10);
}

.feature-image img{

    width:100%;
    height:500px;

    object-fit:cover;

    transition:.6s;
}

.feature-image:hover img{

    transform:scale(1.08);
}

/* CONTENT */

.feature-content span{

    display:inline-block;

    margin-bottom:15px;

    color:#0B7A3E;

    font-weight:700;

    letter-spacing:1px;
}

.feature-content h3{

    font-size:42px;

    line-height:1.2;

    color:#14532D;

    margin-bottom:20px;
}

.feature-content p{

    color:#64748b;

    line-height:2;

    margin-bottom:25px;
}

/* TAGS */

.feature-tags{

    display:flex;

    gap:12px;

    flex-wrap:wrap;
}

.feature-tags span{

    padding:10px 18px;

    border-radius:50px;

    background:#eef7f0;

    color:#14532D;

    font-size:14px;

    margin:0;
}

/* MOBILE */

@media(max-width:991px){

    .feature-story{

        grid-template-columns:1fr;
    }

    .feature-story.reverse{

        direction:ltr;
    }

    .feature-image img{

        height:350px;
    }

    .feature-content h3{

        font-size:32px;
    }
}
/* ===================================
   INTERACTIVE GALLERY MOSAIC
=================================== */

.gallery-mosaic{

    padding:30px 0;

    background:#ffffff;
}

.mosaic-header{

    text-align:center;

    max-width:850px;

    margin:auto;

    margin-bottom:80px;
}

.mosaic-header h2{

    font-size:
    clamp(2.5rem,4vw,4rem);

    color:#14532D;

    margin:25px 0;
}

.mosaic-header p{

    color:#64748b;

    line-height:2;
}

/* GRID */

.mosaic-grid{

    display:grid;

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

    grid-auto-rows:220px;

    gap:20px;
}

/* ITEMS */

.mosaic-item{

    overflow:hidden;

    border-radius:28px;

    position:relative;

    cursor:pointer;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

.mosaic-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;
}

.mosaic-item:hover img{

    transform:scale(1.1);
}

/* DIFFERENT SIZES */

.large{

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

.small{

    grid-column:span 1;
    grid-row:span 1;
}

.medium{

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

.wide{

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

.tall{

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

/* HOVER OVERLAY */

.mosaic-item::after{

    content:"View";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
    rgba(20,83,45,.55);

    color:#fff;

    font-weight:700;

    font-size:22px;

    opacity:0;

    transition:.4s;
}

.mosaic-item:hover::after{

    opacity:1;
}

/* MOBILE */

@media(max-width:768px){

    .mosaic-grid{

        grid-template-columns:1fr;
    }

    .large,
    .small,
    .medium,
    .wide,
    .tall{

        grid-column:auto;
        grid-row:auto;

        height:300px;
    }
}
/* ===================================
   MOMENTS THAT MATTER
=================================== */

.moments-section{

    position:relative;

    overflow:hidden;

    padding:30px 0;

    background:
    linear-gradient(
    135deg,
    #14532D,
    #0B7A3E);

    color:#fff;
}

/* BIG BACKGROUND WORD */

.impact-bg{

    position:absolute;

    top:50%;

    left:50%;

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

    font-size:18vw;

    font-weight:900;

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

    line-height:1;

    pointer-events:none;

    user-select:none;
}

.moments-content{

    position:relative;

    z-index:2;

    max-width:1000px;

    margin:auto;

    text-align:center;
}

.moments-tag{

    display:inline-block;

    padding:14px 28px;

    border-radius:50px;

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

    margin-bottom:30px;

    font-weight:700;
}

.moments-content h2{

    font-size:
    clamp(3rem,6vw,6rem);

    line-height:1.1;

    margin-bottom:60px;
}

/* MANIFESTO LINES */

.moments-lines{

    display:flex;

    flex-direction:column;

    gap:24px;

    margin-bottom:60px;
}

.moments-lines div{

    font-size:28px;

    font-weight:600;

    opacity:.95;
}

.moments-content p{

    max-width:750px;

    margin:auto;

    line-height:2;

    opacity:.9;

    font-size:18px;
}

/* MOBILE */

@media(max-width:768px){

    .moments-section{

        padding:120px 0;
    }

    .moments-content h2{

        font-size:42px;
    }

    .moments-lines div{

        font-size:20px;
    }
}