/* =========================
FAMILY SECTION
========================= */

.family-sections{
background:#efe2cf;
padding:20px 20px 20px 20px;
display:flex;
justify-content:center;
}


/* =========================
CONTAINER
========================= */

.family-sections-container{

width:100%;
max-width:1200px;

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

gap:40px;

margin:0 auto;

}


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

.family-card{

background:url('../images/card-frame.jpg') no-repeat center;
background-size:100% 100%;

width:100%;
max-width:340px;

height:220px;

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

padding:28px 40px;

margin:0 auto;

}


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

.family-card-content{

width:100%;

display:flex;
flex-direction:column;
align-items:center;

text-align:center;

margin-top:-5px;

}


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

.family-card-title{

font-family:'Cinzel', serif;
font-size:22px;
font-weight:700;

color:#3b1a10;

line-height:1.15;

margin-bottom:8px;

}


/* =========================
KANNADA TEXT
========================= */

.family-card-kannada{

font-family:'Noto Serif Kannada', serif;
font-size:17px;
font-weight:700;

color:#5a2a15;

line-height:1.1;

margin-bottom:2px;

}


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

.family-card-desc{

font-size:14px;
font-weight:600;

color:#5a3a28;

line-height:1.3;

margin-bottom:10px;

}


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

.family-card-btn{

display:inline-block;

font-family:'Cinzel', serif;
font-size:14px;
font-weight:700;

color:#3b1a10;

padding:8px 24px;

text-decoration:none;

background:linear-gradient(#e2c28e,#c89f63);

border:1px solid #8a6b3f;
border-radius:4px;

box-shadow:
inset 0 2px 3px rgba(255,255,255,0.6),
0 3px 6px rgba(0,0,0,0.25);

transition:all .25s ease;

}


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

.family-card-btn:hover{

background:linear-gradient(#e9c892,#d1a565);

transform:translateY(-2px);

}


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

@media (max-width:930px){

.family-sections{
padding:20px 20px 20px 20px;
}

.family-sections-container{
grid-template-columns:1fr;
gap:30px;
}

.family-card{
width:100%;
max-width:340px;
height:210px;
margin:0 auto;
}

}