body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color:#333;
margin: 0;
padding: 0;
background-color:#fafafa;
}
nav {
background-color: #8e1b1b;
color: white;
padding: 1px 15px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
}

.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('punjabi-rishtey.webp');
background-size: cover;
background-position: center;
min-height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding:10px 20px;
}
.hero h1 { font-size: 3rem; margin-bottom:5px; }
.url2 {
 background: white;
 margin: 0 10px;
 border-radius: 20px;
 padding: 2px 10px;
 color: blue;
 border: 1px solid blue;
}
.url3{
padding:5px 10px;
border:2px solid #fff;
border-radius:5px;
}
.pd { padding:25px; }
.tc{text-align:center;}
.google{
padding:4px 10px;
border-radius:20px;
background:#fff;
}
.google a{
	color:#333;
	padding:0 5px;
	font-weight:600;
}
.fx{
display:flex;
align-items:center;
justify-content:center;
}
.title {
text-align: center;
color: #8e1b1b;
margin: 20px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-top: 4px solid #d4af37;
}

.card img{
max-width: 100%;
height: auto;
display: block; 
border-radius: 4px;
}
footer {
background: #222;
color: white;
text-align: center;
padding: 20px 10px;
margin-top: 30px;
}
footer a{
padding:10px;
line-height:30px;
}
.url {
background:#d4af37;
color: #fff;
padding: 9px 18px;
text-decoration: none;
border-radius: 2px;
font-weight: bold;
display: table;   
margin: 20px auto 0; 
width: fit-content;
}
a{
text-decoration:none;
color:white;
}
	.seo-content {
    height: 40px; 
    overflow: hidden;
    position: relative;
	padding:2px;
  }
  .seo-content::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 40px;
    background: linear-gradient(transparent, white);
  }
          .wa-float {
            position: fixed; bottom: 20px; right: 10px;
            background: #25D366; color: white; border-radius: 50px;
            padding: 10px 15px; display: flex; align-items: center;
            font-family: sans-serif; font-weight: bold; cursor: pointer;
            border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 999;
        }
        .wa-float:hover { background: #128C7E; }
        svg { width: 20px; height: 20px; margin-right: 10px; fill: white; }
        @media (max-width: 768px) {
            .hero h1 { font-size: 2rem; }
        }