 <style>
      * {
        box-sizing: border-box !important;
      }
      #blogSwatch {
        all: unset !important; /* This will reset most styles applied to #blogSwatch */
      }
      body {
        background: linear-gradient(
          to bottom,
          #1a2433,
          #0d1219
        ); /* Gradient background */
      }
      .image-container {
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
        margin-top: -1rem !important;
        height: 300px !important;
      }
      .top-image {
        /* Ensure the top image fills the container's width */
        height: auto;
        z-index: 1;
        position: absolute;
        top: 0;
        width: 100vw;
      }
      .bottom-image {
        position: absolute;
        top: 30px; /* Move the second image 17% down from the top of the container */
        width: 100vw; /* Ensures the bottom image spans the container's width */
        height: 500px;
        z-index: 0; /* Ensure the bottom image stays in the background */
      }
      /* Text and button container */
      .text-container {
        text-align: center;
        z-index: 2; /* Ensure text and button appear above the second image */
        margin-top: 15%/* Adjust position of the text container to ensure it's below the top image */
      }
      .headline {
        font-size: 3vw; /* Scalable font size */
        color: #ffffff !important;
        margin: 0;
        font-weight: 700 !important;
      }
      .highlight {
        color: #ff66ff !important; /* Apply color to the word "Wikibet" */
        font-weight: 700;
        font-size: 3vw !important;
      }
      .subheadline {
        font-size: 1.5vw; /* Scalable font size */
        color: #ffffff !important;
        margin-top: 10px;
        font-weight: 700 !important;
        align-self: center !important;
      }
      .button {
        margin-top: 20px;
        padding: 12px 24px;
        font-size: 1vw; /* Scalable font size */
        color: #192433;
        background-color: #8de939 !important;
        border: none;
        border-radius: 12px 0px;
        cursor: pointer;
        min-width: 156px;
        font-weight: 600;
      }
      .button:hover {
        background-color: #7dca32 !important; /* Slight hover effect */
      }
      @media screen and (max-width: 1724px) {
        .headline,
        .highlight {
          font-size: 5vw !important; /* Scalable font size */
        }
        .subheadline {
          font-size: 3vw !important; /* Scalable font size */
        }
        .banner-cta button {
          margin-top: 0px !important;
          font-size: 1.5vw !important; /* Scalable font size */
          padding: 12px 24px !important;
        }
      }
      @media screen and (max-width: 750px) {
        .headline {
          font-size: 8vw !important; /* Scalable font size */
        }
        .subheadline {
          font-size: 6vw !important; /* Scalable font size */
        }
        .top-image {
          content: url("https://production.wikibet.cdn.cms.geekertech.com/Frame_1702_2_145dda02e4.png");
        }
        .bottom-image {
          top: 10px !important;
          content: url("https://production.wikibet.cdn.cms.geekertech.com/Mask_group_44_9e25e83308.png");
        }
        .button {
          margin-top: 100px !important;
          font-size: 6vw !important; /* Scalable font size */
          padding: 6px 12px !important;
        }
        .banner-cta button {
          margin-top: 0px !important;
          font-size: 6vw !important; /* Scalable font size */
          padding: 6px 12px !important;
        }
      }
      /* Feature container positioned below the image container --------------------------- */
      .feature-container {
        display: grid !important;
        grid-template-columns: repeat(
          5,
          1fr
        ) !important  ; /* Display 5 items in a row */
        gap: 20px;
        justify-items: center;
        padding: 20px;
        padding-top: 80px !important;
      }
      .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #ffffff !important;
        width: 100%;
        max-width: 250px;
        height: 220px;
        border-radius: 12px 0px;
        border: 2px solid #625eb0;
        background: linear-gradient(
          229deg,
          #4f74a4 -33.2%,
          #1e2c3e 24.15%,
          #1e2c3e 80.74%,
          #4f74a4 129.09%
        );
        position: relative;
        margin-top: 60px;
        margin-bottom: 60px;
        border-radius: 12px 0;
      }
      .feature img {
        width: 122px;
        height: 122px;
        margin-bottom: 5px;
        position: absolute;
        top: -100px;
      }
      .feature h3 {
        margin-top: 2vw;
        font-size: 1.5rem;
        color: #c6c5fc !important;
        font-style: normal;
        font-weight: 600 !important;
        width: 100%;
        height: 50px;
      }
      .feature p {
        width: 253px;
        font-size: 0.8rem;
        font-weight: 400;
        margin-top: 5px;
        width: 190px;
        height: 60px;
        margin-top: auto;
        align-self: center !important;
        padding: 3px;
      }
      @media (max-width: 1400px) {
        .feature-container {
          max-width: 100%;
          display: flex !important;
          flex-wrap: wrap;
          overflow-x: auto !important; /* Allow horizontal scrolling */
          overflow-y: hidden !important;
          height: 350px !important;
          scroll-behavior: smooth !important; /* Enable smooth scrolling */
          margin-left: 50px;
        }
        .feature {
          flex: 0 0 auto !important; /* Ensure each feature takes full width */
          max-width: 200px !important;
          max-height: auto !important;
          margin: 0 !important;
          height: auto !important;
          position: relative !important;
          padding-top: 100px !important;
        }
        .feature h3 {
          margin-top: 0vw !important;
        }
        .feature img {
          top: -80px !important;
          max-width: 122px !important; /* Ensure image scales to the container's width */
          max-height: 122px !important;
          object-fit: contain !important; /* Ensure the image doesn't get cropped */
        }
        /* Hide the scrollbar */
        .feature-container::-webkit-scrollbar {
          display: none !important;
        }
      }
      /*Banner Crypto*/
      .feature-banner {
        height: 330px;
        background-image: url("https://production.wikibet.cdn.cms.geekertech.com/Mask_group_42_1_9b7cf53303.png");
        background-size: cover;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 20px auto; /* Center the banner */
        padding: 20px;
        border-radius: 12px 0px;
        background-color: #0e131b;
        max-width: 1200px;
      }
      .banner-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row !important;
        width: 100%;
        height: 100%;
      }
      .banner-text {
        color: white !important;
        max-width: 60%;
        padding: 10px;
        gap: 0px !important;
        margin-bottom: -20px !important;
      }
      .banner-text h2 {
        color: #c6c5fc !important;
        font-size: 41px;
        font-style: normal;
        font-weight: 700 !important;
        line-height: normal;
      }
      .banner-text p {
        color: #fff !important;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      .banner-cta {
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
      }
      .banner-cta button {
        margin-top: 0px;
        font-size: 1vw; /* Scalable font size */
        padding: 12px 24px;
      }
      .banner-cta img {
        width: 380px;
        height: 120px;
      }
      .banner-image img {
        max-height: 100%;
        max-width: 100%;
      }
      /* Responsive Layout for Smaller Screens */
      @media (max-width: 1500) {
        .feature-banner {
          width: 80%;
        }
      }
      @media (max-width: 1024px) {
        .feature-banner {
          background-image: url("https://production.wikibet.cdn.cms.geekertech.com/Mask_group_43_227a4d928d.png");
          background-size: cover !important;
          flex-direction: column !important; /* Stack content vertically */
          align-items: flex-start !important; /* Align items to the left */
          padding: 10px !important;
          height: auto !important;
          background-color: #0e131b;
        }
        .banner-content {
          flex-direction: column !important; /* Stack text and image */
          justify-content: center !important;
          align-items: center !important; /* Center-align content */
          text-align: center !important;
        }
        .banner-text {
          max-width: 100% !important; /* Use full width */
          padding: 10px !important;
        }
        .banner-text h2 {
          font-size: 5vw !important; /* Reduce size for smaller screens */
        }
        .banner-text p {
          font-size: 18px !important; /* Reduce size for smaller screens */
          align-self: center !important;
        }
        .banner-cta {
          flex-direction: column !important; /* Stack button and image vertically */
          gap: 10px !important;
        }
        .banner-cta img {
          width: 100% !important; /* Scale down image */
          height: auto !important; /* Maintain aspect ratio */
        }
        .banner-image img {
          width: 70% !important; /* Reduce image size */
          max-height: 200px !important; /* Limit max height */
        }
      }
      @media (max-width: 450px) {
        .banner-text h2 {
          font-size: 8vw !important;
          align-self: center !important;
        }
        .bonuses-content h2 {
          font-size: 7vw !important;
        }
        .banner-text {
          max-width: 80% !important;
        }
        .banner-image {
          margin-top: 20px !important;
        }
      }
      /* Full-width Section ------------------------ */
      .community-section {
        margin-top: 30px;
        background-color: #141d29 !important;
        text-align: center;
        padding: 30px 15px;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
      }
      .community-title {
        color: #c6c5fc !important;
        font-size: 48px !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important;
        width: 100% !important;
      }
      .community-subtitle {
        color: white !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        margin-bottom: 30px !important;
        width: 100% !important;
        align-self: center !important;
      }
      /* Slider */
      .community-slider {
        display: flex !important;
        width: 100%;
        max-width: 1500px; /* Optional: Limit the maximum width */
        margin: 0 auto; /* Center horizontally */
        justify-content: center !important;
        flex-direction: row !important;
        align-items: center !important; /* Center items vertically */
        overflow-x: scroll; /* Allow horizontal scrolling */
        gap: 20px;
        scroll-behavior: smooth; /* Smooth scrolling */
        padding: 10px;
        max-resolution: 0px !important;
        margin-bottom: 10px !important;
      }
      .community-section::-webkit-scrollbar,
      .community-slider::-webkit-scrollbar {
        display: none !important; /* Hide scrollbar */
      }
      /* General slider item styling */
      .slider-item {
        flex: 0 0 auto;
        width: 319.96px;
        height: 220px;
        background-image: url("https://production.wikibet.cdn.cms.geekertech.com/Group_1719_5f13ce01e9.png");
        background-size: cover;
        background-position: center;
        border-radius: 12px 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center; /* Center content inside each slider item */
        padding: 15px;
        color: white !important;
        font-size: 16px;
        text-align: center;
        position: relative;
        border: 4px solid #1e2c3e;
        margin-bottom: 0px !important;
      }
      /* Footer styling */
      .slider-item-footer {
        display: flex;
        flex-direction: column !important;
        align-items: flex-start !important; /* Align content to the left */
        gap: 0px !important; /* Add spacing between username and VIP Rank */
        margin-top: -40px;
        margin-bottom: 0px !important;
        width: 96%;
      }
      /* Username styling */
      .username {
        font-size: 16px;
      }
      /* VIP rank styling */
      .vip-rank {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2px !important; /* Add space between text and image */
        font-size: 14px;
        padding-top: 0rem !important;
      }
      .vip-rank img {
        width: 36px;
        height: 25px;
        margin-top: 0px !important;
      }
      .slider-item p {
        margin-top: 25px; /* Add more space above the paragraph */
        margin-bottom: 0px; /* Reduce space below the paragraph */
        line-height: 1.5; /* Ensure good readability */
        font-size: 18px;
        color: white;
      }
      .slider-item-footer .vip-rank span {
        color: #aeaeae !important;
        font-weight: 500;
      }
      .slider-item-content {
        margin-bottom: 0px !important;
        justify-content: flex-start !important;
      }

      /* Spotlight Section ----------------------- */
      .spotlight-section {
        height: auto; /* Automatically adjust height to content */
        max-height: 500px;
        background-color: #1a2433;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px auto; /* Reduce margins for a smaller section */
        padding: 5px; /* Reduce padding inside the section */
        position: relative;
        gap: 0px !important; /* Smaller gap between elements */
        margin-bottom: 0px !important;
        padding-right: 30px;
        padding-left: 30px;
        max-width: 1200px !important;
      }
      /* Decorative Images */
      .decorative-image {
        position: absolute;
        z-index: 0; /* Place behind the rest of the content */
        width: 322px;
        height: auto;
        opacity: 0.8; /* Slight transparency for aesthetic */
      }
      .top-left-image {
        top: -10px;
        left: 30px;
      }
      .top-right-image {
        top: -10px;
        right: 30px;
      }
      /* Spotlight Header */
      .spotlight-header {
        margin-bottom: 0px !important;
        position: relative;
        top: 0px;
        display: flex;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 10px !important;
        text-align: center;
        z-index: 1; /* Ensure content stays on top */
      }
      .wikibet-text {
        color: #ff66ff !important;
        font-size: 2rem;
        font-weight: bold;
      }
      .spotlight-icon {
        width: 100px;
        height: auto;
      }
      .spotlight-text {
        color: #8de939 !important;
        font-size: 2rem;
        font-weight: bold;
      }
      /* Explore Text */
      .explore-text {
        text-align: center;
        font-size: 1.2rem;
        color: #ffffff;
        margin: 10px !important;
        align-self: center !important;
      }
      /* Feature Container */
      .feature-container-2 {
        display: flex;
        gap: 10px;
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 0;
        width: 100%; /* Ensures full horizontal space */
        max-width: 100vw;
        justify-content: flex-start !important;
        margin-bottom: 10px !important;
      }
      .feature-container-2::-webkit-scrollbar {
        display: none;
      }
      .game-thumbnail {
        min-width: 130px;
        min-height: 180px;
        object-fit: cover;
        border-radius: 5px;
      }

      /* Full-width Section2 ----------------- */
      .bonuses-section {
        background-color: transparent !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 20px 20px !important;
        margin: 5% auto 50px auto;
        max-width: 1200px;
      }
      .bonuses-content {
        margin: 0 auto !important;
        flex-direction: column !important;
        max-width: 100% !important;
        gap: 10px !important;
      }
      .bonuses-content h2 {
        color: #c6c5fc !important;
        font-size: 2.5vw !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important;
        width: 100%;
      }
      .bonuses-content p {
        color: #fff !important;
        font-size: 18px !important;
        margin-bottom: 30px !important;
        width: 100%;
        line-height: normal !important;
        margin-bottom: 0px !important;
      }
      /* Main Content */
      .bonuses-main {
        display: flex;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 20px !important;
        flex-wrap: wrap !important; /* Adjust layout on smaller screens */
        margin-bottom: 0px !important;
      }
      /* Image */
      .bonus-image {
        max-width: 28vw !important;
        max-height: 420px !important;
        height: auto !important;
        margin-top: 0px !important;
      }
      /* Text and Button */
      .bonus-details {
        flex: 0 0 35% !important;
        text-align: left !important;
        width: 70% !important;
        align-items: flex-start !important;
      }
      .sing-up-bonus {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: 1200px;
        padding: 10px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        gap: 10px !important;
        background: radial-gradient(
            circle at bottom left,
            #2f4461 5%,
            transparent 20%
          ),
          radial-gradient(circle at top right, #2f4461 5%, transparent 20%),
          linear-gradient(15deg, #1e2c3e, #1e2c3e);
        border-radius: 12px 0px 12px 0px;
        border: #4e4f8f 1px solid;
      }
      .sing-up-content {
        padding: 40px !important;
        display: flex !important;
        justify-content: left !important;
        align-items: flex-start !important;
      }

      @media (max-width: 1500px) {
        .community-section {
          max-width: 100%;
        }
      }
      @media (max-width: 1400px) {
        .community-slider {
          justify-content: flex-start !important;
        }
      }
      @media (max-width: 1024px) {
        .community-section {
          max-width: 100%;
          scroll-behavior: smooth !important; /* Enable smooth scrolling */
        }
        .community-title {
          font-size: 5vw !important;
        }
        .community-subtitle {
          font-size: 18px !important;
        }
        .sing-up-bonus {
          flex-direction: column-reverse !important;
        }
        .sing-up-content {
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          align-items: center !important;
        }
      }
      @media (max-width: 1550px) {
        .spotlight-section {
          max-width: 100%;
          padding: 10px !important;
          background-size: cover !important;
          gap: 10px !important;
        }
        .spotlight-header {
          top: -25px !important;
        }
        .wikibet-text,
        .spotlight-text {
          font-size: 1.5rem !important;
        }
        .spotlight-icon {
          width: 40px !important;
        }
        .feature-container-2 {
          width: 95% !important;
          gap: 8px !important;
          overflow-x: auto;
        }
        .explore-text {
          font-size: 18px !important;
        }
      }
      @media (max-width: 750px) {
        .spotlight-section {
          width: 100% !important;
        }
        .feature-container-2 {
          width: 100%; /* Ensure it stretches */
          padding: 5px; /* Adjust for smaller padding */
          margin-top: -31px;
        }
      }
      @media (max-width: 1024px) {
        .bonuses-main {
          max-width: 100%;
          flex-direction: column !important;
          justify-content: center !important; /* Center items vertically */
          align-items: center !important; /* Center items horizontally */
        }
        .bonuses-content {
          margin: 0 auto !important;
          max-width: 100% !important;
          text-align: center !important;
        }
        .bonuses-content h2 {
          font-size: 5vw !important;
        }
        .bonuses-content p {
          font-size: 18px !important;
          margin-bottom: 0px !important;
        }
        .bonus-image {
          max-width: 100% !important;
        }
        .bonus-details .button {
          margin-top: 10px !important;
        }
        .bonus-details {
          align-items: center !important;
        }
      }
      @media (max-width: 450px) {
        .community-title {
          font-size: 8vw !important;
        }
        .community-subtitle {
          font-size: 5vw !important;
          width: 300px !important;
          align-self: center !important;
        }
        .image-container {
          margin-top: -1rem !important;
        }
      }
      @media (max-width: 400px) {
        .bonuses-content h2 {
          font-size: 6vw !important;
        }
        .bonuses-content p {
          font-size: 4vw !important;
        }
        .spotlight-text,
        .wikibet-text {
          font-size: 7vw !important;
        }
        .explore-text {
          font-size: 0.8rem !important;
        }
        .spotlight-icon {
          width: 90px !important;
          margin-top: -50px !important;
        }
        .bonus-details {
          text-align: center !important;
        }
        .bonus-details .button {
          font-size: 1rem !important;
        }
      }
      @media (max-width: 900px) {
        .feature-container {
          margin-top: -50px !important;
        }
        .community-section {
          max-width: 100%;
        }
        .spotlight-section {
          max-width: 100%;
        }
        .bonuses-content {
          max-width: 100%;
        }
        .bonus-details {
          align-items: center !important;
        }
        .bonuses-main img {
          content: url("https://production.wikibet.cdn.cms.geekertech.com/GIFT_SLIKA_d8a6ea318d.png");
        }
      }
      @media (max-width: 455px) {
        .banner-cta {
          flex-direction: column-reverse !important;
        }
        .feature-banner {
          width: 100%;
        }
        .feature-container {
          margin-left: 0px;
          min-width: 100%;
          margin-right: 30px;
        }
        .banner-image {
          width: 80% !important;
        }
        .community-section {
          max-width: 100%;
        }
        .spotlight-section {
          max-width: 100%;
        }
        .feature-container {
          max-width: 100%;
        }
        .highlight {
          font-size: 7vw !important;
        }
        .bonuses-content p {
          font-size: 18px !important;
        }
        .spotlight-header {
          top: -25px !important;
          align-items: flex-start !important;
        }
        .spotlight-icon {
          width: 100px !important;
          margin-top: -50px !important;
        }
        .wikibet-text {
          font-size: 7vw !important;
        }
        .spotlight-text {
          font-size: 7vw !important;
        }
        .headline {
          font-size: 7vw !important;
          margin-bottom: 0px !important;
        }
        .explore-text {
          width: 90%;
          margin: 0px !important;
        }
        .text-container {
          margin-top: 250px;
        }
        .text-container button {
          margin-top: 30px !important;
        }
        .bonuses-main {
          max-width: 100vw;
        }
        .bonus-image {
          max-width: 100% !important;
        }
      }
      @media (max-width: 375px) {
        .community-section {
          max-width: 100%;
        }
        .spotlight-section {
          max-width: 100%;
        }
        .feature-container {
          max-width: 100%;
        }
      }
      @media (max-width: 325px) {
        .spotlight-section {
          max-width: 100%;
        }
        .feature-container {
          max-width: 100%;
          min-width: 100%;
        }
        .bonuses-content {
          max-width: 100%;
        }
        .slider-item-content {
          gap: 0.9rem !important;
        }
        .spotlight-header {
          top: -25px !important;
        }
      }
    </style>