/* =========================================================
   ROLAK FOUNDATION
   GALLERY PAGE
   ========================================================= */


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

.gallery-hero{

    position:relative;

    min-height:520px;

    padding: 300px 20px 70px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(20,45,60,.68),
            rgba(20,45,60,.76)
        ),
        url("../images/gallery-hero-content")
        center center / cover no-repeat;
}


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

.gallery-hero-content{

    width:100%;

    max-width:850px;

    margin:0 auto;

    text-align:center;

    color:#fff;
}


.gallery-hero-content > span{

    display:block;

    margin-bottom:15px;

    color:#F4C21A;

    font-family:'Poppins', sans-serif;

    font-size:13px;

    font-weight:600;

    letter-spacing:3px;
}


.gallery-hero-content h1{

    margin:0;

    color:#fff;

    font-family:'Poppins', sans-serif;

    font-size:56px;

    line-height:1.15;

    font-weight:700;
}


.gallery-hero-content h1 strong{

    color:#F4C21A;
}


.gallery-hero-content p{

    max-width:700px;

    margin:22px auto 0;

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

    font-family:'Open Sans', sans-serif;

    font-size:15px;

    line-height:1.8;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.gallery-breadcrumb{

    margin-top:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-family:'Open Sans', sans-serif;

    font-size:13px;
}


.gallery-breadcrumb a{

    color:#fff;

    text-decoration:none;

    transition:.3s ease;
}


.gallery-breadcrumb a:hover{

    color:#F4C21A;
}


.gallery-breadcrumb i{

    color:#F4C21A;

    font-size:9px;
}


.gallery-breadcrumb span{

    color:#F4C21A;

    font-weight:600;
}


/* =========================================================
   ROLAK FOUNDATION - GALLERY PAGE
   ISOLATED GALLERY LAYOUT
   ========================================================= */


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

.gallery-section .container{

    width:100% !important;

    max-width:1200px !important;

    margin:0 auto !important;

    padding-left:20px !important;

    padding-right:20px !important;

    box-sizing:border-box !important;
}


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

.gallery-section .gallery-grid{

    display:grid !important;

    width:100% !important;

    max-width:100% !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    grid-auto-rows:300px !important;

    gap:20px !important;

    align-items:stretch !important;

    justify-items:stretch !important;
}


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

.gallery-section .gallery-item{

    position:relative !important;

    display:block !important;

    width:100% !important;

    height:300px !important;

    min-width:0 !important;

    min-height:0 !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    grid-column:auto !important;

    grid-row:auto !important;

    float:none !important;

    clear:none !important;

    transform:none !important;

    border-radius:12px !important;

    background:#ddd !important;
}


/* =========================================================
   REMOVE OLD LARGE-CARD BEHAVIOUR
   ========================================================= */

.gallery-section .gallery-item.large{

    grid-column:auto !important;

    grid-row:auto !important;

    width:100% !important;

    height:300px !important;
}


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

.gallery-section .gallery-item img{

    position:absolute !important;

    top:0 !important;

    left:0 !important;

    display:block !important;

    width:100% !important;

    height:100% !important;

    max-width:none !important;

    max-height:none !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    object-fit:cover !important;

    box-sizing:border-box !important;

    transform:none !important;
}


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

.gallery-section .gallery-item:hover img{

    transform:scale(1.05) !important;
}


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

.gallery-section .gallery-overlay{

    position:absolute !important;

    top:0 !important;

    right:0 !important;

    bottom:0 !important;

    left:0 !important;

    width:100% !important;

    height:100% !important;

    margin:0 !important;

    padding:25px !important;

    box-sizing:border-box !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:flex-end !important;

    opacity:0;

    background:
        linear-gradient(
            to top,
            rgba(20,45,60,.95),
            rgba(20,45,60,.45) 55%,
            transparent
        ) !important;
}


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

.gallery-section .gallery-item:hover .gallery-overlay{

    opacity:1;
}


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

.gallery-section .gallery-expand{

    position:absolute !important;

    top:20px !important;

    right:20px !important;

    width:42px !important;

    height:42px !important;

    min-width:42px !important;

    min-height:42px !important;

    margin:0 !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    box-sizing:border-box !important;

    border:1px solid rgba(255,255,255,.7) !important;

    border-radius:50% !important;

    background:rgba(0,0,0,.2) !important;

    color:#fff !important;

    cursor:pointer !important;

    z-index:5 !important;
}


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

@media screen and (max-width:992px){

    .gallery-section .gallery-grid{

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-auto-rows:280px !important;

        gap:18px !important;
    }


    .gallery-section .gallery-item,
    .gallery-section .gallery-item.large{

        width:100% !important;

        height:280px !important;

        grid-column:auto !important;
    }

}


@media screen and (max-width:600px){

    .gallery-section .container{

        width:100% !important;

        padding-left:15px !important;

        padding-right:15px !important;
    }


    .gallery-section .gallery-grid{

        width:100% !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-auto-rows:260px !important;

        gap:18px !important;
    }


    .gallery-section .gallery-item,
    .gallery-section .gallery-item.large{

        width:100% !important;

        height:260px !important;

        grid-column:auto !important;

        grid-row:auto !important;
    }


    .gallery-section .gallery-overlay{

        opacity:1 !important;

        padding:20px !important;
    }


    .gallery-section .gallery-expand{

        top:15px !important;

        right:15px !important;
    }

}
/*====================================================
GALLERY TEXT OVERLAY
====================================================*/

.gallery-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:35px 25px 25px;

    background:linear-gradient(
        to top,
        rgba(31,45,61,.92),
        rgba(31,45,61,.55),
        transparent
    );

    color:#fff;

    z-index:2;

    transform:translateY(0);

}


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

