@media (max-width:765px) {
  .hero-main {
  margin-top: 0 !important;
}}

@media (max-width: 765px) {
.hero-artwork {
  height: auto;
  width: 550px ;
}
}

@media (min-width: 978px) and (max-width: 1110px) {
  .hero-artwork {
    margin-left: -8% !important;
}
}

@media (min-width: 769px) and (max-width: 978px) {
  .hero-artwork {
    margin-left: -10% !important;
}
}

@media (min-width: 765px) and (max-width: 769px) {
  .hero-artwork {
    margin-left: -6% !important;
}
}


@media (min-width: 1167px) and (max-width: 1215px) {

.overlay-content {
  scale: 0.95 !important;
  left: 8% !important;
  top: 60% !important;
}
.hero-main{
  scale: 1 !important;
}
  .Client-List{
  scale: 0.95 !important;
  }

.game-item{
  scale: 0.95 !important;
}
.game-thumb {
  scale: 0.95 !important;
}

  .testimonials{
margin-top: -3vh !important;
}

}


@media (min-width: 1076px) and (max-width: 1166px) {
.hero-main{
  scale: 1 !important;
  margin-top: -65px !important;
}
  .Client-List{
  scale: 0.9 !important;
  gap: clamp(0.1rem, 2vw, 0.8rem) !important;
    height: 63vh !important; /* Preferred "keyframe" middle */
  }

.game-item{
  scale: 0.9 !important;
}
.game-thumb {
  scale: 0.9 !important;
}

.overlay-content {
  scale: 0.9 !important;
  left: 6% !important;
  top: 60% !important;
}

  .testimonials{
margin-top: -7vh !important;
}




}



@media (min-width: 1057px) and (max-width: 1075px) {
.hero-main{
  scale: 1 !important;
  margin-top: -95px !important;
    gap: 0.5rem !important;
}
  .Client-List{
  scale: 0.9 !important;
  gap: clamp(0.1rem, 2vw, 0.8rem);
    height: 63vh !important; /* Preferred "keyframe" middle */
  }

.game-item{
  scale: 0.9 !important;
}
.game-thumb {
  scale: 0.9 !important;
}

.overlay-content {
  scale: 0.9 !important;
  left: 6% !important;
  top: 60% !important;
}

  .testimonials{
margin-top: -10vh !important;
}
}

@media (min-width: 1000px) and (max-width: 1056px) {
.hero-main{
  scale: 1;
  margin-top: -105px !important;
}

.hero-artwork{
  left: 1.5% !important;
}
  .Client-List{
  scale: 0.9 !important;
  gap: 0.1rem !important;
  height: 55vh !important;
  }

.game-item{
  scale: 0.9;
}
.game-thumb {
  scale: 0.9;
}

  .testimonials{
margin-top: -10vh !important;
}

.overlay-content {
  scale: 0.75;
  left: 1%!important;
  top: 60% !important;
}
}

@media (min-width: 950px) and (max-width: 999px) {
.hero-main{
  scale: 1 !important;
  margin-top: -125px !important;
}

.hero-artwork{
  left: 2.5% !important;
}
  .Client-List{
  scale: 0.9;
 gap: 0.1rem !important;
  height: 53vh;
  margin-top: 5px;
  }

.game-item{
  scale: 0.9;
}
.game-thumb {
  scale: 0.9;
}

.overlay-content {
  scale: 0.75 !important;
  left: -0.8% !important;
  top: 55% !important;
}

  .testimonials{
margin-top: -15vh !important;
}


}


@media (min-width: 900px) and (max-width: 949px) {
.hero-main{
  scale: 1;
  margin-top: -145px !important;
}

.hero-artwork{
  left: 2.5%;
}
  .Client-List{
  scale: 0.9 !important;
  gap: 0.1rem !important;
  height: 48vh !important;
  margin-top: 5px !important;
  }

.game-item{
  scale: 0.9 !important;
}
.game-thumb {
  scale: 0.9 !important;
}

.overlay-content {
  scale: 0.75 !important;
  left: -0.7% !important;
  top: 55% !important;
}

  .testimonials{
margin-top: -18vh !important;
}

}



@media (min-width: 850px) and (max-width: 899px) {
.hero-main{
  scale: 1;
  margin-top: -175px !important;
}

.hero-artwork{
  left: 2.5% !important;
}
  .Client-List{
  scale: 0.85;
  gap: 0.1rem !important;
  height: 48vh;
  margin-top: 3px;
  }

.game-item{
  scale: 0.85;
}
.game-thumb {
  scale: 0.85;
}

.overlay-content {
  scale: 0.75;
  left: -2% !important;
  top: 55%;
}

  .testimonials{
margin-top: -20vh !important;
}

}


