/*==============================
VIEW PLAN CSS - PART 1
==============================*/

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

:root {
  --primary: #2f54eb;
  --secondary: #6b5cf6;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5eaf4;
  --bg: #f3f6fc;
}

body {
  background: var(--bg);
  font-family: "Montserrat", sans-serif;
}

a {
  text-decoration: none;
}

.plan-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  /* padding: 25px 15px; */
}

.plan-wrapper {
  width: 100%;
  max-width: 500px;
  background: #fff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.top-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid #eceff6;
}

.back-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #dfe4ef;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #111;
  font-size: 18px;
}

/* .logo {
  width: 135px;
} */

.top-header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.hero-card {
  margin: 22px;
  padding: 20px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(90deg, #2f54eb, #685cf6);
}

.hero-head {
  display: flex;
  gap: 18px;
  align-items: center;
}

.hero-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

.hero-head h2 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 4px;
}

.hero-head p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.hero-box {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  padding:10px 15px;
  text-align: center;
}

.hero-box h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

.hero-box span {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
}

.title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 22px 20px;
}

.title i {
  color: #2f54eb;
  font-size: 20px;
}

.title h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.plan-card {
  margin: 0 22px 18px;
  border: 1px solid #dde4ef;
  border-radius: 30px;
  padding: 20px;
  overflow: hidden;
  position: relative;
  background: #fff;
}

