@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
        * {
            margin: 0;
            padding: 0;
            user-select: none;
            font-family: "Inter", sans-serif;
        }
        header {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 8px 30px;
            position: sticky; 
            top: 0;
            z-index: 50;
            /* background-color: white; */
            background: rgba(255, 255, 255, 0.881);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: bold;
            font-size: 20px;
        }
        .logo .logo_icon svg {
            fill: rgb(0, 0, 0);
            width: 30px;
        }
        .search {
            background-color: #1e1d1d15;
            padding: 10px 20px;
            border-radius: 10px;
        }
        .input {
            display: flex;
            align-items: center;
        }
        .input input {
            height: 30px;
            width: 500px;
            border: none;
            background: transparent;
            outline: none;
        }
        .input svg {
            width: 25px; 
            stroke: #1e1d1d4d;
        }
        ::placeholder {
            color: #1e1d1d7d;
            padding: 0 10px;
            text-transform: uppercase;
            
        }
        .notification_icons .icons_notifications svg {
            width: 30px;
            padding: 10px;
        }
        .notification_icons .icons_notifications svg:first-child {
            animation: ShakeAnimation 1s forwards infinite;
        }
        @keyframes ShakeAnimation {
            10% {
                transform: rotate(5deg);
            }
            20% {
                transform: rotate(-5deg);
            }
            30% {
                transform: rotate(5deg);
            }
            50% {
                transform: rotate(-5deg);
            }
        }

        /* pannel 01 code here */

        .app-panel {
            position: relative;
            width: 100%;
            height: 100vh; 
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .panel-video-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .panel-video-wrapper video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .panel-details {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10; 
            color: white; 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 10px;
            padding: 2rem;
            background-color: rgba(0, 0, 0, 0.4); 
        }

        .panel-details h1 {
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }
        .panel-details p {
            max-width: 1000px;
            font-size: 15px;
            /* line-height: 1.75; */
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        .glasspannel {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px 15px;
            gap: 10px;
            font-size: 10px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2rem;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.25s ease-out;
        }
        .glasspannel svg {
            width: 10px;
        }
        .flexbuttons {
            display: flex;
            gap: 10px;
        }
        .flexbuttons .button:nth-child(2) {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .button {
            padding: 15px 20px;
            border: none;
            outline: none;
            background-color: #151515;
            color: #eee;
            border-radius: 7px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease-out;
            }

            .button:hover, .glasspannel:hover {
            transform: translateY(-3px);
            }

            .button-span {
            color: #aaa;
            }
        /* pannel 02 starts here */
        .panner2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-top: 10px;
        }
        .section1 {
            background-image: url('https://i.pinimg.com/736x/f1/4f/da/f14fda354256f3352ff2b23b9365acf5.jpg');
        }
        .section2{
            background-image: url('https://i.pinimg.com/736x/c0/9a/b5/c09ab536b89fa775508e626f47ef03a7.jpg');
        }
        .section3 {
            background-image: url('https://i.pinimg.com/1200x/23/66/f8/2366f8118d94379ed1d2b65849545ad1.jpg');
        }
        .section1, .section2, .section3 {
            background-size: cover;      
            background-position: center; 
            background-repeat: no-repeat;
            border-radius: 10px;
            width: 40%;
            height: 600px;
            margin: 10px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
        }
        .main_title {
            /* background: rgba(255, 255, 255, 0.1); 
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px); */
            padding: 10px;
        }
        .game_name {
            width: 100%;
            color: white;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 10px;
        }
        .game_name p {
            font-size: 12px;
        }
        .play_now svg {
            width: 20px;
            margin: 0;
            padding: 0;
        }
        .cion .play_now button {
            background-color: #ffffff;
            color: rgb(0, 0, 0);
            padding: 0 20px;
            border: none;
            border-radius: .6rem;
            cursor: pointer;

            display: flex;
            align-items: center;
            gap: 10px;
        }
        footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            /* border: 1px solid rgba(86, 86, 86, 0.5); */
            margin: 10px;
            padding: 50px;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            border-radius: 10px;
        }
        footer .part01 {
            display: flex;
            justify-content: space-evenly;
            align-items: flex-start;
        }
        .sectionfooter1 {
            width: fit-content;
            gap: 20px;
            display: flex;
            flex: 1;
            flex-direction: column;
            width: fit-content;
        }
        .footerlogo {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: fit-content;

            gap: 10px;
            font-weight: bold;
            font-size: 20px;
        }
        .part01 .footerlogo svg {
            width: 30px;
        }
        footer .part01 .sectionfooter1 p {
            width: 60%;
            font-size: 12px;
            color: gray;
        }
        .footericons {
            width: fit-content;
        }
        .footericons svg {
            width: 30px;
            margin: 5px;
        }
        .sectionfooter2 {
            flex: 1;
        }
        footer .part01 .sectionfooter2 {
            display: flex;
            justify-content: flex-start;
            gap: 25px;
        }
        .sectionfooter2 ul {
            list-style: none;
        }
        .sectionfooter2 ul li {
            line-height: 2;
            font-size: 12px;
        }
        .sectionfooter2 ul li:first-child {
            font-weight: bold;
            font-size: 14px;
        }
        .hr {
            height: 2px;
            background-color: rgba(99, 99, 99, 0.2);
            border-radius: 10px;
            margin: 30px;
            width: 90%;
        }
        .part02 {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            justify-content: space-between;
            color: grey;
            font-size: 12px;
        }
        .part02 ul {
            list-style: none;
            text-decoration: underline;
            display: flex;
            gap: 10px;
        }
        
        .brandiconshown {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            display: flex;
            align-items: center;
            flex-direction: column;
            margin: 10px;
            padding: 100px;
            border-radius: 10px;
        }
        .brandiconshown p {
            color: grey;
            font-size: 12px;
            margin: 5px;
            text-align: center;
        }
        .svg_brand {
            display: flex;
        }
        .svg_brand svg {
            margin: 30px;
        }
        .mobilemenu { display: none;}






        @media only screen and (max-width: 600px) {
        body {
            margin: 0;
            padding: 0;
        }
        header {
            flex-direction: row;
            justify-content: space-between;
        }
        .mobilemenu svg {
                width: 20px;
        }
        .search {
            display: none;
        }
        .notification_icons {
            display: none;
        }
        .mobilemenu { visibility: visible;}
            .panner1 {
                width: 100%;
                margin: 0 0;
                height: 150px;
            }
            .top-div {
            position: absolute;
            top: 30%;
            left: 40%;
            }
            .panner1 {
                height: 300px;
            }
            .brand_logo {
            font-size: 10px;
            padding: 8px;
            }
            .brand_logo img {
                width: 10px;
            }
            .details_game_panner h1 {
                font-size: 15px;
            }
            .details_game_panner p {
                font-size: 5px;
            }
            .buy_now button {
                border-radius: 5px;
                font-size: 12px;
                padding: 10px 20px;
            }
            
            .panner2 {
                display: flex;
                flex-direction: column;
            }
            .section1, .section2, .section3 {
            width: 90%;
            }




            footer {
                margin: 10px;
                padding: 20px;
            }
            footer .part01 {
                display: flex;
                flex-direction: column;
            }
            footer .part01 .sectionfooter1 p {
            width: 100%;
            }
            .sectionfooter2 {
                flex-direction: column;
            }
            .part02 {
            display: flex;

            flex-direction: column-reverse;
            align-items: center;
            gap: 15px;
            }
            .part02section2 li {
                font-size: 10px;
            }

            .brandiconshown {
            margin: 10px;
            padding: 50px;
            }
            .brandiconshown h1 {
                font-size: 22px;
            }
            .brandiconshown h4 {
                font-size: 14px;
            }
            .brandiconshown .hr {
                margin: 8px;
            }
            .brandiconshown p {
                font-size: 10px
            }
            .svg_brand {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
            }
            .svg_brand svg {
                margin: 20px;
                width: 30px;
            }
        }
        @media (max-width: 800px) {
            header {
            flex-direction: row;
            justify-content: space-between;
            /* margin: 30px; */
            /* padding: 0px; */
        }
            .search {
            display: none;
        }
        .notification_icons {
            display: none;
        }
        .mobilemenu {
            display: block;
        }
        .mobilemenu svg {
            width: 30px;
        }
        .panner2 section {
            margin: 2px;
        }
        }


         .carousel {
            margin: 3em auto;
            display: flex;
            gap: 1em;
            /* width: 100%; */
            overflow: auto;
            scroll-behavior: smooth;
            anchor-name: --carousel;
            scroll-snap-type: x mandatory;
            /* scroll-marker-group: after; */
            box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
            padding: 50px 20px;
            color: white;
        }
        .carousel::scroll-marker-group {
            display: flex;
            justify-content: center;
            gap: 0.5em; 
        }
        .carousel::-webkit-scrollbar {
            display: none;
        }
        .carousel::scroll-button(right), .carousel::scroll-button(left) {
            content: '>';
            border: none;
            background-color: #649173;
            font-family: var(--font-family);
            font-size: 1rem;
            color: white;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            position-anchor: --carousel;
            position-area: right center;
            translate: -120%;
        }
         .carousel::scroll-button(right) {
            content: '>';
         }
        .carousel::scroll-button(left) {
            content: '<';
            position-area: left center;
            translate: 120%;
        }
        .carousel::scroll-button(right):disabled, .carousel::scroll-button(left):disabled {
            opacity: 0.5;
        }
        .card {
            height: 10em;
            background-color: var(--main-color);
            padding: 1em;
            border-radius: .5em;
            display: flex;
            flex-direction: column;
            flex: 0 0 20em;
            justify-content: flex-end;
            text-align: center;
            align-items: center;
            scroll-snap-align: start;
        }
        .card::scroll-marker {
            content: '';
            height: .5em;
            width: .5em;
            background-color: #00000022;
            border-radius: 50%;
            margin-top: -70px;
        }
        .card::scroll-marker:target-current {
            background-color: #171717;
        }
        .card {
            background-position: bottom;
            background-size: cover;
            background-position: center;
        }
        .card:nth-child(1){
            background-image: url('https://i.pinimg.com/736x/49/16/90/491690d494e09a14a61e853ecd91ac39.jpg');
        }
        .card:nth-child(2) {
            background-image: url('https://i.pinimg.com/1200x/62/01/67/6201677b6c3e1d96d4590efbe268eafb.jpg');
            background-position: center;
        }
        .card:nth-child(3) {
            background-image: url('https://i.pinimg.com/736x/55/4c/f8/554cf85f816125bdaa9f2014477ffe1a.jpg');
        }
        .card:nth-child(4) {
            background-image: url('https://i.pinimg.com/736x/6c/fc/92/6cfc9279823b78bea232ef1408586ac5.jpg');
        }
        .card:nth-child(5) {
            background-image: url('https://i.pinimg.com/1200x/45/32/83/453283679fde22b169393263b51b87fc.jpg');
        }
        .card:nth-child(6) {
            background-image: url('https://i.pinimg.com/736x/0c/7c/51/0c7c511d366a7cd776431b935753a4a4.jpg');
        }
        .card:nth-child(7) {
            background-image: url('https://i.pinimg.com/736x/49/16/90/491690d494e09a14a61e853ecd91ac39.jpg');
        }
        .card:nth-child(8) {
            background-image: url('https://i.pinimg.com/736x/62/ac/f2/62acf2f38c2efb6ebfe54532f30c7626.jpg');
        }
        .card:nth-child(9) {
            background-image: url('https://i.pinimg.com/736x/fe/e4/4d/fee44d18b6a505c66e976422b72bfcf4.jpg');
        }
        .card:nth-child(10) {
            background-image: url('https://i.pinimg.com/736x/53/5b/27/535b27288d1bb1adab9186217ab045bf.jpg');
        }
        .card:nth-child(11) {
            background-image: url('https://i.pinimg.com/736x/15/c0/b9/15c0b91b166157f5f8314841fe378e70.jpg');
        }
        .card:nth-child(12) {
            background-image: url('https://i.pinimg.com/736x/f9/89/52/f98952415b4478d46ac7255da95b9f36.jpg');
        }
        @media (max-width: 480px) {
            .panel-details {
                    padding: 0;
                    display: flex;
                }
                .panel-details h1 {
                    font-size: 2.5rem;
                }
                .panel-details p {
                    font-size: 8px;
                    /* min-width:50%; */
                    max-width: 320px;
                }
                .button {
                    font-size: 12px;
                }
                .glasspannel {
                    gap: 2px;
                }
                .card {
                font: 0 0 100%;
            }
        }