/* ===========================================
   SERVICES
=========================================== */

.services{
    background:var(--light);
}

.service-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

    align-items:stretch;

}

.service-card{

    background:var(--white);

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);
    
    display: flex;
    flex-direction: column;
    height: 100%;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.service-card img{

    width:100%;
    height:auto;

    object-fit:contain;
}

.service-card h3{

    margin:25px 25px 15px;

    color:var(--primary);

    font-size:28px;

}

.service-card p{

    margin:0 25px 20px;

    font-size:16px;
    
}

.service-card a{

    display:inline-block;

    margin:0 25px 30px;

    color:var(--secondary);

    font-weight:700;

    transition:var(--transition);

}

.service-card a:hover{

    color:var(--gold);

}


/*====================================
VG PREMIUM BUTTON
====================================*/

.btn-premium{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 34px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg,#1f5f4a,#2f8a63);

    color:#fff;

    font-size:16px;

    font-weight:600;

    letter-spacing:.5px;

    cursor:pointer;

    transition:all .35s ease;

    text-decoration:none;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 12px 30px rgba(31,95,74,.25);

     margin-top: auto;   
}

/* Gold Shine */

.btn-premium::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.7s;

}

.btn-premium:hover::before{

    left:130%;

}

.btn-premium:hover{

    transform:translateY(-4px);

    background:linear-gradient(
        135deg,
        #2f8a63,
        #3ea97b
    );

    box-shadow:
        0 18px 35px rgba(31,95,74,.35);

}

.btn-premium:active{

    transform:translateY(-1px);

}

.btn-premium i{

    transition:.35s;

}

.btn-premium:hover i{

    transform:translateX(5px);

}
