/* Cards */
  .card {
      box-sizing: border-box;
      width: 263px;
      height: 400px;
      background: rgba(217, 217, 217, 0.58);
      border: 1px solid white;
      box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22);
      backdrop-filter: blur(6px);
      border-radius: 17px;
      text-align: center;
      cursor: pointer;
      transition: all 0.5s;
      user-select: none;
      padding: 15px;
      min-height: 33rem;
      margin-bottom: 10px;
      color: #455569;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      margin-bottom: 2em;
  }

      .card:hover {
          border: 1px solid black;
          transform: scale(1.05);
      }

      .card:active {
          transform: scale(0.95) rotateZ(1.7deg);
      }

  .btn-animation {
      transition: all 0.5s;
      /* margin-bottom: 30px; */
  }

      .btn-animation:hover {
          transform: scale(1.05);
      }

  .flex-box {
      align-items: center;
      display: flex;
      justify-content: center;
      flex-flow: column;
  }

  .flex {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-flow: wrap;
      align-content: space-between;
      flex-direction: row;
      margin-bottom: 30px;
  }

  .align {
      flex: 1
  }

  .align-p {
      flex: 3
  }

  .hyper {
      color: inherit;
  }

      .hyper:hover {
          color: inherit;
      }

  .margin {
      margin-top: 30px;
  }

  /* Cards-END */
  .grid {
      display: flex;
      justify-content: center;
      column-gap: 50px;
      flex-wrap: wrap;
      row-gap: 10px;
  }

  section {
      margin-bottom: 5em;
  }

  h3.titles {
      font-weight: bold;
  }

  .hyper {
      color: inherit;
      text-align: center;
  }

      .hyper:hover {
          color: inherit;
      }

  .btn-animation:active {
      transform: rotateZ(1.7deg);
      box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  }

  .btn-animation {
      transition: all 0.5s;
  }

      .btn-animation:hover {
          transform: scale(1.05);
      }

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

  .accordion h4 {
      margin: 0;
  }

  .accordion .btn {
      text-align: left;
      white-space: normal;
  }

  .accordion {
      padding-bottom: 1.5em;
      margin-bottom: 1.5em;
      border-bottom: 1px solid rgba(33, 33, 33, 0.125);
  }

      .accordion:last-child {
          border-bottom: none;
      }

  .img-carosuel {
      width: 100%;
      padding: 10px;
  }
  /* arrow style */
  /* .slick-prev:before, .slick-next:before{
                        color: black;
                        font-size: 30px;
                        font-weight: bolder;
                        font-family: monospace, consolas;
                    }
                    .slick-prev:before{content: '<';}
                    .slick-next:before{content: '>';} */
  .slick-prev, .slick-next {
      display: flex !important;
      justify-content: center;
      align-items: center;
  }

      .slick-next:hover:before, .slick-prev:hover:before {
          font-size: 15px;
      }

  @media (min-width: 500px) {
      .slick-next:hover:before, .slick-prev:hover:before {
          font-size: 20px;
      }
  }

  .slick-prev:before, .slick-next:before {
      border: solid black;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 5px;
      font-size: 0px;
      transition: all 0.25s ease-out;
  }

  .slick-prev:before {
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
  }

  .slick-next:before {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
  }

  @media(min-width: 500px) and (max-width: 778px) {
      .slick-prev:before, .slick-next:before {
          bottom: -95px;
      }
  }

  @media(max-width: 500px) {
      .slick-prev:before, .slick-next:before {
          bottom: -65px;
      }
  }

  @media(max-width: 778px) {
      .slick-next:before {
          left: -35vw;
          position: relative;
      }

      .slick-prev:before {
          position: relative;
          left: 31vw;
      }

      .accordion-content {
          margin-bottom: 80px;
      }
      /* carousel margin */
      .carousel-box {
          margin: 25px 0px 85px 0px;
      }
  }

  .carousel-box {
      margin: 30px 0px 70px 0px;
  }
  /* lazy loading */
  .carouselsports {
      opacity: 0;
      visibility: hidden;
      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }

      .carouselsports.slick-initialized {
          visibility: visible;
          opacity: 1;
      }
  /* .slick-slide{
                        width: 26vw;
                    } */
  /* overlay image */
  /* hover effect */
  .container-image:hover .overlay {
      opacity: 1;
  }

  .container-image {
      position: relative;
      width: 100%;
  }

  .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: transparent;
      backdrop-filter: blur(4px) contrast(65%) !important;
      -webkit-backdrop-filter: blur(4px) contrast(65%) !important;
      border-radius: 15px;
      /* -webkit-backdrop-filter: blur(10px) !important;
                  backdrop-filter: blur(10px) !important;
                  border-radius: 15px; */
  }

  .container-image:hover .overlay {
      opacity: 1;
  }

  .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
  }

  @media(max-width: 500px) {
      .text {
          font-size: 12px;
      }
  }
  /* icons */
  /* svg:not(:root) {
                  overflow: hidden;
                  fill: #cc0033;
                  width: 25%;
                  } */
  .icon-svg {
      width: 25%;
      fill: #cc0033;
  }

  .icon-svg-coin {
      width: 17%;
      fill: #cc0033;
  }
  /* end */
  /* Table CSS START */
  /*  TABLE  */
  .hide-p {
      display: none;
  }

  .responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }

  .sp-table {
      margin-bottom: 4em;
      margin-top: 4em;
  }

      .sp-table p {
          font-size: 0.825em;
          margin: 0;
      }

      .sp-table .sp-table-row {
          display: flex;
          flex-wrap: wrap;
          margin: 0 0 3em 0;
          padding: 0;
      }

          .sp-table .sp-table-row:nth-child(odd) {
              background-color: none;
          }

          .sp-table .sp-table-row:not(:first-child) {
              align-items: stretch;
          }

      .sp-table .sp-table-cell {
          flex-grow: 1;
          width: 100%;
          padding: 1em 2em;
          overflow: hidden;
          border: 1px solid rgba(114, 125, 132, 0.1);
          text-align: center;
      }

          .sp-table .sp-table-cell:nth-child(1) {
              /* background-color: rgba(114, 125, 132, 0.025); */
              background-color: #fff;
              width: 40%;
              border: 1px solid rgba(114, 125, 132, 0.1);
              border-left: none;
          }

          .sp-table .sp-table-cell:nth-child(2) {
              /* background-color: rgba(0, 84, 144, 0.25);
                    background-color: rgba(114, 125, 132, 0.25); */
              background-color: #fff;
              border: 1px solid rgba(114, 125, 132, 0.1)
          }

          .sp-table .sp-table-cell:nth-child(3) {
              /* background-color: rgba(0, 84, 144, 0.15);
                    background-color: rgba(114, 125, 132, 0.15); */
              background-color: #fff;
              border: 1px solid rgba(114, 125, 132, 0.1)
          }

          .sp-table .sp-table-cell:nth-child(4) {
              /* background-color: rgba(0, 84, 144, 0.1);
                    background-color: rgba(114, 125, 132, 0.1); */
              background-color: #fff;
              border: 1px solid rgba(114, 125, 132, 0.1);
              border-right: none;
          }

          .sp-table .sp-table-cell:nth-child(5) {
              /* background-color: rgba(0, 84, 144, 0.05);
                    background-color: rgba(114, 125, 132, 0.05); */
              background-color: #fff;
          }

          .sp-table .sp-table-cell:not(:first-child) {
              width: 50%;
          }

          .sp-table .sp-table-cell img {
              display: inline-block;
              vertical-align: middle;
              width: 2.5em;
          }

          .sp-table .sp-table-cell label {
              display: block;
          }

      .sp-table .sp-table-row:first-child {
          display: none;
      }

      .sp-table .sp-table-cell:first-child {
          text-align: left;
      }

      /* @media (min-width: 768px) { */
      .sp-table .sp-table-cell:not(:first-child) {
          width: 20%;
      }

      .sp-table .sp-table-cell {
          width: 20%;
          border-right: none;
          border-left: none;
      }

      .sp-table .sp-table-row {
          margin: 0;
      }

      .sp-table .sp-table-cell label {
          display: none;
      }

      .sp-table .sp-table-row:first-child {
          display: flex;
      }

  .text-header {
      color: #fff !important;
  }

  .forword-arrow {
      padding-left: 20px;
  }

  .title-first {
      font-size: 20px;
      margin-top: 50px;
  }
  /* align-content */
  .flex-align {
      display: flex;
  }

  .align-p {
      flex: 2;
  }

  .align-h {
      flex: 2;
  }
  /* Table CSS END */
  /* Table responsive */
  @media(min-width: 600px) and (max-width: 991px) {
      .sp-table-row {
          width: 992px;
          /* 600 */
      }

      .sp-table .sp-table-cell:first-child {
          text-align: left;
          position: sticky;
          left: 0;
      }
  }

  @media(max-width: 559px) {
      .sp-table-row {
          width: 600px !important;
          /* 600 */
      }

      .sp-table .sp-table-cell:first-child {
          text-align: left;
          position: sticky;
          left: 0;
      }

      .sp-table .sp-table-cell {
          padding: 11px 4px !important;
      }

      p.text-header {
          font-size: xx-small;
      }

      h4.text-header {
          font-size: 10px;
      }

      .title-first {
          font-size: 13px;
          margin-top: 50px;
      }
  }
  /* end */
  /* Table-images-side */
  .flex-new {
      display: flex;
      align-items: center;
  }

  .first-row {
      padding-left: 20px;
  }

  .center {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  /* mobile-section */
  .flex-box-mobile {
      align-items: center;
      display: flex;
      justify-content: center;
      flex-flow: column;
      text-align: center;
  }

  .align-m {
      flex: 2;
      font-weight: bold;
  }

  .align-p-m {
      flex: 3
  }

  @media(min-width: 992px) {
      .flex-box-mobile {
          flex: 0 0 25%;
      }

      .margin-btn {
          margin-top: 100px;
      }
  }

  @media(max-width: 991px) {
      .mobile-margin {
          margin: 30px 0 30px 0;
      }
  }

  .hide-p {
      display: none;
  }

  .lowercase {
      text-transform: none !important;
  }
  /* div#compare{
                    scroll-margin-top: 50px;
                  } */

.ribbon {
    --m: 1px;
    position: absolute;
    top: 0;
    color: #fff;
    padding: .1em 1.8em;
    background: var(--c,crimson);
    border-bottom: var(--m) solid #0007;
    clip-path: polygon( 100% calc(100% - var(--m)),100% 100%,calc(100% - var(--m)) calc(100% - var(--m)),var(--m) calc(100% - var(--m)), 0 100%,0 calc(100% - var(--m)),999px calc(100% - var(--m) - 999px),calc(100% - 999px) calc(100% - var(--m) - 999px))
}

.right {
    right: 0;
    transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
}

.left {
    left: 0;
    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
}

@supports (-moz-appearance:none) {
    .ribbon {
        background: linear-gradient(to top,#0000 1px,#0005 0 var(--m),#0000 0) border-box, linear-gradient(var(--c,crimson) 0 0) 50%/ calc(100% - 2px) calc(100% - 2px) no-repeat border-box;
        border-bottom-color: #0000;
    }
}

.card.clickableDiv > ul {
    flex: 1;
}