:root {
       --primary: #9700f5;
       --primary-dark: #8a05dd;
       --primary-glow: rgba(151, 0, 245, 0.3);
       --white: #ffffff;
       --light: #f0eaff;
       --gray-light: #d0c0ff;
       --dark-bg: #0a0014;
       --card-bg: rgba(20, 0, 40, 0.7);
       --card-border: rgba(151, 0, 245, 0.22);
       --border: rgba(151, 0, 245, 0.3);
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Poppins', system-ui, sans-serif;
       background: linear-gradient(135deg, #0a0014, #140028, #1a0033);
       color: var(--white);
       line-height: 1.6;
       min-height: 100vh;
   }

   /* HEADER */
   .header {
       position: sticky;
       top: 0;
       z-index: 1000;
       background: linear-gradient(135deg, #9700f5, #8a05dd);
       box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
   }

   .header-container {
       max-width: 1280px;
       margin: 0 auto;
       height: 78px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 20px 30px;
   }

   .logo {
       display: flex;
       align-items: center;

   }

   .logo img {
       width: 80px;
       height: auto;
       display: block;
   }

   /* Hover Effect */
   .logo img:hover {
       transform: scale(1.05);
   }



   /* DESKTOP NAV */
   .nav {
       display: flex;
       align-items: center;
       gap: 30px;
   }

   .nav a {
       color: white;
       text-decoration: none;
       font-weight: 500;
       font-size: 1.05rem;
       padding: 8px 4px;
       transition: 0.2s;
   }

   .nav a:hover {
       color: #ffcd00;
   }

   /* Dropdown desktop */
   .dropdown {
       position: relative;
   }

   .dropdown-content {
       position: absolute;
       top: 100%;
       left: 0;
       min-width: 170px;
       background: white;
       border-radius: 8px;
       box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
       padding: 6px 0;
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: all 0.25s ease;
   }

   .dropdown:hover .dropdown-content {
       opacity: 1;
       visibility: visible;
       transform: translateY(4px);
   }

   .dropdown-content a {
       color: #222;
       display: block;
       padding: 10px 18px;
       font-size: 0.97rem;
   }

   .dropdown-content a:hover {
       background: #eef4ff;
       color: #0060c0;
   }

   .register-btn {
       background: linear-gradient(135deg, #ffcd00, #ff9f00);
       color: #002b5c;
       font-weight: 700;
       padding: 12px 30px;
       border: none;
       border-radius: 50px;
       cursor: pointer;
       font-size: 15px;
       letter-spacing: 0.5px;
       display: inline-block;
       transition: all 0.3s ease;
       box-shadow: 0 6px 18px rgba(255, 157, 0, 0.35);
       position: relative;
       overflow: hidden;
   }

   /* Hover Effect */
   .register-btn:hover {
       transform: translateY(-3px) scale(1.03);
       box-shadow: 0 10px 25px rgba(255, 157, 0, 0.45);
       background: linear-gradient(135deg, #ffd633, #ffb300);
   }

   /* Click Effect */
   .register-btn:active {
       transform: scale(0.96);
   }

   /* Shine Animation */
   .register-btn::before {
       content: "";
       position: absolute;
       top: 0;
       left: -75%;
       width: 50%;
       height: 100%;
       background: rgba(255, 255, 255, 0.4);
       transform: skewX(-25deg);
       transition: 0.5s;
   }

   .register-btn:hover::before {
       left: 130%;
   }

   .menu-toggle {
       display: none;
       background: none;
       border: none;
       color: white;
       font-size: 2.1rem;
       cursor: pointer;
   }

   /* ─── MOBILE ─── */
   @media (max-width: 820px) {
       .menu-toggle {
           display: block;
       }

       .nav {
           position: fixed;
           top: 68px;
           left: 0;
           right: 0;
           bottom: 0;
           background: linear-gradient(135deg, #9700f5, #8a05dd);
           flex-direction: column;
           align-items: stretch;
           padding: 20px 0;
           gap: 0;
           transform: translateX(100%);
           transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
           overflow-y: auto;
           /* ← important - scrolling enabled */
           -webkit-overflow-scrolling: touch;
           /* smooth scrolling on iOS */
       }

       .nav.active {
           transform: translateX(0);
       }

       .nav a,
       .dropdown>a {
           color: white;
           font-size: 1.18rem;
           font-weight: 500;
           padding: 16px 28px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.12);
           transition: background 0.2s;
       }

       .nav a:hover,
       .dropdown>a:hover {
           background: rgba(255, 255, 255, 0.08);
       }

       /* Mobile dropdown */
       .dropdown-content {
           position: static;
           box-shadow: none;
           background: rgba(0, 0, 0, 0.15);
           border-radius: 0;
           margin: 0;
           padding: 0;
           opacity: 1;
           visibility: visible;
           transform: none;
           display: none;
       }

       .dropdown.active .dropdown-content {
           display: block;
       }

       .dropdown-content a {
           color: #e0f0ff;
           font-size: 1.05rem;
           padding: 14px 48px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.08);
       }

       .dropdown-content a:last-child {
           border-bottom: none;
       }

       .register-btn {
           width: 160px;
           margin: 25px 0 12px 20px;
           /* left side gap */
           display: block;
           padding: 10px 18px;
           font-size: 14px;
           text-align: center;
       }


       /* Hide underline effect on mobile */
       .nav a::after {
           display: none;
       }
   }




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

   /* Naya banner style (header ki jagah) */
   .top-banner {
       text-align: center;
       padding: 45px 20px 35px;
       background: linear-gradient(135deg, rgba(151, 0, 245, 0.18), rgba(138, 5, 221, 0.08), transparent);
       border-radius: 20px 20px 0 0;
       margin-bottom: 0;
       border: 1px solid var(--card-border);
       border-bottom: none;
       backdrop-filter: blur(10px);
       position: relative;
       overflow: hidden;
   }

   .top-banner::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(151, 0, 245, 0.12) 0%, transparent 60%);
       animation: pulse 12s infinite alternate;
       pointer-events: none;
   }

   @keyframes pulse {
       0% {
           transform: scale(1);
           opacity: 0.6;
       }

       100% {
           transform: scale(1.3);
           opacity: 0.3;
       }
   }

   .top-banner h1 {
       font-size: 2.3rem;
       background: linear-gradient(90deg, #ffffff, var(--primary), #e0b0ff);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-bottom: 15px;
       font-weight: 800;
   }

   .intro {
       font-size: 1.1rem;
       color: var(--gray-light);
       max-width: 1080px;
       margin: 0 auto 25px;
       text-align: center;
   }

   .features {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
       gap: 16px;
       margin: 25px 0;
       padding: 0 10px;
   }

   .feature-item {
       background: var(--card-bg);
       padding: 18px 20px;
       border-radius: 14px;
       border: 1px solid var(--card-border);
       text-align: center;
       font-weight: 600;
       font-size: 1rem;
       transition: all 0.3s ease;
   }

   .feature-item:hover {
       transform: translateY(-6px);
       border-color: var(--primary);
       box-shadow: 0 15px 30px var(--primary-glow);
   }

   .cta-buttons {
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       margin: 30px 0 20px;
       gap: 25px;
   }

   .btn {
       padding: 12px 36px;
       font-size: 1.05rem;
       font-weight: 700;
       text-decoration: none;
       border-radius: 50px;
       transition: all 0.35s ease;
       position: relative;
       overflow: hidden;
   }

   .btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: 0.5s;
   }

   .btn:hover::before {
       left: 100%;
   }

   /* LOGIN BUTTON - Blue */
   .btn-login {
       background: #1e88e5;
       color: #fff;
       box-shadow: 0 8px 25px rgba(30, 136, 229, 0.35);
   }

   .btn-login:hover {
       transform: scale(1.06);
       box-shadow: 0 15px 35px rgba(30, 136, 229, 0.45);
   }


   /* DOWNLOAD BUTTON - Green */
   .btn-download {
       background: #00c853;
       color: #edf3ef;
       border: 2px solid #00c853;
   }

   .btn-download:hover {
       background: #00c853;
       color: #fff;
       transform: scale(1.06);
   }


   /* REGISTER BUTTON - Orange/Gold */
   .btn-register {
       background: linear-gradient(45deg, #ff9800, #ffc107);
       color: #fff;
       box-shadow: 0 8px 25px rgba(255, 152, 0, 0.35);
   }

   .btn-register:hover {
       transform: scale(1.06);
       box-shadow: 0 15px 35px rgba(255, 152, 0, 0.45);
   }


   .tip {
       text-align: center;
       font-size: 1rem;
       color: #ffdd57;
       font-weight: 600;
       margin: 15px 0 35px;
   }

   .gift-code-section {
       background: rgba(151, 0, 245, 0.1);
       border: 2px dashed var(--primary);
       border-radius: 16px;
       padding: 30px 20px;
       margin: 35px 0;
       text-align: center;
       backdrop-filter: blur(6px);
   }

   .gift-code-title {
       color: var(--white);
       font-size: 2rem;
       margin-bottom: 15px;
       font-weight: 700;
   }

   .gift-code {
       font-family: 'Courier New', monospace;
       font-size: 1.5rem;
       font-weight: bold;
       color: #fff176;
       background: rgba(0, 0, 0, 0.5);
       padding: 12px 30px;
       border-radius: 12px;
       display: inline-block;
       border: 1px solid var(--primary);
   }


   section {
       margin: 50px 0;
   }

   h2 {
       color: var(--white);
       font-size: 2.1rem;
       text-align: center;
       margin: 50px 0 15px;
       background: linear-gradient(90deg, var(--primary), #ffffff, var(--primary));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       font-weight: 800;
   }

   p {
       font-size: 1.05rem;
       color: var(--light);
       max-width: 1150px;
       margin: 0 auto 20px;

   }

   h3 {
       color: var(--primary);
       font-size: 1.8rem;
       margin: 50px 0 15px;
       font-weight: 600;
       margin-left: 35px;
   }

   .download-cta {
       text-align: center;
       margin: 40px 0;
   }

   .specs-table {
       width: 100%;
       border-collapse: collapse;
       background: var(--card-bg);
       border-radius: 16px;
       overflow: hidden;
       border: 1px solid var(--card-border);
       margin: 35px 0;
       font-size: 0.98rem;
   }

   .specs-table th,
   .specs-table td {
       padding: 14px 18px;
       text-align: left;
       border-bottom: 1px solid rgba(151, 0, 245, 0.15);
   }

   .specs-table th {
       background: rgba(138, 5, 221, 0.22);
       color: var(--white);
       font-weight: 700;
       width: 38%;
   }

   .specs-table td {
       color: var(--gray-light);
   }

   @media (max-width: 768px) {
       h1 {
           font-size: 1.9rem;
       }

       h2 {
           font-size: 1.8rem;
       }

       .btn {
           padding: 10px 28px;
           font-size: 0.98rem;
       }

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

   /* Tablet */
@media (max-width: 768px) {
    .gift-code {
         font-size: 14px;
        padding: 8px 18px;
        width: 100%;
        max-width: 280px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .gift-code {
        font-size: 14px;
        padding: 8px 18px;
        width: 100%;
        max-width: 280px;
    }
}

   .steps-section {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: 16px;
       padding: 30px 25px;
       margin: 30px 0;
       backdrop-filter: blur(10px);
       box-shadow: 0 8px 30px rgba(151, 0, 245, 0.15);
       transition: all 0.4s ease;
   }

   .steps-section:hover {
       transform: translateY(-4px);
       box-shadow: 0 15px 40px var(--primary-glow);
   }

   .steps-section strong {
       display: block;
       color: var(--primary);
       font-size: 1.35rem;
       font-weight: 700;
       margin: 28px 0 10px;
       background: linear-gradient(90deg, var(--primary), #d0aaff, var(--primary));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       letter-spacing: 0.5px;
   }

   .steps-section p {
       font-size: 1.05rem;
       color: var(--light);
       line-height: 1.65;
       margin: 0 0 20px 0;
   }

   .steps-section strong::after {
       content: '';
       display: block;
       width: 60px;
       height: 3px;
       background: linear-gradient(90deg, transparent, var(--primary), transparent);
       margin: 12px 0 0 0;

       border-radius: 3px;
   }

   /* Responsive adjustment */
   @media (max-width: 768px) {
       .steps-section {
           padding: 25px 18px;
       }

       .steps-section strong {
           font-size: 1.25rem;
           margin: 24px 0 8px;
       }

       .steps-section p {
           font-size: 1rem;
       }
   }

   ol {
       padding-left: 28px;
       font-size: 1.05rem;
       color: var(--light);
       margin: 15px 0;
   }

   li {
       margin-bottom: 10px;
   }



   .games-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 35px;
       margin: 40px 0;
   }

   .game-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: 24px;
       overflow: hidden;
       transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
       backdrop-filter: blur(12px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
       position: relative;
       display: flex;
       flex-direction: column;
       height: 100%;
      
   }

   .game-card:hover {
       transform: translateY(-15px) scale(1.05);
       box-shadow: 0 30px 70px var(--primary-glow);
       border-color: var(--primary);
   }

   .game-image {
       width: 100%;
       height: auto;
       /* Image height auto → card adapts */
       aspect-ratio: 509 / 300;
       /* Your original image ratio (509×300) */
       object-fit: cover;
       border-bottom: 4px solid var(--primary);
       transition: transform 0.5s ease;
   }

   .game-card:hover .game-image {
       transform: scale(1.08);
   }

   .game-content {
       padding: 28px 24px;
       text-align: left;
       flex-grow: 1;
       /* Content fills remaining space */
       display: flex;
       flex-direction: column;
   }

   .game-title {
       font-size: 1.65rem;
       font-weight: 800;
       margin-bottom: 14px;
       background: linear-gradient(90deg, var(--primary), #e0b0ff, var(--primary));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-size: 200% auto;
       animation: shine 4s linear infinite;
   }

   @keyframes shine {
       to {
           background-position: 200% center;
       }
   }

   .game-desc {
       font-size: 1.08rem;
       color: var(--gray-light);
       line-height: 1.7;
       flex-grow: 1;
       /* Description takes available space */
   }

   /* Mobile adjustments */
   @media (max-width: 768px) {
       .games-grid {
           grid-template-columns: 1fr;
           /* One column on mobile */
           gap: 25px;
       }

       .game-card {
           border-radius: 18px;
       }

       .game-title {
           font-size: 1.45rem;
       }

       .game-desc {
           font-size: 1rem;
       }
   }

   @media (max-width: 480px) {
       .game-content {
           padding: 20px 18px;
       }

       .game-title {
           font-size: 1.35rem;
       }
   }

   .features-list {
       list-style-type: disc;
       padding-left: 30px;
       font-size: 1.1rem;
       color: var(--light);
       margin: 25px 0;
   }

   .features-list li {
       margin-bottom: 12px;
   }



   .review-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: 14px;
       padding: 20px;
       margin: 20px 0;
       transition: all 0.3s ease;
   }

   .review-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 15px 30px var(--primary-glow);
   }

   .review-name {
       font-weight: 700;
       color: var(--primary);
       font-size: 1.2rem;
       margin-bottom: 10px;
   }

   .review-text {
       font-size: 1.05rem;
       color: var(--gray-light);
   }

   .comparison-table {
       width: 100%;
       border-collapse: collapse;
       background: var(--card-bg);
       border-radius: 16px;
       overflow: hidden;
       border: 1px solid var(--card-border);
       margin: 35px 0;
       font-size: 0.98rem;
   }

   .comparison-table th,
   .comparison-table td {
       padding: 14px 18px;
       text-align: left;
       border-bottom: 1px solid rgba(151, 0, 245, 0.15);
   }

   .comparison-table th {
       background: rgba(138, 5, 221, 0.22);
       color: var(--white);
       font-weight: 700;
       width: 40%;
   }

   .comparison-table td {
       color: var(--gray-light);
   }


   .payment-carousel-wrapper {
       overflow: hidden;
       margin: 40px 0;
       position: relative;
   }

   .payment-methods {
       display: flex;
       gap: 30px;
       animation: slowSlide 40s linear infinite;
       /* Slow sliding – 40 seconds per full cycle */
       width: max-content;
       /* Important for seamless loop */
   }

   .payment-methods:hover {
       animation-play-state: paused;
       /* Pause on hover */
   }

   @keyframes slowSlide {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
           /* Moves half way because items are duplicated */
       }
   }

   .payment-item {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: 18px;
       padding: 20px 30px;
       min-width: 180px;
       text-align: center;
       font-weight: 600;
       color: var(--primary);
       transition: all 0.4s ease;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 15px;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
   }

   .payment-item:hover {
       transform: translateY(-10px) scale(1.1);
       box-shadow: 0 25px 55px var(--primary-glow);
       border-color: var(--primary);
   }

   .payment-icon {
       width: 80px;
       /* Bigger icon size */
       height: 80px;
       object-fit: contain;
       border-radius: 16px;
       background: rgba(255, 255, 255, 0.08);
       padding: 10px;
       transition: transform 0.4s ease;
   }

   .payment-item:hover .payment-icon {
       transform: scale(1.2) rotate(5deg);
       /* Fun subtle rotation on hover */
   }

   .payment-item span {
       font-size: 1.1rem;
       color: var(--light);
   }

   /* Hide scrollbar for cleaner look */
   .payment-methods::-webkit-scrollbar {
       display: none;
   }

   .payment-methods {
       -ms-overflow-style: none;
       scrollbar-width: none;
   }

   .faq-item {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: 16px;
       margin: 20px 0;
       overflow: hidden;
       transition: all 0.4s ease;
       backdrop-filter: blur(8px);
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
   }

   .faq-item:hover {
       transform: translateY(-6px);
       box-shadow: 0 20px 50px var(--primary-glow);
       border-color: var(--primary);
   }

   .faq-question {
       padding: 22px 30px;
       font-size: 1.3rem;
       font-weight: 700;
       color: var(--primary);
       cursor: pointer;
       background: rgba(138, 5, 221, 0.15);
       display: flex;
       justify-content: space-between;
       align-items: center;
       transition: background 0.3s ease;
   }

   .faq-question:hover {
       background: rgba(138, 5, 221, 0.25);
   }

   .faq-question::after {
       content: '▼';
       font-size: 1.1rem;
       transition: transform 0.3s ease;
   }

   .faq-item.active .faq-question::after {
       transform: rotate(180deg);
   }

   .faq-answer {
       max-height: 0;
       overflow: hidden;
       padding: 0 30px;
       transition: all 0.5s ease;
       color: var(--gray-light);
       font-size: 1.08rem;
   }

   .faq-item.active .faq-answer {
       max-height: 800px;
       /* adjust as needed */
       padding: 25px 30px;
   }

   @media (max-width: 768px) {
       h1 {
           font-size: 2.2rem;
       }

       .faq-question {
           font-size: 1.2rem;
           padding: 18px 25px;
       }

       .faq-answer {
           font-size: 1rem;
       }
   }


   /* ess page */


   .wrap {
       max-width: 1220px;
       margin: 0 auto;
       padding: 40px 10px;
   }

   .intro-box {
       text-align: center;
       padding: 40px 30px 40px;
       background: linear-gradient(135deg, rgba(151, 0, 245, 0.22), rgba(138, 5, 221, 0.12), transparent);
       border-radius: 24px;
       margin-bottom: 60px;
       backdrop-filter: blur(12px);
       border: 1px solid var(--border);
       position: relative;
       overflow: hidden;
   }

   .intro-box::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(151, 0, 245, 0.18) 0%, transparent 60%);
       animation: fadePulse 18s infinite alternate;
       pointer-events: none;
   }

   @keyframes fadePulse {
       0% {
           transform: scale(1);
           opacity: 0.5;
       }

       100% {
           transform: scale(1.5);
           opacity: 0.15;
       }
   }

   .intro-box h1 {
       font-size: 3.2rem;
       background: linear-gradient(90deg, var(--white), var(--primary), #e0b0ff);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-bottom: 20px;
       font-weight: 800;
       letter-spacing: -1px;
   }


   .grid-values {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 25px;
       margin: 40px 0;
   }

   .value-box {
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 30px 25px;
       text-align: center;
       transition: all 0.4s ease;
       backdrop-filter: blur(10px);
   }

   .value-box:hover {
       transform: translateY(-10px);
       box-shadow: 0 25px 60px var(--primary-glow);
       border-color: var(--primary);
   }

   .value-name {
       font-size: 1.5rem;
       color: var(--primary);
       font-weight: 700;
       margin-bottom: 15px;
   }

   .promise-items {
       list-style: none;
       padding: 0;
       max-width: 1100px;
       margin: 30px auto;
   }

   .promise-items li {
       background: rgba(138, 5, 221, 0.15);
       border-radius: 12px;
       padding: 20px 25px;
       margin: 15px 0;
       font-size: 1.15rem;
       color: var(--light);

       border-left: 5px solid var(--primary);
   }

   .email-mark {
       font-weight: 600;
       color: #ffdd57;
       text-decoration: underline;
   }

   @media (max-width: 768px) {
       h1 {
           font-size: 2.5rem;
       }

       h2 {
           font-size: 2rem;
       }

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

   @media (max-width: 768px) {
       .wrap {
           padding: 40px 35px;
           /* Reduced padding for smaller screens */
       }
   }


   /* author */

   .author-hero {
       text-align: center;
       padding: 100px 30px 80px;
       background: linear-gradient(135deg, rgba(151, 0, 245, 0.28), rgba(138, 5, 221, 0.18), transparent);
       border-radius: 30px;
       margin-bottom: 80px;
       backdrop-filter: blur(14px);
       border: 1px solid var(--border);
       position: relative;
       overflow: hidden;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
   }

   .author-hero::before {
       content: '';
       position: absolute;
       top: -60%;
       left: -60%;
       width: 220%;
       height: 220%;
       background: radial-gradient(circle at 30% 40%, rgba(151, 0, 245, 0.25) 0%, transparent 55%);
       animation: authorPulse 20s infinite alternate;
       pointer-events: none;
   }

   @keyframes authorPulse {
       0% {
           transform: scale(1) rotate(0deg);
           opacity: 0.5;
       }

       100% {
           transform: scale(1.35) rotate(3deg);
           opacity: 0.18;
       }
   }

   .author-avatar {
       width: 420px;
       height: 420px;
       border-radius: 20%;
       object-fit: cover;
       border: 6px solid var(--primary);
       box-shadow: 0 0 40px var(--primary-glow),
           inset 0 0 20px rgba(151, 0, 245, 0.3);
       margin-bottom: 35px;
       transition: all 0.5s ease;
   }

   .author-avatar:hover {
       transform: scale(1.08) rotate(3deg);
       box-shadow: 0 0 70px var(--primary-glow),
           inset 0 0 30px rgba(151, 0, 245, 0.5);
   }

   h1.author-name {
       font-size: 3.6rem;
       background: linear-gradient(90deg, var(--white), var(--primary), #e0b0ff, var(--primary), var(--white));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-size: 300% auto;
       animation: shineName 8s linear infinite;
       margin-bottom: 15px;
       font-weight: 800;
       letter-spacing: -1px;
   }

   @keyframes shineName {
       to {
           background-position: 300% center;
       }
   }

   .author-role {
       font-size: 1.5rem;
       color: var(--primary);
       font-weight: 600;
       margin-bottom: 12px;
   }

   .author-exp {
       font-size: 1.25rem;
       color: var(--gray-light);
       margin-bottom: 40px;
       font-style: italic;
   }

   .author-bio {
       font-size: 1.22rem;
       color: var(--light);
       max-width: 1180px;
       margin: 0 auto 50px;
       line-height: 1.9;
       text-align: center;
   }

   .author-highlight {
       color: #ffdd57;
       font-weight: 600;
   }

   @media (max-width: 768px) {
       .author-avatar {
           width: 180px;
           height: 180px;
       }

       h1.author-name {
           font-size: 2.8rem;
       }

       .author-role {
           font-size: 1.35rem;
       }

       .author-exp {
           font-size: 1.15rem;
       }

       .author-bio {
           font-size: 1.1rem;
       }
   }


   .footer {
       background: linear-gradient(135deg, #9700f5, #8a05dd);
       color: white;
       padding: 20px 20px 20px;
       text-align: center;
       font-family: 'Segoe UI', system-ui, sans-serif;
       margin-top: 60px;
       box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
   }

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

   .footer-links {
       margin-bottom: 20px;
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       gap: 25px;
   }

   .footer-links a {
       color: white;
       text-decoration: none;
       font-size: 1rem;
       font-weight: 500;
       padding: 8px 12px;
       border-radius: 30px;
       transition: all 0.35s ease;
       letter-spacing: 0.5px;
   }

   .footer-links a:hover {
       background: rgba(255, 255, 255, 0.15);
       color: #ffdd57;
       transform: translateY(-3px);
       box-shadow: 0 8px 20px rgba(255, 221, 87, 0.3);
   }

   .footer-copyright {
       font-size: 0.95rem;
       opacity: 0.9;
       font-weight: 400;
   }

   /* ────────────────────────────────────────────────
   Mobile Responsive
───────────────────────────────────────────────── */
   @media (max-width: 768px) {
       .footer {
           padding: 40px 15px 25px;
       }

       .footer-links {
           flex-direction: column;
           gap: 18px;
       }

       .footer-links a {
           font-size: 1.05rem;
           padding: 10px 0;
       }
   }

   @media (max-width: 480px) {
       .footer {
           padding: 35px 12px 20px;
       }

       .footer-links a {
           font-size: 1rem;
       }

       .footer-copyright {
           font-size: 0.9rem;
       }
   }



   .carousel-container {
       max-width: 1100px;
       margin: 80px auto;
       position: relative;
   }

   .carousel {
       width: 100%;
       height: 450px;
       overflow: hidden;
       border-radius: 24px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7),
           inset 0 0 0 1px rgba(255, 255, 255, 0.08);
       background: #111;
       position: relative;
   }

   .slides {
       display: flex;
       height: 100%;
       transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
       will-change: transform;
   }

   .slide {
       min-width: 100%;
       height: 100%;
       position: relative;
       flex-shrink: 0;
   }

   .slide img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   /* Gradient overlay + shine effect */
   .slide::after {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg,
               rgba(0, 0, 0, 0.15) 0%,
               rgba(0, 0, 0, 0.4) 100%);
       opacity: 0.6;
       transition: opacity 0.4s;
       pointer-events: none;
   }

   .slide:hover::after {
       opacity: 0.3;
   }

   /* Navigation buttons */
   .nav-btn {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 60px;
       height: 60px;
       background: rgba(30, 30, 50, 0.7);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.12);
       border-radius: 50%;
       color: white;
       font-size: 24px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       z-index: 10;
   }

   .nav-btn:hover {
       background: rgba(60, 60, 90, 0.9);
       transform: translateY(-50%) scale(1.1);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   }

   .prev {
       left: 20px;
   }

   .next {
       right: 20px;
   }

   /* Dots */
   .dots {
       position: absolute;
       bottom: 24px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       gap: 14px;
       z-index: 10;
   }

   .dot {
       width: 14px;
       height: 14px;
       background: rgba(255, 255, 255, 0.3);
       border-radius: 50%;
       cursor: pointer;
       transition: all 0.4s ease;
       border: 2px solid transparent;
   }

   .dot.active,
   .dot:hover {
       background: white;
       transform: scale(1.3);
       box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
   }

   /* Title / label (optional) */
   .slide-title {
       position: absolute;
       bottom: 40px;
       left: 50px;
       right: 50px;
       color: white;
       font-size: 2.2rem;
       font-weight: 700;
       text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
       pointer-events: none;
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.7s ease;
       z-index: 5;
   }

   .slide.active .slide-title {
       opacity: 1;
       transform: translateY(0);
   }


   .img-slider-box {
       width: 100%;
       overflow: hidden;
       padding: 40px 0;
       position: relative;
   }

   /* slider track */

   .img-slider-track {
       display: flex;
       gap: 35px;
       width: max-content;
       animation: sliderMove 60s linear infinite;
   }

   .img-slider-box:hover .img-slider-track {
       animation-play-state: paused;
   }

   /* card design */

   .img-card {
       min-width: 250px;
       height: 440px;
       border-radius: 18px;
       overflow: hidden;
       position: relative;
       background: #fff;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
       transition: 0.5s ease;
       animation: cardFloat 5s ease-in-out infinite;
   }

   /* image */

   .img-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: 0.6s;
   }

   /* hover animation */

   .img-card:hover {
       transform: translateY(-12px) scale(1.04);
       box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
   }

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

   /* glow effect */

   .img-card::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: 18px;
       box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.25);
       opacity: 0;
       transition: 0.4s;
   }

   .img-card:hover::after {
       opacity: 1;
   }

   /* floating animation */

   @keyframes cardFloat {
       0% {
           transform: translateY(0px);
       }

       50% {
           transform: translateY(-6px);
       }

       100% {
           transform: translateY(0px);
       }
   }

   /* slider animation */

   @keyframes sliderMove {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }
   }

   /* side fade effect */

   .img-slider-box::before,
   .img-slider-box::after {
       content: "";
       position: absolute;
       top: 0;
       width: 120px;
       height: 100%;
       z-index: 2;
   }

   .img-slider-box::before {
       left: 0;
       background: linear-gradient(to right, #ffffff, transparent);
   }

   .img-slider-box::after {
       right: 0;
       background: linear-gradient(to left, #ffffff, transparent);
   }

   /* mobile */

   @media(max-width:768px) {

       .img-card {
           min-width: 160px;
           height: 280px;
       }

       .img-slider-track {
           gap: 20px;
           animation: sliderMove 40s linear infinite;
       }

   }


   .main-img {
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 70px 0;
   }

   .main-img img {
       width: 100%;
       max-width: 300px;
       height: auto;
       border-radius: 14px;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
       transition: 0.4s ease;
   }

   /* hover effect */

   .main-img img:hover {
       transform: scale(1.04);
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
   }

   /* mobile responsive */

   @media (max-width:768px) {

       .main-img {
           margin: 20px 0;
           padding: 0 12px;
       }

       .main-img img {
           max-width: 100%;
       }

   }

/* Table of Contents Container */
.table-of-contents{
  width:100%;
  max-width:520px;              
  margin:50px 20px;   /* center ki jagah left */
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
  border:1px solid #eee;
  overflow:hidden;
  font-family:'Poppins', sans-serif;
  transition:all 0.3s ease;
}

/* Header Button */
.toc-header{
  background:linear-gradient(135deg,#8d04e2,#a83cff);
  color:#fff;
  padding:14px 18px;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  letter-spacing:0.3px;
  transition:0.3s;
}
.toc-header:hover{
  background:linear-gradient(135deg,#7a03c4,#9729ff);
}

/* List Area */
#toc-list{
  display:none;
  padding:18px 22px;
  background:#faf7ff;
  animation:fadeIn 0.3s ease;
}

/* TOC List */
#toc-list ul{
  list-style:none;
  padding:0;
  margin:0;
}

/* Each Item */
#toc-list li{
  margin:8px 0;
}

/* Link Style */
#toc-list li a{
  display:block;
  padding:10px 14px;
  border-radius:8px;
  background:#ffffff;
  border:1px solid #eee;
  font-size:15px;
  font-weight:500;
  color:#333;
  text-decoration:none;
  position:relative;
  transition:all 0.3s ease;
}

/* Left Accent Line */
#toc-list li a::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:4px;
  background:#8d04e2;
  border-radius:8px 0 0 8px;
  opacity:0;
  transition:0.3s;
}

/* Hover Effect */
#toc-list li a:hover{
  background:#f6efff;
  color:#8d04e2;
  transform:translateX(4px);
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

#toc-list li a:hover::before{
  opacity:1;
}

/* Sub List */
#toc-list ul ul{
  margin-top:6px;
  padding-left:18px;
}

/* Sub List Links */
#toc-list ul ul li a{
  background:#faf7ff;
  font-size:14px;
}

/* Animation */
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(-5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width:768px){

  .table-of-contents{
    max-width:100%;
    margin:20px 0;
  }

  .toc-header{
    font-size:16px;
    padding:12px 15px;
  }

  #toc-list a{
    font-size:14px;
  }

}