/*-----------------------------------*\
    //         
    character modification
    // \*-----------------------------------*/
    .pixel-head {
      height: auto !important;
      background: linear-gradient(rgba(0, 0, 0, 0.758), rgba(0, 0, 0, 0.758)), url(../Img/trending/wp4533279.jpg);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
    
    .tourn-title {
      /* @include padd(20px, 80px, 20px, 80px); */
      background: linear-gradient(rgba(0, 0, 0, 0.758), rgba(0, 0, 0, 0.758)), url(../Img/trending/wp4533279.jpg);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      text-align: center;
    }
    
    .tourn-title-text {
      color: #ff0000;
      text-shadow: 12px 11px 0 rgba(0, 0, 0, 0.51), 5px 5px 10px rgba(0, 0, 0, 0.57);
    }
    
    .tourn-trphy-img {
      height: 450px !important;
      width: 450px !important;
    }
    
    /*-----------------------------------*\
        //         
        trending 
        // \*-----------------------------------*/
    .trending-section {
      box-shadow: 0 -5px 3px -3px rgb(255, 255, 255), 0 5px 3px -3px rgb(255, 255, 255);
      background-color: black;
    }
    
    .trending-section-ops {
      box-shadow: 0 -5px 3px -3px rgb(255, 255, 255), 0 5px 3px -3px rgb(255, 255, 255);
      background-color: black;
      position: relative !important;
      height: 1000px;
    }
    
    .discord-part-joinn {
      box-shadow: 0 -5px 3px -3px rgb(255, 255, 255), 0 5px 3px -3px rgb(255, 255, 255);
    }
    
    .container-fluid {
      --bs-gutter-x: 0rem !important;
    }
    
    .trending-title-ops {
      color: white;
      font-weight: 700;
      font-style: italic;
      text-align: center;
      font-size: 40px;
      text-transform: capitalize;
      font-family: "Arial", "Helvetica", "sans-serif";
      margin-bottom: 0%;
      padding-top: 40px !important;
      padding-bottom: 40px !important;
    }
    
    .trending-title {
      color: white;
      font-weight: 700;
      font-style: italic;
      text-align: center;
      font-size: 40px;
      text-transform: capitalize;
      font-family: "Arial", "Helvetica", "sans-serif";
      margin-bottom: 0%;
      padding-top: 40px !important;
      padding-bottom: 40px !important;
    }
    
    .tr-main {
      position: absolute;
      top: 56%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      height: 800px;
      background: #f5f5f5;
      box-shadow: 0 10px 20px #dbdbdb;
      overflow: hidden;
    }
    
    .tr-main .slide .item {
      width: 200px;
      height: 300px;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      border-radius: 20px;
      box-shadow: 0 30px 50px #505050;
      background-position: 50% 50%;
      background-size: cover;
      display: inline-block;
      transition: 0.5s;
    }
    
    .t-p-6, .t-p-5, .t-p-4, .t-p-3, .t-p-2, .t-p-1 {
      background-size: cover;
      background-position: center;
    }
    
    .t-p-1 {
      background: linear-gradient(rgba(0, 0, 0, 0.358), rgba(0, 0, 0, 0.33)), url(../Img/trending/tre/Minecraft-Wallapper-For-Desktop.jpg);
    }
    
    .t-p-2 {
      background: linear-gradient(rgba(0, 0, 0, 0.358), rgba(0, 0, 0, 0.33)), url(../Img/trending/tre/fortnite-marvel-chromebook-wallpaper.jpg);
    }
    
    .t-p-3 {
      background: linear-gradient(rgba(0, 0, 0, 0.358), rgba(0, 0, 0, 0.33)), url(../Img/trending/tre/8f9bf7b5118f20449f2eac93c4ba74c0.jpg);
    }
    
    .t-p-4 {
      background: linear-gradient(rgba(0, 0, 0, 0.358), rgba(0, 0, 0, 0.33)), url(../Img/trending/tre/9a73ade3b2bacc3f91274acd0a85728c.jpg);
    }
    
    .t-p-5 {
      background: linear-gradient(rgba(0, 0, 0, 0.358), rgba(0, 0, 0, 0.33)), url(../Img/trending/tre/b615b337b708ebdada18e741b11cf9fa.jpeg);
    }
    
    .t-p-6 {
      background: linear-gradient(rgba(0, 0, 0, 0.358), rgba(0, 0, 0, 0.33)), url(../Img/trending/tre/wallpapersden.com_apex-legends-4k-gaming-poster_3840x2160.jpg);
    }
    
    :root {
      --glow-hue: 222deg;
      --shadow-hue: 180deg;
      --spring-easing: linear(
        0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
        1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
        1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
        0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
        0.998 84%, 1
      );
      --spring-duration: 1.33s;
    }
    
    @property --shimmer {
      syntax: "<angle>";
      inherits: false;
      initial-value: 33deg;
    }
    @keyframes shimmer {
      0% {
        --shimmer: 0deg;
      }
      100% {
        --shimmer: 360deg;
      }
    }
    @keyframes shine {
      0% {
        opacity: 0;
      }
      15% {
        opacity: 1;
      }
      55% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes text {
      0% {
        background-position: 100% center;
      }
      100% {
        background-position: -100% center;
      }
    }
    .t-d-btn {
      color: var(--bg);
      font-weight: 600;
      background-image: linear-gradient(315deg, #200700 -10%, #000000 50%, rgba(49, 0, 0, 0.7882352941) 110%);
      padding: 0.8em 1.4em;
      position: relative;
      isolation: isolate;
      box-shadow: 0 2px 3px 1px hsl(var(--glow-hue), 50%, 20%, 50%), inset 0 -10px 10px -10px hsla(var(--shadow-hue), 10%, 90%, 95%);
      border-radius: 0.66em;
      scale: 1;
      transition: all var(--spring-duration) var(--spring-easing);
    }
    
    .t-d-btn:hover:not(:active),
    .t-d-btn.active {
      transition-duration: calc(var(--spring-duration) * 0.5);
      scale: 1.2;
      box-shadow: 0 4px 8px -2px hsl(var(--glow-hue), 50%, 20%, 50%), inset 0 0 0 transparent;
    }
    
    .t-d-btn:active {
      scale: 1.1;
      transition-duration: calc(var(--spring-duration) * 0.5);
    }
    
    .shimmer {
      position: absolute;
      inset: -40px;
      border-radius: inherit;
      -webkit-mask-image: conic-gradient(from var(--shimmer, 0deg), transparent 0%, transparent 10%, black 36%, black 45%, transparent 50%, transparent 60%, black 85%, black 95%, transparent 100%);
              mask-image: conic-gradient(from var(--shimmer, 0deg), transparent 0%, transparent 10%, black 36%, black 45%, transparent 50%, transparent 60%, black 85%, black 95%, transparent 100%);
      -webkit-mask-size: cover;
              mask-size: cover;
      mix-blend-mode: plus-lighter;
      animation: shimmer 1s linear infinite both;
    }
    
    .t-d-btn:hover .shimmer::before,
    .t-d-btn:hover .shimmer::after,
    .t-d-btn.active .shimmer::before,
    .t-d-btn.active .shimmer::after {
      opacity: 1;
      animation: shine 1.2s ease-in 1 forwards;
    }
    
    .shimmer::before,
    .shimmer::after {
      transition: all 0.5s ease;
      opacity: 0;
      content: "";
      border-radius: inherit;
      position: absolute;
      mix-blend-mode: color;
      inset: 40px;
      pointer-events: none;
    }
    
    .shimmer::before {
      box-shadow: 0 0 3px 2px hsl(var(--glow-hue), 20%, 95%), 0 0 7px 4px hsl(var(--glow-hue), 20%, 80%), 0 0 13px 4px hsl(var(--glow-hue), 50%, 70%), 0 0 25px 5px hsl(var(--glow-hue), 100%, 70%);
      z-index: -1;
    }
    
    .shimmer::after {
      box-shadow: inset 0 0 0 1px hsl(var(--glow-hue), 70%, 95%), inset 0 0 2px 1px hsl(var(--glow-hue), 100%, 80%), inset 0 0 5px 2px hsl(var(--glow-hue), 100%, 70%);
      z-index: 2;
    }
    
    .t-d-btn .text {
      color: transparent;
      -webkit-background-clip: text;
              background-clip: text;
      background-color: rgb(255, 255, 255);
      background-image: linear-gradient(120deg, transparent, hsla(var(--glow-hue), 100%, 80%, 0.66) 40%, hsla(var(--glow-hue), 100%, 90%, 0.9) 50%, transparent 52%);
      background-repeat: no-repeat;
      background-size: 300% 300%;
      background-position: center 200%;
    }
    
    .t-d-btn:hover .text,
    .t-d-btn.active .text {
      animation: text 0.66s ease-in 1 both;
    }
    
    .slide .item:nth-child(1),
    .slide .item:nth-child(2) {
      top: 0;
      left: 0;
      transform: translate(0, 0);
      border-radius: 0;
      width: 100%;
      height: 100%;
    }
    
    .slide .item:nth-child(3) {
      left: 50%;
    }
    
    .slide .item:nth-child(4) {
      left: calc(50% + 220px);
    }
    
    .slide .item:nth-child(5) {
      left: calc(50% + 440px);
    }
    
    /* here n = 0, 1, 2, 3,... */
    .slide .item:nth-child(n+6) {
      left: calc(50% + 660px);
      opacity: 0;
    }
    
    .item .content {
      position: absolute;
      top: 50%;
      left: 100px;
      width: 300px;
      text-align: left;
      color: #eee;
      transform: translate(0, -50%);
      font-family: system-ui;
      display: none;
    }
    
    .slide .item:nth-child(2) .content {
      display: block;
    }
    
    .content .name {
      font-size: 40px;
      text-transform: uppercase;
      font-weight: bold;
      opacity: 0;
      animation: animate 1s ease-in-out 1 forwards;
    }
    
    .content .des {
      margin-top: 10px;
      margin-bottom: 20px;
      opacity: 0;
      animation: animate 1s ease-in-out 0.3s 1 forwards;
    }
    
    @keyframes animate {
      from {
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
      }
      to {
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
      }
    }
    .button {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 20px;
    }
    
    .button button {
      width: 40px;
      height: 35px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      margin: 0 5px;
      border: 1px solid #000;
      transition: 0.3s;
    }
    
    .button button:hover {
      background: #ababab;
      color: #fff;
    }
    
    /*-----------------------------------*\
           responsive part 
    \*-----------------------------------*/
    @media only screen and (max-width: 843px) {
      .tr-main {
        top: 58%;
        width: 95%;
        height: 430px;
      }
      .trending-section-ops {
        height: 627px;
      }
      .item .content {
        left: 15px;
      }
    }
    @media only screen and (max-width: 633px) {
      .slide .item:nth-child(3) {
        left: 70%;
      }
      .slide .item:nth-child(4) {
        left: calc(70% + 220px);
      }
      .slide .item:nth-child(5) {
        left: calc(70% + 440px);
      }
      /* here n = 0, 1, 2, 3,... */
      .slide .item:nth-child(n+6) {
        left: calc(70% + 660px);
        opacity: 0;
      }
    }
    @media only screen and (max-width: 500px) {
      .content .name {
        font-size: 25px;
      }
      .trending-title-ops {
        font-size: 25px;
      }
      .trending-section-ops {
        height: 565px;
      }
      .content .des {
        font-size: 12px;
      }
      .t-d-btn {
        padding: 0.2em 0.2em !important;
      }
    }
    @media only screen and (max-width: 476px) {
      .slide .item:nth-child(3) {
        left: 90%;
      }
      .slide .item:nth-child(4) {
        left: calc(90% + 220px);
      }
      .slide .item:nth-child(5) {
        left: calc(90% + 440px);
      }
      /* here n = 0, 1, 2, 3,... */
      .slide .item:nth-child(n+6) {
        left: calc(90% + 660px);
        opacity: 0;
      }
      .content .name {
        font-size: 20px;
      }
      .trending-title-ops {
        font-size: 20px;
      }
    }
    @media only screen and (max-width: 370px) {
      .trending-title-ops {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
      }
      .tr-main {
        top: 56%;
        height: 340px;
      }
      .trending-section-ops {
        height: 461px;
      }
      .button button {
        width: 25px;
        height: 25px;
      }
    }
    @media only screen and (max-width: 320px) {
      .slide .item:nth-child(3) {
        left: 97%;
      }
      .slide .item:nth-child(4) {
        left: calc(97% + 220px);
      }
      .slide .item:nth-child(5) {
        left: calc(97% + 440px);
      }
      /* here n = 0, 1, 2, 3,... */
      .slide .item:nth-child(n+6) {
        left: calc(97% + 660px);
        opacity: 0;
      }
    }/*# sourceMappingURL=trending.css.map */