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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            /*background: linear-gradient(135deg, #eff6ff 0%, #f3e8ff 50%, #fdf2f8 100%);*/
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ===== HEADER ===== */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            height: 20px;
            background: linear-gradient(#A20204 30%, #FFCA02 30% 70%, #A20204 70%);
            color: white;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: linear-gradient(#A20204 30%, #FFCA02 30% 70%, #A20204 70%);
            box-shadow: 0 -20px 25px -5px rgba(0, 0, 0, 0.1);
            z-index: 40;
        }

        .topbanner {
            width: 100%;
            text-align: center;
			margin-top:20px;
        }
        .topbanner img {
            width: 650px;
            border-radius:0 0 20px 20px;
        }
        .banner {
            width: 100%;
            text-align: center;
        }
        .banner img {
            width: 650px;
        }
        .offer-blink {
            animation: blinkoff 0.3s linear infinite;
            text-align:center; 
            color:red;
            font-size: 16px;
        }
        @keyframes blinkoff {
            0% { opacity: 1;}
            50% { opacity: 0;}
        }

        .activity-section {
            background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border: 1px solid #bbf7d0;
            padding: 1.5rem;
            display:inline;
            justify-content:center;
        }

        .activity-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: #66491A;
            margin-bottom: 1.5rem;
        }

        .activity-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .footer {
            width: 100%;
            text-align: center;
            margin-bottom: 15px;
        }
        .footer img {
            width: 400px;
        }

        



input, textarea,
input[type="radio"] + label,
input[type="checkbox"] + label:before,
select option,
select {
  width: 100%;
  padding: 1em;
  line-height: 1.4;
  background-color: #f9f9f9;
  border: 2px solid #e5e5e5;
  border-radius: 3px;
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #bd8200;
}
input:focus + .input-icon i, textarea:focus + .input-icon i {
  color: #f0a500;
}
input:focus + .input-icon:after, textarea:focus + .input-icon:after {
  border-right-color: #f0a500;
}

input[type="radio"] {
  display: none;
}
input[type="radio"] + label,
select {
  display: inline-block;
  width: 33%;
  text-align: center;
  float: left;
  border-radius: 0;
}
input[type="radio"] + label:first-of-type {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
input[type="radio"] + label:last-of-type {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
input[type="radio"] + label i {
  padding-right: 0.4em;
}
input[type="radio"]:checked + label,
input:checked + label:before,
select:focus,
select:active {
  background-color: #FFCA02;
  color: #A20204;
  border-color: #A20204;
}
.input-group {
  margin-bottom: 1em;
  zoom: 1;
}
.input-group:before,
.input-group:after {
  content: "";
  display: table;
}
.input-group:after {
  clear: both;
}
.input-group-icon {
  position: relative;
}
.input-group-icon input, .input-group-icon textarea {
  padding-left: 4.4em;
}
.input-group-icon .input-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.4em;
  height: 3.4em;
  line-height: 3.4em;
  text-align: center;
  pointer-events: none;
}
.input-group-icon .input-icon:after {
  position: absolute;
  top: 0.6em;
  bottom: 0.6em;
  left: 3.4em;
  display: block;
  border-right: 1px solid #e5e5e5;
  content: "";
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.input-group-icon .input-icon i {
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}


        /* ===== MAIN CONTENT ===== */
        main {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 0.5rem;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }


        /* ===== RECENT ACTIVITY ===== */
    
        .referral-link-box{
            line-height: 32px;
            font-size: 14px;
        }
        .referral-link-box a{
            text-decoration: none;
            margin-right: 20px;
            color: #064e3b;
            font-weight: 600;
        }
        .referral-link-box i{
            padding: 5px;
            background: #064e3b;
            color: #FFFFFF;
            border-radius: 5px;
            font-weight: normal;
        }
        .button{
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 10px;
            color: #A20204;
            border: solid 2px #A20204;
            font-size: 14px;
            background-color: #FFCA02;
            font-weight: bold;
        }


        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
        .topbanner img {
            width: 100%;
            border-radius: 0;
        }
        .banner img {
            width: 100%;
        }
        }

        @media (max-width: 480px) {
        .footer img {
            width: 100%;
        }
        }