/* =========================
   RESET & BASE
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, sans-serif;
  background: #fff;
  color: #0f172a;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
}

/* =========================
   NAVBAR
========================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff7ed;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}

/* LOGO SECTION */
.logo {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}

/* Logo Image Bigger */
.logo img {
  width: 100px;        /* 🔥 bada kar diya */
  height: 70px;
  object-fit: contain;
}

.logo span {
  font-size: 20px;
  font-weight: 800;
  color: #1e3a8a;
  transition: 0.3s;
}

.logo:hover span {
  color: #0f172a;
}

/* NAV LINKS */
.nav-links {
  display: flex;
  gap: 25px;
}

.nav-links a {
  position: relative;
  padding: 8px 0;
  font-weight: 500;
  color: #0f172a;
  text-decoration: none;
  transition: 0.3s;
}

.nav-links a:hover {
  color: #1e3a8a;
}


/* MOBILE */
@media (max-width: 900px) {

  .nav-links {
    position: absolute;
    top: 75px;
    right: 20px;
    background: white;
    flex-direction: column;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: none;
  }

  .nav-links.active {
    display: flex;
  }

  .hamburger {
    display: flex;
  }

  .logo span {
    font-size: 16px;
  }
}


/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: #0f172a;
  border-radius: 2px;
}

/* MOBILE MENU */
@media (max-width: 768px) {

  .hamburger {
    display: flex;
    margin-right: 15px;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff7ed;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 24px 0;

    display: none;          /* hidden by default */
  }

  .nav-links.active {
    display: flex;          /* open on click */
  }
}


body{
margin:0;
font-family: 'Segoe UI', sans-serif;
background:#0f1f3d;
color:white;
overflow-x:hidden;
}

.ramadan-section{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:80px 20px;
position:relative;
background:
radial-gradient(circle at 20% 20%, #1f3c88, transparent 50%),
radial-gradient(circle at 80% 80%, #0f2027, transparent 50%),
linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

/* Twinkling Stars */
.ramadan-section::after{
content:"";
position:absolute;
width:100%;
height:100%;
background:url("https://www.transparenttextures.com/patterns/stardust.png");
animation: twinkle 5s infinite alternate;
opacity:0.4;
}
@keyframes twinkle{
from{opacity:0.3;}
to{opacity:0.6;}
}

/* Card */
.ramadan-card{
position:relative;
z-index:2;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(25px);
padding:40px;
border-radius:25px;
width:100%;
max-width:900px;
box-shadow:0 20px 60px rgba(0,0,0,0.6);
text-align:center;
}

/* Arabic */
.arabic{
color:#ffcc33;
font-size:32px;
margin-bottom:10px;
}

/* Table */
table{
width:100%;
border-collapse:collapse;
margin-top:25px;
}

th{
background:#0d223f;
padding:14px;
color:#ffcc33;
}

td{
padding:14px;
border-bottom:1px solid rgba(255,255,255,0.1);
}

tr.active{
background:linear-gradient(90deg,#00c6ff,#0072ff);
}

/* Buttons */
.view-btn,
.download-btn{
display:inline-block;
margin-top:20px;
padding:12px 25px;
background:#ffcc33;
color:#000;
border:none;
border-radius:8px;
font-weight:600;
text-decoration:none;
cursor:pointer;
}

/* Hanging Decor */
.hanging-decor{
position:absolute;
top:0;
left:0;
width:100%;
height:200px;
pointer-events:none;
}

.moon{
width:60px;
height:60px;
background:gold;
border-radius:50%;
position:absolute;
left:10%;
top:20px;
box-shadow:-15px 0 0 #0f1f3d inset;
animation:swing 4s infinite ease-in-out;
}

.star{
width:20px;
height:20px;
background:gold;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
position:absolute;
animation:swing 3s infinite ease-in-out alternate;
}

.star1{left:30%; top:20px;}
.star2{left:50%; top:10px;}
.star3{left:70%; top:25px;}

@keyframes swing{
0%{transform:rotate(-5deg);}
50%{transform:rotate(5deg);}
100%{transform:rotate(-5deg);}
}

.ramadan-decor{
position:absolute;
top:0;
left:0;
width:100%;
height:180px;
pointer-events:none;
z-index:1;
}

.moon-img{
position:absolute;
left:8%;
top:20px;
width:70px;
animation: swingMoon 5s ease-in-out infinite;
transform-origin:top center;
}

.star-img{
position:absolute;
width:35px;
animation: swingStar 4s ease-in-out infinite;
transform-origin:top center;
}

.s1{ left:30%; top:25px; }
.s2{ left:50%; top:10px; }
.s3{ left:75%; top:30px; }

@keyframes swingMoon{
0%{ transform:rotate(-6deg); }
50%{ transform:rotate(6deg); }
100%{ transform:rotate(-6deg); }
}

@keyframes swingStar{
0%{ transform:rotate(-8deg); }
50%{ transform:rotate(8deg); }
100%{ transform:rotate(-8deg); }
}


/* Mobile */
@media(max-width:768px){
.ramadan-card{
padding:25px;
}
th,td{
font-size:12px;
}
}

/* ===============================
   EXTRA SMALL DEVICES (480px)
=================================*/

@media (max-width:480px){

/* Section Height Reduce */
.ramadan-section{
padding:80px 10px 50px;
}

/* Hide heavy hanging decor on very small screen */
.hanging-decor{
height:100px;
}

.moon{
width:40px;
height:40px;
left:5%;
top:15px;
}

.star{
width:18px;
height:18px;
}

.star1{ left:35%; top:20px; }
.star2{ left:60%; top:10px; }
.star3{ left:80%; top:25px; }

/* Card compact */
.ramadan-card{
padding:20px 15px;
border-radius:20px;
}

/* Title smaller */
.ramadan-card .arabic{
font-size:22px;
}

.ramadan-card h3{
font-size:16px;
}

.ramadan-card p{
font-size:13px;
margin-bottom:20px;
}

/* Table scroll smooth */
.table-wrapper{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

/* Make table min-width so text doesn’t crush */
table{
min-width:520px;
font-size:13px;
}

/* Reduce padding */
th, td{
padding:8px;
white-space:nowrap;
}

/* Button compact */
.view-btn{
padding:10px 20px;
font-size:14px;
border-radius:10px;
margin-top:20px;
}

}