footer {
    background-color: #000000;
    color: #ffcc00;
    padding: 30px 0;
}

h1 {
    margin: 0;
    font-size: 2em;
}
h2 {
    color: #ffcc00;
}

main {
    max-width: 1200px;
    margin: 0 auto;
}

a {
    color: #ffcc00;
}

li {
    margin-bottom: 8px;
}

.banner {
    width: 100%;
    height: auto;
    max-height: 470px;
    object-fit: cover;
    display: block;
    margin-top: 20px;
}

.subtitle {
    max-width: 1200px;
    font-size: 22px;
    padding: 0 20px;
    margin: 20px auto 40px;
}

.desc_title {
    text-align:left;
    color: #ffcc00;
    max-width: 1200px;
    font-size: 32px;
    font-weight:bold;
    padding: 0 20px;
    margin: 20px auto 20px;
}

.description {
    text-align:justify;
    max-width: 1200px;
    font-size: 16px;
    padding: 0 20px;
    margin: 20px auto 40px;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5em;
    }
    .description {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.2em;
    }
    .description {
        font-size: 15px;
        padding: 0 10px;
    }
}





* {
    box-sizing: border-box;
}


body {
    margin: 0;
    background-color: #121212;
    font-family: Arial, sans-serif;
    color: #fff;
    justify-content: center;
    text-align: center;

}

.listing-container {
    background-color: #000;
    padding: 20px;
    border-radius: 10px;
    max-width: 1200px;
    width: 100%;
    position: relative;
    transition: box-shadow 0.3s ease;
        margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
    margin-top:30px;
}


.listing-container:hover {
    box-shadow: 0 0 25px 5px rgba(0, 255, 204, 0.3);
}

.ranking-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    background-color: #00b150;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 8px;
    font-size: 18px;
}

.first-ranking-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    background-color: #ffd700;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 8px;
    font-size: 18px;
}

.listing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.logo-section{
        border-right: 2px solid #9a9a9a;
    width:25%;
}
img.logo {
    max-width: 48%;
    border-radius: 10px;
}

.info-section {
        border-right: 2px solid #9a9a9a;
    width:25%;
    flex: 1;
    text-align: center;
}

.info-section h2 {
    color:white;
    margin: 0 0 5px;
    font-size: 26px;
}

.welcome {
    margin: 5px 0;
    color: #aaa;
    font-size: 14px;
}

.bonus {
    margin: 5px 0;
    color: #00ff88;
    font-weight: bold;
    font-size: 16px;
}

.sub-bonus {
    margin: 5px 0;
    color: #ffcc00;
    font-weight: bold;
    font-size: 14px;
}

.rating-section {
        border-right: 2px solid #9a9a9a;
     width:25%;
    text-align: center;
}

.stars {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 22px;
    color: #ffd700;
}

.reviews {
    font-size: 14px;
    color: #ccc;
}

.score {
    color:black;
    font-size: 16px;
    font-weight: bold;
    background-color: #ffd700;
    padding: 5px 20px;
    border-radius: 10px;
    display: inline-block;
}

