.section {
     margin: 0 auto;
     padding: 40px 0px;
 }

 .step-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 40px;
 }

 .step-header .titles {
     max-width: 60%;
 }

 .step-header h4 {
     color: #8C8FA6;
     font-weight: normal;
     margin: 0 0 10px 0;
     font-size: 16px;
 }

 .step-header h1 {
     font-size: 48px;
     margin: 0;
 }

 .get-started-btn {
     background: linear-gradient(to right, #845ef7, #d17fff);
     border: none;
     border-radius: 8px;
     padding: 12px 24px;
     font-size: 16px;
     color: white;
     cursor: pointer;
 }

 .card-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
 }

 .cardHeader {
     opacity: 0.9;
     background: linear-gradient(to right, #30E2BE, #6FD5FF);
     height: 22px;
     position: relative;
     width: 110%;
     /* margin: 0 auto; */
     left: -5%;
     margin-top: -30px;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;

 }

 .cardHeader1 {
     opacity: 0.9;
     background: linear-gradient(to right, #6FD5FF, #7C88FF);
     height: 22px;
     position: relative;
     width: 90%;
     /* margin: 0 auto; */
     left: -9%;
     margin-top: -30px;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;

 }

 .cardHeader2 {
     opacity: 0.9;
     background: linear-gradient(to right, #E475F7, #FFA78D);
     height: 22px;
     position: relative;
     width: 110%;
     /* margin: 0 auto; */
     left: -5%;
     margin-top: -30px;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;

 }

 .card {
     background: linear-gradient(145deg, #0F1326, #0F1326);
     border-radius: 20px;
     padding: 30px;
     position: relative;

 }

 .card h2 {
     font-size: 22px;
     margin-bottom: 10px;
 }

 .card p {
     color: #A0A0B3;
     font-size: 14px;
     line-height: 1.5;
 }

 .card .number {
     position: absolute;
     bottom: 20px;
     right: 20px;
     font-size: 60px;
     font-weight: bold;
     opacity: 0.9;
     background: linear-gradient(to right, #30E2BE, #6FD5FF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .card:nth-child(2) .number {
     background: linear-gradient(to right, #6FD5FF, #7C88FF);
     -webkit-background-clip: text;
 }

 .card:nth-child(3) .number {
     background: linear-gradient(to right, #E475F7, #FFA78D);
     -webkit-background-clip: text;
 }


 .card .icon {
     font-size: 28px;
     margin-bottom: px;
     margin-top: 20px
 }

 @media (max-width: 768px) {
     .card-container {
         grid-template-columns: 1fr;
     }

     .step-header {
         flex-direction: column;
         align-items: flex-start;
     }

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

 h1 {
     font-size: 4rem;
     font-weight: 600;
     margin: 0;
 }

 h1 span {
     display: block;
     color: #e4a8f1 !important;
     font-weight: 400;
 }

 p.subtitle {
     color: #bcbcbc;
     margin: 2rem 0 3rem;
     font-size: 1.1rem;
 }

 .info {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     font-size: 0.95rem;
     margin-top: 3rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 2rem;
 }

 .info div {
     flex: 1 1 25%;
     min-width: 250px;
     margin: 0.5rem 0;
 }

 .info strong {
     display: block;
     color: #d8a7f1;
     margin-bottom: 0.4rem;
 }

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

 .location-toggle {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 1rem;
 }

 .location-toggle span {
     margin: 0 0.5rem;
     font-size: 0.95rem;
 }

 .switch {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 24px;
 }

 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: 0.4s;
     border-radius: 24px;
 }

 .slider:before {
     position: absolute;
     content: "";
     height: 18px;
     width: 18px;
     left: 3px;
     bottom: 3px;
     background-color: white;
     transition: 0.4s;
     border-radius: 50%;
 }

 input:checked+.slider {
     background-color: #9a55d3;
 }

 input:checked+.slider:before {
     transform: translateX(26px);
 }

 .address {
     text-align: center;
     margin-top: 1rem;
     font-size: 0.95rem;
     color: white;
 }