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

      body {
          font-family: Arial, sans-serif;
          line-height: 1.6;
          background-color: #f4f4f4;
          color: #333;
      }

      .containers {
          width: 360px;
          height: 480px;
          margin: 4% auto;
          background: #fff;
          border-radius: 5px;
          position: relative;
          overflow: hidden;
      }

      .containers h3 {
          text-align: center;
          text-transform: uppercase;
          margin-bottom: 40px;
          color: #777;
      }

      .containers .tab {
          width: 280px;
          position: absolute;
          top: 100px;
          left: 40px;
          transition: 0.5s;
      }

      .tab {
          display: flex;
          flex-direction: column;
      }

      /* Info Bar */
      .info-bar {
          background-color: #e74c3c;
          color: white;
          text-align: center;
          padding: 10px;
          font-size: 16px;
      }

      /* Header */
      .header {
          background-color: #34495e;
          color: white;
          text-align: center;
          padding: 30px 20px;
          text-transform: uppercase;
      }

      .header h1 {
          font-size: 36px;
          margin: 0px 0 10px 50px;

      }

      .header p {
          font-size: 18px;
      }

      /* Navbar */
      .navbar {
          background-color: #2c3e50;
          color: white;
          padding: 15px 0;
      }

      .navbar ul {
          list-style: none;
          display: flex;
      }

      .navbar ul li {
          margin-right: 15px;
      }

      .navbar ul li a {
          color: white;
          text-decoration: none;
          font-size: 16px;
      }

      .auth-buttons {
          display: flex;
      }

      .auth-buttons a {
          color: white;
          text-decoration: none;
          margin-left: 15px;
          padding: 8px 12px;
          border: 1px solid white;
          border-radius: 5px;
      }

      .auth-buttons a:hover {
          background-color: white;
          color: #2c3e50;
      }

      /* Sidebar */
      .sidebar {
          width: 100%;
          height: 30vh;
          background-color: #2c3e50;
          color: white;
          padding: 20px;
          margin-bottom: 10px;
      }

      .sidebar h3 {
          margin-bottom: 20px;
          font-size: 20px;
      }

      .sidebar ul {
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-content: center;
      }

      .sidebar ul li {
          border: 1px solid;
          border-radius: 5px;
          padding: 2%;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }

      .sidebar ul li span {
          font-weight: bold;
      }

      /* Main Content */
      .main-content {
          justify-content: center;
          padding: 30px 70px;
      }

      /* Search Section */
      .search-section {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-bottom: 30px;
      }

      /* About & How It Works Sections */
      .about-section,
      .how-it-works-section {
          background-color: white;
          padding: 50px 0;
          text-align: center;
      }

      .steps {
          display: flex;
          justify-content: space-around;
          margin-top: 30px;
      }

      .step {
          width: 30%;
          padding: 20px;
          background-color: #f4f4f4;
          border-radius: 8px;
      }

      .step h3 {
          color: #e74c3c;
          margin-bottom: 15px;
      }

      /* Footer */
      .main-footer {
          background-color: #34495e;
          color: white;
          text-align: center;
          padding: 20px 0;
          text-transform: capitalize;
      }

      .main-footer a {
          color: white;
          text-decoration: underline;
      }

      .main-footer a:hover {
          text-decoration: none;
      }

      .card-body {
          display: flex;
          flex-direction: column;
          align-items: center;
      }

      .containers .tab {
          width: 280px;
          position: absolute;
          top: 40px;
          left: 40px;
          transition: 0.5s;
      }

      .tab {
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      .tab input {
          width: 100%;
          padding: 10px 5px 10px 40px;
          margin: 5px 0;
          border: 0;
          border-bottom: 1px solid #999;
          outline: none;
          background: transparent;
          color: black;
      }

      .box {
          display: flex;
          gap: 80%;
      }

      .bi-person,
      .bi-lock {
          position: relative;
          top: -40px;
          left: 2px;
          color: black;
      }

      .bi-eye {
          position: relative;
          top: -40px;
          left: 80%;
          color: black;
          cursor: pointer;
      }

      .bi-eye-slash {
          position: relative;
          top: -40px;
          left: 80%;
          color: black;
          cursor: pointer;
      }

      .res {
          position: relative;
          top: -20px;
          left: 2px;
          color: red;
      }

      i {
          color: black;
      }

      ::placeholder {
          color: black;
          text-transform: capitalize;
      }

      .btn-box {
          display: flex;
          width: 100%;
          margin: 30px auto;
          text-align: center;
      }

      .tab button {
          width: 110%;
          height: 35px;
          margin: 0 10px;
          border-radius: 30px;
          border: 0;
          color: black;
          cursor: pointer;
      }

      .submit:hover {
          box-shadow: 1px 5px 7px 1px rgba(5, 5, 5, 5.7);
      }

      h3 a {
          text-decoration: none;
          color: white;
      }

      a {
          text-decoration: none;
      }

      /* Responsive Design */
      @media (max-width: 768px) {
          .container {
              flex-direction: column;
          }

          /* Main Content */
          .main-content {
              justify-content: center;
              padding: 10px;
          }

          .card-body {
              overflow: auto;
          }

          .navbar ul {
              flex-direction: column;
              text-align: center;
          }

          .navbar ul li {
              margin-bottom: 10px;
          }

          .sidebar {
              display: none;
          }

          .main-content {
              margin-left: 0;
          }

          .steps {
              flex-direction: column;
          }

          .step {
              width: 100%;
              margin-bottom: 20px;
          }

          .search-bar {
              width: 80%;
          }
      }

      .form-group {
          display: flex;
          flex-direction: column;
          margin-top: 10px;
      }