html {
    overflow: -moz-scrollbars-none; /* Firefox */
    scrollbar-width: none; /* Firefox 64+ */
  }
  
  html::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
  }


body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: white;
}

@font-face {
    font-family: 'airstrike';
    src: url('Fonts/airstrike.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Flexible code for responsiveness */

#container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 3px;
    width: 100%;
    overflow: hidden;
    min-height: 100vh; /* Ensure container fills viewport */
    grid-auto-rows: 1fr;
}

.video-section{
    min-height: 100vh;
}

#container span {
    display: block;
    aspect-ratio: 1 / 1; 
    background: #111;
    width: 100%; 
    border-radius: 4px;
    z-index: 10;
}

#cursor{
    left: -9999px;
    top: -9999px;
    position: absolute;
    width: 250px;
    height: 250px;
    background: #0f0;
    transform: translate(-50%,-50%);
    z-index: 1;
    border-radius: 50%;
    animation: animate 4s linear infinite;
}

#cursor::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
}
#cursor::after
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    background: #0f0;
    border-radius: 50%;
}

@keyframes animate {
    0%
    {
        filter: hue-rotate(0deg) blur(50px);
    }
    100%
    {
        filter: hue-rotate(360deg) blur(50px);
    } 
}

.hero-text {
    position: absolute;
    top: 50%;
    right: 23vw;
    transform: translateY(-50%); 
    text-align: right;
    z-index: 10;
    max-width: 90%;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start; /* Changed from center to flex-start */
    align-items: center;
    background-color: transparent;
    padding-left: 13.5vw; 
    z-index: 10;
}

.glitch-text {
    font-family: 'airstrike',sans-serif;
    color: white;
    text-transform: uppercase;
    display: block;
    line-height: 1;
    opacity: 0; 
    transform: translateX(100px); 
}


.glitch-text:first-child {
    font-size: clamp(3rem, 21vw, 10rem);
    animation: slideInFromRight 1.5s ease-out 0.5s forwards;
    background: linear-gradient(135deg, 
    #8a2be2 0%,    /* Deep Purple */
    #9370db 25%,   /* Medium Purple */
    #00bfff 50%,   /* Deep Sky Blue */
    #ba55d3 75%,   /* Medium Orchid */
    #9932cc 100%   /* Dark Orchid */
    );
    padding: 0 30px; /*Adds breathing room for gradients*/
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 
        0 0 10px rgba(138, 43, 226, 0.7),
        0 0 20px rgba(0, 191, 255, 0.5);    
}


.ignited {
    font-size: clamp(2rem, 7vw, 6rem);
    margin-top: -1rem; /* Adjust spacing between words */
    background: linear-gradient(45deg, 
        #ff00ff 0%,    /* Magenta */
        #9400d3 30%,   /* Dark Violet */
        #4b0082 60%,   /* Indigo */
        #ff1493 100%   /* Deep Pink */
    );
    padding: 0 30px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 
        0 0 5px rgba(255, 0, 255, 0.5),
        0 0 20px rgba(148, 0, 211, 0.3);
    position: relative;
    animation: 
        fadeIn 1s ease-out 1.6s forwards, /* 2s = 0.5s delay + 1.5s duration */
        pulse-glow 5s ease-in-out 2.6s infinite; /* Slower pulse */
}

@keyframes pulse-glow {
    0%, 100% { 
        text-shadow: 
            0 0 5px rgba(255, 0, 255, 0.5),
            0 0 10px rgba(148, 0, 211, 0.3);
    }
    50% { 
        text-shadow: 
            0 0 8px rgba(255, 20, 147, 0.6),  /* Slightly stronger glow */
            0 0 15px rgba(255, 0, 255, 0.4);   /* Wider spread */
    }
}


@keyframes slideInFromRight {
    0% {
        opacity: 1;
        transform: translateX(calc(400px + 10vw));
    }
    100% {
        opacity: 1;
        transform: translateX(calc(10px + 0.05vw));
    }
}

@keyframes fadeIn {
    0% { 
        opacity: 0;
        transform: translateX(200px);
    }
    100% { 
        opacity: 1;
        transform: translateX(50px);
    }
}


.overlay-img {
    max-width: 27vw;   
    width: 100%;       
    height: auto;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    pointer-events: none;
    z-index: 15;
    margin-top: 15vh;       
    
    animation: 
        slideIn 1.5s ease-out forwards,
        float 3s ease-in-out 1.5s infinite; /* Starts after slideIn completes */
    opacity: 0;
    transform: translateX(-10vw); /* Scales better with screen size */
}

@keyframes slideIn {
    0% {
        opacity: 1;
        transform: translateX(-600px);
    }
    100% {
        opacity: 1;
        transform: translateX(100px);
    }
}

/* Responsiveness */