.starter {
  background:
    radial-gradient(circle at right top, #dce8ff 0%, transparent 45%), #fff;
}

.growth {
  background:
    radial-gradient(circle at right top, #f4d9ff 0%, transparent 45%), #fff;
}

.pro {
  background:
    radial-gradient(circle at right top, #ffe5bf 0%, transparent 45%), #fff;
}

.elite {
  background:
    radial-gradient(circle at right top, #dff8ef 0%, transparent 45%), #fff;
}

.plan-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
}
.blue {
  background: #3b82f6;
}

.purple-bg {
  background: #a855f7;
}

.orange {
  background: #ff8a00;
}

.green-bg {
  background: #10b981;
}

.left small {
  display: block;
  color: #666;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.left h3 {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
}

.right {
  text-align: right;
}

.right h2 {
  margin: 0;
  color: #2f54eb;
  font-size: 20px;
  font-weight: 800;
}

.right p {
  margin-top: 4px;
  margin-bottom: 0;
  color: #666;
  font-size: 14px;
  font-weight: 600;
}
/*==============================
VIEW PLAN CSS - PART 2
==============================*/

.badge {
  width: 100%;
  border-radius: 22px;
  padding: 10px 10px;
  text-align: center;
}

.badge h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.badge span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.badge.green {
  background: #e6faf2;
}

.badge.green h5,
.badge.green span {
  color: #10b981;
}

.badge.purple {
  background: #f2eeff;
}

.badge.purple h5,
.badge.purple span {
  color: #7c3aed;
}

.badge.yellow {
  background: #fff8e5;
}

.badge.yellow h5,
.badge.yellow span {
  color: #ea7a00;
}

.details-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: #2f54eb;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  transition: 0.3s;
}

.details-btn:hover {
  color: #1639d8;
}

.plan-card {
  transition: 0.35s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
}

.back-btn {
  transition: 0.3s;
}

.back-btn:hover {
  background: #2f54eb;
  color: #fff;
  border-color: #2f54eb;
}

.hero-card {
  box-shadow: 0 20px 35px rgba(47, 84, 235, 0.18);
}

.hero-box {
  transition: 0.3s;
}

.hero-box:hover {
  background: rgba(255, 255, 255, 0.22);
}

.icon {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.title {
  margin-top: 25px;
}

.title h4 {
  color: #111827;
}

@media (max-width: 768px) {
  .plan-wrapper {
    max-width: 100%;
  }

  .top-header {
    padding: 15px;
    gap: 12px;
  }

  .logo {
    width: 115px;
  }

  .top-header h3 {
    font-size: 16px;
  }

  .hero-card {
    margin: 16px;
    padding: 20px;
    border-radius: 24px;
  }

  .hero-head {
    align-items: flex-start;
  }

  .hero-icon {
    width: 58px;
    height: 58px;
    font-size: 22px;
  }

  .hero-head h2 {
    font-size: 16px;
  }

  .hero-head p {
    font-size: 12px;
  }

  .hero-box {
    border-radius: 18px;
    padding: 12px;
  }

  .hero-box h4 {
    font-size: 14px;
  }

  .hero-box span {
    font-size: 12px;
  }

  .title {
    margin: 20px 16px;
  }

  .plan-card {
    margin: 0 16px 16px;
    padding: 18px;
    border-radius: 24px;
  }

  .icon {
    width: 54px;
    height: 54px;
    font-size: 20px;
  }

  .left h3 {
    font-size: 16px;
  }

  .right h2 {
    font-size: 18px;
  }

  .right p {
    font-size: 13px;
  }

  .badge {
    border-radius: 18px;
    padding: 12px 8px;
  }

  .badge h5 {
    font-size: 17px;
  }

  .badge span {
    font-size: 12px;
  }

  .details-btn {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .top-header {
    /* flex-wrap: wrap; */
  }

  .top-header h3 {
    width: 100%;
  }

  /* .hero-head {
    flex-direction: column;
    text-align: center;
  } */
   .hero-head{
    gap: 10px;
   }

  .hero-icon {
    margin: auto;
  }

  .left {
    gap: 10px;
  }

  .left h3 {
    font-size: 15px;
  }

  .right {
    text-align: right;
  }

  .badge h5 {
    font-size: 15px;
  }

  .badge span {
    font-size: 11px;
  }

  .details-btn {
    font-size: 15px;
  }
}

/*==============================
24 HOUR BOOSTER
==============================*/

.booster-card {
  margin: 25px 22px 35px;
  padding: 24px;
  border-radius: 34px;
  background: linear-gradient(135deg, #cb14db 0%, #ff2b6b 55%, #ffa000 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px rgba(255, 77, 109, 0.25);
}

.booster-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.booster-icon {
  width: 55px;
  height: 55px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}

.booster-content {
  flex: 1;
}

.booster-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.booster-content h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.booster-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

.booster-star {
  font-size: 24px;
}

.booster-bottom {
  margin-top: 22px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 40px;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.booster-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.see-btn {
  color: #fff;
  font-size: 14px;
  font-weight:700;
}

.see-btn:hover {
  color: #fff;
}

/*==============================
TITLE
==============================*/

.reward-title {
  margin: 0 22px 20px;
}

.reward-title h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
}

.reward-title h3 i {
  color: #ff9800;
}

.reward-title p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

/*==============================
REWARD CARD
==============================*/

.reward-card {
  margin: 0 16px 16px;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 15px;
  padding: 15px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.35s;
}

.reward-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08);
}

.reward-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reward-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.reward-icon.blue {
  background: #e3f2ff;
  color: #1185ff;
}

.reward-icon.purple {
  background: #efe6ff;
  color: #7b2cff;
}

.reward-icon.pink {
  background: #ffe6fb;
  color: #d218ff;
}

.reward-icon.rose {
  background: #ffe4f2;
  color: #ff0d78;
}

.reward-icon.orange {
  background: #fff3de;
  color: #ff9800;
}

.reward-icon.green {
  background: #dff8ed;
  color: #00aa67;
}

.reward-icon.cyan {
  background: #dcfbf7;
  color: #00a9a5;
}

.reward-left h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #111827;
}

.reward-left span {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

.reward-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.day-badge {
  background: #eef2f7;
  border-radius: 30px;
  padding: 8px 14px;
  color: #5f6776;
  font-size: 13px;
  font-weight: 600;
}

.price-badge {
  background: #ff9800;
  color: #fff;
  /* min-width: 104px; */
  text-align: center;
  padding: 10px 15px;
  border-radius: 35px;
  font-size: 16px;
  font-weight: 700;
}

/*==============================
RESPONSIVE
==============================*/

@media (max-width: 768px) {
  .booster-card,
  .reward-card,
  .reward-title {
    margin-left: 16px;
    margin-right: 16px;
  }

  .reward-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .reward-right {
    width: 100%;
    justify-content: space-between;
  }

 .booster-bottom{
    padding:10px 15px;
 }

  .booster-content h2 {
    font-size: 20px;
  }

  .booster-time,
  .see-btn {
    font-size: 13px;
  }
}

/*==============================
TERMS & CONDITIONS
==============================*/

.terms-section {
  margin: 45px 0 20px;
}

.term-card {
  margin: 0 16px 14px;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 20px;
  /* min-height: 76px; */
  padding: 15px 15px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: 0.35s;
}

.term-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.term-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #4567ff, #6a5cf6);
  color: #fff;
  font-size: 18px;
}

.term-card h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.telegram-btn {
  width: calc(100% - 44px);
  margin: 42px auto 32px;
  height: 50px;
  border-radius: 40px;
  background: #2f9bd8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 600;
  transition: 0.35s;
}

.telegram-btn:hover {
  background: #2589c2;
  color: #fff;
}

.telegram-btn i {
  font-size: 22px;
}

.plan-footer {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 35px;
}

@media (max-width: 768px) {
  .term-card {
    margin: 0 16px 14px;
  }

 

  .telegram-btn {
    width: calc(100% - 32px);
  }


}

/*==============================
EXTRA EFFECTS
==============================*/

.term-card,
.reward-card,
.plan-card,
.booster-card {
  transition: all 0.35s ease;
}

.term-card:hover,
.reward-card:hover,
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(30, 41, 59, 0.08);
}

.telegram-btn {
  box-shadow: 0 15px 35px rgba(47, 155, 216, 0.25);
}

.telegram-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(47, 155, 216, 0.35);
}

