/*-----------------------------------*\
  #style.css
\*-----------------------------------*/
    /**
 * copyright 2022 codewithsadee
 */
    /*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/
    
     :root {
        /**
   * colors
   */
        --rich-black-fogra-29_95: hsla(222, 18%, 11%, 0.95);
        --raisin-black-1: hsl(0, 0%, 16%);
        --raisin-black-2: hsl(236, 17%, 17%);
        --raisin-black-3: hsl(280, 11%, 11%);
        --raisin-black-4: hsl(280, 8%, 15%);
        --english-violet: hsl(274, 21%, 23%);
        --eerie-black-1: hsl(277, 25%, 10%);
        --eerie-black-2: hsl(280, 7%, 8%);
        --roman-silver: hsl(220, 6%, 59%);
        --quick-silver: hsl(0, 1%, 65%);
        --light-gray-1: hsl(0, 0%, 80%);
        --light-gray-2: hsl(0, 2%, 82%);
        --marigold_75: hsla(42, 99%, 46%, 0.75);
        --xiketic_90: hsla(280, 37%, 8%, 0.9);
        --cultured-2: hsl(0, 0%, 97%);
        --marigold: hsl(42, 99%, 46%);
        --platinum: hsl(0, 0%, 89%);
        --dim-gray: hsl(0, 0%, 42%);
        --white_15: hsla(0, 0%, 100%, 0.15);
        --white_10: hsla(0, 0%, 100%, 0.1);
        --xiketic: hsl(277, 25%, 10%);
        --silver: hsl(0, 0%, 78%);
        --white: hsl(0, 0%, 100%);
        --jet: hsl(236, 13%, 23%);
        /**
   * typography
   */
        --ff-oxanium: 'Oxanium', cursive;
        --ff-poppins: 'Poppins', sans-serif;
        --fs-1: 7rem;
        --fs-2: 4.5rem;
        --fs-3: 3.6rem;
        --fs-4: 2.4rem;
        --fs-5: 2.2rem;
        --fs-6: 2rem;
        --fs-7: 1.6rem;
        --fs-8: 1.5rem;
        --fs-9: 1.4rem;
        --fs-10: 1.3rem;
        --fs-11: 1.2rem;
        --fw-500: 500;
        --fw-600: 600;
        --fw-700: 700;
        --fw-800: 800;
        /**
   * spacing
   */
        --section-padding: 120px;
        /**
   * gradient
   */
        --gradient: radial-gradient(circle, hsl(250, 7%, 17%), hsl(250, 11%, 11%));
        /**
   * box shadow
   */
        --shadow-1: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.2), inset 0px 2px 8px 0px hsla(0, 0%, 0%, 0.4);
        --shadow-2: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.4);
        --shadow-3: 0px 5px 10px 1px hsla(219, 98%, 17%, 0.2);
        --shadow-4: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.15);
        /**
   * transition
   */
        --transition: 0.25s ease;
        --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
    }
    /*-----------------------------------*\

#RESET
\*-----------------------------------*/
    
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
        color: inherit;
    }
    
    a,
    img,
    span,
    time,
    input,
    button,
    ion-icon {
        display: block;
    }
    
    img {
        height: auto;
    }
    
    input,
    button {
        background: none;
        border: none;
        font: inherit;
    }
    
    input {
        width: 100%;
    }
    
    button {
        cursor: pointer;
    }
    
    ion-icon {
        pointer-events: none;
    }
    
    address {
        font-style: normal;
    }
    
    html {
        font-family: var(--ff-poppins);
        font-size: 10px;
        scroll-behavior: smooth;
    }
    
    body {
        background-color: var(--raisin-black-3);
        font-size: 1.6rem;
        line-height: 1.5;
    }
    
     :focus-visible {
        outline-offset: 4px;
    }
    /*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/
    
    .container {
        padding-inline: 15px;
    }
    
    .section {
        padding-block: var(--section-padding);
    }
    
    .h1,
    .h2,
    .h3 {
        color: var(--white);
        font-family: var(--ff-oxanium);
        font-weight: var(--fw-800);
        line-height: 1;
    }
    
    .h1 {
        font-size: var(--fs-2);
        letter-spacing: -3px;
    }
    
    .h2 {
        font-size: var(--fs-3);
    }
    
    .h3 {
        font-size: var(--fs-6);
        text-transform: uppercase;
    }
    
     :is(.h1, .h2, .h3, .card-price) .span {
        display: inline-block;
        color: var(--marigold);
    }
    
    .btn {
        margin-inline: auto;
        color: var(--eerie-black-1);
        font-size: var(--fs-8);
        text-transform: uppercase;
        font-weight: var(--fw-700);
        min-height: 55px;
        padding-inline: 35px;
    }
    
    .skewBg {
        position: relative;
        z-index: 1;
    }
    
    .skewBg::before {
        content: "";
        position: absolute;
        inset: 0;
        transform: skewX(var(--skewX, -16deg));
        background-color: var(--bg, var(--marigold));
        z-index: -1;
    }
    
    .btn::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(100% + 8px);
        width: 5px;
        transform: skewX(-16deg) translateX(var(--translateX, 0));
        background-color: var(--marigold);
        transition: var(--transition);
    }
    
    .btn:is(:hover, :focus)::after {
        --translateX: -13px;
    }
    
    .has-scrollbar {
        display: flex;
        gap: 30px;
        overflow-x: auto;
        padding-block-end: 30px;
        scroll-snap-type: inline mandatory;
    }
    
    .has-scrollbar::-webkit-scrollbar {
        height: 10px;
    }
    
    .has-scrollbar::-webkit-scrollbar-track {
        outline: 3px solid var(--marigold);
    }
    
    .has-scrollbar::-webkit-scrollbar-thumb {
        background-color: var(--marigold);
    }
    
    .has-scrollbar::-webkit-scrollbar-button {
        width: calc(25% - 40px);
    }
    
    .section-subtitle,
    .section-title {
        position: relative;
        text-align: center;
        text-transform: uppercase;
    }
    
    .section-subtitle {
        color: var(--silver);
        font-size: var(--fs-9);
        font-weight: var(--fw-700);
        margin-block-end: 10px;
    }
    
    .section-title::after {
        content: url("../images/title-underline.png");
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .scrollbar-item {
        min-width: 100%;
        scroll-snap-align: start;
    }
    
    .card-banner {
        background-color: var(--light-gray-1);
    }
    
    .img-holder {
        aspect-ratio: var(--width) / var(--height);
    }
    
    .img-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .card-badge {
        min-height: 30px;
        color: var(--eerie-black-1);
        font-size: var(--fs-11);
        font-weight: var(--fw-700);
        text-transform: uppercase;
        max-width: max-content;
        display: grid;
        align-items: center;
        padding-inline: 20px;
    }
    
    .card-badge::before {
        --skewX: -10deg;
    }
    
    .w-100 {
        width: 100%;
    }
    
    .section-text {
        color: var(--color, var(--light-gray-1));
        font-size: var(--fs-8);
        font-weight: var(--fw-500);
        max-width: 65ch;
        margin-inline: auto;
        text-align: center;
        line-height: 1.8;
    }
    /*-----------------------------------*\
  #HEADER
\*-----------------------------------*/
    
    .header-top,
    .cart-btn,
    .header-bottom::before,
    .navbar-link::before {
        display: none;
    }
    
    .header {
        position: relative;
        min-height: 1px;
    }
    
    .header-bottom {
        position: absolute;
        top: calc(100% - 1px);
        left: 0;
        width: 100%;
        background-color: var(--raisin-black-2);
        padding-block: 20px;
        z-index: 4;
    }
    
    .header-bottom.active {
        position: fixed;
        top: -85px;
        animation: slideIn 0.5s var(--cubic-out) forwards;
    }
    
    @keyframes slideIn {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(100%);
        }
    }
    
    .header-bottom .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo {
        color: var(--white);
        font-family: var(--ff-oxanium);
        font-size: 3rem;
        font-weight: var(--fw-800);
    }
    
    .header-actions {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    .search-btn {
        color: var(--marigold);
        padding: 13px;
        box-shadow: var(--shadow-1);
        border-radius: 4px;
    }
    
    .search-btn ion-icon {
        --ionicon-stroke-width: 80px;
    }
    
    .nav-toggle-btn {
        color: var(--white);
        font-size: 30px;
        border: 1px solid var(--white);
        padding: 4px;
    }
    
    .nav-toggle-btn.active .menu,
    .nav-toggle-btn .close {
        display: none;
    }
    
    .nav-toggle-btn .menu,
    .nav-toggle-btn.active .close {
        display: block;
    }
    
    .navbar {
        background-color: var(--eerie-black-1);
        color: var(--white);
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        max-width: 350px;
        visibility: hidden;
        max-height: 0;
        transition: 0.25s var(--cubic-out);
        overflow: hidden;
    }
    
    .navbar.active {
        visibility: visible;
        max-height: 275px;
        transition-duration: 0.5s;
    }
    
    .navbar-item:not(:last-child) {
        border-block-end: 1px solid var(--white_15);
    }
    
    .navbar-link {
        padding: 10px 25px;
        transition: var(--transition);
    }
    
    .navbar-link:is(:hover,
     :focus) {
        background-color: var(--white_10);
    }
    /*-----------------------------------*\
  #SEARCH BOX
\*-----------------------------------*/
    
    .search-container {
        background-color: var(--rich-black-fogra-29_95);
        position: fixed;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-inline: 40px;
        z-index: 6;
        visibility: hidden;
        opacity: 0;
        transition: var(--transition);
    }
    
    .search-container.active {
        visibility: visible;
        opacity: 1;
    }
    
    .search-container .input-wrapper {
        position: relative;
        max-width: 560px;
        width: 100%;
    }
    
    .search-container .search-field {
        color: var(--white);
        font-size: 2rem;
        padding: 20px;
        padding-inline-end: 60px;
        border-block-end: 3px solid var(--white_10);
        outline: none;
        transition: var(--transition);
    }
    
    .search-container .search-field:focus {
        border-color: var(--light-gray-2);
    }
    
    .search-container .search-field::-webkit-search-cancel-button {
        display: none;
    }
    
    .search-container .search-submit {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        font-size: 25px;
        color: var(--marigold);
    }
    
    .search-container .search-submit ion-icon {
        --ionicon-stroke-width: 70px;
    }
    
    .search-container .search-close {
        position: fixed;
        inset: 0;
        cursor: default;
        z-index: -1;
    }
    /*-----------------------------------*\
  #HERO
\*-----------------------------------*/
    
    .hero-banner {
        display: none;
    }
    
    .hero {
        --section-padding: 60px;
        margin-block-start: 84px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        text-align: center;
        min-height: 100vh;
        display: grid;
        align-items: center;
    }
    
    .hero-subtitle {
        color: var(--marigold);
        font-size: var(--fs-6);
        font-weight: var(--fw-700);
        text-transform: uppercase;
    }
    
    .hero-title {
        margin-block: 15px 12px;
    }
    
    .hero-text {
        color: var(--light-gray-2);
        margin-block-end: 45px;
    }
    /*-----------------------------------*\
  #BRAND
\*-----------------------------------*/
    
    .brand {
        --section-padding: 60px;
        background-image: var(--gradient);
    }
    
    .brand .has-scrollbar {
        padding-block-end: 0;
    }
    
    .brand .has-scrollbar::-webkit-scrollbar {
        display: none;
    }
    
    .brand-item {
        min-width: calc(50% - 10px);
        scroll-snap-align: start;
    }
    
    .brand-item>img {
        margin-inline: auto;
    }
    /*-----------------------------------*\
  #LATEST GAME
\*-----------------------------------*/
    
    .section-wrapper {
        position: relative;
        background-color: var(--white);
        z-index: 1;
    }
    
    .section-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../images/section-wrapper-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
    
    .latest-game .section-title {
        margin-block-end: 80px;
    }
    
    .latest-game .has-scrollbar {
        margin-inline: -15px;
        padding-inline: 15px;
        scroll-padding-inline-start: 15px;
    }
    
    .latest-game-card {
        position: relative;
        box-shadow: var(--shadow-2);
    }
    
    .latest-game-card :hover {
        filter: brightness(70%);
    }
    
    .latest-game-card .card-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--xiketic_90);
        padding: 35px 25px;
    }
    
    .latest-game-card .card-badge {
        position: absolute;
        bottom: 100%;
        left: 25px;
    }
    
    .latest-game-card .card-title {
        margin-block-end: 12px;
        transition: var(--transition);
    }
    
    .latest-game-card .card-title:is(:hover,
     :focus) {
        color: var(--marigold);
    }
    
    .latest-game-card .card-price {
        color: var(--silver);
        font-size: var(--fs-10);
        font-weight: var(--fw-600);
    }
    
    .latest-game-card .card-price .span {
        margin-inline-start: 5px;
    }
    /*-----------------------------------*\
  #LIVE MATCH
\*-----------------------------------*/
    
    .live-match {
        padding-block-start: 0;
        overflow-x: hidden;
    }
    
    .live-match .section-title {
        margin-block-end: 90px;
    }
    
    .live-match-banner {
        position: relative;
        background-color: var(--light-gray-1);
        border-radius: 6px;
        overflow: hidden;
        box-shadow: var(--shadow-3);
    }
    
    .live-match-banner .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--marigold);
        font-size: 60px;
    }
    
    .live-match-player {
        position: relative;
        padding-block-start: var(--section-padding);
    }
    
    .live-match-player::after {
        content: "LIVE";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);
        font-size: 15rem;
        font-weight: var(--fw-600);
        color: var(--cultured-2);
        z-index: -1;
    }
    
    .live-match-player .player {
        max-width: max-content;
    }
    
    .live-match-player .player-2 {
        margin-inline-start: auto;
    }
    
    .live-match-detail {
        margin-block: 50px;
    }
    
    .live-match-subtitle {
        background-color: var(--marigold);
        color: var(--white);
        font-size: var(--fs-9);
        text-transform: uppercase;
        font-weight: var(--fw-700);
        letter-spacing: 2px;
        padding: 4px 20px;
        max-width: max-content;
        margin-inline: auto;
        margin-block-end: 30px;
    }
    
    .live-match-time {
        color: var(--xiketic);
        font-size: var(--fs-1);
        font-weight: var(--fw-700);
        max-width: max-content;
        margin-inline: auto;
        line-height: 1;
    }
    /*-----------------------------------*\
  #FEATURED GAME
\*-----------------------------------*/
    
    .featured-game {
        background-color: var(--cultured-2);
    }
    
    .featured-game .section-title {
        color: var(--xiketic);
        margin-block-end: 90px;
    }
    
    .featured-game .has-scrollbar {
        gap: 0;
    }
    
    .featured-game-card {
        position: relative;
    }
    
    .featured-game-card :is(.card-content,
    .card-content-overlay) {
        position: absolute;
    }
    
    .featured-game-card .card-content {
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30px 35px;
        transition: var(--transition);
    }
    
    .featured-game-card .card-content-overlay {
        inset: 0;
        background-color: var(--marigold_75);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: var(--transition);
    }
    
    .featured-game-card .card-title {
        margin-block-end: 5px;
    }
    
    .featured-game-card .card-meta {
        color: var(--white);
        font-size: var(--fs-11);
        font-weight: var(--fw-500);
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .featured-game-card .card-content .card-meta {
        color: var(--platinum);
    }
    
    .featured-game-card .card-content ion-icon {
        color: var(--marigold);
        font-size: 14px;
    }
    
    .featured-game-card .card-icon {
        margin-block-end: 20px;
    }
    
    .featured-game-card .card-content-overlay .card-title {
        color: var(--xiketic);
    }
    
    .featured-game-card .card-content-overlay .span {
        color: var(--white);
    }
    
    .featured-game-card:is(:hover,
     :focus-within) .card-content {
        opacity: 0;
    }
    
    .featured-game-card:is(:hover,
     :focus-within) .card-content-overlay {
        opacity: 1;
    }
    /*-----------------------------------*\
  #SHOP
\*-----------------------------------*/
    
    .shop {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    
    .shop .section-text {
        margin-block: 50px 60px;
    }
    
    .shop .has-scrollbar {
        margin-inline: -15px;
        padding-inline: 15px;
        scroll-padding-inline-start: 15px;
    }
    
    .shop-card {
        box-shadow: var(--shadow-4);
        height: 100%;
    }
    
    .shop-card .card-content {
        position: relative;
        padding: 25px;
        padding-block-start: 40px;
    }
    
    .shop-card .card-badge {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .shop-card .h3 {
        font-size: var(--fs-7);
    }
    
    .shop-card .card-title {
        transition: var(--transition);
        margin-block-end: 10px;
    }
    
    .shop-card .card-title:is(:hover,
     :focus) {
        color: var(--marigold);
    }
    
    .shop-card .card-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--marigold);
    }
    
    .shop-card .card-price {
        font-family: var(--ff-oxanium);
        font-weight: var(--fw-800);
    }
    
    .shop-card .card-btn {
        color: inherit;
        font-size: 18px;
        padding: 7px;
        border: 1px solid var(--english-violet);
        border-radius: 4px;
        transition: var(--transition);
    }
    
    .shop-card .card-btn:is(:hover,
     :focus) {
        background-color: var(--marigold);
        color: var(--xiketic);
        border-color: var(--marigold);
    }
    /*-----------------------------------*\
  #BLOG
\*-----------------------------------*/
    
    .blog {
        background-color: var(--white);
    }
    
    .blog .section-title {
        color: var(--xiketic);
    }
    
    .blog .section-text {
        color: var(--dim-gray);
        margin-block: 50px 60px;
    }
    
    .blog-list {
        display: grid;
        gap: 50px;
    }
    
    .blog-card .card-banner {
        margin-block-end: 30px;
    }
    
    .blog-card .card-meta-list {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    .blog-card .card-meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--quick-silver);
        font-size: var(--fs-11);
        font-weight: var(--fw-600);
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .blog-card .card-meta-item ion-icon {
        --ionicon-stroke-width: 50px;
        color: var(--marigold);
    }
    
    .blog-card .card-meta-item a.item-text {
        transition: var(--transition);
    }
    
    .blog-card .card-meta-item a.item-text:is(:hover,
     :focus) {
        color: var(--marigold);
    }
    
    .blog-card .card-title {
        color: var(--raisin-black-1);
        font-size: var(--fs-5);
        font-family: var(--ff-oxanium);
        font-weight: var(--fw-800);
        text-transform: uppercase;
        line-height: 1.2;
        margin-block: 10px 15px;
        transition: var(--transition);
    }
    
    .blog-card .card-title:is(:hover,
     :focus) {
        color: var(--marigold);
    }
    
    .blog-card .card-text {
        color: var(--dim-gray);
        font-size: var(--fs-8);
        font-weight: var(--fw-500);
        line-height: 1.8;
        margin-block-end: 25px;
    }
    
    .blog-card .card-link {
        color: var(--raisin-black-1);
        font-size: var(--fs-9);
        font-weight: var(--fw-700);
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: var(--transition);
    }
    
    .blog-card .card-link ion-icon,
    .blog-card .card-link:is(:hover,
     :focus) {
        color: var(--marigold);
    }
    /*-----------------------------------*\
  #NEWSLETTER
\*-----------------------------------*/
    
    .newsletter {
        margin-block-end: 80px;
    }
    
    .newsletter-card {
        background-color: var(--raisin-black-3);
        padding: 40px 15px;
        margin-block-start: -55px;
        border-radius: 80px;
    }
    
    .newsletter .h2 {
        font-size: var(--fs-4);
        text-transform: uppercase;
        text-align: center;
        margin-block-end: 30px;
    }
    
    .newsletter .input-wrapper {
        max-width: 300px;
        margin-inline: auto;
        margin-block-end: 10px;
    }
    
    .newsletter .email-field {
        font-size: var(--fs-9);
        color: var(--white);
        font-weight: var(--fw-500);
        padding: 17px 45px;
        padding-inline-end: 20px;
        outline: none;
    }
    
    .newsletter .input-wrapper ion-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        color: var(--marigold);
        --ionicon-stroke-width: 50px;
    }
    
    .newsletter .input-wrapper::before {
        --bg: var(--raisin-black-4);
        --skewX: -20deg;
    }
    
    .newsletter-btn {
        font-size: var(--fs-9);
        display: flex;
        align-items: center;
        gap: 5px;
        padding-inline: 20px;
        transition: var(--transition);
    }
    
    .newsletter-btn::after {
        display: none;
    }
    
    .newsletter-btn::before {
        --skewX: -20deg;
        transition: var(--transition);
    }
    
    .newsletter-btn:is(:hover,
     :focus) {
        color: var(--marigold);
    }
    
    .newsletter-btn:is(:hover,
     :focus)::before {
        background-color: var(--white);
    }
    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
    
    .footer {
        color: var(--roman-silver);
    }
    /* .footer-top {
        padding-block-end: var(--section-padding);
    } */
    
    .footer-top .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 50px;
    }
    
    .container-footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 50px;
        margin: 50px;
    }
    
    .footer .logo {
        margin-block-end: 35px;
    }
    
    .footer-text,
    .footer .contact-item {
        font-size: var(--fs-8);
        font-weight: var(--fw-500);
        line-height: 1.8;
    }
    
    .footer-text {
        margin-block-end: 15px;
    }
    
    .contact-item:not(:last-child) {
        margin-block-end: 10px;
    }
    
    .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    
    .contact-icon {
        margin-block-start: 3px;
        font-size: 17px;
    }
    
    .footer-list-title {
        position: relative;
        color: var(--silver);
        font-family: var(--ff-oxanium);
        text-transform: uppercase;
        font-weight: var(--fw-800);
        padding-block-end: 20px;
        margin-block-end: 35px;
    }
    
    .footer-list-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 3px;
        background-color: var(--marigold);
    }
    
    .footer-link {
        font-size: var(--fs-9);
        max-width: max-content;
        transition: var(--transition);
        padding-block: 8px;
        font-weight: var(--fw-500);
    }
    
    .footer-link:is(:hover,
     :focus) {
        color: var(--marigold);
        transform: translateX(5px);
    }
    
    .footer .social-wrapper {
        margin-block-end: 50px;
    }
    
    .footer .social-list {
        display: flex;
        gap: 10px;
    }
    
    .footer .social-link {
        color: var(--white);
        padding: 10px;
        border-radius: 2px;
    }
    
    .footer-newsletter {
        position: relative;
    }
    
    .footer-newsletter .email-field {
        background-color: var(--raisin-black-4);
        padding: 12px 20px;
        padding-inline-end: 60px;
        font-size: var(--fs-9);
        color: var(--white);
    }
    
    .footer-btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 53px;
        background-color: var(--marigold);
        color: var(--xiketic);
        display: grid;
        place-content: center;
    }
    
    .footer-bottom-img {
        display: none;
    }
    
    .footer-bottom {
        background-color: var(--eerie-black-2);
        padding-block: 20px;
        text-align: center;
    }
    
    .copyright {
        font-size: var(--fs-9);
        font-weight: var(--fw-500);
        line-height: 1.8;
    }
    
    .copyright-link {
        display: inline-block;
        color: var(--marigold);
    }
    /*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/
    
    .back-top-btn {
        position: fixed;
        bottom: 10px;
        right: 15px;
        background-color: var(--marigold);
        padding: 12px;
        z-index: 4;
        transition: var(--transition);
        opacity: 0;
        visibility: hidden;
    }
    
    .back-top-btn.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(-10px);
    }
    /*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/
    /**
 * responsive for larger than 576px screen
 */
    
    @media (min-width: 576px) {
        /**
   * REUSED STYLE
   */
        .container {
            max-width: 540px;
            width: 100%;
            margin-inline: auto;
        }
        .h1 {
            --fs-2: 7rem;
        }
        /**
   * HEADER
   */
        .header-actions {
            gap: 40px;
        }
        .cart-btn {
            display: block;
            position: relative;
            color: var(--white);
            font-size: 20px;
        }
        .cart-badge {
            position: absolute;
            top: -6px;
            right: -10px;
            background-color: var(--marigold);
            color: var(--eerie-black-1);
            font-size: var(--fs-11);
            border-radius: 20px;
            padding: 3px 5px;
            line-height: 1;
            font-weight: var(--fw-800);
        }
        /**
   * SEARCH BOX
   */
        .search-container :is(.search-field,
        .search-submit) {
            font-size: var(--fs-3);
        }
        /**
   * BRAND
   */
        .brand-item {
            min-width: calc(33.33% - 13.33px);
        }
        /**
   * FEATURED GAME 
   */
        .featured-game .scrollbar-item {
            min-width: 50%;
        }
        /**
   * BLOG
   */
        .blog-list {
            grid-template-columns: 75%;
            justify-content: center;
        }
        /**
   * FOOTER
   */
        .footer-top .container {
            grid-template-columns: 1fr 1fr;
        }
        .footer-brand,
        .footer-wrapper {
            grid-column: 1 / 3;
        }
    }
    /**
 * responsive for larger than 768px screen
 */
    
    @media (min-width: 768px) {
        /**
   * REUSED STYLE
   */
        .container {
            max-width: 720px;
        }
        .scrollbar-item {
            min-width: calc(50% - 15px);
        }
        /**
   * HERO
   */
        .hero-text {
            max-width: 60ch;
            margin-inline: auto;
        }
        /**
   * BRAND
   */
        .brand-item {
            min-width: calc(25% - 15px);
        }
        /**
   * LIVE MATCH
   */
        .live-match-banner .play-btn {
            font-size: 120px;
        }
        .live-match-player::after {
            font-size: 30rem;
        }
        /**
   * BLOG
   */
        .blog-list {
            grid-template-columns: 1fr 1fr;
        }
        /**
   * NEWSLETTER
   */
        .newsletter :is(.input-wrapper,
        .newsletter-btn) {
            margin: 0;
        }
        .newsletter .input-wrapper {
            max-width: unset;
            width: 100%;
        }
        .newsletter .h2 {
            --fs-4: 2.6rem;
        }
        .newsletter-form {
            display: flex;
            gap: 10px;
            max-width: 500px;
            width: 100%;
            margin-inline: auto;
        }
        /**
   * FOOTER
   */
        .footer-brand {
            max-width: 300px;
        }
        .footer-brand,
        .footer-wrapper {
            grid-column: auto;
        }
        .footer-bottom-img {
            display: block;
        }
        .footer-bottom {
            text-align: left;
        }
        .footer-bottom .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }
        /**
   * BACK TO TOP
   */
        .back-top-btn {
            bottom: 50px;
            right: 45px;
        }
    }
    /**
 * responsive for larger than 992px screen
 */
    
    @media (min-width: 992px) {
        /**
   * REUSED STYLE
   */
        .container {
            max-width: 960px;
        }
         :is(.header,
        .hero,
        .live-match) .container {
            max-width: unset;
        }
        .scrollbar-item {
            min-width: calc(33.33% - 20px);
        }
        /**
   * HEADER
   */
        .header-top {
            display: block;
            background-image: url("../images/header-top-bg.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            padding-block: 20px;
        }
        .header-top .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .countdown-text {
            color: var(--quick-silver);
            font-size: var(--fs-10);
            font-weight: var(--fw-600);
        }
        .countdown-text .span {
            display: inline-block;
            color: var(--xiketic);
            font-size: 1.8rem;
            font-weight: var(--fw-700);
            padding: 10px 20px;
            margin-inline: 5px;
        }
        .header :is(.social-wrapper,
        .social-list) {
            display: flex;
            align-items: center;
        }
        .header .social-wrapper {
            gap: 15px;
        }
        .header .social-list {
            gap: 10px;
        }
        .social-title {
            color: var(--white);
            font-family: var(--ff-oxanium);
            font-size: var(--fs-8);
            font-weight: var(--fw-700);
        }
        .header .social-link {
            background-color: var(--jet);
            color: var(--marigold);
            font-size: var(--fs-9);
            padding: 8px 10px;
        }
        .header-bottom {
            outline: 1px solid hsla(0, 0%, 0%, 0.2);
        }
        .header-bottom::before {
            display: block;
            top: 0;
            left: -15px;
            right: auto;
            width: 170px;
            --skewX: 16deg;
        }
        .nav-toggle-btn {
            display: none;
        }
        .navbar,
        .navbar.active {
            all: unset;
            margin-inline: auto 15px;
        }
        .navbar-list {
            display: flex;
        }
        .navbar-item:not(:last-child) {
            border-block-end: none;
        }
        .navbar-link {
            color: var(--white);
            font-family: var(--ff-oxanium);
            font-size: var(--fs-11);
            text-transform: uppercase;
            font-weight: var(--fw-700);
            padding: 10px 20px;
        }
        .navbar-link::before {
            display: block;
            opacity: 0;
            transition: var(--transition);
        }
        .navbar-link:is(:hover,
         :focus) {
            background-color: transparent;
            color: var(--xiketic);
        }
        .navbar-link:is(:hover,
         :focus)::before {
            opacity: 1;
        }
        /**
   * HERO
   */
        .hero {
            text-align: left;
        }
        .hero-banner {
            display: block;
        }
        .hero .container {
            display: grid;
            grid-template-columns: 1fr 0.9fr;
            align-items: center;
            gap: 50px;
        }
        .btn {
            margin-inline: 0;
        }
        /**
   * BRAND
   */
        .brand-item {
            min-width: calc(20% - 16px);
        }
        /**
   * LATEST GAME
   */
        .latest-game .has-scrollbar {
            padding-block-end: 0;
        }
        /**
   * LIVE MATCH
   */
        .live-match-banner {
            max-width: 700px;
            margin-inline: auto;
        }
        .live-match-player {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            align-items: center;
        }
        .live-match-detail {
            margin-block: 0;
        }
        /**
   * FEATURED GAME
   */
        .featured-game .scrollbar-item {
            min-width: 33.33%;
        }
        /**
   * BLOG
   */
        .blog-list {
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        /**
   * NEWSLETTER
   */
        .newsletter-form {
            max-width: 650px;
        }
        /**
   * FOOTER
   */
        .footer .container {
            grid-template-columns: 1fr 0.7fr 0.7fr;
            column-gap: 80px;
        }
    }
    /**
 * responsive for larger than 1200px screen
 */
    
    @media (min-width: 1200px) {
        /**
   * REUSED STYLE
   */
        .container,
         :is(.header,
        .hero,
        .live-match) .container {
            max-width: 1230px;
        }
        .h1 {
            --fs-2: 7.5rem;
        }
        .scrollbar-item {
            min-width: calc(25% - 22.5px);
        }
        /**
   * HEADER
   */
        .header-bottom::before {
            width: 270px;
        }
        .navbar-link {
            font-size: var(--fs-9);
            padding-inline: 25px;
        }
        /**
   * HERO
   */
        .hero .container {
            grid-template-columns: 1fr 1fr;
        }
        /**
   * BRAND
   */
        .brand-item {
            min-width: calc(16.66% - 16.66px);
        }
        /**
   * LIVE MATCH
   */
        .section-wrapper::before {
            /* height: 72%; */
        }
        .live-match-banner {
            max-width: max-content;
        }
        .live-match-player::after {
            font-size: 35rem;
        }
        /**
   * FEATURED GAME
   */
        .featured-game .has-scrollbar {
            padding-block-end: 0;
        }
        .featured-game .scrollbar-item {
            min-width: 25%;
        }
        /**
   * SHOP
   */
        .shop .has-scrollbar {
            padding-block-end: 15px;
        }
        /**
   * NEWSLETTER
   */
        .newsletter-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-inline: 70px;
        }
        .newsletter .h2 {
            margin-block-end: 0;
        }
        .newsletter-form {
            margin-inline: 0;
        }
        /**
   * FOOTER
   */
        .footer .container {
            grid-template-columns: 1fr 0.7fr 0.7fr 1fr;
        }
    }
    
    @media screen and (min-width: 120px) and (max-width: 992px) {
        .has-scrollbar {
            display: flex;
            flex-direction: column;
        }
        .container-footer {
            display: flex;
            flex-direction: column;
            margin: 50px;
        }
    }