@media (min-width: 800px) and (max-width: 849px) {
.hero-main{
  scale: 1;
  margin-top: -210px !important;
    grid-template-columns: 1fr 180px !important;
    gap: 0.2rem;
}

.hero-artwork{
  left: 2.5% !important;
}
  .Client-List{
  scale: 0.8;
  gap: 0.1rem !important;
  height: 48vh;
  margin-top: 1px;
  width: 30vw;
  margin-left: -15%;
  }

.game-item{
  scale: 0.8;
}
.game-thumb {
  scale: 0.8;
}

.overlay-content {
  scale: 0.7 !important;
  left: -4% !important;
  top: 55%;
}

  .testimonials{
margin-top: -26vh !important;
}

}



@media (min-width: 770px) and (max-width: 799px) {
.hero-main{
  scale: 1;
  margin-top: -230px !important;
    grid-template-columns: 1fr 180px !important;
    gap: 0.065rem !important;
}

.hero-artwork{
  left: 2% !important;
}
  .Client-List{
  scale: 0.8;
  gap: 0.1rem !important;
  height: 48vh;
  margin-top: 1px;
  width: 28vw !important;
  margin-left: -8% !important;
  }

.game-item{
  scale: 0.8;
}
.game-thumb {
  scale: 0.8;
}

.overlay-content {
  scale: 0.7 !important;
  left: -2% !important;
  top: 50% !important;
}

  .testimonials{
margin-top: -28vh !important;
}

}




















/* 🔥 MOBILE CAROUSEL: max-width 769px */
@media (max-width: 769px) {
  /* Hide desktop hero elements */
  .hero-artwork,
  .game-item.pop-active .game-thumb,
  .hero-overlay { 
    display: none !important; 
  }
  
  .game-thumb {
    animation: none !important;
    transition: none !important;
  }
  
  .game-item:hover .game-thumb {
    transform: none !important; /* No hover pop */
    scale: 1 !important;
  }
  
  /* Kill shimmer too */
  .game-item::before,
  .game-item.shimmer-active::before {
    animation: none !important;
    background: none !important;
  }
  
  /* Kill item hover slide */
  .game-item:hover {
    transform: none !important;
    translateX: 0 !important;
  }

.browser-tabs {
    display: flex !important;
    align-items: center;
    justify-content: center !important; /* 🔥 CENTER */
    gap: 1rem;
    backdrop-filter: blur(20px);
    border-radius: 10px;
    max-width: max-content;
    position: relative;
    margin: 1rem auto 1rem auto !important; /* Auto margins = center */
    left: 0 !important; /* Reset */
    right: 0 !important;
    transform: none !important;
    z-index: 12;
}

  /* Client-List → Horizontal carousel */
  .Client-List {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem !important;
    width: 75rem !important;
    height: auto !important;
    padding: 0 !important;
    margin: 2rem auto !important;
    justify-content: flex-start;
    contain: layout style paint; /* Isolate rendering */
  animation: mobileScroll 20s linear infinite;
  flex-shrink: 0 !important; /* NO compress */
  }
  
  /* Vertical cards → Epic Games mobile style */
  .game-item {
    flex: 0 0 220px !important; /* Mobile width */
    height: auto !important;
    max-width: 240px;
    padding: 0 !important;
    border-radius: 20px !important;
  }
  
  .game-thumb {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px;
    object-fit: cover;
  }
  
  .game-item span { 
    display: none !important; 
  }
  
  /* Mobile fade edges */
  .hero-main::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(to right, #220000 0%, transparent 80%);
    z-index: 10;
    pointer-events: none;
  }
  

.hero-main{
  overflow: hidden;
  margin-top: -230px !important;
}

  .hero-main::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(to left, #220000 0%, transparent 80%);
    z-index: 10;
    pointer-events: none;
  }

  .testimonials {
    margin-top: -28vh !important;
    max-width: 73rem;
  }








.testimonials{
scale: 0.95 !important;
}

.testi-head h2{
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size: 1.1rem;
  color:#fff;
  margin:0;
}




.niche-head h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  margin: 0;
}



.niche-card{
left: -0.8%;
}




}

@keyframes mobileScroll {
  0% { transform: translateX(-1%); }
  100% { transform: translateX(-40%); }
}










