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

    body {
      /*font-family: ui-sans-serif, system-ui, sans-serif, 
               "Apple Color Emoji", "Segoe UI Emoji", 
               "Segoe UI Symbol", "Noto Color Emoji";
			   */
		font-family: 'Geist', sans-serif;
      background-color: #f9f9f9;
	  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
      line-height: 1.6;
    }
	
	h1, h2, h3, h4, h5 {
		color: rgb(31 41 55 / var(--tw-text-opacity, 1))
	}

    /* Sticky Navigation Bar */
    .navbar {
      background-color: #007bff;
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 1rem 2rem;
      width: 100%;
    }

    .navbar ul {
      list-style-type: none;
      display: flex;
      justify-content: center;
      gap: 2rem;
    }

    .navbar ul li {
      font-size: 1.1rem;
    }

    .navbar ul li a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    .navbar ul li a:hover {
      text-decoration: underline;
    }

    /* Hero Section */
    .hero {
      text-align: center;
      padding: 9rem 2rem;
      background-color: #fff;
    }

    .hero h1 {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.25rem;
      margin-bottom: 2rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero a {
      display: inline-block;
      padding: 12px 24px;
      background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
      color: white;
      font-weight: bold;
      border-radius: 30px;
      text-decoration: none;
    }

    .hero a:hover {
      background-color: #218838;
    }

    /* How It Works Section */
    .how-it-works {
		padding: 4rem 1rem;
		background-color: #f9f9f9;
		text-align: center;
	  }

	  .how-it-works h2 {
		font-size: 2rem;
		margin-bottom: 1rem;
	  }

	  .how-it-works .steps {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;
		margin-top: 2rem;
	  }

	  .how-it-works .step {
		background: white;
		padding: 1.5rem;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		max-width: 300px;
		flex: 1 1 280px;
		text-align: left;
	  }

	  .how-it-works .step h3 {
		font-size: 1.25rem;
		margin-bottom: 0.5rem;
		color: #333;
	  }

	  .how-it-works .step p {
		font-size: 0.95rem;
		color: #555;
	  }

	  @media (max-width: 768px) {
		.how-it-works .steps {
		  flex-direction: column;
		  align-items: center;
		}
	  }

    /* Footer Section */
    .footer {
      background-color: #007bff;
      padding: 3rem 2rem;
      text-align: center;
      color: white;
    }

    .footer h4 {
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }

    .footer a {
      color: #e1e1e1;
      text-decoration: none;
      margin: 0 10px;
    }

    .footer a:hover {
      color: white;
    }
	
	.text-white {
		color: #ffffff;
	}
	
	/* Keep your existing desktop styles */
	.main-menu {
	  background: #fff;
	  padding: 15px 30px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  position: fixed;
	  width: 100%;
	  top: 0;
	  left: 0;
	  /*box-shadow: 5px 1px 8px #e1e1e1;*/
	  z-index: 1000;
	}

	.main-menu .logo a {
	  font-size: 20px;
	  font-weight: bold;
	  color: #333;
	  text-decoration: none;
	}

	.main-menu .menu-links {
	  display: flex;
	  gap: 15px;
	}

	.main-menu .menu-links a {
	  text-decoration: none;
	  color: #333;
	  font-weight: 500;
	  padding: 5px 10px;
	  transition: background 0.2s ease;
	  font-weight: normal;
	}

	.main-menu .menu-links a:hover {
	  text-decoration: underline;
	  border-radius: 4px;
	}
	
	.search {
		padding:9px 30px!important;
		border:1px solid #ccc!important;
		border-radius:5px!important;
		font-size: 16px!important;
		transition:border 0.3s!important;
		border-radius:30px!important;
		background:#f1f1f1!important;
		margin-left: 30px!important;
		width: auto!important;
		margin:0!important;
		margin-left: 30px!important;
	}

	/* Hamburger */
	.menu-toggle {
	  display: none;
	  flex-direction: column;
	  gap: 4px;
	  cursor: pointer;
	}

	.menu-toggle div {
	  width: 25px;
	  height: 3px;
	  background: #333;
	  transition: all 0.3s ease;
	}

	/* Fullscreen mobile menu */
	.fullscreen-menu {
	  display: none;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background: #fff;
	  z-index: 9999;
	  padding: 40px;
	  text-align: center;
	}

	.fullscreen-menu a {
	  margin: 10px 0;
	  font-size: 22px;
	  font-weight: bold;
	  color: #333;
	  text-decoration: none;
	}

	.fullscreen-menu a:hover {
	  color: #0077cc;
	}

	.fullscreen-menu .close-btn {
	  position: absolute;
	  top: 20px;
	  right: 30px;
	  font-size: 28px;
	  cursor: pointer;
	  font-weight: bold;
	  color: #333;
	}

	/* Show hamburger and hide menu on mobile */
	@media (max-width: 768px) {
	  .main-menu .menu-links {
		display: none;
	  }

	  .menu-toggle {
		display: flex;
	  }
	}


    /* Responsive Layout */
    @media (min-width: 768px) {
      .how-it-works .steps {
        gap: 5rem;
      }
    }