* {

     margin: 0;
     padding: 0;
     box-sizing: border-box;
     --yellow: #FFD600;
     --white: #FFFFFF;
     --light-green: #00C853;
     --orange: #FF6D00;
     --dark-green: #1B5E20;
     --blue: #2962FF;
     --royal-blue: #1D4ED8;
     --dark-gray: #6c7177;
     --profit-green: #10B981;
     --warm-orange: #F59E0B;
     --home-offer-width: 175px;
     --home-offer-height: 240px;
     --stack-offset-y: 20px;
     --stack-rotate-step: 5deg;
     --perspective: 1000px;
     --hover-distance: 50px;
     --transition-duration: 0.5s;

 }

 html,
 body {

     font-family: 'Poppins', sans-serif;
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
     background-color: #141729;
     color: #f5f5f5;
 }

 body::-webkit-scrollbar {
     height: 1px;
 }

 .flex-left {
     display: flex;
     justify-content: left;
     width: 100%;
 }

 .flex-right {
     display: flex;
     justify-content: right;

 }

 .alert {
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid transparent;
     border-radius: 4px;
     font-family: Arial, sans-serif;
 }

 .alert-success {
     color: #155724;
     background-color: #d4edda;
     border-color: #c3e6cb;
 }

 .alert-danger {
     color: #721c24;
     background-color: #f8d7da;
     border-color: #f5c6cb;
 }

 .alert-warning {
     color: #856404;
     background-color: #fff3cd;
     border-color: #ffeeba;
 }

 .alert-info {
     color: #0c5460;
     background-color: #d1ecf1;
     border-color: #bee5eb;
 }

 .alert .close {
     position: absolute;
     top: 10px;
     right: 10px;
     color: inherit;
     background: none;
     border: none;
     font-size: 20px;
     cursor: pointer;
 }

 .alert .close:hover {
     color: #000;
 }

 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
     background-color: #0c1020;
     width: 100%;
     position: relative;
     top: 0;
     left: 0;
     z-index: 1000;
 }

 .logo {
     display: flex;
     align-items: center;
 }

 .logo img {
     height: 40px;
     margin-right: 10px;
 }

 .logo span {
     color: #ffc107;
     font-size: 22px;
     font-weight: bold;
 }

 .auth-buttons {
     display: flex;
     margin-right: 10px;
 }

 .auth-buttons button {
     padding: 8px;
     margin-left: 15px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
 }

 .sign-in {
     background-color: #2b2837;
     color: white;
 }

 .sign-up {
     background-color: #ffc107;
     color: black;
 }

 .sign-in:hover,
 .sign-up:hover {
     opacity: 0.8;
 }

 .horizontal-container {
     display: flex;
     overflow-x: auto;
     overflow-y: hidden;
     align-items: center;
     padding: 4px;
     gap: 4px;
     position: relative;
     width: 100%;
     white-space: nowrap;
 }

 .horizontal-container::-webkit-scrollbar {
     display: none;
 }

 .horizontal-container::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 10px;
 }

 .payment-card {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background-color: #1c1f34;
     border-radius: 5px;
     padding: 10px;
     width: auto;
     height: 40px;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

 .icon {
     display: flex;
     align-items: center;
 }

 .icon img {
     width: 20px;
     height: 20px;
     border-radius: 10px;
     margin-right: 10px;
 }

 .payment-info {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     flex: 1;
     align-items: center;
 }

 .username {
     font-size: 10px;
     font-weight: bold;
     color: white;
     margin-bottom: 2px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .source {
     font-size: 10px;
     color: #7a7d92;
 }

 .amount {
     background-color: #292c42;
     color: #ffffff;
     font-weight: bold;
     padding: 6px 12px;
     border-radius: 3px;
     font-size: 10px;
 }

 .start-button {

     width: 575px;
     margin-top: 40px;
     margin-bottom: 40px;
     background-color: #28a745;
     color: white;
     border: none;
     padding: 15px;
     font-size: 21px;
     font-weight: bold;
     border-radius: 8px;
     cursor: pointer;
     animation: bounce2 1.5s infinite;
     transition: background-color 0.3s ease;

 }


 .head-grid {

     display: flex;
     flex-direction: row;
     padding: 10px;
     gap: 10px;
     margin: 10px;

 }

 .head-title {

     flex: 1;
     font-size: 65px;
     font-weight: 700;
     line-height: 1.05;
     margin-left: 50px;
 }

 .mobile {
     display: none;
 }

 .head-title span.accent {
     background: linear-gradient(90deg, #43e97b, #38f9d7);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .head-hoz-container {

     display: flex;
     flex-direction: column;
     border-radius: 12px;
     justify-content: right;
     width: 50%;

 }

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

 .vectrial p {

     font-size: 23px;
     font-weight: bolder;
     line-height: 1.05;
     margin-bottom: 8px;
     background: linear-gradient(90deg, #43e97b, #38f9d7);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }


 .head-hoz-card {

     width: 300px;
     height: 150px;
     box-shadow: inset -10px 32px 54px 0px rgba(148.99999999999997, 154.99999999999997, 165.99999999999997, 0.30196078);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 .arrow-img {
     width: 250px;
     height: 210px;
     margin-top: 50px;
     margin-bottom: 12px;
 }


 .head-hoz-card .img {

     display: block;
     width: 100%;
     height: 100%;
     object-fit: fill;
     border-radius: 12px;
 }


 .swiper {

     width: 175px;
     height: 280px;
     padding: 0.5rem;
 }

 .swiper-slide {

     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     border: 1px solid #ccc;

 }

 .swiper-slide img {

     display: block;
     width: 100%;
     height: 100%;
     object-fit: fill;
     border-radius: 12px;
 }

 .stage {

     justify-content: right;
     margin-top: 7vw;
     margin-bottom: 10vw;
     margin-left: 100%;
 }

 .panel {

     --w: 140px;
     --h: 190px;
     --depth: 220px;
     --tile: -10deg;
     --perspective: 900px;
     position: relative;
     width: var(--w);
     height: var(--h);
     transform-style: preserve-3d;
     animation: spin 10s linear infinite;
 }

 .card-3d {

     position: absolute;
     display: block;
     inset: 0;
     background-color: #2b2b3c;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
     border: 1px solid;
     border-radius: 12px;
     transform: rotateY(calc((360deg / var(--count)) * var(--i))) translateZ(var(--depth));
 }

 .card-3d img {

     display: block;
     width: 100%;
     height: 100%;
     object-fit: fill;
     border-radius: 12px;
 }

 .card-3d .icon {

     width: 100%;
     height: 5vw;
     border-radius: 1vw;
 }


 .panel:hover {
     animation-play-state: paused;
 }

 h2 {
     margin-top: 30px;
     margin-left: 20px;
     font-size: 38px;
     color: var(--vclr);
     font-weight: 700
 }

 .head-steps {
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 450px;
     margin-right: 200px;
 }

 .head-steps p {
     font-family: 'Poppins', sans-serif;
     margin: 12px 0 0;
     font-weight: 700;
     font-size: 25px;
     line-height: 1.45;
     color: var(--dark-gray)
 }

 .head-steps p.partner {
     color: var(--profit-green);
     margin-top: 10px
 }

 .head-steps p.callout {

     color: var(--warm-orange);
     margin-top: 12px;
     font-weight: 600
 }

 .cashout-flex {

     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 }


 .stack-container {
     position: relative;
     width: var(--home-offer-width);
     height: var(--home-offer-height);
     transform-style: preserve-3d;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .home-offer {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 12px;
     box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.5);
     display: grid;
     padding: 8px;
     justify-content: left;
     align-items: flex-start;
     text-align: start;
     background: linear-gradient(to bottom, #2d3547, #1a1f2b);
     border: 1px solid #333;
     backface-visibility: hidden;
     transform-origin: center bottom;
     transition: transform var(--transition-duration) ease, box-shadow 0.3s ease;
     overflow: hidden;
     cursor: pointer;
     transform:
         translateY(calc(var(--stack-offset-y) * var(--i))) rotate(calc(var(--stack-rotate-step) * var(--i) * -1)) scale(1);
     z-index: calc(100 - var(--i));
 }

 .home-offer .offeer-proofile {
     width: 100%;
     height: 110px;
     border-radius: 12px;
     margin-bottom: 7px;
     background-color: #225075;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     position: relative;
 }

 .home-offer .offeer-proofile img {
     width: 100%;
     height: 100%;
     object-fit: fill;
 }

 .home-offer .offeer-text {
     font-weight: 600;
     font-size: 15px;
     margin: 10px 0 2px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: white;
 }

 .home-offer .offeer-need {
     font-size: 13px;
     color: #9ca3af;
     margin-top: 6px;
 }

 .home-offer .rate {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     color: white;
     margin-bottom: 2px;
     margin-top: 7px;
 }

 .home-offer .rate .ofeer-price {
     font-size: 15px;
     color: white;
     font-weight: 600;
 }

 .home-offer .rate .star {
     font-size: 12px;
     color: #fbbf24;
 }


 .home-offer.active {
     transform: translateY(-30px) translateZ(120px) scale(1.05) !important;
     z-index: 999 !important;
     box-shadow: 0px 30px 80px rgba(0, 0, 0, 0.7) !important;
 }

 .goole-play-badge {
     width: 350px;
     height: 200px;
     margin-right: 90px;
 }

 .goole-play-badge img {

     width: 100%;
     height: 100%;
     object-fit: fill;
 }



 .social-media {
     display: flex;
     justify-content: space-between;
     max-width: 1400px;
     margin: 0 auto;
     padding: 20px 0;
     border-top: 1px solid #333;
     width: 100%;
 }

 .social-media .last {
     margin-left: auto;
 }

 .social-media h3 {
     font-size: 18px;
     font-weight: 600;
     color: #f5f5f5;
 }

 .social-media p {
     font-size: 14px;
     color: #9ca3af;
 }

 .social-media .flex {
     display: flex;
     align-items: center;
     justify-content: left;
     gap: 5px;
 }





 .social-media .social {
     flex: 1;
     margin-left: 40px;
 }

 .social-media .social h3 {
     font-size: 18px;
     margin-bottom: 15px;
     color: #ffffff;
 }

 .social-media .social .icon {
     margin-right: 10px;
 }

 .social-media .social ul {
     list-style: none;
 }

 .social-media .social li {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
 }

 .social-media .social a {
     color: #b3b3b3;
     text-decoration: none;
     font-size: 16px;
     transition: color 0.3s ease;
 }

 .social-media .social a:hover {
     color: #ffffff;
 }

 .modal {
     display: none;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.7);
     justify-content: center;
     align-items: center;
 }

 .modal-content {
     background-color: #1f1f2e;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
     width: 90%;
     max-width: 400px;
     margin: 0 auto;
     position: relative;
 }

 .form-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .form-header button {
     background-color: transparent;
     border: none;
     padding: 10px;
     cursor: pointer;
     font-size: 16px;
     color: #fff;
 }

 .form-header button.active {
     color: #ffc107;
     border-bottom: 2px solid #ffc107;
 }

 .form-group {
     margin-bottom: 15px;
 }

 .form-group label {
     display: block;
     margin-bottom: 5px;
     color: white;
     font-size: 14px;
 }

 .form-group input,
 .form-group select {
     width: 95%;
     padding: 10px;
     border-radius: 5px;
     border: none;
     background-color: #2b2b3c;
     color: #fff;
 }

 .form-group input[type="checkbox"] {
     width: auto;
 }

 .privacy-policy {
     font-size: 12px;
     color: #a5a5a5;
 }

 .privacy-policy a {
     color: #ffc107;
     text-decoration: none;
 }

 .submit-btn {
     width: 100%;
     padding: 10px;
     background-color: #ffc107;
     color: #15151c;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 .close {
     position: absolute;
     top: 10px;
     right: 15px;
     color: #ffc107;
     font-size: 24px;
     cursor: pointer;
     font-weight: bold;
 }

 .reset-password-link {
     display: block;
     text-align: right;
     font-size: 14px;
     color: #ffc107;
     cursor: pointer;
     text-decoration: none;
     margin-top: -10px;
 }

 .reset-password-link:hover {
     text-decoration: underline;
 }

 .bottom-nav {
     position: fixed;
     bottom: 0;
     width: 100%;
     margin-top: 10vw;
     background-color: #141424;
     box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: space-around;
     align-items: center;
     padding: 10px 0;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     z-index: 1000;

 }

 .nav-item {
     text-align: center;
     flex-grow: 1;
 }

 .nav-item img {
     width: 34px;
     height: 34px;
     margin-bottom: 5px;
     filter: invert(51%) sepia(25%) saturate(700%) hue-rotate(180deg) brightness(90%) contrast(85%);
 }

 .nav-item p {
    font-size: 0.8em;
    color: #b0b0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 .nav-item.active img {
     color: #ffc107;
     filter: invert(82%) sepia(91%) saturate(2915%) hue-rotate(343deg) brightness(98%) contrast(104%);
 }

 .nav-item.active p {
     color: #ffc107;
 }

 .middle-button {
     width: 55px;
     height: 65px;
     border-radius: 5px;
     background-color: #1f1e2e;
     border: 3px solid transparent;
     text-align: center;
     flex-grow: 1;
     margin-top: -30px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .middle-button img {
     width: 34px;
     height: 34px;
     margin-bottom: 5px;
     filter: invert(51%) sepia(25%) saturate(700%) hue-rotate(180deg) brightness(90%) contrast(85%);
 }

 .middle-button p {
     transition: color 0.3s;
     color: #7b7b9b;
     margin: 0;
 }

 .middle-button.active {
     background-color: #ffc107;
 }

 .middle-button.active img {
     filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(160deg) brightness(106%) contrast(102%);
 }

 .middle-button.active p {
     color: white;
 }

 .terms-container {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     padding: 10px;
 }

 .terms-container h1 {
     color: #ffffff;
     font-size: 2.5rem;
     margin-bottom: 10px;
 }

 .terms-container .updated-date {
     color: #aaaaaa;
     font-size: 0.9rem;
     margin-bottom: 40px;
 }

 .terms-container h2 {
     color: #ffffff;
     font-size: 1.5rem;
     margin-top: 30px;
     margin-bottom: 15px;
 }

 .terms-container p {
     margin-bottom: 15px;
     font-size: 1rem;
 }



 @keyframes spin {

     0% {
         transform: perspective(var(--perspective)) rotateX(var(--tile)) rotateY(0deg);
     }

     100% {
         transform: perspective(var(--perspective)) rotateX(var(--tile)) rotateY(360deg);
     }
 }

 @keyframes bounce2 {
     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }

     100% {
         transform: translateY(0);
     }
 }

 @media (max-width: 767px) {

     * {
         --home-offer-width: 140px;
         --home-offer-height: 230px;
     }

     .head-grid {
         flex-direction: column;
         text-align: left;
         justify-content: left;
     }

     .head-title {
         font-size: 35px;
         line-height: 1.2;
         margin-left: 10px;
         align-items: center;
     }

     .pc {
         display: none;
     }

     .mobile {
         display: block;
     }

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

     .head-hoz-container {
         width: auto;
         margin-top: 20px;
     }

     .head-hoz-card {
         width: 200px;
         height: 100px;
     }


     .panel {
         --w: 70px;
         --h: 100px;
         --depth: 150px;
     }

     .stage {
         margin: 0;
     }

     .arrow-img {
         width: 120px;
         height: 90px;
         margin-top: 50px;
         margin-bottom: 12px;
     }

     .start-button {
         width: 300px;
         margin-top: 30px;
         margin-bottom: 30px;
         font-size: 18px;
     }

     h2 {
         font-size: 24px;
         margin-left: 10px;
         margin-top: 40px;
     }

     .head-steps p {
         font-size: 16px;
         margin-left: 0;
         line-height: normal;
         max-width: auto;
     }

     .swiper {
         width: 120px;
         height: 160px;
     }

     .cashout-flex {
         display: flex;
     }

     .home-offer .offeer-proofile {
         width: 100%;
         height: 100px;
     }

     .goole-play-badge {
         margin-right: 0;
         justify-content: center;
         align-items: center;

     }

     .social-media {
         flex-direction: row;
         justify-content: space-around;
         align-items: flex-start;
         flex-wrap: wrap;
         padding-left: 10px;
     }

     .social-media .social {

         margin-left: 0;
         flex: 1 1 auto;
         min-width: 100px;
         margin-right: 5px;
     }

     .social-media h3 {
         font-size: 16px;
         font-weight: 600;
         color: #f5f5f5;
     }

     .social-media p {
         font-size: 10px;
     }

     .social-media .social a {
         font-size: 12px;
     }

     .middle-button {
         width: 75px;
         height: 85px;
     }

     .nav-item img {
         width: 34px;
         height: 34px;
         margin-bottom: 5px;
     }

     .nav-item p {
         margin: 0;
         font-size: 15px;
         color: #7b7b9b;
     }

     .middle-button img {
         width: 34px;
         height: 34px;
         margin-bottom: 5px;
         filter: invert(51%) sepia(25%) saturate(700%) hue-rotate(180deg) brightness(90%) contrast(85%);
     }

     .middle-button p {
         transition: color 0.3s;
         color: #7b7b9b;
         margin: 0;
         font-size: 15px;
     }

     .terms-container h1 {
         font-size: 2rem;
     }

     .terms-container h2 {
         font-size: 1.3rem;
     }


 }