/* STEP 1: Hide filter-right below 1187px (Epic Games style) */
@media (max-width: 1186px) {
  .filter-right {
    display: none !important;
  }
  
  .filter-container {
    grid-template-columns: 1fr !important; /* Full width for cards */
    gap: 1.5rem; /* Smaller gap */
  }
  
  .filter-left {
    margin-left: 0 !important; /* Full width */
  }

.clients-heading {
  margin-left: -1vw;
}
.sort-container {
  margin-left: -1vw;
}



}


@media (min-width: 1270px) and (max-width: 1370px) {




.filter-section{
  margin-top: -18vh !important;
}


  
}


@media (min-width: 1187px) and (max-width: 1269px) {


.filter-section{
  margin-top: -28vh !important;
scale: 0.95 !important;
}

.niche-section{
  scale: 0.95 !important;
}

  .testimonials{
    scale: 0.95 !important;
  }
}

@media (min-width: 1095px) and (max-width: 1186px) {


.filter-section{
  margin-top: -33vh !important;

}

  .filter-section{
    scale: 0.95;
  }

.niche-section{
  scale: 0.95 !important;
}

  .testimonials{
    scale: 0.95 !important;
  }
}
  

@media (min-width: 960px) and (max-width: 1094px) {
  .filter-section{
    scale: 0.95 !important;
    margin-top: -33vh !important;
  }

  .case-card{
    scale: 0.85;
    margin-top: -4vh;
  }

  .clients-heading {
  margin-left: 0.6vw !important;
}

.sort-container {
  margin-left: 0.5vw !important;
}
.filter-left {
  gap: 0rem !important;

}

.filter-section{
  margin-top: -30vh;

}

.niche-section{
  scale: 0.95 !important;
}

  .testimonials{
    scale: 0.95 !important;
  }

}







@media (min-width: 778px) and (max-width: 959px) {
  .filter-section{
    scale: 0.95;
    margin-top: -33vh !important;
  }

  .case-card{
    scale: 0.85 !important;
    margin-top: -4vh;
  }

  .clients-heading {
  margin-left: 0.6vw;
}

.sort-container {
  margin-left: 0.5vw;
}
.filter-right {
  gap: 0rem;
display: none !important;
}

.filter-section{
  margin-top: -30vh;
}

.niche-section{
  scale: 0.95 !important;
}

  .testimonials{
    scale: 0.95 !important;
  }


}




@media (min-width: 720px) and (max-width: 777px) {
  .filter-section{
    scale: 0.95 !important;
    margin-top: -28vh !important;
  }

  .case-card{
    scale: 0.75 !important;
    margin-top: -5vh;
    margin-left: -2vw;
  }

  .clients-heading {
  margin-left: 0.6vw !important;
}

.sort-container {
  margin-left: 0.5vw !important;
}
.filter-left {
  gap: 0rem !important;

}



.niche-section{
scale: 0.95;
margin-top: -6vh !important;
}

  .testimonials{
    scale: 0.95 !important;
  }

}




@media (min-width: 670px) and (max-width: 719px) {

.niche-section{
scale: 0.95;
margin-top: -6vh !important;
}


  .filter-section {
    scale: 0.95 !important;
  }

  .case-card {
    scale: 1 !important;
    margin-top: 0vh !important;
    margin-left: 5vw !important;

  }

.filter-left {
  gap: -10% !important;
}

.filter-section{
  margin-top: -35vh !important;

}

  .clients-heading {
  margin-left: 0.6vw !important;
}

.sort-container {
  margin-left: 0.5vw !important;
}

  /* ✅ PERFECT 2-CARD SPACING */
  .filter-left {
    grid-template-columns: repeat(2, 1fr) !important; /* Force 2 equal cards */
    gap: 1rem !important; /* NICE space between cards */
    justify-content: center; /* Center the 2 cards */
    margin-left: 0 !important; /* Full width */
  }
}





@media (min-width: 630px) and (max-width: 669px) {

.niche-section{
scale: 0.95;
margin-top: -6vh !important;
}


  .filter-section {
    scale: 0.95 !important;
  }

  .case-card {
    scale: 1 !important;
    margin-top: 0vh !important;
    margin-left: 3.7vw !important;

  }

.filter-left {
  gap: -10% !important;
}

.filter-section{
  margin-top: -35vh !important;

}

  .clients-heading {
  margin-left: 0.6vw !important;
}

.sort-container {
  margin-left: 0.5vw !important;
}

  /* ✅ PERFECT 2-CARD SPACING */
  .filter-left {
    grid-template-columns: repeat(2, 1fr) !important; /* Force 2 equal cards */
    gap: 1rem !important; /* NICE space between cards */
    justify-content: center; /* Center the 2 cards */
    margin-left: 0 !important; /* Full width */
  }
}



