/* PAGE */

.temple-section{
padding:60px 20px;
background:#f4f7fb;
}
/* TITLE */

.page-title{
text-align:center;
font-size:36px;
font-weight:700;
color:#0a3d62;
margin-bottom:60px;
}

/* GRID */

.temple-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

/* CARD */

.temple-card{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.12);
transition:0.35s;
display:flex;
flex-direction:column;
}

.temple-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

/* IMAGE */

.temple-image{
position:relative;
overflow:hidden;
}

.temple-image img{
width:100%;
height:230px;
object-fit:cover;
transition:0.4s;
}

.temple-card:hover img{
transform:scale(1.08);
}

/* TITLE OVER IMAGE */

.temple-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:18px;
background:linear-gradient(transparent, rgba(0,0,0,0.85));
color:white;
}

.temple-overlay h3{
font-size:20px;
margin:0;
}

/* CONTENT */

.temple-content{
padding:20px;
display:flex;
flex-direction:column;
flex-grow:1;
}

.temple-content p{
font-size:15px;
color:#555;
line-height:1.6;
margin-bottom:15px;
}

/* LOCATION */

.temple-info{
font-size:14px;
color:#777;
margin-bottom:20px;
}

.temple-info i{
color:#ff6b3d;
margin-right:6px;
}

/* BUTTON */

.temple-btn{
align-self:flex-start;
padding:10px 22px;
background:#ff6b3d;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:500;
transition:0.3s;
}

.temple-btn:hover{
background:#e65a2f;
}


/* ---------- RESPONSIVE ---------- */

/* Tablet */

@media (max-width:1000px){

.temple-grid{
grid-template-columns:repeat(2,1fr);
}

}


/* Mobile */

@media (max-width:600px){

.page-title{
font-size:28px;
margin-bottom:40px;
}

.temple-grid{
grid-template-columns:1fr;
}

.temple-image img{
height:200px;
}

.temple-content{
text-align:center;
}

.temple-btn{
align-self:center;
}

}