/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Arial}
body{background:#f0f4ff;color:#222;scroll-behavior:smooth}

/* HERO HEADER WITH BACKGROUND IMAGE */
.header{
 background-image: url('assets/images/hero-bg.jpg'); /* নিজের ইমেজ পাথ বসাও */
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 color: #fff;
 padding: 60px 20px;
 text-align: center;
 position: relative;
}

/* Overlay for Text Visibility */
.header::before {
 content:"";
 position:absolute;
 top:0; left:0;
 width:100%; height:100%;
 background: rgba(0,0,0,0.45);
 z-index:1;
}
.header *{
 position: relative;
 z-index:2;
}

/* NAVIGATION */
.nav{
 display:flex;
 justify-content:center;
 gap:25px;
 flex-wrap:wrap;
 margin-top:25px;
}
.nav a{
 color:#fff;
 font-weight:600;
 text-decoration:none;
 padding:8px 18px;
 border-radius:8px;
 transition:.3s;
}
.nav a:hover{background:rgba(255,255,255,.2)}

/* HERO OFFERS */
.offer-bar{
 display:flex;
 justify-content:center;
 gap:20px;
 flex-wrap:wrap;
 margin-top:30px;
}
.offer{
 background:rgba(255,255,255,.15);
 color:#fff;
 padding:12px 25px;
 border-radius:30px;
 font-weight:700;
 box-shadow:0 8px 25px rgba(0,0,0,.3);
 transition:.3s;
}
.offer:hover{transform:translateY(-5px);box-shadow:0 12px 35px rgba(0,0,0,.4);}

/* SECTION TITLES */
.section{max-width:1000px;margin:auto;padding:70px 20px;text-align:center}
.logo-title{
 display:inline-block;
 padding:16px 45px;
 border-radius:50px;
 background:linear-gradient(135deg,#041a3a,#0a4cff);
 color:#fff;
 font-size:32px;
 font-weight:800;
 letter-spacing:1px;
 box-shadow:0 15px 35px rgba(0,0,0,.3);
 margin-bottom:50px;
}

<section style="padding:30px;">
<h2 style="text-align:center;">📊 Package Comparison</h2>

<table border="1" width="50%" cellpadding="12" style="border-collapse:collapse;margin-top:20px;">
<tr>
<th>Package</th>
<th>Speed</th>
<th>Best For</th>
<th>Price</th>
</tr>
<tr>
<td>Basic Surf</td>
<td>10 Mbps</td>
<td>Browsing, YouTube</td>
<td>Tk 600</td>
</tr>
<tr>
<td>Smart Home</td>
<td>15 Mbps</td>
<td>Online Class</td>
<td>Tk 800</td>
</tr>
<tr>
<td>Family Plus</td>
<td>25 Mbps</td>
<td>Family Use</td>
<td>Tk 1000</td>
</tr>
<tr>
<td>Pro Performance</td>
<td>35 Mbps</td>
<td>Gaming</td>
<td>Tk 1200</td>
</tr>
<tr>
<td>Ultra Speed</td>
<td>50 Mbps</td>
<td>Office / 4K</td>
<td>Tk 1500</td>
</tr>
</table>
</section>

/* MOVIE SERVER */
.movie{
 border:3px dashed #0a4cff;
 background:#fff;
 border-radius:25px;
 padding:45px;
 margin-top:50px;
 box-shadow:0 0 40px rgba(10,76,255,.5);
 transition:.3s;
}
.movie:hover{box-shadow:0 0 55px rgba(10,76,255,.8);}
.movie h2{font-size:28px;color:#041a3a;margin-bottom:10px}
.movie a{
 display:inline-block;
 margin-top:18px;
 background:#0a4cff;
 color:#fff;
 padding:16px 40px;
 border-radius:30px;
 font-weight:800;
 text-decoration:none;
 transition:.3s;
}
.movie a:hover{transform:scale(1.05);background:#041a3a}

/* CONTACT */
.contact{
 background:linear-gradient(135deg,#041a3a,#0a4cff);
 color:#fff;
 text-align:center;
 padding:50px 20px;
 margin-top:50px;
}
.contact p{font-size:18px;margin:10px 0}

/* RESPONSIVE */
@media(max-width:768px){
 .packages{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
 .header{padding:30px 20px}
 .nav a{padding:6px 12px}
 .logo-title{font-size:28px}
 .speed{font-size:36px}
}