/*==================================================
    KURUNJI MASALA V2
    COMPONENTS.CSS
==================================================*/

/*==============================
BUTTONS
==============================*/

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    height:var(--btn-height);

    padding:0 32px;

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

    font-size:16px;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);

    color:var(--white);

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

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

}

.btn-secondary{

    background:var(--secondary);

    color:var(--heading);

}

.btn-secondary:hover{

    background:var(--secondary-dark);

    color:#fff;

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

    background:transparent;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/*==============================
CARDS
==============================*/

.card{

    background:#fff;

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

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

    transition:var(--transition);

    overflow:hidden;

}

.card:hover{

    transform:translateY(-10px);

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

}

/*==============================
IMAGES
==============================*/

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

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

.badge{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:var(--secondary-light);

    color:var(--secondary-dark);

    font-size:14px;

    font-weight:600;

}

/*==============================
SECTION TITLE
==============================*/

.section-header{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.section-header span{

    display:inline-block;

    margin-bottom:15px;

}

.section-header h2{

    margin-bottom:20px;

}

.section-header p{

    max-width:720px;

    margin:auto;

}

/*==============================
FORM
==============================*/

.form-control{

    width:100%;

    height:var(--input-height);

    border:1px solid var(--border);

    border-radius:15px;

    padding:0 18px;

    transition:var(--transition);

}

.form-control:focus{

    border-color:var(--primary);

}

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

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

/*==============================
FLEX HELPERS
==============================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*==============================
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);

}

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

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:.5s;

}

.zoom:hover img{

    transform:scale(1.08);

}