* { box-sizing: border-box; }
body { margin:0; font-family:'Poppins',sans-serif; background:#f4f6f9; }

/* HEADER */
.header_11 {
    position:fixed; top:0; left:0; width:100%;
    background:linear-gradient(135deg, #3b0066, #6a00b5);
    color:#fff; padding:10px 20px;
    display:flex; justify-content:space-between; align-items:center;
    box-shadow:0 3px 15px rgba(0,0,0,0.25); z-index:9999; flex-wrap:wrap;
    transition:0.3s;
}

/* Logo */
.header_11 .logo a { text-decoration:none; color:#fff; display:flex; align-items:center; gap:10px; }
.header_11 .logo a h1 {
    margin:0; font-size:22px; font-weight:700; letter-spacing:1px;
    background:linear-gradient(135deg, #ffcc00, #fff8a3, #ffcc00);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    text-shadow: 2px 2px 10px rgba(255,204,0,0.4);
    transition:0.3s;
}
.header_11 .logo a:hover h1 {
    filter: brightness(1.3);
}

/* Center menu wrapper */
.header_11 .menu-center { flex:1 1 auto; display:flex; justify-content:center; min-width:0; }
.header_11 nav ul {
    list-style:none; display:flex; gap:25px;
    margin:0; padding:0; flex-wrap:wrap;
}
.header_11 nav ul li { position:relative; }
.header_11 nav ul li a {
    color:#fff; text-decoration:none; font-weight:500;
    transition:0.3s; font-size:15px; white-space:nowrap; display:flex; align-items:center; gap:5px;
}
.header_11 nav ul li a:hover {
    color:#ffcc00;
    text-shadow:0 0 8px rgba(255,204,0,0.7);
}

/* Services Dropdown */
.header_11 nav ul li .services-dropdown {
    display:none;
    position:absolute;
    top:38px; left:0;
    background:#fff; color:#333;
    min-width:220px; border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.2); z-index:999;
    transform:translateY(0); opacity:0; transition:0.3s ease-in-out;
}
.header_11 nav ul li.show-dropdown .services-dropdown {
    display:block; transform:translateY(5px); opacity:1;
}
.header_11 nav ul li .services-dropdown a {
    display:flex; align-items:center; gap:10px;
    padding:12px 18px; color:#333; font-weight:500; text-decoration:none; transition:0.3s;
    border-bottom:1px solid #eee;
}
.header_11 nav ul li .services-dropdown a:last-child { border-bottom:none; }
.header_11 nav ul li .services-dropdown a:hover {
    background:linear-gradient(135deg, #3b0066, #6a00b5);
    color:#fff;
    box-shadow:inset 0 0 10px rgba(255,204,0,0.3);
    transform:translateX(5px); border-radius:6px;
}

/* Caret rotation */
.header_11 nav ul li a .fa-caret-down {
    transition:0.3s;
}
.header_11 nav ul li.show-dropdown a .fa-caret-down { transform:rotate(180deg); }

/* User area */
.header_11 .user-area { display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.header_11 .user-area img {
    width:45px; height:45px; border-radius:50%;
    border:2px solid #ffcc00; cursor:pointer; transition:0.3s;
}
.header_11 .user-area img:hover {
    transform:scale(1.05);
    box-shadow:0 0 8px rgba(255,204,0,0.6);
}

/* Notification icon */
.header_11 .notification {
    position:relative; cursor:pointer; font-size:20px; color:#fff; transition:0.3s;
}
.header_11 .notification:hover {
    color:#ffcc00;
    text-shadow:0 0 8px rgba(255,204,0,0.7);
}
.header_11 .notification::after {
    content:''; position:absolute; top:2px; right:2px;
    width:8px; height:8px; background:#ffcc00; border-radius:50%;
}

/* Dropdowns */
.header_11 .notification-dropdown, .header_11 .dropdown {
    position:absolute; top:55px; right:0; background:#fff; color:#333;
    border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.2);
    display:none; z-index:99; min-width:220px; overflow:hidden;
}
.header_11 .notification-dropdown { right:60px; }
.header_11 .notification-dropdown h4 {
    margin:0; padding:12px 15px; background:#f0f0f0;
    font-size:14px; font-weight:600;
}
.header_11 .notification-dropdown p {
    margin:0; padding:10px 12px; border-bottom:1px solid #eee;
    font-size:13px; transition:0.2s;
}
.header_11 .notification-dropdown p:hover { background:#f9f9f9; }
.header_11 .notification-dropdown p:last-child { border-bottom:none; }

/* Wallet display */
.header_11 .wallet-display {
    background:linear-gradient(135deg, #ffcc00, #ffd633);
    color:#222; padding:6px 14px;
    border-radius:25px; font-weight:600; font-size:14px;
    display:flex; align-items:center; gap:6px; cursor:pointer; transition:0.3s;
    box-shadow:0 0 10px rgba(255,204,0,0.4);
}
.header_11 .wallet-display:hover {
    background:linear-gradient(135deg, #ffd633, #ffcc00);
    transform:translateY(-2px);
}

/* Dropdown links */
.header_11 .dropdown a {
    display:block; padding:12px 15px; text-decoration:none;
    color:#333; font-weight:500; transition:0.3s;
}
.header_11 .dropdown a:hover {
    background:#f5f5f5;
}
.header_11 .logout-btn {
    background:#ff4444; color:#fff; border:none;
    padding:8px 14px; border-radius:6px; cursor:pointer;
    font-weight:600; transition:0.3s; text-align:center;
}
.header_11 .logout-btn:hover { background:#ff1c1c; }

/* Hamburger for mobile */
.header_11 .hamburger {
    display:none; font-size:26px; cursor:pointer;
    color:#fff; transition:0.3s;
}
.header_11 .hamburger:hover {
    color:#ffcc00;
    text-shadow:0 0 8px rgba(255,204,0,0.7);
}

/* Responsive */
@media(max-width:1024px){
    .header_11 nav ul { gap:15px; flex-wrap:wrap; }
    .header_11 .user-area { gap:8px; }
}
@media(max-width:768px){
    .header_11 {
        flex-direction:row; justify-content:space-between; align-items:center; padding:10px 15px;
    }
    .header_11 .menu-center {
        position:absolute; top:60px; left:0; width:100%;
        background:linear-gradient(135deg, #3b0066, #6a00b5);
        display:none; flex-direction:column; padding:15px 0; border-radius:0 0 10px 10px;
    }
    .header_11 .menu-center ul {
        flex-direction:column; gap:10px; justify-content:flex-start; padding-left:20px;
    }
    .header_11 .menu-center ul li { width:100%; }
    .header_11 .menu-center nav ul li .services-dropdown {
        position:relative; top:0; left:0; background:#fff; box-shadow:none;
        border-radius:8px; display:none; margin:5px 0;
    }
    .header_11 .menu-center nav ul li.show-dropdown .services-dropdown {
        display:flex; flex-direction:column;
    }
    .header_11 .hamburger { display:block; }
    .header_11 .user-area { flex-wrap:wrap; gap:8px; }
}

main { padding-top:110px; }

/* ✅ FIX: Proper dropdown alignment on mobile */
/* ✅ Compact & Centered Mobile Menu with Slide Animation */
@media (max-width: 768px) {

  /* Header Layout */
  .header_11 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
  }

  /* Hide login/register buttons on mobile */
  .header_11 .user-area-isolated {
    display: none !important;
  }

  /* Toggle (Hamburger) Button */
  .header_11 .hamburger {
    display: block;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
    z-index: 1000;
  }

  /* Menu Container */
  .header_11 .menu-center {
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #3b0066, #6a00b5);
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: slideDown 0.3s ease forwards;
  }

  /* Menu Items */
  .header_11 .menu-center ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .header_11 .menu-center ul li {
    width: 92%;
    text-align: center;
  }

  .header_11 .menu-center ul li a {
    display: block;
    width: 100%;
    padding: 8px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.25s ease;
  }

  .header_11 .menu-center ul li a:hover {
    background: rgba(255,255,255,0.1);
    color: #ffcc00;
  }

  /* Submenu Dropdown (Services) */
  .header_11 .menu-center ul li .services-dropdown {
    position: relative;
    background: #fff;
    width: 92%;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    margin: 6px auto 8px;
    display: none;
    overflow: hidden;
    transform-origin: top;
    animation: slideDown 0.3s ease forwards;
  }

  .header_11 .menu-center ul li.show-dropdown .services-dropdown {
    display: flex;
    flex-direction: column;
  }

  .header_11 .menu-center ul li .services-dropdown a {
    color: #333;
    padding: 8px 12px;
    font-size: 13px;
    text-align: left;
    border-bottom: 1px solid #eee;
    transition: all 0.25s ease;
  }

  .header_11 .menu-center ul li .services-dropdown a:last-child {
    border-bottom: none;
  }

  .header_11 .menu-center ul li .services-dropdown a:hover {
    background: linear-gradient(135deg, #3b0066, #6a00b5);
    color: #fff;
  }

  /* Smooth Slide Animation */
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}



/* ======= LOGO STYLE ======= */
.logo {
  display: flex;
  align-items: center;
}

.logo a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 🌟 ICON STYLE */
.logo-icon {
  font-size: 36px;
  color: #00ffcc;
  background: linear-gradient(90deg, #00ff9d, #00c3ff, #0084ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0,255,200,0.5));
  transition: all 0.4s ease;
}

.logo-icon:hover {
  transform: rotate(-10deg) scale(1.1);
  filter: drop-shadow(0 0 12px rgba(0,255,200,0.7));
}

/* 🧩 TEXT STYLE - UPDATED */
.logo-text {
  font-family: 'Poppins', sans-serif;
  font-size: 20px; /* पहले 34px था */
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00ff9d, #00c3ff, #0084ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 6px rgba(0, 255, 150, 0.25);
  letter-spacing: 1px;
  margin: 0;
  transition: all 0.3s ease;
  display: inline-block;
}

/* Hover Effect */
.logo-text:hover {
  transform: scale(1.05);
  text-shadow: 1px 1px 10px rgba(0, 255, 200, 0.45);
}

/* 📱 Mobile Responsive */
@media (max-width:768px){
  .logo-text{
    font-size:16px;
  }
}

.notification-dropdown {
    max-height: 330px;
    overflow-y: auto;
}

/* “See all messages” link design */
.notification-dropdown .see-all {
    text-align: center;
    padding: 10px 0;
    background: #f7f7f7;
    border-top: 1px solid #ddd;
}
.notification-dropdown .see-all a {
    display: inline-block;
    text-decoration: none;
    color: #6a00b5;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s ease;
}
.notification-dropdown .see-all a:hover {
    color: #ffcc00;
}
.notification-dropdown .see-all i {
    margin-right: 6px;
    color: #6a00b5;
}


/* 🌟 FIXED PREMIUM HEADER BASE */
.header_11 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg, #3b0066, #6a00b5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 40px;
  z-index: 9999;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

/* Prevent content from hiding behind header */
body {
  padding-top: 80px; /* Adjust this equal to header height */
}

/* 🌟 User Area - Premium Header Buttons */
.user-area-isolated {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-right: 25px;
  font-family: 'Poppins', sans-serif;
  position: relative;
}

/* 🔘 Base Style for Buttons */
.user-area-isolated a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* ✨ Icon Styling */
.user-area-isolated i {
  font-size: 15px;
  transition: transform 0.3s ease;
}

/* 🟠 Login Button (Soft Neutral Tone) */
.user-area-isolated a.btn-login {
  background: linear-gradient(135deg, #f9f9f9 0%, #eaeaea 100%);
  color: #333;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.user-area-isolated a.btn-login:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f2f2f2 100%);
  color: #111;
  transform: translateY(-2px);
}
.user-area-isolated a.btn-login:hover i {
  transform: rotate(15deg);
}

/* 🔵 Register Button (Premium Gradient) */
.user-area-isolated a.btn-register {
  background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 100%);
  color: #fff;
  border: none;
  box-shadow: 0 3px 10px rgba(78,0,224,0.3);
}
.user-area-isolated a.btn-register:hover {
  background: linear-gradient(135deg, #5A10F0 0%, #A23DF0 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(142,45,226,0.4);
}
.user-area-isolated a.btn-register:hover i {
  transform: scale(1.2);
}

/* 💎 Button Glow Animation */
.user-area-isolated a::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.2);
  transform: skewX(-20deg);
  transition: 0.5s;
}
.user-area-isolated a:hover::after {
  left: 150%;
}

/* 🔹 LOGO */
.header_11 .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header_11 .logo-icon {
  font-size: 28px;
  color: #ffd700;
}
.header_11 .logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* 🔹 MENU CENTER (Desktop) */
.header_11 .menu-center ul {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}
.header_11 .menu-center a {
  color: #fff;
  font-weight: 500;
  transition: 0.3s;
}
.header_11 .menu-center a:hover {
  color: #ffd700;
}

/* 🔹 TOGGLE BUTTON (Hidden in Desktop) */
.header_11 .hamburger {
  display: none;
}

/* ✅ MOBILE HEADER FIX */
@media (max-width: 768px) {
  .header_11 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 10px 16px;
  }

  /* 🔹 REGISTER / LOGIN HIDE IN MOBILE */
  .header_11 .user-area-isolated {
    display: none !important;
  }

  /* 🔹 TOGGLE BUTTON RIGHT SIDE */
  .header_11 .hamburger {
    display: block;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* 🔹 MENU (HIDDEN INITIALLY) */
  .header_11 .menu-center {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #3b0066, #6a00b5);
    flex-direction: column;
    border-radius: 0 0 8px 8px;
    padding: 10px 0;
    z-index: 99;
  }

  .header_11 .menu-center ul {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}