.action-section {
     width:25%;
     display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.play {
    margin-bottom: 20px;
    width: 70%;
    text-decoration: none;
    padding: 12px 25px;
    font-weight: bold;
    border-radius: 25px;
    text-align: center;
    display: inline-block;
    background-color: #00d57e;
    color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.play:hover {
    background-color: #00e68a;
    transform: scale(1.05);
}

.review {
    width: 70%;
    text-decoration: none;
    padding: 12px 25px;
    font-weight: bold;
    border-radius: 25px;
    text-align: center;
    display: inline-block;
    background-color: #ffcc00;
    color: #000000;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.review:hover {
    background-color: #ffcc00;
    transform: scale(1.05);
}

.footer-text {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-top: 20px;
    text-align: justify;
}

/* mobilurze */

@media screen and (max-width: 600px) {
  .listing {
        display:block;
    }
    
    .logo-section{
        border-right: none;
    width:100%;
}

.info-section {
         border-right: none;
    width:100%;
    
    
}

.rating-section {
        border-right: none;
    width:100%;
    
}
.action-section {
     width:100%;
}

.listing-container{
    width:80% !important;
}
main{
    width:80%;
}
.text_bottom{
    width:80%;
    margin-left:auto;
    margin-right:auto;
}
.subtitle{
    font-size:16px;
    padding:0px;
    margin-bottom:-10px;
}
.banner{
    margin-top:10px;
    margin-bottom:10px;
}
.info-section h2{
    display:none;
}
.score {
    margin-bottom: 10px;}
    
    header, footer {

    padding: 15px 0;
}

}

.main_title{
    margin-top:20px;
}

/* Ensure Montserrat font is used */
        body {
            font-family: "Montserrat", sans-serif;
        }

        /* Custom golden color - now #ffcc00 */
        .text-golden {
            color: #ffcc00;
            font-weight:600;
        }
        .bg-black-custom {
            cursor: pointer;
    margin-top: 20px;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #000000;
        }

        /* Header styles */
        .header {
            background-color: #000000; /* bg-black-custom */
            color: #ffffff; /* text-white */
            padding: 1rem; /* p-4 */
            box-shadow: 0 0 25px 5px rgba(0, 255, 204, 0.3); /* shadow-lg */
            border-bottom-left-radius: 0.5rem; /* rounded-b-lg */
            border-bottom-right-radius: 0.5rem; /* rounded-b-lg */
        }

        .header-container {
            width: 100%;
            max-width: 1280px; /* Common max-width for container */
            margin-left: auto;
            margin-right: auto;
            display: flex; /* flex */
            justify-content: space-between; /* justify-between */
            align-items: center; /* items-center */
            flex-wrap: wrap; /* flex-wrap */
        }

        /* Logo styles */
        .logo-section {
            flex-shrink: 0; /* flex-shrink-0 */
            flex-grow: 1; /* Allow logo to grow and take available space */
            margin-right: 1rem; /* Add some space between logo and button */
        }

        .logo-link {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 700; /* font-bold */
            color: #ffcc00; /* text-golden */
            transition: color 0.3s ease-in-out; /* transition-colors duration-300 */
            text-decoration: none; /* Remove underline from links */
            white-space: nowrap; /* Prevent logo text from wrapping */
        }
        .logo-link:hover {
            color: #ffcc00; /* hover:text-yellow-400 - now #ffcc00 */
        }

        /* Hamburger button styles */
        .menu-button-container {
            display: block; /* block */
            flex-shrink: 0; /* Prevent button from shrinking */
            align-self: center; /* Vertically align in flex container */
            position: relative; /* Needed for absolute positioning of lines */
            width: 2rem; /* Explicit width for the button area */
            height: 2rem; /* Explicit height for the button area */
        }

        .menu-button {
            background: none; /* Remove default button background */
            border: none; /* Remove default button border */
            cursor: pointer;
            padding: 0; /* Remove padding as lines will be positioned */
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Center items vertically */
            align-items: center;
            position: relative;
            z-index: 10; /* Ensure button is above other elements */
            outline: none; /* Remove focus outline */
        }

        .menu-button .line {
            display: block;
            width: 100%;
            height: 3px; /* Thickness of the lines */
            background-color: #ffcc00; /* Golden color */
            border-radius: 2px;
            transition: all 0.3s ease-in-out;
            position: absolute;
            left: 0;
        }

        .menu-button .line:nth-child(1) {
            top: 0.5rem; /* Position for top line */
        }
        .menu-button .line:nth-child(2) {
            top: 50%;
            transform: translateY(-50%);
        }
        .menu-button .line:nth-child(3) {
            bottom: 0.5rem; /* Position for bottom line */
        }

        /* Animation for X icon */
        .menu-button.open .line:nth-child(1) {
            top: 50%; /* Move to center */
            transform: translateY(-50%) rotate(45deg); /* Rotate around its center */
        }
        .menu-button.open .line:nth-child(2) {
            opacity: 0; /* Fade out middle line */
        }
        .menu-button.open .line:nth-child(3) {
            bottom: 50%; /* Move to center */
            transform: translateY(50%) rotate(-45deg); /* Rotate around its center */
        }

        /* Navigation menu styles */
        .navigation-menu {
            flex-direction: column;
            width: 100%;
            margin-top: 1rem;
            align-items: center;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            overflow: hidden;
            max-height: 0; /* Hidden state */
            opacity: 0; /* Hidden state */
            display: flex; /* Always flex, but hidden by max-height/opacity */
        }

        .navigation-menu.open {
            max-height: 500px; /* Open state - adjust as needed for content */
            opacity: 1; /* Open state */
        }

        .navigation-list {
            list-style: none; /* Remove bullet points */
            padding: 0; /* Remove default padding */
            margin: 0; /* Remove default margin */
            display: flex; /* flex */
            flex-direction: column; /* flex-col */
            width: 100%; /* w-full */
            text-align: center; /* text-center */
        }

        .navigation-list li {
            margin-top: 0.5rem; /* space-y-2 */
        }

        .nav-item-link {
            display: block; /* block */
            color: #ffcc00; /* text-golden - now #ffcc00 */
            font-size: 1.125rem; /* text-lg */
            font-weight: 700; /* changed to bold */
            border-radius: 0.375rem; /* rounded-md */
            padding: 0.5rem 0.75rem; /* px-3 py-2 */
            text-decoration: none; /* Remove underline from links */
            transition: all 0.3s ease-in-out;
            position: relative;
        }
        .nav-item-link:hover {
            color: #ffcc00; /* hover:text-yellow-400 - now #ffcc00 */
            transform: translateY(-3px); /* Slightly lift on hover */
            text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); /* Subtle glow with #ffcc00 */
        }

        /* Main content area */
        .main-content {
            width: calc(100% - 4rem); /* Adjust for padding */
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
            padding: 2rem; /* p-8 */
            margin-top: 2rem; /* mt-8 */
            background-color: #ffffff; /* bg-white */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
        }

        .main-content h1 {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 700; /* font-bold */
            color: #1F2937; /* text-gray-800 */
        }

        .main-content p {
            margin-top: 1rem; /* mt-4 */
            color: #4B5563; /* text-gray-600 */
        }

        /* Media Queries for responsiveness */
        @media (min-width: 640px) { /* sm breakpoint */
            .logo-link {
                font-size: 1.875rem; /* sm:text-3xl */
            }
        }
        
         @media (max-width: 640px) { /* sm breakpoint */
            .listing-container{
    width:100% !important;
}

.desc_title{
    font-size:20px;
}
        }


        @media (min-width: 650px) { /* Custom breakpoint for desktop menu */
            .logo-section {
                margin-bottom: 0; /* Reset margin on desktop */
                flex-grow: 0; /* Reset flex-grow on desktop */
            }
            .menu-button-container {
                display: none; /* Hide hamburger on desktop */
            }
            .navigation-menu {
                display: flex; /* Show menu on desktop */
                flex-direction: row; /* Horizontal menu on desktop */
                width: auto; /* Auto width on desktop */
                margin-top: 0; /* Reset margin on desktop */
                max-height: none; /* Always visible on desktop */
                opacity: 1; /* Always visible on desktop */
            }
            .navigation-menu.open { /* Ensure it stays open on desktop */
                max-height: none;
                opacity: 1;
            }
            .navigation-list {
                flex-direction: row; /* Horizontal list on desktop */
                width: auto; /* Auto width on desktop */
            }
            .navigation-list li {
                margin-top: 0; /* Reset margin on desktop */
                margin-left: 2rem; /* Space between items on desktop */
            }
            .navigation-list li:first-child {
                margin-left: 0; /* Remove margin for the first item */
            }
        }