/*--------------------------------------------------------------
#GAME CARD
--------------------------------------------------------------*/
  .games-container{
    margin: 0 50px;
  }
  .game-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .big-games .row.content{
    margin-bottom: 200px;
  }
  .big-games .row.content div{
    cursor: pointer;
  }
  .big-games .content h3 {
    font-weight: 600;
    font-size: 19px;
    margin-top: -.25rem;
  }
  .big-games .content a{
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-weight: 400;
    font-size: 40px;
    color: var(--color-secondary);
  }
  .big-games .content a:hover{
    cursor: pointer;
    color: var(--color-primary);
  }
  @media (max-width: 990px){
    .games-container{
      margin: 0;
    }
    .row.content{
      display: none !important;
      margin-bottom: 100px !important;
    }
  }
  /*--------------------------------------------------------------
  # Portfolio Section
  --------------------------------------------------------------*/
  
  .portfolio-item {
    position: relative;
    border: 1px solid var(--color-white);
    overflow: hidden;
    z-index: 1;
    border-radius: 16px;
  }
  
  .portfolio-item img {
    transition: all 0.3s;
    border-radius: 16px;
  }
  
  .portfolio-item:before {
    content: "";
    inset: 0;
    position: absolute;
    background: rgba(var(--color-secondary-rgb), 0.8);
    z-index: 2;
    transition: 0.5s;
    visibility: hidden;
    opacity: 0;
  }
  
  .portfolio-item .portfolio-info {
    opacity: 0;
    position: absolute;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .portfolio-item .portfolio-info h4 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-default);
    color: var(--color-default);
  }
  
  .portfolio-item:hover img {
    filter: brightness(75%);
  }
  
  .portfolio-item:hover .portfolio-info {
    opacity: 1;
    inset: auto -5px 0 0;
    background: var(--color-white);
  }

  /*--------------------------------------------------------------*/
  
  .mobile-phone{
    margin: 0;
    position: absolute;
    width: 18rem;
    height: auto;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mobile-phone img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
  }

  #phone-video{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 18.2rem;
  }

  .mask  {
    -webkit-mask-image:url(/assets/img/videoMask.png);
    -webkit-mask-position:center center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:cover;
  
    mask-image:url(/assets/img/videoMask.png);
    mask-position:center center;
    mask-repeat:no-repeat;
    mask-size:cover;
}

  .mobile-carousel{
    display: none;
  }
  .carousel-wrapper{
    display: none;
  }
  .carousel-item{
    transition: all 0.3s ease-in-out !important;
  }
  @media (max-width: 1300px){
    .mobile-phone{
      margin: 0;
      position: absolute;
      width: 16rem;
    }
    #phone-video{
      width: 16.2rem;
    }
  }
  
  @media (max-width: 990px){
    .mobile-carousel{
      display: block;
      position: absolute;
      bottom: 0;
      margin-bottom: 25px;
      margin-left: 45px;
    }
    .carousel-wrapper{
      display: block;
    }
    .mobile-phone{
      padding: 0 4rem;
      margin: 0 auto;
      position: relative;
      top: 0;
      left: 0;
      width: 26rem;
      height: auto;
      transform: none;
      margin-top: -50px;
      margin-bottom: 70px;
    }
    #phone-video{
      width: 18.2rem;
    }
    .carousel-item .card a:hover{
      cursor: pointer;
      color: var(--color-primary);
    }
    .carousel-item .card{
      width: 200px;
      height: 75px;
      padding: 0;
      margin: 0;
    }

    .carousel-item .card h3 {
      font-weight: 600;
      font-size: 14px;
      margin-top: .4rem;
      padding: 0 .4rem;
    }
    .carousel-item .card a{
      font-weight: 400;
      font-size: 26px;
      color: var(--color-secondary);
    }
    .carousel-wrapper{
      position: absolute;
      bottom: 55px;
      left: 0;
      width: 100%;
    }
  }
  @media (max-width: 500px){
    .mobile-carousel{
      margin-left: 35px;
    }
    .mobile-phone{
      width: 25rem;
    }
    #phone-video{
      width: 17.2rem;
    }
  }  

  .card-clicked{
    outline: 3px  solid var(--color-primary) !important;
  }

  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2304cdff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
   }
   
   .carousel-control-next-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2304cdff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
   }