.booster-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  top: -120px;
  right: -70px;
}

.booster-card::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  bottom: -70px;
  left: -50px;
}

.hero-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  right: -70px;
  top: -70px;
}

.hero-card {
  position: relative;
  overflow: hidden;
}

.plan-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  right: -120px;
  top: -120px;
  opacity: 0.35;
  z-index: -1;
}

.starter::before {
  background: #dce8ff;
}

.growth::before {
  background: #f2d9ff;
}

.pro::before {
  background: #ffe6bf;
}

.elite::before {
  background: #dff8ef;
}

.price-badge,
.day-badge,
.hero-box,
.badge,
.term-icon {
  transition: 0.3s;
}

.reward-card:hover .price-badge {
  transform: scale(1.06);
}

.reward-card:hover .day-badge {
  background: #e6edf7;
}

.plan-card:hover .badge {
  transform: translateY(-2px);
}

.term-card:hover .term-icon {
  transform: rotate(-10deg) scale(1.08);
}

.hero-card:hover .hero-box {
  background: rgba(255, 255, 255, 0.18);
}

.details-btn i,
.see-btn i {
  transition: 0.3s;
}

.details-btn:hover i,
.see-btn:hover i {
  transform: translateX(5px);
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }

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

.booster-card,
.plan-card,
.reward-card,
.term-card {
  animation: fadeUp 0.5s ease;
}

@media (max-width: 576px) {
  .reward-left {
    gap: 12px;
  }

  .reward-left h4 {
    font-size: 18px;
  }

  .reward-left span {
    font-size: 13px;
  }

  .price-badge {
    min-width: 90px;
    font-size: 16px;
    padding: 10px 14px;
  }

  .day-badge {
    font-size: 13px;
    padding: 7px 12px;
  }

  .booster-card {
    padding: 17px 10px;
    border-radius: 20px;
  }

  .booster-icon {
    width: 64px;
    height: 64px;
    font-size: 28px;
  }

  .booster-tag {
    font-size: 12px;
  }

  .booster-content h2 {
    font-size: 14px;
  }

  .booster-content p {
    font-size: 12px;
  }
}



