/*==========================================================
GLOVES COLLECTION
==========================================================*/

.gf-gloves{

    position:relative;

    padding:90px 0 40px;

    overflow:hidden;

}


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

.gf-gloves-heading{

    max-width:850px;

    margin:0 auto 35px;

    text-align:center;

}

.gf-gloves-label{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:#FFF6DD;

    color:#C79A12;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.gf-gloves-heading h2{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    color:#111;

    margin-bottom:25px;

}

.gf-gloves-heading h2 span{

    display:block;

    color:#D5A820;

}

.gf-gloves-heading p{

    max-width:760px;

    margin:auto;

    font-size:21px;

    line-height:1.8;

    color:#666;

}


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

.gf-gloves-grid{

    display:grid;

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

    gap:34px;

    align-items:stretch;

}


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

.gf-glove-card{

    position:relative;

    min-height:560px;

    overflow:hidden;

    border-radius:34px;

    background:#fff;

    border:1px solid rgba(212,168,32,.18);

    box-shadow:

    0 15px 45px rgba(0,0,0,.06);

    transition:.45s ease;

}

.gf-glove-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 70px rgba(0,0,0,.12);

}

.gf-glove-inner{

    position:relative;

    height:560px;

}


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

.gf-glove-content{

    position:absolute;

    top:38px;

    left:34px;

    width:46%;

    max-width:230px;

    z-index:20;

}


/*==========================================================
TAG
==========================================================*/

.gf-glove-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:#FFF6DD;

    color:#C79A12;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:24px;

}


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

.gf-glove-content h3{

    font-size:52px;

    line-height:1.02;

    font-weight:800;

    color:#111;

    margin-bottom:22px;

}


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

.gf-glove-content p{

    font-size:18px;

    line-height:1.8;

    color:#666;

    margin-bottom:38px;

}


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

.gf-glove-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#C79A12;

    font-size:17px;

    font-weight:700;

    transition:.35s ease;

}

/* Gym card button alignment */

.gym-card .gf-glove-content{

    display:flex;

    flex-direction:column;

    height:100%;

}

.gym-card .gf-glove-btn{

    margin-top:40px;

}


.gf-glove-btn span{

    transition:.35s ease;

}

.gf-glove-btn:hover{

    gap:16px;

}

.gf-glove-btn:hover span{

    transform:translateX(6px);

}


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

.gf-glove-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}


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

.gf-glove-glow{

    position:absolute;

    width:260px;

    height:260px;

    right:25px;

    bottom:25px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(212,168,32,.28) 0%,
    rgba(212,168,32,.10) 45%,
    transparent 75%);

    filter:blur(16px);

    z-index:1;

    transition:.45s ease;

}

.gf-glove-card:hover .gf-glove-glow{

    transform:scale(1.15);

}


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

.gf-glove-image img{

    position:absolute;

    right:20px;

    bottom:18px;

    width:235px;

    height:auto;

    object-fit:contain;

    z-index:5;

    transition:.45s ease;

}

.gf-glove-card:hover .gf-glove-image img{

    transform:
    translateY(-10px)
    rotate(-3deg)
    scale(1.05);

}


/*==========================================================
WATERMARK
==========================================================*/

.gf-glove-watermark{

    position:absolute;

    right:18px;

    bottom:18px;

    font-size:56px;

    font-weight:900;

    color:rgba(212,168,32,.06);

    line-height:1;

    pointer-events:none;

    user-select:none;

    z-index:2;

    text-transform:uppercase;

}


/*==========================================================
INDIVIDUAL IMAGE POSITIONING
==========================================================*/


/*==========================
GYM GLOVES
==========================*/

.gym-card .gf-glove-image img{

    width:240px;

    right:5px;

    bottom:10px;

}

.gym-card .gf-glove-glow{

    right:10px;

    bottom:20px;

}


/*==========================
MOTORBIKE GLOVES
==========================*/

.motorbike-card .gf-glove-image img{

    width:250px;

    right:-10px;

    bottom:5px;

}

.motorbike-card .gf-glove-glow{

    right:0;

    bottom:15px;

}


/*==========================
KART GLOVES
==========================*/

.kart-card .gf-glove-image img{

    width:245px;

    right:0;

    bottom:10px;

}

.kart-card .gf-glove-glow{

    right:8px;

    bottom:18px;

}


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

.gf-glove-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

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

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s ease;

    z-index:30;

}

.gf-glove-card:hover::before{

    transform:scaleX(1);

}


/*==========================================================
PREMIUM BORDER
==========================================================*/

.gf-glove-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:34px;

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

    pointer-events:none;

}


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

@media (max-width:1024px){

.gf-gloves{

    padding:20px 0 30px;

}

.gf-gloves-heading{

    margin-bottom:50px;

}

.gf-gloves-heading h2{

    font-size:48px;

}

.gf-gloves-heading p{

    font-size:18px;

}

.gf-gloves-grid{

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

    gap:25px;

}

.gf-glove-card{

    min-height:500px;

}

.gf-glove-inner{

    height:500px;

}

.gf-glove-content{

    top:28px;

    left:26px;

    width:48%;

}

.gf-glove-content h3{

    font-size:38px;

}

.gf-glove-content p{

    font-size:15px;

}

.gf-glove-image img{

    width:205px;

}

.gf-glove-watermark{

    font-size:44px;

}

}



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

@media (max-width:767px){

.gf-gloves{

    padding:60px 0 20px;

}

.gf-gloves-heading{

    margin-bottom:40px;

    padding:0 18px;

}

.gf-gloves-heading h2{

    font-size:34px;

}

.gf-gloves-heading p{

    font-size:15px;

    line-height:1.7;

}

.gf-gloves-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.gf-glove-card{

    min-height:480px;

    border-radius:24px;

}

.gf-glove-inner{

    height:480px;

}

.gf-glove-content{

    top:24px;

    left:22px;

    width:48%;

}

.gf-glove-tag{

    font-size:11px;

    padding:8px 14px;

}

.gf-glove-content h3{

    font-size:30px;

    margin-bottom:14px;

}

.gf-glove-content p{

    font-size:14px;

    line-height:1.7;

    margin-bottom:20px;

}

.gf-glove-btn{

    font-size:15px;

}

.gf-glove-image img{

    width:185px;

}

.gf-glove-glow{

    width:210px;

    height:210px;

}

.gf-glove-watermark{

    font-size:34px;

    right:14px;

    bottom:14px;

}

}


.gf-gloves-heading{
    margin-bottom:10px !important;
}

.gf-gloves{
    padding-top:0 !important;
}

.gf-gloves-grid{
    margin-top:0 !important;
    padding-top:0 !important;
}