.logo img{
    width: 100px!important  ;
}

@media only screen and (max-width: 600px) {
.payment h2{
    color: white!important;
    font-size: 1rem;
    text-align: center;
    margin-top: -70px!important;
}
.payment img{
    margin-top: -3px;
}
}
.payment h2{
    color: white!important;
    font-size: 1rem;
    text-align: center;
    margin-top: -100px;
}

.payment img{
    margin-top: -30px;
}


    .mycontainer {
      max-width: 900px;
      margin: 0 auto 40px auto;
      padding: 32px 24px;
      border-radius: 24px;
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
    }
    .divider {
      display: block;
      width: 2px;
      background: linear-gradient(180deg, #e0e7ff 0%, #c7d2fe 100%);
      height: 180px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    .card {
      flex: 1 1 320px;
      min-width: 260px;
      background: #FFFFFF;
      border-radius: 18px;

      padding: 36px 28px 28px 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .card:hover {
      box-shadow: 0 12px 32px rgba(59,76,202,0.13);
      transform: translateY(-6px) scale(1.03);
    }
    .icon {
      width: 100%;
      height: 100%;
      margin-bottom: 22px;

    }
    .title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: #3b4cca;
      letter-spacing: 0.5px;
    }
    .desc {
      font-size: 1.08rem;
      color: #4a5874;
      text-align: center;
      line-height: 1.6;
    }
    @media (max-width: 900px) {
      .container {
        flex-direction: column;
        gap: 28px;
        padding: 18px 6px;
      }
      .divider {
        display: none;
      }
    }
    @media (max-width: 600px) {
      .page-header {
        font-size: 1.4rem;
        margin-top: 24px;
        margin-bottom: 10px;
      }
      .container {
        padding: 8px 2px;
        border-radius: 12px;
      }
      .card {
        min-width: unset;
        padding: 18px 8px 16px 8px;
        border-radius: 12px;
      }
      .icon {
        width: 54px;
        height: 54px;
        margin-bottom: 14px;
      }
      .title {
        font-size: 1.1rem;
        margin-bottom: 7px;
      }
      .desc {
        font-size: 0.98rem;
      }
    }


     .how-to-play {
      padding: 70px 20px;
      max-width: 1200px;
      margin: auto;
    }

    .how-to-play h1 {
      text-align: center;
      font-size: 2.8rem;
      color: #2c3e50;
      margin-bottom: 50px;
      letter-spacing: 1px;
      font-weight: 700;
    }

    .steps-timeline {
      position: relative;
      margin: 0 auto 40px auto;
      padding-left: 20px;
      border-left: 4px solid #e0e7ef;
      max-width: 700px;
    }

    .step {
      background: #fff;
      border-radius: 16px;
      padding: 30px 25px 30px 80px;
      margin-bottom: 35px;
      box-shadow: 0 6px 24px rgba(44, 62, 80, 0.07);
      display: flex;
      align-items: center;
      gap: 24px;
      position: relative;
      transition: box-shadow 0.2s, transform 0.2s;
    }

    .step:hover {
      box-shadow: 0 12px 32px rgba(44, 62, 80, 0.13);
      transform: translateY(-2px) scale(1.01);
    }

    .step-icon {
      position: absolute;
      left: -50px;
      top: 50%;
      transform: translateY(-50%);
      width: 60px;
      height: 60px;
      background: #f7f9fc;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(44, 62, 80, 0.07);
      z-index: 2;
    }

    .step-icon img {
      width: 36px;
      height: 36px;
      object-fit: contain;
    }

    .step-number {
      font-size: 1.2rem;
      font-weight: bold;
      color: #fff;
      width: 32px;
      height: 32px;
      background: #3B4CCA;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      box-shadow: 0 2px 8px rgba(231, 76, 60, 0.13);
      z-index: 3;
      position: relative;
    }

    .step-content {
      flex: 1;
      min-width: 0;
    }

    .step-content h3 {
      margin: 0 0 10px;
      font-size: 1.25rem;
      color: #34495e;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .step-content p {
      margin: 0;
      font-size: 1.05rem;
      color: #555;
      line-height: 1.6;
    }

    .cta-container {
      display: flex;
      justify-content: center;
      margin-top: 40px;
    }

    .cta-btn {
      background: linear-gradient(90deg, #3B4CCA 0%, #3B4CCA 100%);
      color: #fff;
      font-size: 1.2rem;
      font-weight: 600;
      padding: 16px 40px;
      border: none;
      border-radius: 32px;
      box-shadow: 0 4px 16px rgba(231, 76, 60, 0.13);
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      letter-spacing: 1px;
    }

    .cta-btn:hover {
      background: linear-gradient(90deg, #fd9644 0%, #e74c3c 100%);
      transform: scale(1.04);
    }

    @media (max-width: 900px) {
      .steps-timeline {
        max-width: 100%;
        padding-left: 10px;
      }
      .step {
        padding: 24px 12px 24px 60px;
      }
      .step-icon {
        left: -35px;
        width: 44px;
        height: 44px;
      }
      .step-icon img {
        width: 26px;
        height: 26px;
      }
    }

    @media (max-width: 600px) {
      .how-to-play {
        padding: 30px 4px;
      }
      .steps-timeline {
        border-left: 2px solid #e0e7ef;
        padding-left: 4px;
      }
      .step {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 8px 18px 38px;
        margin-bottom: 22px;
      }
      .step-icon {
        left: -22px;
        width: 32px;
        height: 32px;
      }
      .step-icon img {
        width: 18px;
        height: 18px;
      }
      .step-number {
        width: 22px;
        height: 22px;
        font-size: 0.9rem;
        margin-right: 6px;
      }
      .cta-btn {
        font-size: 1rem;
        padding: 12px 24px;
      }
    }


     .my11-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding: 40px 20px;

      max-width: 1200px;
      margin: auto;
      gap: 30px;
    }

    .my11-text {
      flex: 1 1 500px;
    }

    .my11-text h2 {
      font-size: 2rem;
      color: #3B4CCA;
      margin-bottom: 20px;
    }

    .my11-text p {
      color: #333;
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .my11-text .preview-btn {
      background-color: #fff;
      color: #3B4CCA;
      border: 2px solid #3B4CCA;
      padding: 10px 20px;
      border-radius: 5px;
      font-weight: 600;
      text-decoration: none;
      transition: 0.3s ease;
    }

    .preview-btn:hover {
      background-color: #3B4CCA;
      color: #fff;
    }

    .my11-image {
      flex: 1 1 350px;
      text-align: center;
    }

    .my11-image img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }

    @media (max-width: 768px) {
      .my11-section {
        flex-direction: column;
        padding: 20px;
      }

      .my11-text h2 {
        text-align: center;
      }

      .my11-text .preview-btn {
        display: inline-block;
        margin-top: 10px;
      }
    }




.testimonials::before{content:'';position: absolute;right:0;left:0;top:0;bottom:0;background:#3B4CCA;}
.testimonials .title {text-align: center;margin-bottom: 50px;position: relative;padding: 20px 0;max-width: 600px;margin: 0 auto;}
.testimonials .title h5 {color: black;line-height: 1.2em;font-size: 18px;font-weight: 900;margin-bottom: -3px;}
.testimonials .title h2 {color: #3B4CCA;line-height: 1.2em;font-weight: 900;font-size: 41px;letter-spacing: -1px;margin:0}
.testimonials .title img {margin-top: -10px;}
.testimonials .title p {margin: 0 0 10px;margin-bottom: 0;color: #3B4CCA;}
.testimonials .testi .item {background: #fff;padding: 50px 30px;border-radius:15px;}
.testimonials .testi .item .profile {display:flex;padding-left: 15px;}
.testimonials .testi .item .profile img {border-radius: 100%;width:50px;height:50px;object-fit:cover}
.testimonials .testi .item .profile .information {padding-left:20px;margin-bottom:15px}
.testimonials .testi .item .profile .information .stars i {color:#3B4CCA}
.testimonials .testi .item .profile .information p {font-size: 20px;margin: 0px auto 0px;color: #3B4CCA;font-weight: 500;line-height: 1;}
.testimonials .testi .item .profile .information span {color: black;font-weight: bold;margin-top: -4px;line-height: 1.6em;font-size: 14px;}
.testimonials .testi .item>p {margin-bottom: 15px;font-size: 16px;line-height: 1.6em;display: block;z-index: 2;font-style: italic;color: black;text-align: center;}
.testimonials .testi .item .icon {text-align: center;}
.testimonials .testi .item .icon i {font-size: 32px;color: #FFD832;}




.faqcontainer {
  margin: 0 auto;
  padding: 4rem;
  width: 60rem;
}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #3B4CCA;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 2em 0;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #3B4CCA;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #3B4CCA;
  border: 1px solid #3B4CCA;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
  text-align: center;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: #3B4CCA;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}


.stats-section {
      max-width: 1200px;
      margin: 2rem auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      padding: 2rem;
      border: none;
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      transition: box-shadow 0.2s;
    }

    .stat-card {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      background: #f5f7fa;
      border-radius: 18px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      padding: 1.5rem 1rem;
      transition: transform 0.2s, box-shadow 0.2s;
      border: 1px solid #e0e0e0;
    }
    .stat-card:hover {
      transform: translateY(-4px) scale(1.03);
      box-shadow: 0 8px 32px rgba(61,61,255,0.10);
      border-color: #3d3dff33;
    }

    .stat-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
      border: 2px solid #3d3dff33;
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2px 8px rgba(61,61,255,0.06);
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .stat-card:hover .stat-icon {
      border-color: #3d3dff;
    }
    .stat-icon img {
      width:50px!important;
      height: 50px!important;
      object-fit: contain;
      display: block;
    }

    .stat-text {
      line-height: 1.3;
    }

    .stat-text small {
      font-size: 15px;
      color: #555;
      letter-spacing: 0.5px;
    }

    .stat-text strong {
      display: block;
      font-size: 18px;
      font-weight: 700;
      color: #222;
      margin-top: 0.2em;
      letter-spacing: 1px;
    }

    .highlight {
      color: #3d3dff;
      font-weight: bold;
    }