/*==========================================================
FACTORY GALLERY V2
==========================================================*/

.gf-factory{

    position:relative;

    padding:40px 0 120px;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(212,175,55,.07) 0%,
    transparent 28%),

    radial-gradient(circle at bottom left,
    rgba(212,175,55,.07) 0%,
    transparent 28%),

    #fff;

}


/*==========================================================
HEADING
==========================================================*/

.gf-factory-heading{

    width:min(900px,92%);

    margin:0 auto 70px;

    text-align:center;

}

.gf-factory-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 26px;

    border-radius:50px;

    background:#FFF6DD;

    color:#C9980F;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.gf-factory-heading h2{

    font-size:68px;

    line-height:1.05;

    font-weight:800;

    color:#111;

    margin-bottom:24px;

}

/*==========================================================
COMES TO LIFE
==========================================================*/

.gf-life-text{

    display:block;

    margin-top:10px;

    font-weight:800;

    line-height:1;

    background:linear-gradient(
        90deg,
        #C99812 0%,
        #D4AF37 30%,
        #FFF0AE 50%,
        #D4AF37 70%,
        #C99812 100%
    );

    background-size:250% auto;

    background-clip: text;
-webkit-background-clip: text;

color: transparent;
-webkit-text-fill-color: transparent;

    opacity:0;

    transform:translateY(35px) scale(.96);

    animation:

    gfTitleReveal .9s cubic-bezier(.2,.9,.2,1) .35s forwards,

    gfGoldShine 6s linear 1.5s infinite;

}

/*-----------------------------*/

@keyframes gfTitleReveal{

    0%{

        opacity:0;

        transform:translateY(35px) scale(.96);

        filter:blur(8px);

    }

    100%{

        opacity:1;

        transform:translateY(0) scale(1);

        filter:blur(0);

    }

}

/*-----------------------------*/

@keyframes gfGoldShine{

    from{

        background-position:-250% center;

    }

    to{

        background-position:250% center;

    }

}

.gf-factory-heading p{

    max-width:760px;

    margin:auto;

    font-size:20px;

    line-height:1.8;

    color:#666;

}


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

.gf-factory-grid{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

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

    gap:25px;

}


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

.gf-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

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

}


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

.gf-card-image{

    overflow:hidden;

}

.gf-card-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}


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

.gf-card-content{

    padding:20px;

}

.gf-card-content h3{

    font-size:28px;

    font-weight:700;

    color:#111;

    margin-bottom:12px;

}

.gf-card-content p{

    font-size:16px;

    line-height:1.8;

    color:#666;

}


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

@media(max-width:1024px){

.gf-factory{

    padding:90px 0;

}

.gf-factory-heading h2{

    font-size:52px;

}

.gf-factory-heading p{

    font-size:18px;

}

.gf-factory-hero img{

    height:460px;

}

.gf-factory-grid{

    gap:22px;

}

.gf-card-image img{

    height:200px;

}

}


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

@media(max-width:768px){

    .gf-factory{

        padding:70px 0;

    }

    .gf-factory-heading{

        margin-bottom:45px;

        padding:0 18px;

    }

    .gf-factory-heading h2{

        font-size:36px;

    }

    .gf-factory-heading p{

        font-size:15px;

    }

    .gf-factory-grid{

        width:94%;

        grid-template-columns:1fr;

        gap:18px;

    }

    .gf-card{

        border-radius:18px;

    }

    .gf-card-image img{

        height:190px;

    }

    .gf-card-content{

        padding:18px;

    }

    .gf-card-content h3{

        font-size:20px;

        margin-bottom:8px;

    }

    .gf-card-content p{

        font-size:14px;

        line-height:1.6;

    }

}

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

.gf-card{

    position:relative;

    transition:.45s ease;

}

.gf-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    border:2px solid transparent;

    transition:.4s;

    pointer-events:none;

}

.gf-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.14);

}

.gf-card:hover::before{

    border-color:#D4AF37;

}



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

.gf-card-image{

    overflow:hidden;

}

.gf-card-image img{

    transition:1s ease;

}

.gf-card:hover img{

    transform:scale(1.08);

}



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

.gf-card-content{

    position:relative;

}

.gf-card-content h3{

    transition:.35s ease;

}

.gf-card:hover h3{

    letter-spacing:.6px;

}

.gf-card:hover h3{

    color:#C99712;

}


.gf-card:hover .gf-card-content::after{

    transform:translateX(8px);

}



/*==========================================================
GOLD GLOW
==========================================================*/

.gf-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    top:-80px;

    border-radius:50%;

    background:

    radial-gradient(circle,

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

    transparent 70%);

    opacity:0;

    transition:.45s;

}

.gf-card:hover::after{

    opacity:1;

}


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

.gf-card-image{

    position:relative;

}

.gf-card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.25),

        rgba(0,0,0,0)

    );

    transition:.4s;

}

.gf-card:hover .gf-card-image::after{

    background:linear-gradient(

        to top,

        rgba(0,0,0,.45),

        rgba(0,0,0,.08)

    );

}



/*==========================================================
BADGE
==========================================================*/

.gf-card-badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:5;

    padding:10px 18px;

    border-radius:50px;

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.35);

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}



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

.gf-card-content{
    padding:20px;
}


.gf-card-image img{

    display:block;

    width:100%;

    height:220px;

    object-fit:cover;

}



/*==========================================================
TOP ACCENT
==========================================================*/

.gf-card{

    position:relative;

    z-index:1;

}

.gf-card:hover{

    z-index:2;

}

.gf-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,#D4AF37,#FFD86A);

    transition:.45s ease;

    z-index:3;

}

.gf-card:hover::before{

    width:100%;

}


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

@media (max-width:1200px){

.gf-factory-grid{

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

}

}

@media (max-width:768px){

.gf-factory-grid{

grid-template-columns:1fr;

}

}