@charset "utf-8";




/* GLOBAL FIX */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #0F0B1A !important;
  overflow-x: hidden;
}

/* CSS mein use karo */
h1, h2, h3, .logo { font-family: 'Plus Jakarta Sans', sans-serif; }
body, p, button, nav { font-family: 'Inter', sans-serif; }

.gradient-text {
  background: linear-gradient(
    145deg,
    #4B0082,
    #8A2BE2,
    #C77DFF,
	#C77DFF,
	#8A2BE2,
    #4B0082
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ======================= Navbar ======================= */
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item.active {
  background: linear-gradient(
    135deg,
    #4B0082,
    #8A2BE2,
    #C77DFF,
	#C77DFF,
	#8A2BE2,
    #4B0082
  );
  color: white;
}
.navbar {
  background: #0F0B1A;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 0;
}
.navbar-toggler{
	background: linear-gradient(
    135deg,
    #4B0082,
    #8A2BE2,
    #C77DFF,
	#C77DFF,
	#8A2BE2,
    #4B0082
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navbar-brand {
  font-weight: 600;
  font-size: 20px;
  color: whitesmoke !important;
  font-family: 'Poppins', sans-serif;
}
/* NAV LINK */
.nav-link {
  font-family: 'Poppins', sans-serif;
  color: #fff !important;
  font-weight: 500;
  margin-right: 15px;
  position: relative;
}

/* HOVER */
.nav-link:hover {
  background: linear-gradient(
    145deg,
    #4B0082,
    #8A2BE2,
    #C77DFF,
	#C77DFF,
	#8A2BE2,
    #4B0082
   
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ACTIVE (IMPORTANT 🔥) */
.nav-link.active {
  background: linear-gradient(
    145deg,
   #4B0082,
    #8A2BE2,
    #C77DFF,
	#C77DFF,
	#8A2BE2,
    #4B0082
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* UNDERLINE EFFECT */
.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
   background: linear-gradient(
    135deg,
    #4B0082,
    #8A2BE2,
    #C77DFF,
    #E0AAFF
  );
  left: 0;
  bottom: -4px;
  transition: 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link {
  font-family: 'Poppins', sans-serif;
  color: #fff !important;
  font-weight: 500;
  margin-right: 15px;
}

.nav-link:hover {
  color: #A67CF8 !important;
}

.dropdown-menu {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 10px;
}

.btn-primary {
  background: linear-gradient(135deg, #4B0082, #8A2BE2, #C77DFF);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: 600;
  transition: 0.3s;
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}
.category-pill{
	background: linear-gradient(135deg, #4B0082, #8A2BE2, #C77DFF);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: 600;
  transition: 0.3s;
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(199, 125, 255, 0.8);
}
.cta-btn {
  background: #111827;
  color: white !important;
  border-radius: 8px;
  padding: 6px 14px;
}

.cta-btn:hover {
  background: #000;
}

/* ================= SECTION 1 ================= */
.choose-section{
  background:#0b0218;
  padding:60px 20px;
  text-align:center;
}

.choose-section h1{
  color:white;
  font-size:40px;
  font-weight:bold;
}

.choose-section p{
  color:#ddd;
  margin-bottom:40px;
}

.box-area{
  display:flex;
  gap:30px;
  justify-content:center;
  flex-wrap:wrap;
}

.card-box{
  background:white;
  width:350px;
  padding:30px;
  border-radius:20px;
  box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

.card-box h2{
  font-size:28px;
  margin-bottom:15px;
}

.card-box p{
  color:#555;
  margin-bottom:25px;
}

.card-box a{
  display:inline-block;
  background:#8a2be2;
  color:white;
  padding:12px 25px;
  border-radius:30px;
  text-decoration:none;
}

.card-box a:hover{
  background:#6a1bbd;
}
.s1 {
  background-color: #0F0B1A !important;
}

.hero {
  font-family: 'Poppins', sans-serif;
  background: url("images/hero.png") no-repeat center;
  background-size: cover;

  min-height: 500px; /* thoda bada kar */
  padding: 60px 20px;

  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  overflow: hidden; /* important */
}


/* 📱 Mobile Fix */
@media (max-width: 768px) {
  .hero {
    background-size: contain; /* full image dikhayega */
    background-position: top center; /* dragon cut nahi hoga */
    min-height: 400px;
  }
}
.hero::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  top: 0;
  left: 0;
}

.hero-content {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 700px;
}

.hero1 {
  font-family: 'Poppins', sans-serif;
  background: url( "images/bg1.png") no-repeat center;
  background-size: cover;

  min-height: 500px; /* thoda bada kar */
  padding: 60px 20px;

  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  overflow: hidden; /* important */
}
.hero1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  top: 0;
  left: 0;
}

.hero-content {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 700px;
}

/* SEARCH BOX FIX */
.search-box {
  background: white;
  border-radius: 50px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-box input {
  border: none;
  outline: none;
  flex: 1;
  padding: 8px;
  border-radius: 50px;
  width: 100%;
}

.search-btn {
   background: linear-gradient(
    135deg,
    #4B0082,
    #8A2BE2,
    #C77DFF,
	#C77DFF,
	#8A2BE2,
    #4B0082
  );
  border: none;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

/* CATEGORY */
.category-pill {
  background: white;
  color: black;
  border-radius: 50px;
  padding: 5px 15px;
  margin: 5px;
  font-size: 14px;
  display: inline-block;
}

/* ================= SECTION 2 ================= */

.s2 {
  background: white;
}

.s2_c {
  border: 2px solid #ddd;
  transition: 0.3s;
}

.s2_c:hover {
  border-color: #6C3DE0 !important;
}

/* ================= SECTION 3 ================= */

.s3 {
  background-color: #f7f6ff;
}

.step-num {
  width: 40px;
  height: 40px;
  background: linear-gradient(
    145deg,
    #4B0082,
    #8A2BE2,
    #C77DFF,
	#C77DFF,
	#8A2BE2,
    #4B0082
  );
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-weight: bold;
}

/* ================= MOBILE FIX ================= */

@media (max-width: 768px) {

  .hero {
    padding: 30px 15px;
  }

  .search-box {
    flex-direction: row;
  }

  .category-pill {
    font-size: 12px;
    padding: 4px 10px;
  }

}
/* ===================================== Section 5 =========================== */

.s5{
	background-color: #FFFFFF;
}
/* Open accordion background */
.accordion-button{
  background:#ffffff;
  color:#111;
  border:1px solid #eee;
}

.accordion-button:not(.collapsed){
  background:#f3edff;
  color:#6f42c1;
}

/* Focus blue border remove */
.accordion-button:focus{
    box-shadow: none;
    border-color: transparent;
}


/* ======================== Footer Section ============ */
/* FOOTER */
.footer{background:#050510;border-top:1px solid rgba(124,58,237,.18);padding:55px 0 0}
.fbrand{font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:800;color:#fff}
.fbrand span{color:#a78bfa}
.fdesc{color: #8892a4;font-size:.82rem;line-height:1.7;margin-top:8px}
.ftitle2{color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.5px;margin-bottom:14px;text-transform:uppercase}
.flink{display:block;color:#8892a4;text-decoration:none;font-size:.82rem;margin-bottom:7px;transition:color .25s}
.flink:hover{color:#a78bfa}
.soc{width:36px;height:36px;border-radius:9px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.22);display:inline-flex;align-items:center;justify-content:center;color:#8892a4; font-size:.9rem;text-decoration:none;margin-right:7px;transition:all .3s}
.soc:hover{background:linear-gradient(135deg,#4B0082,#8A2BE2,#C77DFF,#C77DFF,#8A2BE2,#4B0082);border-color:transparent;color:#fff;transform:translateY(-3px);box-shadow:0 6px 16px rgba(124,58,237,.4)}
.fbot{border-top:1px solid rgba(255,255,255,.05);padding:18px 0;margin-top:36px;text-align:center;color:#8892a4;font-size:.78rem}
.fbot span{color:#a78bfa}
	
.demo-wrap {
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 80px;
    background: #09090f;
    border-radius: 16px;
    position: relative;
    font-family: 'DM Sans', sans-serif;
  }

  /* ── ICON BUTTON ── */
  .qw-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(160,100,255,0.32);
    background: rgba(168,85,247,0.07);
    color: rgba(200,185,230,0.7);
    cursor: pointer;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    position: relative;
    outline: none;
  }
  .qw-icon-btn svg {
    width: 18px;
    height: 18px;
    transition: all .28s cubic-bezier(.4,0,.2,1);
  }
  .qw-icon-btn:hover,
  .qw-icon-btn:focus-visible,
  .qw-icon-btn.is-active {
    border-color: #a855f7;
    background: rgba(168,85,247,0.18);
    color: #e9d5ff;
    transform: translateY(-3px) scale(1.07);
    box-shadow: 0 0 22px rgba(168,85,247,0.38), 0 0 50px rgba(168,85,247,0.14);
  }

  /* ── LEGAL WRAPPER ── */
  .qw-legal-wrap {
    position: relative;
  }

  /* ── POPUP ── */
  .qw-popup {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(12px) scale(0.95);
    width: 230px;
    background: rgba(5,3,10,0.98);
    border: 1px solid rgba(168,85,247,0.26);
    border-radius: 18px;
    backdrop-filter: blur(36px) saturate(1.6);
    box-shadow:
      0 0 0 1px rgba(168,85,247,0.05),
      0 10px 48px rgba(0,0,0,0.2),
      0 0 70px rgba(168,85,247,0.2),
      inset 0 1px 0 rgba(255,255,255,0.06);
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    z-index: 100;
  }
  .qw-popup.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  .qw-popup::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 13px;
    height: 13px;
    background: rgba(13,9,24,0.88);
    border-right: 1px solid rgba(168,85,247,0.26);
    border-bottom: 1px solid rgba(168,85,247,0.26);
  }

  /* ── POPUP LABEL ── */
  .qw-popup-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(168,85,247,0.65);
    padding: 6px 12px 8px;
    font-family: 'Syne', sans-serif;
  }

  /* ── POPUP ITEMS ── */
  .qw-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(220,205,245,0.82);
    font-size: 0.83rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: all .24s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
  }
  .qw-popup-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.65;
    transition: all .24s cubic-bezier(.4,0,.2,1);
  }
  .qw-popup-item:hover {
    background: rgba(168,85,247,0.14);
    color: #ede1ff;
    text-decoration: none;
  }
  .qw-popup-item:hover svg {
    opacity: 1;
    color: #c084fc;
  }

  /* ── DIVIDER ── */
  .qw-popup-divider {
    height: 1px;
    background: rgba(168,85,247,0.09);
    margin: 3px 12px;
  }