.gallery-category{

    display:inline-block;

    font-family:'Poppins',sans-serif;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.2px;

    color:#F4C21A;

    margin-bottom:8px;

}


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

.gallery-overlay h3{

    margin:0 0 6px;

    font-family:'Poppins',sans-serif;

    font-size:22px;

    line-height:1.25;

    font-weight:700;

    color:#fff;

}


/*====================================================
GALLERY DESCRIPTION
====================================================*/

.gallery-overlay p{

    margin:0;

    font-family:'Open Sans',sans-serif;

    font-size:14px;

    line-height:1.5;

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

}


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

.gallery-expand{

    position:absolute;

    top:20px;

    right:20px;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#1F6E8C;

    z-index:4;

    transition:.3s ease;

}


.gallery-expand:hover{

    background:#F4C21A;

    color:#1F2D3D;

    transform:scale(1.08);

}
/*====================================================
GALLERY OVERLAY
====================================================*/

.gallery-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:70px 28px 28px;

    background:linear-gradient(
        to top,
        rgba(31,45,61,.95) 0%,
        rgba(31,45,61,.75) 35%,
        rgba(31,45,61,.25) 75%,
        transparent 100%
    );

    color:#fff;

    z-index:3;

    opacity:0;

    transform:translateY(15px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


/* SHOW TEXT ON HOVER */

.gallery-item:hover .gallery-overlay{

    opacity:1;

    transform:translateY(0);

}


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

.gallery-category{

    display:inline-block;

    margin-bottom:9px;

    padding:6px 12px;

    background:#F4C21A;

    border-radius:30px;

    font-family:'Poppins',sans-serif;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

    line-height:1;

    color:#1F2D3D;

}


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

.gallery-overlay h3{

    margin:0 0 7px;

    padding:0;

    font-family:'Poppins',sans-serif;

    font-size:23px;

    font-weight:700;

    line-height:1.25;

    letter-spacing:-.2px;

    color:#fff;

}


/*====================================================
DESCRIPTION
====================================================*/

.gallery-overlay p{

    margin:0;

    padding:0;

    font-family:'Open Sans',sans-serif;

    font-size:13px;

    font-weight:400;

    line-height:1.5;

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

}


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

.gallery-expand{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#1F6E8C;

    z-index:5;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.gallery-expand:hover{

    background:#F4C21A;

    color:#1F2D3D;

    transform:scale(1.08);

}
/*====================================================
GALLERY HEADING
====================================================*/

.gallery-heading{

    text-align:left;

    max-width:950px;

    margin:0 auto;

}


.gallery-heading > span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 22px;

    margin-bottom:15px;

    background:#FFF8E5;

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    color:#D69E00;

    text-transform:uppercase;

}


.gallery-heading h2{

    margin:0;

    font-family:'Poppins',sans-serif;

    font-size:42px;

    font-weight:600;

    line-height:1.15;

    color:#1F6E8C;

}


.gallery-heading h2 strong{

    color:#1F2D3D;

    font-weight:800;

}


.gallery-heading p{

    max-width:850px;

    margin:15px 0 0;

    font-family:'Open Sans',sans-serif;

    font-size:16px;

    line-height:1.7;

    color:#5F6B73;

}


.gallery-grid{

    margin-top:50px;

}
/*====================================================
GALLERY HEADING
====================================================*/

.gallery-heading{
    text-align:center;
    max-width:900px;
    margin:0 auto;
}

.gallery-heading > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:9px 22px;
    margin-bottom:15px;

    background:#FFF8E5;
    border-radius:50px;

    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;

    color:#D69E00;
    text-transform:uppercase;
}

