@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 ============ */
.text_1{
	color: white;
}
.footer-link {
  color: #9ca3af;
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
  transition: 0.3s;
}

.footer-link:hover {
   background: linear-gradient(
    145deg,
    #4B0082,
    #8A2BE2,
    #C77DFF,
	#C77DFF,
	#8A2BE2,
    #4B0082
   
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.social-icon {
  font-size: 18px;
  margin-right: 10px;
  color: #9ca3af;
  text-decoration: none;
}

.social-icon:hover {
  color: #6C3DE0;
}