.most-popular {
    width: 100%;
    padding: 55px 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(58, 12, 163, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(201, 12, 12, 0.15) 0%, transparent 40%),
        linear-gradient(to bottom, #0a0612 0%, #1a0a2e 100%);
    position: relative;
    overflow: hidden;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* STORY DRIVEN CSS */
.section-title {
    font-family: 'airstrike', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 0;
    background: linear-gradient(90deg, #8a2be2, #00bfff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
}

.section-subtitle {
    font-size: 1.1rem;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.glow-divider {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #8a2be2, #00bfff);
    margin: -15px auto 22px;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

.two-column-layout {
    display: flex;
    /* width: min(2000px, calc(100vw - 60px));   */
    height: auto; /* Flexible height */
    min-height: min(520px, 50vw);  /* Minimum height */
    /* aspect-ratio: 1120/550;  */
    margin: 0 auto; /* Horizontal centering */
    gap: 20px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box; /* Include padding in width */
}

.two-column-layout.has-background {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: local;
}

.left-column {
    width: 17%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px 0 0 10px;
    margin-left: -20px; /* Counteracts parent's padding */
    margin-top: -20px; /* Aligns with top edge */
    margin-bottom: -20px; /* Extends to bottom edge */
    padding: 20px; /* Restores inner spacing */
    position: relative; /* For proper z-index layering */
    z-index: 1; /* Ensures rounded corners appear above content */
}

/* ===== GAME CARD ===== */
.games-grid{
    display: flex;
    justify-content: left;

}

.game-card{
    width: 220px; /* height: 250px; */
    height: auto;
    background: rgba(20, 10, 40, 0.6);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(138, 43, 226, 0.3);
    transition: all 0.5s ease;
    margin: 20px;
    opacity: 0.9;
}

.game-card:hover {
    opacity: 1;
    
}

.game-card:hover:not(.pressed){
    transform: perspective(500px) rotateX(8deg) rotateY(8deg);
    transition: transform 0.4s ease;
}

/* Ensure pressed state overrides hover */
.game-card.pressed{
    transform:translateX(25px) ; /* Moves down slightly (adjust pixels as needed) */
    transition: transform 0.2s ease, box-shadow 1.5s ease-out; /* Smooth movement */
    /* transform: translateY(4px) scale(0.98);  */
    opacity: 1;
    border: 1px solid transparent;
    animation: cyberpunk-glow 1.5s ease-out infinite alternate;  
}

/* When hovering on a pressed card, maintain the pressed state */
.game-card.pressed:hover {
    transform: translateX(25px);
}

@keyframes cyberpunk-glow {
    0% {
      box-shadow: 
        0 0 5px #8a2be2,
        0 0 10px #00bfff,
        0 0 15px #ff00ff;
    }
    100% {
      box-shadow: 
        0 0 10px #8a2be2,
        0 0 20px #00bfff,
        0 0 30px #ff00ff;
    }
  }
  
.card-image{
    height: 100px;
    background-position: top;
    position: relative;
    background-size:cover;
}

.game-logo-overlay {
    position: absolute;
    z-index: 10;
    opacity: 0;
    filter: drop-shadow(0 0 15px rgb(0, 26, 255));
    bottom: 20px;
    right: 20px;
    width: 180px; /* Fixed width */
    height: 60px; /* Fixed height */

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Only apply transition when pressed */
.game-logo-overlay.active {
    opacity: 1;
    transition: opacity 0.6s ease;

}

section.most-popular:nth-child(3) .left-column .game-card:nth-child(2) .card-image,
.two-column-layout.has-background[style*="WWE2k24_1.jpg"] {
    background-position: bottom !important; /* or 'bottom' */
    background-size: cover !important;
}


.game-logo {
    object-fit: contain;
    transform: translateY(0);
    filter: drop-shadow(0 0 0 rgba(17, 0, 255, 0));

}

.game-logo.active {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.6s ease;
    filter: drop-shadow(0 0 15px rgba(17, 0, 255, 0.8));
    /* transform: translateY(-40px); */
}

 .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s ease-out;
    will-change: transform, opacity; 
  }
  
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  .animate-on-scroll.is-hidden {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  } 

.section-animation-wrapper {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s ease-out;
    will-change: transform, opacity; 
    overflow: hidden;
    border-radius: 10px;
}
  
.section-animation-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* border-radius: 10px; */
}
  
.section-animation-wrapper.is-hidden {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    /* border-radius: 10px; */
}

/* Button container for centering */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
    background: 
      radial-gradient(circle at 20% 30%, rgba(58, 12, 163, 0.15) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(201, 12, 12, 0.15) 0%, transparent 40%),
      linear-gradient(to bottom, #0a0612 0%, #1a0a2e 100%);
    width: 100%;
  }
  
  /* Button styling */
  .button {
    --main-color: #8a2be2;
    --hover-color: #00bfff;
    --active-color: #ff00ff;
    position: relative;
    font-family: 'airstrike', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 300;
    background: transparent;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    border-radius: 10px;
    padding: 0.8em 1.2em;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    cursor: pointer;
    text-decoration: none;
  }
  
  .button:hover {
    color: white;
    border-color: var(--hover-color);
    box-shadow: 0 0 10px var(--hover-color),
                0 0 20px var(--hover-color),
                0 0 40px var(--hover-color);
  }
  
  .button:active {
    transform: scale(0.97);
    border-color: var(--active-color);
    box-shadow: 0 0 10px var(--active-color),
                0 0 20px var(--active-color),
                0 0 40px var(--active-color);
  }
  
  .button-content {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
  }
  
  .button-text {
    z-index: 2;
  }
  
  .button-icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  .button:hover .button-icon {
    transform: translateX(3px);
  }
  
  /* Modified fill effect - now starts from left */
  .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Start from outside the left edge */
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--main-color), var(--hover-color));
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  .button:hover::before {
    left: 0; /* Move to cover the button */
  }
  
  .button:active::before {
    background: linear-gradient(to right, var(--hover-color), var(--active-color));
  }
  
  /* Animation for the button */
  .button {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.4);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(138, 43, 226, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(138, 43, 226, 0);
    }
  }





/* Responsive adjustments for Games  */

 /* @media (min-width: 576px) and (max-width: 991px) {
    .two-column-layout.has-background {
        background-position: center center;
        min-height: calc(100px + (90 * ((100vw - 576px) / 4)));
        min-width: calc(100px + (10 * ((100vw - 576px) / 30)));
    }
} */

/* @media (min-width: 481px) and (max-width: 575px) {
    .two-column-layout.has-background {
        background-position: center 35%;
        min-height: calc(300px + (100 * ((100vw - 481px) / 160)));
        min-width: calc(200px + (100 * ((100vw - 481px) / 94)));
    }
}  */


/* @media (min-width: 320px) and (max-width: 575px) {
    .two-column-layout.has-background {
        background-position: center 25%;
        min-height: calc(100px + (100 * ((100vw - 320px) / 160)));
        min-width: calc(1px + (100 * ((100vw - 320px) / 160)));
    }
} */

@media (min-width: 320px) and (max-width: 575px) {
    @keyframes cyberpunk-glow {
        0% {
        box-shadow: 
            0 0 1px #8a2be2,
            0 0 2px #00bfff,
            0 0 3px #ff00ff;
        }
        100% {
        box-shadow: 
            0 0 2px #8a2be2,
            0 0 3px #00bfff,
            0 0 4px #ff00ff;
        }
    }

    .game-card.pressed {
        animation: cyberpunk-glow 3s ease-out infinite alternate;
    }

    .section-title {
        font-size: calc(1rem + ((100vw - 320px) / 255 * 8));
        letter-spacing: calc(1px + ((100vw - 320px) / 255 * 2));
    }

    .most-popular {
        padding: calc(30px + ((100vw - 320px) / 255 * 15)) 0;
    }

    .section-container {
        max-width: calc(500px + ((100vw - 320px) / 255 * 240));
    }

    .two-column-layout {
        min-width: calc(min(100px + ((100vw - 320px) / 255 * 220), 95vw));
        min-height: calc(100px + ((100vw - 320px) / 255 * 100));
        background-position: center 25%;
    }

    .game-card {
        width: calc(70px + ((100vw - 320px) / 255 * 50));
        height: calc(40px + ((100vw - 320px) / 255 * 25));
        margin: calc(-12px + ((100vw - 320px) / 255 * 3));
    }

    .card-image {
        height: calc(40px + ((100vw - 320px) / 255 * 30));
    }

    .button {
        font-size: calc(14px + ((100vw - 320px) / 255 * 2));
        padding: calc(0.6em + ((100vw - 320px) / 255 * 0.1)) calc(0.8em + ((100vw - 320px) / 255 * 0.2));
        letter-spacing: calc(1px + ((100vw - 320px) / 255 * 1));
    }

    .button-container {
        padding: calc(30px + ((100vw - 320px) / 255 * 15)) 0;
    }

    .glow-divider {
        width: calc(40px + ((100vw - 320px) / 255 * 20));
    }

    .section-subtitle {
        font-size: calc(0.5rem + ((100vw - 320px) / 255 * 3));
    }

    /* Game Logo Specific Sizes */
    .game-logo.active[src*="eldenring_logo.png"] {
    max-width: calc(115px + ((100vw - 320px) / 255 * 90)) !important;
    max-height: calc(120px + ((100vw - 320px) / 255 * 110)) !important;
}

.game-logo.active[src*="spider-man2_logo.png"] {
    max-width: calc(280px + ((100vw - 320px) / 255 * 110)) !important;
    max-height: calc(68px + ((100vw - 320px) / 255 * 40)) !important;
}

.game-logo.active[src*="black_myth_wukong_logo.png"] {
    max-width: calc(90px + ((100vw - 320px) / 255 * 50)) !important;
    max-height: calc(68px + ((100vw - 320px) / 255 * 40)) !important;
}

.game-logo.active[src*="assassins-creed_logo2.png"] {
    max-width: calc(80px + ((100vw - 320px) / 255 * 38)) !important;
    max-height: calc(50px + ((100vw - 320px) / 255 * 28)) !important;
}

.game-logo.active[src*="horizon-forbidden-west_logo.png"] {
    max-width: calc(170px + ((100vw - 320px) / 255 * 100)) !important;
    max-height: calc(74px + ((100vw - 320px) / 255 * 40)) !important;
}

.game-logo.active[src*="fifa25_logo.png"] {
    max-width: calc(100px + ((100vw - 320px) / 255 * 70)) !important;
    max-height: calc(74px + ((100vw - 320px) / 255 * 35)) !important;
}

.game-logo.active[src*="mortal-kombat_logo4.png"] {
    max-width: calc(95px + ((100vw - 320px) / 255 * 60)) !important;
    max-height: calc(272px + ((100vw - 320px) / 255 * 112)) !important;
}

.game-logo.active[src*="gta5_logo.png"] {
    max-width: calc(80px + ((100vw - 320px) / 255 * 60)) !important;
    max-height: calc(65px + ((100vw - 320px) / 255 * 30)) !important;
}

.game-logo.active[src*="godofwar_logo.png"] {
    max-width: calc(120px + ((100vw - 320px) / 255 * 50)) !important;
    max-height: calc(55px + ((100vw - 320px) / 255 * 40)) !important;
}

.game-logo.active[src*="ghost_logo2.png"] {
    max-width: calc(90px + ((100vw - 320px) / 255 * 60)) !important;
    max-height: calc(68px + ((100vw - 320px) / 255 * 80)) !important;
}

.game-logo.active[src*="WWE2k24_logo.png"] {
    max-width: calc(160px + ((100vw - 320px) / 255 * 70)) !important;
    max-height: calc(60px + ((100vw - 320px) / 255 * 40)) !important;
}

.game-logo.active[src*="F1_23_logo.png"] {
    max-width: calc(70px + ((100vw - 320px) / 255 * 50)) !important;
    max-height: calc(52px + ((100vw - 320px) / 255 * 29)) !important;
}

    .game-logo-overlay {
        right: calc(-41px + ((100vw - 320px) / 255 * 40)) !important; /* Scales from 20px to 30px */
        bottom: calc(-15px + ((100vw - 320px) / 255 * 20)) !important; /* Scales from 30px to 50px */
    }

    .game-logo.active {
    transform: translateY(-20px);
}
}

/* .two-column-layout {
        width: calc(min(280px + ((100vw - 320px) / 255 * 220), 95vw));
        min-height: calc(300px + ((100vw - 320px) / 255 * 100));
    } */

    /* @media screen and (max-width: 320px) {
    .two-column-layout.has-background {
        background-position: center 15%;
        min-height: 200px;
    }
} */



@media (min-width: 576px) and (max-width: 991px) {
    .section-title {
        font-size: calc(1.6rem + ((100vw - 576px) / 415 * 10));
        letter-spacing: calc(3px + ((100vw - 576px) / 415 * 2));
    }

    .most-popular {
        padding: calc(40px + ((100vw - 576px) / 415 * 15)) 0;
    }

    .section-container {
        max-width: calc(700px + ((100vw - 576px) / 415 * 660));
    }

    /* .two-column-layout {
        min-width: calc(min(100px + ((100vw - 576px) / 415 * 600), 95vw));
        min-height: calc(200px + ((100vw - 576px) / 415 * 10));
        background-position: center 35%;
    } */

    .two-column-layout {
        width: calc(100% + ((100vw - 576px) / 415 * -50)); 
        /* min-width: calc(500px + ((100vw - 576px) / 415 * 200));  */
        height: calc(350px + ((100vw - 576px) / 415 * 150)); 
        /* min-height: calc(280px + ((100vw - 576px) / 415 * 120));  */
        background-position: center 35%;
    }

    .game-card {
        width: calc(120px + ((100vw - 576px) / 415 * 50));
        height: calc(67px + ((100vw - 576px) / 415 * 30));
        margin: calc(-8px + ((100vw - 576px) / 415 * 10));
    }

    .card-image {
        height: calc(80px + ((100vw - 576px) / 415 * 20));
    }

    .button {
        font-size: calc(16px + ((100vw - 576px) / 415 * 2));
        padding: calc(0.7em + ((100vw - 576px) / 415 * 0.1)) calc(1.0em + ((100vw - 576px) / 415 * 0.2));
        letter-spacing: calc(2px + ((100vw - 576px) / 415 * 1));
    }

    .button-container {
        padding: calc(45px + ((100vw - 576px) / 415 * 15)) 0;
    }

    .glow-divider {
        width: calc(55px + ((100vw - 576px) / 415 * 23));
    }

    .section-subtitle {
        font-size: calc(0.7rem + ((100vw - 576px) / 415 * 6));
    }
        /* Game Logo Specific Sizes */
    .game-logo.active[src*="eldenring_logo.png"] {
        max-width: calc(220px + ((100vw - 576px) / 415 * 82)) !important; /* Scales from 202px to 284px */
        max-height: calc(150px + ((100vw - 576px) / 415 * 42)) !important; /* Scales from 102px to 144px */
    }

    .game-logo.active[src*="spider-man2_logo.png"] {
        max-width: calc(392px + ((100vw - 576px) / 415 * 162)) !important; /* Scales from 382px to 544px */
        max-height: calc(112px + ((100vw - 576px) / 415 * 42)) !important; /* Scales from 102px to 144px */
    }

    .game-logo.active[src*="black_myth_wukong_logo.png"] {
        max-width: calc(162px + ((100vw - 576px) / 415 * 62)) !important; /* Scales from 162px to 224px */
        max-height: calc(102px + ((100vw - 576px) / 415 * 42)) !important; /* Scales from 102px to 144px */
    }

    .game-logo.active[src*="assassins-creed_logo2.png"] {
        max-width: calc(132px + ((100vw - 576px) / 415 * 52)) !important; /* Scales from 132px to 184px */
        max-height: calc(82px + ((100vw - 576px) / 415 * 32)) !important; /* Scales from 82px to 114px */
    }

    .game-logo.active[src*="horizon-forbidden-west_logo.png"] {
        max-width: calc(342px + ((100vw - 576px) / 415 * 142)) !important; /* Scales from 342px to 484px */
        max-height: calc(119px + ((100vw - 576px) / 415 * 42)) !important; /* Scales from 112px to 154px */
    }

    .game-logo.active[src*="fifa25_logo.png"] {
        max-width: calc(172px + ((100vw - 576px) / 415 * 82)) !important; /* Scales from 172px to 244px */
        max-height: calc(112px + ((100vw - 576px) / 415 * 42)) !important; /* Scales from 112px to 154px */
    }

    .game-logo.active[src*="mortal-kombat_logo4.png"] {
        max-width: calc(182px + ((100vw - 576px) / 415 * 72)) !important; /* Scales from 182px to 254px */
        max-height: calc(392px + ((100vw - 576px) / 415 * 162)) !important; /* Scales from 392px to 554px */
    }

    /* Additional Game Logo Sizes */
    .game-logo.active[src*="gta5_logo.png"] {
        max-width: calc(180px + ((100vw - 576px) / 415 * 82)) !important; /* Scales from 202px to 284px */
        max-height: calc(90px + ((100vw - 576px) / 415 * 42)) !important; /* Scales from 102px to 144px */
    }

    .game-logo.active[src*="godofwar_logo.png"] {
        max-width: calc(200px + ((100vw - 576px) / 415 * 72)) !important; /* Scales from 172px to 244px */
        max-height: calc(98px + ((100vw - 576px) / 415 * 32)) !important; /* Scales from 82px to 114px */
    }

    .game-logo.active[src*="ghost_logo2.png"] {
        max-width: calc(152px + ((100vw - 576px) / 415 * 62)) !important; /* Scales from 152px to 214px */
        max-height: calc(102px + ((100vw - 576px) / 415 * 42)) !important; /* Scales from 102px to 144px */
    }

    .game-logo.active[src*="WWE2k24_logo.png"] {
        max-width: calc(200px + ((100vw - 576px) / 415 * 82)) !important; /* Scales from 172px to 244px */
        max-height: calc(99px + ((100vw - 576px) / 415 * 32)) !important; /* Scales from 82px to 114px */
    }

    .game-logo.active[src*="F1_23_logo.png"] {
        max-width: calc(132px + ((100vw - 576px) / 415 * 52)) !important; /* Scales from 132px to 184px */
        max-height: calc(82px + ((100vw - 576px) / 415 * 32)) !important; /* Scales from 82px to 114px */
    }
    .game-logo-overlay {
        right: calc(2px + ((100vw - 576px) / 415 * 70)) !important; /* Scales from 90px to 130px */
        bottom: calc(8px + ((100vw - 576px) / 415 * 20)) !important; /* Scales from 60px to 90px */
    }

    .game-logo.active {
        transform: translateY(-30px);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .section-title {
        font-size: calc(2.2rem + ((100vw - 992px) / 207 * 0.8));
        letter-spacing: calc(3px + ((100vw - 992px) / 207 * 2));
    }

    .most-popular {
        padding: calc(40px + ((100vw - 992px) / 207 * 15)) 0;
    }

    .section-container {
        max-width: calc(1000px + ((100vw - 992px) / 207 * 300));
    }

    .two-column-layout {
        width: calc(min(950px + ((100vw - 992px) / 207 * 250), 90vw));
        min-height: calc(400px + ((100vw - 992px) / 207 * 120));
    }

    .game-card {
        width: calc(170px + ((100vw - 992px) / 207 * 40));
        height: calc(97px + ((100vw - 992px) / 207 * 20));
        margin: calc(15px + ((100vw - 992px) / 207 * 5));
    }

    .card-image {
        height: calc(100px + ((100vw - 992px) / 207 * 20));
    }

    .button {
        font-size: calc(16px + ((100vw - 992px) / 207 * 2));
        padding: calc(0.6em + ((100vw - 992px) / 207 * 0.2)) calc(1em + ((100vw - 992px) / 207 * 0.2));
        letter-spacing: calc(2px + ((100vw - 992px) / 207 * 1));
    }

    .button-container {
        padding: calc(45px + ((100vw - 992px) / 207 * 15)) 0;
    }

    .glow-divider {
        width: calc(80px + ((100vw - 992px) / 207 * 20));
    }

    .section-subtitle {
        font-size: calc(1rem + ((100vw - 992px) / 207 * 0.1));
    }
    
    /* Game Logo Specific Sizes */
    .game-logo.active[src*="eldenring_logo.png"] {
        max-width: calc(280px + ((100vw - 992px) / 207 * 80)) !important; /* Scales from 336px to 420px */
        max-height: calc(190px + ((100vw - 992px) / 207 * 90)) !important; /* Scales from 160px to 200px */
    }

    .game-logo.active[src*="spider-man2_logo.png"] {
        max-width: calc(648px + ((100vw - 992px) / 207 * 162)) !important; /* Scales from 648px to 810px */
        max-height: calc(168px + ((100vw - 992px) / 207 * 42)) !important; /* Scales from 168px to 210px */
    }

    .game-logo.active[src*="black_myth_wukong_logo.png"] {
        max-width: calc(220px + ((100vw - 992px) / 207 * 40)) !important; /* Scales from 256px to 320px */
        max-height: calc(160px + ((100vw - 992px) / 207 * 40)) !important; /* Scales from 160px to 200px */
    }

    .game-logo.active[src*="assassins-creed_logo2.png"] {
        max-width: calc(190px + ((100vw - 992px) / 207 * 50)) !important; /* Scales from 200px to 250px */
        max-height: calc(110px + ((100vw - 992px) / 207 * 30)) !important; /* Scales from 120px to 150px */
    }

    .game-logo.active[src*="horizon-forbidden-west_logo.png"] {
        max-width: calc(300px + ((100vw - 992px) / 207 * 140)) !important; /* Scales from 560px to 700px */
        max-height: calc(176px + ((100vw - 992px) / 207 * 44)) !important; /* Scales from 176px to 220px */
    }

    .game-logo.active[src*="fifa25_logo.png"] {
        max-width: calc(280px + ((100vw - 992px) / 207 * 70)) !important; /* Scales from 280px to 350px */
        max-height: calc(176px + ((100vw - 992px) / 207 * 44)) !important; /* Scales from 176px to 220px */
    }

    .game-logo.active[src*="mortal-kombat_logo4.png"] {
        max-width: calc(270px + ((100vw - 992px) / 207 * 72)) !important; /* Scales from 288px to 360px */
        max-height: calc(640px + ((100vw - 992px) / 207 * 160)) !important; /* Scales from 640px to 800px */
    }

    /* Additional Game Logo Sizes */
    .game-logo.active[src*="gta5_logo.png"] {
        max-width: calc(200px + ((100vw - 992px) / 207 * 40)) !important; /* Scales from 320px to 400px */
        max-height: calc(160px + ((100vw - 992px) / 207 * 40)) !important; /* Scales from 160px to 200px */
    }

    .game-logo.active[src*="godofwar_logo.png"] {
        max-width: calc(290px + ((100vw - 992px) / 207 * 70)) !important; /* Scales from 280px to 350px */
        max-height: calc(125px + ((100vw - 992px) / 207 * 30)) !important; /* Scales from 120px to 150px */
    }

    .game-logo.active[src*="ghost_logo2.png"] {
        max-width: calc(190px + ((100vw - 992px) / 207 * 60)) !important; /* Scales from 240px to 300px */
        max-height: calc(140px + ((100vw - 992px) / 207 * 30)) !important; /* Scales from 160px to 200px */
    }

    .game-logo.active[src*="WWE2k24_logo.png"] {
        max-width: calc(300px + ((100vw - 992px) / 207 * 90)) !important; /* Scales from 280px to 350px */
        max-height: calc(140px + ((100vw - 992px) / 207 * 50)) !important; /* Scales from 120px to 150px */
    }

    .game-logo.active[src*="F1_23_logo.png"] {
        max-width: calc(180px + ((100vw - 992px) / 207 * 40)) !important; /* Scales from 200px to 250px */
        max-height: calc(120px + ((100vw - 992px) / 207 * 40)) !important; /* Scales from 120px to 150px */
    }

    .game-logo-overlay {
        right: calc(60px + ((100vw - 992px) / 207 * 60)) !important; /* Scales from 20px to 30px */
        bottom: calc(20px + ((100vw - 992px) / 207 * 20)) !important; /* Scales from 20px to 30px */
    }

    .game-logo.active {
        transform: translateY(-40px);
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .section-title {
        font-size: calc(3rem + ((100vw - 1200px) / 200 * 0.5));
        letter-spacing: calc(5px + ((100vw - 1200px) / 200 * 1));
    }

    .most-popular {
        padding: calc(55px + ((100vw - 1200px) / 200 * 10)) 0;
    }

    .section-container {
        max-width: calc(1200px + ((100vw - 1200px) / 200 * 100));
    }

    .two-column-layout {
        width: calc(min(1100px + ((100vw - 1200px) / 200 * 150), 90vw));
        min-height: calc(520px + ((100vw - 1200px) / 200 * 80));
    }

    .game-card {
        width: calc(220px + ((100vw - 1200px) / 200 * 30));
        margin: calc(20px + ((100vw - 1200px) / 200 * 5));
    }

    .card-image {
        height: calc(100px + ((100vw - 1200px) / 200 * 15));
    }

    .button {
        font-size: calc(18px + ((100vw - 1200px) / 200 * 2));
        padding: calc(0.8em + ((100vw - 1200px) / 200 * 0.1)) calc(1.2em + ((100vw - 1200px) / 200 * 0.1));
        letter-spacing: calc(3px + ((100vw - 1200px) / 200 * 1));
    }

    .button-container {
        padding: calc(60px + ((100vw - 1200px) / 200 * 10)) 0;
    }

    .glow-divider {
        width: calc(100px + ((100vw - 1200px) / 200 * 15));
    }

    .section-subtitle {
        font-size: calc(1.1rem + ((100vw - 1200px) / 200 * 0.1));
    }
    
    /* Game Logo Specific Sizes */
    .game-logo.active[src*="eldenring_logo.png"] {
        max-width: calc(390px + ((100vw - 1200px) / 200 * 40)) !important; /* Scales from 420px to 480px */
        max-height: calc(200px + ((100vw - 1200px) / 200 * 25)) !important; /* Scales from 200px to 230px */
    }

    .game-logo.active[src*="spider-man2_logo.png"] {
        max-width: calc(810px + ((100vw - 1200px) / 200 * 120)) !important; /* Scales from 810px to 930px */
        max-height: calc(210px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 210px to 240px */
    }

    .game-logo.active[src*="black_myth_wukong_logo.png"] {
        max-width: calc(300px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 320px to 370px */
        max-height: calc(200px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 200px to 230px */
    }

    .game-logo.active[src*="assassins-creed_logo2.png"] {
        max-width: calc(250px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 250px to 290px */
        max-height: calc(150px + ((100vw - 1200px) / 200 * 25)) !important; /* Scales from 150px to 175px */
    }

    .game-logo.active[src*="horizon-forbidden-west_logo.png"] {
        max-width: calc(700px + ((100vw - 1200px) / 200 * 80)) !important; /* Scales from 700px to 800px */
        max-height: calc(220px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 220px to 250px */
    }

    .game-logo.active[src*="fifa25_logo.png"] {
        max-width: calc(350px + ((100vw - 1200px) / 200 * 50)) !important; /* Scales from 350px to 400px */
        max-height: calc(220px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 220px to 250px */
    }

    .game-logo.active[src*="mortal-kombat_logo4.png"] {
        max-width: calc(320px + ((100vw - 1200px) / 200 * 40)) !important; /* Scales from 360px to 410px */
        max-height: calc(500px + ((100vw - 1200px) / 200 * 80)) !important; /* Scales from 800px to 900px */
    }

    /* Additional Game Logo Sizes */
    .game-logo.active[src*="gta5_logo.png"] {
        max-width: calc(260px + ((100vw - 1200px) / 200 * 50)) !important; /* Scales from 400px to 460px */
        max-height: calc(180px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 200px to 230px */
    }

    .game-logo.active[src*="godofwar_logo.png"] {
        max-width: calc(340px + ((100vw - 1200px) / 200 * 50)) !important; /* Scales from 350px to 400px */
        max-height: calc(160px + ((100vw - 1200px) / 200 * 25)) !important; /* Scales from 150px to 175px */
    }

    .game-logo.active[src*="ghost_logo2.png"] {
        max-width: calc(280px + ((100vw - 1200px) / 200 * 35)) !important; /* Scales from 300px to 345px */
        max-height: calc(200px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 200px to 230px */
    }

    .game-logo.active[src*="WWE2k24_logo.png"] {
        max-width: calc(370px + ((100vw - 1200px) / 200 * 40)) !important; /* Scales from 350px to 400px */
        max-height: calc(190px + ((100vw - 1200px) / 200 * 25)) !important; /* Scales from 150px to 175px */
    }

    .game-logo.active[src*="F1_23_logo.png"] {
        max-width: calc(240px + ((100vw - 1200px) / 200 * 30)) !important; /* Scales from 250px to 290px */
        max-height: calc(150px + ((100vw - 1200px) / 200 * 25)) !important; /* Scales from 150px to 175px */
    }

    .game-logo-overlay {
        right: calc(120px + ((100vw - 1200px) / 200 * 5)) !important; /* Scales from 130px to 180px */
        bottom: calc(40px + ((100vw - 1200px) / 200 * 20)) !important; /* Scales from 100px to 140px */
    }

    .game-logo.active {
        transform: translateY(-40px);
    }
}

@media (min-width: 1401px) and (max-width: 1600px) {
    .section-title {
        font-size: calc(3.5rem + ((100vw - 1400px) / 200 * 0.5));
        letter-spacing: calc(6px + ((100vw - 1400px) / 200 * 1));
    }

    .most-popular {
        padding: calc(65px + ((100vw - 1400px) / 200 * 10)) 0;
    }

    .section-container {
        max-width: calc(1350px + ((100vw - 1400px) / 200 * 100));
    }

    .two-column-layout {
        width: calc(min(1250px + ((100vw - 1400px) / 200 * 150), 90vw));
        min-height: calc(600px + ((100vw - 1400px) / 200 * 80));
    }

    .game-card {
        width: calc(250px + ((100vw - 1400px) / 200 * 30));
        margin: calc(25px + ((100vw - 1400px) / 200 * 5));
    }

    .card-image {
        height: calc(115px + ((100vw - 1400px) / 200 * 15));
    }

    .button {
        font-size: calc(20px + ((100vw - 1400px) / 200 * 2));
        padding: calc(0.9em + ((100vw - 1400px) / 200 * 0.1)) calc(1.3em + ((100vw - 1400px) / 200 * 0.1));
        letter-spacing: calc(4px + ((100vw - 1400px) / 200 * 1));
    }

    .button-container {
        padding: calc(70px + ((100vw - 1400px) / 200 * 10)) 0;
    }

    .glow-divider {
        width: calc(105px + ((100vw - 1400px) / 200 * 13));
    }

    .section-subtitle {
        font-size: calc(1.4rem + ((100vw - 1400px) / 200 * 0.1));
    }

    /* Game Logo Specific Sizes */
    .game-logo.active[src*="eldenring_logo.png"] {
        max-width: calc(430px + ((100vw - 1400px) / 200 * 40)) !important;
        max-height: calc(215px + ((100vw - 1400px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="spider-man2_logo.png"] {
        max-width: calc(870px + ((100vw - 1400px) / 200 * 120)) !important;
        max-height: calc(225px + ((100vw - 1400px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="black_myth_wukong_logo.png"] {
        max-width: calc(340px + ((100vw - 1400px) / 200 * 25)) !important;
        max-height: calc(210px + ((100vw - 1400px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="assassins-creed_logo2.png"] {
        max-width: calc(275px + ((100vw - 1400px) / 200 * 30)) !important;
        max-height: calc(162px + ((100vw - 1400px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="horizon-forbidden-west_logo.png"] {
        max-width: calc(760px + ((100vw - 1400px) / 200 * 80)) !important;
        max-height: calc(235px + ((100vw - 1400px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="fifa25_logo.png"] {
        max-width: calc(375px + ((100vw - 1400px) / 200 * 50)) !important;
        max-height: calc(235px + ((100vw - 1400px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="mortal-kombat_logo4.png"] {
        max-width: calc(380px + ((100vw - 1400px) / 200 * 40)) !important;
        max-height: calc(800px + ((100vw - 1400px) / 200 * 80)) !important;
    }

    .game-logo.active[src*="gta5_logo.png"] {
        max-width: calc(310px + ((100vw - 1400px) / 200 * 50)) !important;
        max-height: calc(195px + ((100vw - 1400px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="godofwar_logo.png"] {
        max-width: calc(355px + ((100vw - 1400px) / 200 * 50)) !important;
        max-height: calc(185px + ((100vw - 1400px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="ghost_logo2.png"] {
        max-width: calc(300px + ((100vw - 1400px) / 200 * 30)) !important;
        max-height: calc(210px + ((100vw - 1400px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="WWE2k24_logo.png"] {
        max-width: calc(390px + ((100vw - 1400px) / 200 * 40)) !important;
        max-height: calc(202px + ((100vw - 1400px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="F1_23_logo.png"] {
        max-width: calc(265px + ((100vw - 1400px) / 200 * 30)) !important;
        max-height: calc(162px + ((100vw - 1400px) / 200 * 25)) !important;
    }

    .game-logo-overlay {
        right: calc(110px + ((100vw - 1400px) / 200 * 2)) !important;
        bottom: calc(50px + ((100vw - 1400px) / 200 * 20)) !important;
    }

    .game-logo.active {
        transform: translateY(-45px);
    }
}


@media (min-width: 1601px) and (max-width: 1800px) {
    .section-title {
        font-size: calc(4rem + ((100vw - 1600px) / 200 * 0.5));
        letter-spacing: calc(7px + ((100vw - 1600px) / 200 * 1));
    }

    .most-popular {
        padding: calc(75px + ((100vw - 1600px) / 200 * 10)) 0;
    }

    .section-container {
        max-width: calc(1490px + ((100vw - 1600px) / 200 * 130));
    }

    .two-column-layout {
        width: calc(min(1400px + ((100vw - 1600px) / 200 * 150), 90vw));
        min-height: calc(750px + ((100vw - 1600px) / 200 * 80));
    }

    .game-card {
        width: calc(280px + ((100vw - 1600px) / 200 * 30));
        margin: calc(25px + ((100vw - 1600px) / 200 * 5));
    }

    .card-image {
        height: calc(130px + ((100vw - 1600px) / 200 * 15));
    }

    .button {
        font-size: calc(22px + ((100vw - 1600px) / 200 * 2));
        padding: calc(1em + ((100vw - 1600px) / 200 * 0.1)) calc(1.4em + ((100vw - 1600px) / 200 * 0.1));
        letter-spacing: calc(5px + ((100vw - 1600px) / 200 * 1));
    }

    .button-container {
        padding: calc(80px + ((100vw - 1600px) / 200 * 10)) 0;
    }

    .glow-divider {
        width: calc(110px + ((100vw - 1600px) / 200 * 15));
    }

    .section-subtitle {
        font-size: calc(1.3rem + ((100vw - 1600px) / 200 * 1.4));
    }

    /* Game Logo Specific Sizes */
    .game-logo.active[src*="eldenring_logo.png"] {
        max-width: calc(470px + ((100vw - 1600px) / 200 * 40)) !important;
        max-height: calc(240px + ((100vw - 1600px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="spider-man2_logo.png"] {
        max-width: calc(930px + ((100vw - 1600px) / 200 * 120)) !important;
        max-height: calc(255px + ((100vw - 1600px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="black_myth_wukong_logo.png"] {
        max-width: calc(370px + ((100vw - 1600px) / 200 * 30)) !important;
        max-height: calc(230px + ((100vw - 1600px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="assassins-creed_logo2.png"] {
        max-width: calc(290px + ((100vw - 1600px) / 200 * 30)) !important;
        max-height: calc(175px + ((100vw - 1600px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="horizon-forbidden-west_logo.png"] {
        max-width: calc(800px + ((100vw - 1600px) / 200 * 80)) !important;
        max-height: calc(265px + ((100vw - 1600px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="fifa25_logo.png"] {
        max-width: calc(400px + ((100vw - 1600px) / 200 * 50)) !important;
        max-height: calc(265px + ((100vw - 1600px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="mortal-kombat_logo4.png"] {
        max-width: calc(410px + ((100vw - 1600px) / 200 * 40)) !important;
        max-height: calc(900px + ((100vw - 1600px) / 200 * 80)) !important;
    }

    .game-logo.active[src*="gta5_logo.png"] {
        max-width: calc(320px + ((100vw - 1600px) / 200 * 40)) !important;
        max-height: calc(190px + ((100vw - 1600px) / 200 * 20)) !important;
    }

    .game-logo.active[src*="godofwar_logo.png"] {
        max-width: calc(430px + ((100vw - 1600px) / 200 * 50)) !important;
        max-height: calc(195px + ((100vw - 1600px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="ghost_logo2.png"] {
        max-width: calc(330px + ((100vw - 1600px) / 200 * 30)) !important;
        max-height: calc(220px + ((100vw - 1600px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="WWE2k24_logo.png"] {
        max-width: calc(400px + ((100vw - 1600px) / 200 * 40)) !important;
        max-height: calc(215px + ((100vw - 1600px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="F1_23_logo.png"] {
        max-width: calc(290px + ((100vw - 1600px) / 200 * 30)) !important;
        max-height: calc(175px + ((100vw - 1600px) / 200 * 25)) !important;
    }

    .game-logo-overlay {
        right: calc(130px + ((100vw - 1600px) / 200 * 10)) !important;
        bottom: calc(50px + ((100vw - 1600px) / 200 * 20)) !important;
    }

    .game-logo.active {
        transform: translateY(-45px);
    }
}

@media (min-width: 1801px) and (max-width: 2000px) {
    .section-title {
        font-size: calc(4.5rem + ((100vw - 1800px) / 200 * 0.5));
        letter-spacing: calc(8px + ((100vw - 1800px) / 200 * 1));
    }

    .most-popular {
        padding: calc(85px + ((100vw - 1800px) / 200 * 10)) 0;
    }

    .section-container {
        max-width: calc(1700px + ((100vw - 1800px) / 200 * 100));
    }

    .two-column-layout {
        width: calc(min(1550px + ((100vw - 1800px) / 200 * 150), 90vw));
        min-height: calc(830px + ((100vw - 1800px) / 200 * 80));
    }

    .game-card {
        width: calc(300px + ((100vw - 1800px) / 200 * 30));
        margin: calc(30px + ((100vw - 1800px) / 200 * 5));
    }

    .card-image {
        height: calc(145px + ((100vw - 1800px) / 200 * 15));
    }

    .button {
        font-size: calc(24px + ((100vw - 1800px) / 200 * 2));
        padding: calc(1.2em + ((100vw - 1800px) / 200 * 0.1)) calc(1.6em + ((100vw - 1800px) / 200 * 0.1));
        letter-spacing: calc(6px + ((100vw - 1800px) / 200 * 1));
    }

    .button-container {
        padding: calc(90px + ((100vw - 1800px) / 200 * 10)) 0;
    }

    .glow-divider {
        width: calc(125px + ((100vw - 1800px) / 200 * 15));
    }

    .section-subtitle {
        font-size: calc(1.5rem + ((100vw - 1800px) / 200 * 0.1));
    }

    /* Game Logo Specific Sizes */
    .game-logo.active[src*="eldenring_logo.png"] {
        max-width: calc(480px + ((100vw - 1800px) / 200 * 40)) !important;
        max-height: calc(250px + ((100vw - 1800px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="spider-man2_logo.png"] {
        max-width: calc(940px + ((100vw - 1800px) / 200 * 120)) !important;
        max-height: calc(260px + ((100vw - 1800px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="black_myth_wukong_logo.png"] {
        max-width: calc(370px + ((100vw - 1800px) / 200 * 30)) !important;
        max-height: calc(250px + ((100vw - 1800px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="assassins-creed_logo2.png"] {
        max-width: calc(290px + ((100vw - 1800px) / 200 * 30)) !important;
        max-height: calc(175px + ((100vw - 1800px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="horizon-forbidden-west_logo.png"] {
        max-width: calc(800px + ((100vw - 1800px) / 200 * 80)) !important;
        max-height: calc(260px + ((100vw - 1800px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="fifa25_logo.png"] {
        max-width: calc(400px + ((100vw - 1800px) / 200 * 50)) !important;
        max-height: calc(260px + ((100vw - 1800px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="mortal-kombat_logo4.png"] {
        max-width: calc(410px + ((100vw - 1800px) / 200 * 40)) !important;
        max-height: calc(900px + ((100vw - 1800px) / 200 * 80)) !important;
    }

    .game-logo.active[src*="gta5_logo.png"] {
        max-width: calc(460px + ((100vw - 1800px) / 200 * 50)) !important;
        max-height: calc(230px + ((100vw - 1800px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="godofwar_logo.png"] {
        max-width: calc(450px + ((100vw - 1800px) / 200 * 50)) !important;
        max-height: calc(215px + ((100vw - 1800px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="ghost_logo2.png"] {
        max-width: calc(345px + ((100vw - 1800px) / 200 * 35)) !important;
        max-height: calc(230px + ((100vw - 1800px) / 200 * 30)) !important;
    }

    .game-logo.active[src*="WWE2k24_logo.png"] {
        max-width: calc(400px + ((100vw - 1800px) / 200 * 40)) !important;
        max-height: calc(245px + ((100vw - 1800px) / 200 * 25)) !important;
    }

    .game-logo.active[src*="F1_23_logo.png"] {
        max-width: calc(290px + ((100vw - 1800px) / 200 * 30)) !important;
        max-height: calc(175px + ((100vw - 1800px) / 200 * 25)) !important;
    }

    .game-logo-overlay {
        right: calc(170px + ((100vw - 1800px) / 200 * -10)) !important;
        bottom: calc(60px + ((100vw - 1800px) / 200 * 20)) !important;
    }

    .game-logo.active {
        transform: translateY(-45px);
    }
}


/* Hero Section responsiveness */
@media (min-width: 320px) and (max-width: 575px) {
     #container {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 1px;
    }

    .video-section {
        min-height: calc(55vh + (100vw - 320px) * 0.1); 
    }

    #cursor {
        width: calc(90px + ((100vw - 320px) / 100 * 2));
        height: calc(70px + ((100vw - 320px) / 100 * 2));
    }

    @keyframes animate {
    0%
    {
        filter: hue-rotate(0deg) blur(20px);
    }
    100%
    {
        filter: hue-rotate(360deg) blur(20px);
    } 
}

    .hero-text {
        right: calc(22vw + ((100vw - 320px) / 100 * 0.5)); /* starts at 6vw, increases slowly */
        max-width: 85%; 
    }

    .glitch-text:first-child {
        font-size: clamp(3.5rem, 12vw, 7rem);
        padding: 0 calc(13px + ((100vw - 320px) / 100 * 1.5)); 
    }

    .ignited {
        font-size: clamp(2rem, 8vw, 5rem);
        padding: 0 calc(14px + ((100vw - 320px) / 100 * 1));
        margin-top: -0.4rem;
    }

    .overlay-img {
        max-width: calc(30vw + ((100vw - 320px) / 100 * 1));
        margin-top: calc(8vw + ((100vw - 320px) / 100 * 0.4));
    }

    @keyframes slideIn {
        0% {
            opacity: 1;
            transform: translateX(calc(-200px - (100vw - 320px) * 0.04));
        }
        100% {
            opacity: 1;
            transform: translateX(calc(5px + (100vw - 320px) * 0.06));
        }
    }

    @keyframes slideInFromRight {
        0% {
            opacity: 1;
            transform: translateX(calc((185px + 5vw) + (100vw - 320px) * 0.06));
        }
        100% {
            opacity: 1;
            transform: translateX(calc((35px + 0.2vw) - (100vw - 320px) * 0.15));
        }
    }

    @keyframes fadeIn {
        0% { 
            opacity: 0;
            transform: translateX(calc(90px + (100vw - 320px) * 0.03));
        }
        100% { 
            opacity: 1;
            transform: translateX(calc(50px - (100vw - 320px) * 0.06));
        }
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    #container {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 1.5px; 
    }

    #cursor {
        width: calc(160px + ((100vw - 576px) / 100 * 2));
        height: calc(160px + ((100vw - 576px) / 100 * 2));
    }

    .hero-text {
        right: calc(10vw + ((100vw - 576px) / 100 * 1));
        max-width: 70%;
    }

    .glitch-text:first-child {
        font-size: clamp(1.8rem, 12vw, 6rem);
        padding: 0 calc(20px + ((100vw - 576px) / 100 * 2));
    }

    .ignited {
        font-size: clamp(1.5rem, 7vw, 4rem);
        padding: 0 calc(18px + ((100vw - 576px) / 100 * 1.5));
        margin-top: -0.6rem;
    }

    .overlay-img {
        max-width: calc(26vw + ((100vw - 576px) / 100 * 0.8));
        margin-top: calc(7vw + ((100vw - 576px) / 100 * 0.5));
    }

    @keyframes slideIn {
        0% {
            opacity: 1;
            transform: translateX(calc(-280px - (100vw - 576px) * 0.05));
        }
        100% {
            opacity: 1;
            transform: translateX(calc(40px + (100vw - 576px) * 0.08));
        }
    }

    @keyframes slideInFromRight {
        0% {
            opacity: 1;
            transform: translateX(calc((140px + 6vw) + (100vw - 576px) * 0.08));
        }
        100% {
            opacity: 1;
            transform: translateX(calc((-75px + 0.3vw) - (100vw - 576px) * 0.2));
        }
    }

    @keyframes fadeIn {
        0% { 
            opacity: 0;
            transform: translateX(calc(80px + (100vw - 576px) * 0.04));
        }
        100% { 
            opacity: 1;
            transform: translateX(calc(-60px - (100vw - 576px) * 0.08));
        }
    }

}

 @media (min-width: 992px) and (max-width: 1199px) {
     #container {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 2px;
    }

    #cursor {
        /* Adds 2px for every 100px beyond 992px */
        width: calc(200px + ((100vw - 992px) / 50 * 2));
        height: calc(200px + ((100vw - 992px) / 50 * 2));
    }

    .hero-text {
        right: calc(20vw + ((100vw - 992px) / 100 * 1)); /* adds 1vw every 100px beyond 992px */
        max-width: 85%;
    }

    .image-overlay {
        padding-left: calc(11vw + ((100vw - 992px) / 100 * 0.5)); /* adds 0.5vw every 100px */
    }

    .glitch-text:first-child {
        font-size: clamp(2.5rem, 18vw, 8rem);
        padding: 0 25px;
    }

    .ignited {
        font-size: clamp(1.8rem, 6vw, 5rem); /* Already optimal */
        padding: 0 calc(25px + ((100vw - 992px) / 100 * 2)); /* increases padding slowly */
        margin-top: -0.8rem;
    }

    .overlay-img {
        max-width: calc(25vw + ((100vw - 992px) / 100 * 1)); /* slowly grows beyond 992px */
        margin-top: calc(7vw + ((100vw - 992px) / 100 * 0.5)); /* slight upward margin shift */
    }
    
    /* slide in works correctly */
    @keyframes slideInFromRight {         
        0% {             
            opacity: 1;             
            transform: translateX(calc((350px + 8vw) + (100vw - 992px) * 0.1));         
        }         
        100% {             
            opacity: 1;             
            transform: translateX(calc((-5px + 0.4vw) - (100vw - 992px) * 0.3));         
        }     
    }

    /* slide in works correctly */
    @keyframes slideIn {         
        0% {             
            opacity: 1;             
            transform: translateX(calc(-300px - (100vw - 992px) * 0.08));         
        }         
        100% {             
            opacity: 1;             
            transform: translateX(calc(130px + (100vw - 992px) * 0.1));         
        }     
    }

    /* fadeIn in works correctly */
    @keyframes fadeIn {
        0% { 
            opacity: 0;
            transform: translateX(calc(180px + (100vw - 992px) * 0.05));
        }
        100% { 
            opacity: 1;
            transform: translateX(calc(-10px - (100vw - 992px) * 0.1));
        }
    }
} 


@media (min-width: 1200px) and (max-width: 1400px) {
    #container {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
        gap: 2.5px; 
    }

    #cursor {
        width: calc(220px + ((100vw - 1200px) / 50 * 2)); 
        height: calc(220px + ((100vw - 1200px) / 50 * 2));
    }

    .hero-text {
        right: calc(21vw + ((100vw - 1200px) / 100 * 1));
        max-width: 80%; 
        /* top: calc(240px + ((100vw - 1200px) / 100 * 17));  */
    }

    .image-overlay {
        padding-left: calc(13vw + ((100vw - 1200px) / 100 * 0.5));
    }

    .glitch-text:first-child {
        font-size: clamp(2.8rem, 16vw, 9rem);
        padding: 0 calc(25px + ((100vw - 1200px) / 100 * 2));
    }

    .ignited {
        font-size: clamp(2rem, 6vw, 5.5rem); 
        padding: 0 calc(25px + ((100vw - 1200px) / 100 * 2));
        margin-top: -0.8rem;
    }

    .overlay-img {
        max-width: calc(25vw + ((100vw - 1200px) / 100 * 1));
        margin-top: calc(8vw + ((100vw - 1200px) / 100 * 0.5));
    }

    @keyframes slideIn {
        0% {
            opacity: 1;
            transform: translateX(calc(-310px - (100vw - 1200px) * 0.08));
        }
        100% {
            opacity: 1;
            transform: translateX(calc(140px + (100vw - 1200px) * 0.1));
        }
    }

    @keyframes slideInFromRight {
        0% {
            opacity: 1;
            transform: translateX(calc((350px + 8vw) + (100vw - 1200px) * 0.1));
        }
        100% {
            opacity: 1;
            transform: translateX(calc((-10px + 0.6vw) - (100vw - 1200px) * 0.3));
        }
    }

    @keyframes fadeIn {
        0% { 
            opacity: 0;
            transform: translateX(calc(190px + (100vw - 1200px) * 0.05));
        }
        100% { 
            opacity: 1;
            transform: translateX(calc(-1px - (100vw - 1200px) * 0.1));
        }
    }
}

@media (min-width: 1401px) and (max-width: 1600px) {
    #container {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
        gap: 2.8px; 
    }

    #cursor {
        width: calc(230px + ((100vw - 1400px) / 50 * 2)); 
        height: calc(230px + ((100vw - 1400px) / 50 * 2));
    }

    .hero-text {
        right: calc(26vw + ((100vw - 1400px) / 100 * 1));
        max-width: 90%; 
        /* top: calc(270px + ((100vw - 1400px) / 100 * 20));  */
    }

    .image-overlay {
        padding-left: calc(12vw + ((100vw - 1400px) / 100 * 0.5));
    }

    .glitch-text:first-child {
        font-size: clamp(3rem, 14vw, 10rem);
        padding: 0 calc(27px + ((100vw - 1400px) / 100 * 2));
    }

    .ignited {
        font-size: clamp(3rem, 5.5vw, 6rem); 
        padding: 0 calc(28px + ((100vw - 1400px) / 100 * 2));
        margin-top: -0.7rem;
    }

    .overlay-img {
        max-width: calc(23vw + ((100vw - 1400px) / 100 * 1));
        margin-top: calc(7.5vw + ((100vw - 1400px) / 100 * 0.5));
    }

    @keyframes slideIn {
        0% {
            opacity: 1;
            transform: translateX(calc(-320px - (100vw - 1400px) * 0.08));
        }
        100% {
            opacity: 1;
            transform: translateX(calc(180px + (100vw - 1400px) * 0.1));
        }
    }

    @keyframes slideInFromRight {
        0% {
            opacity: 1;
            transform: translateX(calc((310px + 7vw) + (100vw - 1400px) * 0.1));
        }
        100% {
            opacity: 1;
            transform: translateX(calc((-2px + 0.6vw) - (100vw - 1400px) * 0.3));
        }
    }

    @keyframes fadeIn {
        0% { 
            opacity: 0;
            transform: translateX(calc(200px + (100vw - 1400px) * 0.05));
        }
        100% { 
            opacity: 1;
            transform: translateX(calc(-1px - (100vw - 1400px) * 0.1));
        }
    }
}

@media (min-width: 1601px) and (max-width: 1800px) {
    #container {
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
        gap: 1.5px; 
    }

    #cursor {
        width: calc(240px + ((100vw - 1600px) / 50 * 2)); 
        height: calc(240px + ((100vw - 1600px) / 50 * 2));
    }

    .hero-text {
        right: calc(29vw + ((100vw - 1600px) / 100 * 1));
        max-width: 100%; 
        /* top: calc(310px + ((100vw - 1600px) / 100 * 23));  */
    }

    .glitch-text:first-child {
        font-size: clamp(3.2rem, 12vw, 11rem);
        padding: 0 calc(29px + ((100vw - 1600px) / 100 * 2));
    }

    .ignited {
        font-size: clamp(5rem, 5.3vw, 6.5rem); 
        padding: 0 calc(30px + ((100vw - 1600px) / 100 * 2));
        margin-top: -0.9rem;
    }

    .overlay-img {
        max-width: calc(22vw + ((100vw - 1600px) / 100 * 0.5));
        margin-top: calc(7vw + ((100vw - 1600px) / 100 * 0.5));
    }

    @keyframes slideIn {
        0% {
            opacity: 1;
            transform: translateX(calc(-330px - (100vw - 1600px) * 0.08));
        }
        100% {
            opacity: 1;
            transform: translateX(calc(190px + (100vw - 1600px) * 0.1));
        }
    }

    @keyframes slideInFromRight {
        0% {
            opacity: 1;
            transform: translateX(calc((270px + 6vw) + (100vw - 1600px) * 0.1));
        }
        100% {
            opacity: 1;
            transform: translateX(calc((18px + 0.6vw) - (100vw - 1600px) * 0.3));
        }
    }

    @keyframes fadeIn {
        0% { 
            opacity: 0;
            transform: translateX(calc(210px + (100vw - 1600px) * 0.05));
        }
        100% { 
            opacity: 1;
            transform: translateX(calc(20px - (100vw - 1600px) * 0.1));
        }
    }
}

@media (min-width: 1801px) and (max-width: 2000px) {
    #container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 2px; 
    }

    #cursor {
        width: calc(250px + ((100vw - 1800px) / 50 * 2)); 
        height: calc(250px + ((100vw - 1800px) / 50 * 2));
    }

    .hero-text {
        right: calc(31vw + ((100vw - 1800px) / 100 * 1));
        max-width: 100%;
        /* top can be re-added if needed */
    }

    .glitch-text:first-child {
        font-size: clamp(3.4rem, 10.5vw, 11.9rem);
        padding: 0 calc(31px + ((100vw - 1800px) / 100 * 2));
    }

    .ignited {
        font-size: clamp(5.7rem, 5vw, 7rem); 
        padding: 0 calc(32px + ((100vw - 1800px) / 100 * 2));
        margin-top: -2rem;
    }

    .overlay-img {
        max-width: calc(21.5vw + ((100vw - 1800px) / 100 * 0.4));
        margin-top: calc(5.6vw + ((100vw - 1800px) / 100 * 0.5));
    }

    @keyframes slideIn {
        0% {
            opacity: 1;
            transform: translateX(calc(-360px - (100vw - 1800px) * 0.08));
        }
        100% {
            opacity: 1;
            transform: translateX(calc(240px + (100vw - 1800px) * 0.1));
        }
    }

    @keyframes slideInFromRight {
        0% {
            opacity: 1;
            transform: translateX(calc((300px + 5.5vw) + (100vw - 1800px) * 0.1));
        }
        100% {
            opacity: 1;
            transform: translateX(calc((50px + 0.6vw) - (100vw - 1800px) * 0.3));
        }
    }

    @keyframes fadeIn {
        0% { 
            opacity: 0;
            transform: translateX(calc(240px + (100vw - 1800px) * 0.05));
        }
        100% { 
            opacity: 1;
            transform: translateX(calc(50px - (100vw - 1800px) * 0.1));
        }
    }
}


/* recent */