.gallery-heading h2{
    margin:0;

    font-family:'Poppins',sans-serif;
    font-size:42px;
    font-weight:600;
    line-height:1.2;

    color:#1F6E8C;
}

.gallery-heading h2 strong{
    color:#1F2D3D;
    font-weight:800;
}

.gallery-heading p{
    max-width:800px;
    margin:15px auto 0;

    font-family:'Open Sans',sans-serif;
    font-size:16px;
    line-height:1.7;

    color:#5F6B73;
}
/*====================================================
GALLERY ACTION
====================================================*/

.gallery-action{
    display:flex;
    justify-content:center;
    align-items:center;

    margin-top:60px;
    padding-bottom:30px;

    text-align:center;
}

.gallery-action .mission-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 30px;

    border:2px solid #F4C21A;
    border-radius:50px;

    background:#fff;

    color:#1F6E8C;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:700;

    text-decoration:none;

    transition:all .3s ease;
}

.gallery-action .mission-btn i{
    font-size:14px;

    transition:transform .3s ease;
}

.gallery-action .mission-btn:hover{
    background:#F4C21A;
    color:#1F2D3D;
    transform:translateY(-3px);
}

.gallery-action .mission-btn:hover i{
    transform:translateX(4px);
}/* =========================================================
   PORTRAIT GALLERY
========================================================= */

.gallery-portrait-grid {

    width: 100%;
    max-width: 1200px;

    margin: 45px auto 0;

    padding-left: 12px;
    padding-right: 12px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   PORTRAIT ITEM
========================================================= */

.gallery-portrait-item {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: 16px;

    background: #f2f2f2;

    cursor: pointer;
}


/* IMAGE */

.gallery-portrait-item img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.5s ease;
}


.gallery-portrait-item:hover img {

    transform: scale(1.05);

}


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

.gallery-portrait-overlay {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 55px 20px 20px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.78),
            rgba(0,0,0,0)
        );

    color: #fff;

    opacity: 0;

    transition: opacity 0.35s ease;
}


.gallery-portrait-item:hover
.gallery-portrait-overlay {

    opacity: 1;

}


/* CATEGORY */

.gallery-portrait-category {

    display: block;

    margin-bottom: 6px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* TITLE */

.gallery-portrait-overlay h3 {

    margin: 0;

    font-size: 18px;

    line-height: 1.35;

}


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

@media screen and (max-width: 992px) {

    .gallery-portrait-grid {

        padding-left: 14px;
        padding-right: 14px;

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

        gap: 22px;
    }

}


/* =========================================================
   PHONE
========================================================= */

@media screen and (max-width: 600px) {

    .gallery-portrait-grid {

        padding-left: 10px;
        padding-right: 10px;

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .gallery-portrait-item {

        aspect-ratio: 4 / 5;

        border-radius: 14px;
    }


    /* Keep information visible on phones */

    .gallery-portrait-overlay {

        opacity: 1;

        padding: 50px 18px 18px;
    }


    .gallery-portrait-category {

        font-size: 9px;
    }


    .gallery-portrait-overlay h3 {

        font-size: 16px;
    }

}