@media (min-width: 600px) and (max-width: 629px) {
 .niche-section{
scale: 0.95;
margin-top: -6vh !important;
}


  .filter-section {
    scale: 0.95 !important;
  }

  .case-card {
    scale: 1 !important;
    margin-top: 0vh !important;
    margin-left: 3vw !important;

  }

.filter-left {
  gap: -10% !important;
}

.filter-section{
  margin-top: -35vh !important;

}

  .clients-heading {
  margin-left: 0.6vw !important;
}

.sort-container {
  margin-left: 0.5vw !important;
}

  /* ✅ PERFECT 2-CARD SPACING */
  .filter-left {
    grid-template-columns: repeat(2, 1fr) !important; /* Force 2 equal cards */
    gap: 1rem !important; /* NICE space between cards */
    justify-content: center; /* Center the 2 cards */
    margin-left: 0 !important; /* Full width */
  }
}


@media (min-width: 550px) and (max-width: 599px) {

 .niche-section{
scale: 0.95;
margin-top: -6vh !important;
}


  .filter-section {
    scale: 0.95 !important;
  }

  .case-card {
    scale: 0.85 !important;
    margin-top: 0 0 auto !important;
    padding: 0 !important;
  }

.filter-left {
  gap: -10% !important;
}

.filter-section{
  margin-top: -35vh !important;

}

  .clients-heading {
  margin-left: 0.6vw !important;
}

.sort-container {
  margin-left: 0.5vw !important;
}

  /* ✅ PERFECT 2-CARD SPACING */
  .filter-left {
    grid-template-columns: repeat(2, 1fr) !important; /* Force 2 equal cards */
    gap: 1rem !important; /* NICE space between cards */
    justify-content: center; /* Center the 2 cards */
    margin-left: 0 !important; /* Full width */
  }

}



@media (min-width: 500px) and (max-width: 549px) {

.niche-section{
scale: 0.95;
margin-top: -6vh !important;
}


  .filter-section {
    scale: 0.9;
  }

  .case-card {
margin-left: -3.5%;
    scale: 0.85;
    margin-top: -8%;
  }

  /* ✅ PERFECT 2-CARD SPACING */
  .filter-left {
    grid-template-columns: repeat(2, 1fr) !important; /* Force 2 equal cards */
    gap: 0.1rem !important; /* NICE space between cards */
    justify-content: center; /* Center the 2 cards */
    margin-left: 0 !important; /* Full width */
  }

.filter-section{
  margin-top: -44vh !important;
}

  .clients-heading {
  margin-left: 0.6vw;
}

.sort-container {
  margin-left: 0.5vw;
}


}






@media (min-width: 450px) and (max-width: 499px) {

.niche-section{
scale: 0.95;
margin-top: -6vh !important;
}


  .filter-section {
    scale: 0.9;
  }

  .case-card {
margin-left: -7.5% !important;
    scale: 0.8;
    margin-top: -8%;
  }

  /* ✅ PERFECT 2-CARD SPACING */
  .filter-left {
    grid-template-columns: repeat(2, 1fr) !important; /* Force 2 equal cards */
    gap: 0.1rem !important; /* NICE space between cards */
    justify-content: center; /* Center the 2 cards */
    margin-left: 0 !important; /* Full width */
  }

.filter-section{
  margin-top: -44vh !important;
}

  .clients-heading {
  margin-left: 0.6vw;
}

.sort-container {
  margin-left: 0.5vw;
}


}


@media (max-width: 449px) {

  .niche-section{
scale: 0.9;
margin-top: -6vh !important;
}

  .filter-section {
    scale: 0.9;
  }

.niche-card{
scale: 0.9;
margin-left: -3vw;
}

  .case-card {
margin: 0 !important; /* Remove all margins */
    width: 100%; /* Slightly smaller than full width */
    max-width: 320px; /* Cap max width */
  }

  /* ✅ PERFECT 2-CARD SPACING */
  .filter-left {
 grid-template-columns: 1fr !important; /* Single column */
    gap: 1.5rem !important; /* Vertical spacing */
    justify-content: center !important; /* Horizontal center */
    align-content: center !important; /* Vertical center */
    margin: 0 auto !important; /* Container centering */
    padding: 0 1rem; /* Side padding */
    max-width: 400px; /* Container width limit */
  }

.filter-section{
  margin-top: -70vh !important;
}

  .clients-heading {
  margin-left: 0.6vw;
}

.sort-container {
  margin-left: 0.5vw;
}


}





}