/* ==========================================
   SECTION HEADER
========================================== */

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-subtitle{

    display:inline-block;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.section-title{

    font-size:48px;

    font-weight:700;

    margin-bottom:20px;

}

.section-description{

    max-width:700px;

    margin:auto;

    color:var(--text-light);

}

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

.card{

    background:white;

    border-radius:var(--radius-lg);

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

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

.feature-card{

    text-align:center;

}

.feature-card img{

    width:70px;

    margin:auto;

    margin-bottom:20px;

}

.feature-card h3{

    margin-bottom:15px;

}

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

.product-card{

    overflow:hidden;

    background:white;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.product-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

}

.product-card img{

    height:260px;

    object-fit:cover;

}

.product-content{

    padding:25px;

}

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

.badge{

    display:inline-block;

    background:#E8F5E9;

    color:var(--primary);

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

}

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

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}