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

.gallery-hero{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#13294b;
}

.gallery-bg{
    width:100%;
    height:auto;
    display:block;
}


/* ==========================
   GALERIJA
========================== */

.gallery-section{

    padding:90px 0;

    background:#f8fafc;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    color:#df1e25;

    font-size:14px;

    letter-spacing:5px;

    font-weight:700;

}

.section-title h2{

    margin-top:15px;

    font-size:42px;

    color:#13294b;

}


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

.gallery-grid{

    display:grid;

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

    gap:28px;

}

.gallery-item{

    overflow:hidden;

    border-radius:20px;

    background:#fff;

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

    cursor:pointer;

    transition:.35s;

    position:relative;

}

.gallery-item img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.gallery-item:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.18);

}

.gallery-item:hover img{

    transform:scale(1.08);

}


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

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(19,41,75,.75),
        rgba(19,41,75,0)
    );

    opacity:0;

    transition:.35s;

    z-index:1;

}

.gallery-item::after{

    content:"\f00e";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(.8);

    width:62px;

    height:62px;

    border-radius:50%;

    background:#df1e25;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    opacity:0;

    transition:.35s;

    z-index:2;

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item:hover::after{

    opacity:1;

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

}


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

.cta{

    padding:80px 0 30px;

}


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

@media(max-width:1200px){

    .gallery-grid{

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

    }

}


/* ==========================
   MOBILNA VERZIJA
========================== */

@media(max-width:768px){

    /* ==========================
       GORNJA HERO SLIKA - SKLONJENA
    ========================== */

    .gallery-hero{
        display:none !important;
    }


    /* ==========================
       GALERIJA
    ========================== */

    .gallery-section{

        padding:45px 0 60px;

    }


    /* ==========================
       NASLOV
    ========================== */

   .section-title{
    margin-bottom:25px;
    padding:35px 15px 0;
}

    .section-title span{

    font-size:13px;

    letter-spacing:5px;

    position:relative;
    top:5px;

}

  .section-title h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size:26px;
    line-height:1.25;
    font-weight:600;
    letter-spacing:0.3px;
}


    /* ==========================
       SLIKE
    ========================== */

    .gallery-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .gallery-item{

        border-radius:20px;

    }

    .gallery-item img{

        width:100%;

        height:240px;

        object-fit:cover;

    }


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

    .gallery-item:hover{

        transform:none;

    }

    .gallery-item:hover img{

        transform:none;

    }

}