/*========================================
PLAN DETAILS CSS - PART 1
========================================*/


.details-page{
    display:flex;
    justify-content:center;
    /* padding:25px 15px; */
}

.details-wrapper{
    width:100%;
    max-width:500px;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.details-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 24px;
    border-bottom:1px solid #edf0f5;
}

.back-btn{
    width:48px;
    height:48px;
    border:1px solid #dfe4ef;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#111;
    font-size:18px;
}

.logo{
    width:120px;
}

.details-header h3{
    font-size:18px;
    font-weight:800;
    margin:0;
}

.language-dropdown{
    position:relative;
}

.language-btn {
    width: 150px;
    height: 48px;
    border: 1px solid #dce3ef;
    border-radius: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.language-btn i:first-child{
    color:#3154f0;
}

.language-menu{
    position:absolute;
    top:50px;
    right:0;
    width:190px;
    background:rgba(72,72,72,.95);
    border-radius:28px;
    overflow:hidden;
    padding:12px 0;
    display:none;
    z-index:999;
    border:2px solid rgba(255,255,255,.25);
    backdrop-filter:blur(15px);
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.language-menu.show{
    display:block;
}

.language-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    transition: .3s;
}

.language-menu a:hover{
    background:rgba(255,255,255,.08);
}

.language-menu a.active{
    justify-content:flex-start;
    padding-left:24px;
}

.language-menu a.active i{
    color:#fff;
    font-size:16px;
}

.language-menu a:not(.active) i{
    display:none;
}
.plan-banner{
    margin:30px 22px;
    padding:20px 10px;
    border-radius:20px;
    background:linear-gradient(135deg,#1f9cf3,#625cf6);
    color:#fff;
}

.banner-top{
    display:flex;
    align-items:center;
    gap:18px;
}

.banner-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: rgba(255,255,255,.15);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}

.banner-top span{
    display:block;
    font-size:14px;
    font-weight:500;
    letter-spacing:1px;
}

.banner-top h2{
    margin-top:6px;
    font-size:20px;
    font-weight:800;
}

.banner-box{
    text-align:center;
    background:rgba(255,255,255,.16);
    border-radius:22px;
    padding:18px 10px;
}

.banner-box h4{
    font-size:16px;
    font-weight:800;
    margin-bottom:6px;
}

.banner-box p{
    margin:0;
    font-size:11px;
    font-weight:500;
    letter-spacing:.5px;
}

.section-title{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 22px;
    margin-bottom:20px;
}

.section-title i{
    color:#3154f0;
    font-size:22px;
}

.section-title h3{
    margin:0;
    font-size:17px;
    font-weight:700;
}

.range-card{
    border:1px solid #dfe4ef;
    border-radius:15px;
    background:#fff;
    padding:15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.range-card small{
    color:#697180;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
}

.range-card h2{
    margin-top:8px;
    color:#3154f0;
    font-size:20px;
    font-weight:700;
}

/*========================================
PLAN DETAILS CSS - PART 2
========================================*/

.income-card{
    height:70px;
    border-radius:15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    border:1px solid transparent;
    transition:.35s;
}

.income-card h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.income-card p{
    margin:6px 0 0;
    font-size:12px;
    font-weight:600;
    letter-spacing:.5px;
}

.income-card.green{
    background:#edfff6;
    border-color:#8df0c2;
}

.income-card.green h2,
.income-card.green p{
    color:#0b9d69;
}

.income-card.purple{
    background:#f5f0ff;
    border-color:#d7c9ff;
}

.income-card.purple h2,
.income-card.purple p{
    color:#7a2cff;
}

.income-card.yellow{
    background:#fff9e8;
    border-color:#f5cf6a;
}

.income-card.yellow h2,
.income-card.yellow p{
    color:#c76700;
}

.steps{
    padding:0 22px 30px;
}

.step-card{
    display:flex;
    align-items:center;
    gap:18px;
    background:#fff;
    border:1px solid #dfe4ef;
    border-radius:24px;
    padding:18px;
    margin-bottom:16px;
    transition:.35s;
}

.step-card:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.step-no{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:50%;
    background:linear-gradient(135deg,#4b6cff,#6d5cf6);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:800;
}

.step-card p {
    margin: 0;
    color: #141a2f;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}
/*==========================
Hover
==========================*/

.banner-box:hover{
    background:rgba(255,255,255,.25);
}

.range-card:hover{
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.income-card:hover{
    transform:translateY(-4px);
}

.back-btn:hover{
    background:#3154f0;
    color:#fff;
    border-color:#3154f0;
}

/*==========================
Responsive
==========================*/

@media(max-width:768px){

.details-header{
    flex-wrap:wrap;
    gap:15px;
}

.logo{
    width:120px;
}

.plan-banner{
    margin:18px;
}

.banner-top{
    gap:14px;
}

.banner-icon{
    width:70px;
    height:70px;
    font-size:30px;
}

.banner-top h2{
    font-size:18px;
}

.banner-box{
    padding:14px 8px;
    border-radius: 10px;
}

.banner-box h4{
    font-size:15px;
}

.banner-box p{
    font-size:10px;
}

.section-title{
    padding:0 18px;
}

.steps{
    padding:0 18px 25px;
}

.step-card{
    padding:16px;
}

.step-card p{
    font-size:15px;
}

}

@media(max-width:576px){

.details-header{
    justify-content:center;
}

.language-btn{
    width:100%;
    justify-content:center;
}
.benefit-card span{
    font-size:13px;
}

.income-card{
    height:90px;
}

.income-card h2{
    font-size:20px;
}

.income-card p{
    font-size:12px;
}

.step-card{
    gap:14px;
}

.step-no{
    width:38px;
    height:38px;
    min-width:38px;
    font-size:18px;
}

.step-card p{
    font-size:14px;
}

}

/*========================
BENEFITS
========================*/

.benefits-list,
.terms-list{
    padding:0 22px;
}

.benefit-card{
    display:flex;
    align-items:center;
    gap:14px;
    height:62px;
    border:1px solid #8cf2c8;
    background:#f1fff8;
    border-radius:20px;
    padding:0 18px;
    margin-bottom:14px;
    font-weight:600;
}

.benefit-card i{
    color:#00a96b;
}

/*========================
TERMS
========================*/

.term-item{
    display:flex;
    align-items:center;
    gap:15px;
    border:1px solid #dfe5ef;
    border-radius:22px;
    padding:16px;
    margin-bottom:14px;
    background:#fff;
}

.term-item span {
    font-weight: 500;
    font-size: 14px;
}

/*========================
BUTTONS
========================*/

.plan-buttons{
    padding:18px 22px;
}

.start-plan-btn,
.telegram-support-btn{
    height:50px;
    border-radius:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:#fff;
    margin-bottom:16px;
}

.start-plan-btn{
    background:linear-gradient(90deg,#179be6,#625bf6);
}

.telegram-support-btn{
    background:#2c9dd9;
}

.start-plan-btn:hover,
.telegram-support-btn:hover{
    color:#fff;
}

/*========================
CALCULATOR
========================*/

.calculator-card{
    margin:0 15px 35px;
    border:1px solid #dfe5ef;
    border-radius:26px;
    padding:18px;
    background:#fff;
}

.calculator-card label{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#6b7280;
    margin-bottom:14px;
}

.calc-input{
    display:flex;
    align-items:center;
    height:56px;
    border:1px solid #dfe5ef;
    border-radius:20px;
    overflow:hidden;
}

.calc-input span{
    padding:0 14px;
    color:#3154f0;
    font-weight:700;
    font-size:20px;
}
.calc-input input {
    border: none;
    width: 100%;
    outline: none;
    font-size: 20px;
    font-weight: 700;
}

.calc-box {
    border-radius: 15px;
    padding: 14px;
    text-align: center;
    border: 1px solid;
    height: 100px;
}

.calc-box small{
    display:block;
    font-size:12px;
    font-weight:700;
}

.calc-box h4 {
    margin: 8px 0;
    font-size: 18px;
    font-weight: 700;
}

.calc-box p{
    margin:0;
    font-size:12px;
    font-weight:600;
}

.calc-box.green{
    background:#effff7;
    border-color:#98efca;
    color:#008d5d;
}

.calc-box.blue{
    background:#edf7ff;
    border-color:#b9dcff;
    color:#0b5b97;
}

.calc-box.purple{
    background:#f6f2ff;
    border-color:#d7c8ff;
    color:#6a1bff;
}

.calc-box.yellow{
    background:#fff9ea;
    border-color:#f4d06d;
    color:#b85b00;
}

.calc-note{
    margin-top:16px;
    color:#6b7280;
    font-size:13px;
    font-weight:600;
}

.details-footer{
    text-align:center;
    color:#6b7280;
    font-weight:600;
    padding-bottom:35px;
}

@media(max-width:5767px){
  .calc-box{
    padding:10px;
  }
  .calc-box small {
    display: block;
    font-size: 11px;
    font-weight: 600;
}
.calc-box h4 {
    margin: 8px 0;
    font-size: 15px;
    font-weight: 700;
}
}    




.terms_section{
  margin: 0 22px 20px;
}

.detail-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.detail-title i{
    color:#2b63ff;
    font-size:18px;
}

.detail-title h5{
    margin:0;
    font-weight:800;
    color:#151b2d;
}

.rule-card{
    background:#fff;
    border:1px solid #d9e3f8;
    border-radius:18px;
    padding:18px;
    line-height:1.7;
    font-size:14px;
    box-shadow:0 8px 25px rgba(45,85,255,.06);
}

.example-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    border:1px solid #dbe4f5;
    border-radius:18px;
    padding:14px 16px;
    margin-bottom:12px;
}

.old-badge{
    background:#eef2f7;
    color:#6b7280;
    font-size:11px;
    font-weight:700;
    padding:6px 10px;
    border-radius:20px;
}

.new-badge{
    background:#dff8ea;
    color:#00a55a;
    font-size:11px;
    font-weight:700;
    padding:6px 10px;
    border-radius:20px;
}

.example-item strong{
    font-size:18px;
    font-weight:800;
}

.example-item .green{
    color:#00a55a;
}

.example-item i{
    color:#3865ff;
}

.example-note{
    color:#6f788b;
    font-size:13px;
    line-height:1.7;
}

.step-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border:1px solid #dbe4f5;
    border-radius:18px;
    padding:16px;
    margin-bottom:12px;
    font-weight:600;
}

.step-card span{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#5b6dff;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.benefit-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    margin-bottom:12px;
    border-radius:18px;
    background:#effff7;
    border:1px solid #74f0b9;
    font-weight:600;
}

.benefit-card i{
    color:#00a55a;
}

.term-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border:1px solid #dbe4f5;
    border-radius:18px;
    padding:16px;
    margin-bottom:12px;
    font-weight:600;
}

.term-icon{
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg,#4b7dff,#6555f8);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.boost-btn{
    margin-top:30px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#fff;
    height:58px;
    border-radius:40px;
    font-weight:800;
    background:linear-gradient(90deg,#c600d9,#ff4b61,#ff9a00);
    box-shadow:0 15px 30px rgba(255,88,88,.25);
}

.telegram-btn{
    margin-top:15px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#fff;
    height:58px;
    border-radius:40px;
    font-weight:800;
    background:linear-gradient(90deg,#25a4ef,#2d8fe8);
}