/* Custom logo styling */
/* Nav Strat */

.logo-text span {
  color: #3B82F6;
  /* blue-500 */
  font-weight: bold;
}

.dropdown-menu {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.btn-signin {
  background-color: #3B82F6;
  color: #fff;
  padding: 6px 20px;
  border-radius: 999px;
  font-weight: 500;
  transition: 0.3s;
}

.btn-signin:hover {
  background-color: #2563EB;
}

.nav-item {
  margin: 0px 20px;
}

.dropdown-item {
  margin: 10px;
}

.dropdown-item i {
  color: #3B82F6;
}

/* Nav End */

/* Hero Section */
.hero-section {
  background-color: #f8f9fa;
  padding: 100px 15px;
  text-align: center;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3.5rem;
  }
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-top: 20px;
  margin-bottom: 30px;
  color: #343a40;
}

.hero-button {
  font-size: 1rem;
  padding: 12px 24px;
}

/* Hero End */

/* Carousal */
.carousel-item img {
  object-fit: cover;
  height: 300px;
}

/* How it work */
.step-card {
  border-radius: 20px;
  color: white;
  padding: 30px;
  min-height: 320px;
}

.bg-step-1 {
  background-color: #66b3ff;
}

.bg-step-2 {
  background-color: #0056d2;
}

.bg-step-3 {
  background-color: #3c70ff;
}

.step-icon {
  font-size: 40px;
  margin-bottom: 20px;
}

/* End */
@media screen and (max-width: 375px) {

  /* CSS rules go here */
  .carousel-item img {
    height: 100px;
    width: 5%;
  }
}

@media (min-width: 768px) {
  .carousel-item img {
    height: 500px;
  }

  .step-card {
    margin-bottom: 20px;
  }
}


/* End */
/* Our vision CSS Start */
.vision-card {
  border-radius: 20px;
  color: white;
  padding: 30px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.bg-blue {
  background: linear-gradient(135deg, #3c70ff, #2657d8);
}

.bg-purple {
  background: linear-gradient(135deg, #a36cf2, #8938ff);
}

.bg-dark-theme {
  background-color: #111111;
  position: relative;
  overflow: hidden;
}

.bg-dark-theme::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.3), transparent 70%);
  animation: rotate 20s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.vision-card>* {
  position: relative;
  z-index: 1;
}

.vision-title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.vision-number {
  font-size: 2rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .vision-card {
    margin-bottom: 20px;
  }
}

/* Our vision CSS End */
/* Way to Earn CSS Start */
.card1 {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.card1:hover {
  transform: translateY(-5px);
}

.icon {
  font-size: 2.5rem;
}

.btn-learn {
  background-color: #f2f6ff;
  color: #2f54eb;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  font-weight: 500;
}

.btn-learn:hover {
  background-color: #d6e4ff;
}

/* Way to Earn CSS End */
/* contact us page CSS Start */
#contact-body {
  background-color: #f1f4f8;
  font-family: 'Segoe UI', sans-serif;
}

.contact-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.contact-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  width: 100%;
}

.contact-info {
  background: #0d6efd;
  color: white;
  padding: 40px;
}

.contact-info h2 {
  font-weight: bold;
}

.contact-info p {
  margin: 20px 0;
}

.contact-form {
  padding: 40px;
}

.form-control,
.btn {
  border-radius: 10px;
}

/* contact us page CSS End */