html {
    scroll-behavior: smooth;
}

a {
    outline: none;
}

.bunny-div {
    position: relative;
    padding-top: 59%;
    z-index: 1;
}

/* sotreda izlaganda natija topilmasa */
.store {
    min-height: 60vh;
    /* Minimal balandlikni saqlab qolish */
    position: relative;
    /* "Natija topilmadi" xabari uchun */
}

.no-results {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none;
    width: 100%;
}

.no-results i {
    font-size: 50px;
    margin-bottom: 20px;
    color: #999;
}

.no-results p {
    font-size: 20px;
    color: #999;
}

/* mobile */
@media screen and (min-width:310px) and (max-width: 600px) {
    .store-section {
        margin-bottom: 50px;
        background-color: #202425;
    }

    /* v-animation */
    .store-video {
        padding: 15px 15px 0px 15px;
        position: relative;
        background-color: #202425;
    }

    .spinner-container {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .spinner {
        width: 35px;
        height: 35px;
        border: 5px solid #eee;
        border-top: 5px solid yellowgreen;
        border-radius: 50%;
        animation: v-spin 1s linear infinite;
    }

    @keyframes v-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .store-video iframe {
        width: 100%;
        height: 250px;
        border: none;
    }

    .store-video-caption-name p {
        text-align: center;
        font-weight: 600;
        font-size: 25px;
        margin: 10px 0px 20px 0px;
    }

    .store-video-caption {
        display: inline;
        justify-content: center;
    }

    .store-video-caption-list {
        margin-top: 15px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .s-like-button button {
        cursor: pointer;
        background: none;
        padding: 0px 11px;
        outline: none;
        border: none;
        color: #fff;
        font-size: 17px;
    }

    .s-dislike {
        border-left: 2px solid #fff !important;
    }

    .s-like-button {
        padding: 5px 0px;
        display: flex;
        border-radius: 10px;
        margin-right: 10px;
        background-color: #413b3b;
    }

    .s-ulashish-button span {
        padding: 6px 15px;
        margin-right: 5px;
        border-radius: 10px;
        cursor: pointer;
        background-color: #413b3b;
    }

    /* store-text */
    .store-text {
        padding: 10px 15px;
    }

    .store-text p {
        font-weight: 600;
        padding: 0px 0px 10px 0px;
        font-size: 17px;
    }

    .store-s-text {
        padding: 20px 30px;
        height: 100%;
        text-align: center;
    }

    .store-s-text i {
        margin-bottom: 10px;
        font-size: 50px;
    }

    .store-s-text a {
        color: #fff;
    }

    .store-s-text button {
        outline: none;
        margin-top: 5px;
        border-radius: 5px;
        padding: 5px 10px;
        cursor: pointer;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        background: none;
        border: 2px solid yellowgreen;
    }

    .store-text-series {
        display: none;
        height: 400px;
        overflow-y: scroll;
        scrollbar-width: inherit;
        scrollbar-color: #5d5858 transparent;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    }

    .store-text-series button {
        position: relative;
        font-size: 15px;
        font-weight: 600;
        outline: none;
        margin-bottom: 10px;
        width: 100%;
        padding: 10px 0px;
        display: block;
        cursor: pointer;
        background-color: #b4a4a42b;
        border: 1px solid #413b3b;
        color: #fff;
    }

    .store-text-series button i {
        top: 12px;
        left: 25px;
        position: absolute;
        font-size: 18px;
        align-items: center;
        display: flex;
    }

    .store-section-wrapper {
        padding: 0px 25px;
    }

    /* Play ikonkasi uchun asosiy stil */
    .store-text-series button span i.fa-circle-play {
        transition: all 0.3s ease;
        display: inline-block;
    }

    /* Bosilgan tugmadagi play ikonkasi uchun animatsiya */
    .store-text-series button.active span i.fa-circle-play {
        color: yellowgreen;
        transform: scale(1.2);
        animation: pulse 1.5s infinite;
    }

    /* Pulsatsiya animatsiyasi */
    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.3);
            opacity: 0.7;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Tugma bosilganda aktiv holat */
    .store-text-series button.active {
        font-weight: bold;
        color: yellowgreen;
    }

    .section-2-span span {
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 5px;
    }

    /* ss and store-about */
    .movie-info-section {
        background: linear-gradient(135deg, #202425 0%, #141617 100%);
        color: #ffffff;
        padding: 25px 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 80px;
    }

    .movie-info-container {
        display: block;
        margin: 0 auto;
        padding: 0 15px;
        gap: 30px;
    }

    .movie-poster {
        position: relative;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .poster-image {
        border-radius: 10px;
        width: 210px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease;
    }

    .movie-rating {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0, 0, 0, 0.7);
        padding: 8px 12px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
    }

    .rating-icon {
        color: #FFD700;
        font-size: 16px;
    }

    .rating-value {
        font-weight: bold;
    }

    .rating-source {
        opacity: 0.8;
        font-size: 12px;
    }

    .movie-details {
        padding: 0px 15px;
        flex-grow: 1;
    }

    .movie-title {
        padding: 15px 0px;
        text-align: center;
        font-size: 27px;
        color: #ffffff;
        border-bottom: 2px solid #5d5858;
    }

    .detail-grid {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 15px;
        margin: 15px 0;
        font-size: 16px;
    }

    .detail-label {
        font-weight: 600;
        color: #a7a4a4;
    }

    .detail-value {
        font-weight: 500;
    }

    .age-rating {
        display: inline-block;
        padding: 2px 8px;
        background-color: #d32f2f;
        border-radius: 4px;
        font-weight: bold;
        width: 45px;
    }

    .age-16 {
        background-color: #0084ffac;
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: bold;
        width: 45px;
    }

    .movie-synopsis {
        margin: 30px 0;
        line-height: 1.6;
    }

    .movie-synopsis h3 {
        margin-bottom: 10px;
        color: #ffffff;
    }

    .movie-synopsis p {
        font-weight: 600;
        font-size: 16px;
    }

    .action-buttons {
        display: flex;
        gap: 15px;
        margin-top: 30px;
        flex-wrap: wrap;
    }

    .watch-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
    }

    .watch-button {
        background-color: yellowgreen;
        color: white;
        border: none;
    }

    /* store-list */
    .store-header {
        margin-bottom: 5px;
    }

    .store-h-search {
        margin-top: 15px;
        display: flex;
        justify-content: center;
    }

    .store-h-search input {
        width: 310px;
        padding: 8px 10px;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: #202425;
    }

    .store-h-search button {
        font-size: 17px;
        color: #fff;
        cursor: pointer;
        border: none;
        background-color: #202425;
        outline: none;
        padding: 0px 10px 0px 0px;
    }

    .store {
        padding: 20px;
        gap: 30px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .store-l-img img {
        width: 100%;
    }

    .store-l-text {
        margin-top: -5px;
        font-weight: 600;
        padding: 10px 0px;
        background-color: #202425;
    }

    .store-l-text p {
        text-align: center;
    }

    .store-list {
        cursor: pointer;
    }

    .s-like.active,
    .s-dislike.active {
        color: #00ff00;
        /* Green for active state, adjust as needed */
        font-weight: bold;
    }
}

/* tabel */
@media screen and (min-width:600px) and (max-width: 1120px) {
    .store {
        gap: 30px;
        display: grid;
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .store-section {
        margin-bottom: 50px;
        background-color: #202425;
    }

    .store-video {
        padding: 15px;
    }

    /* Spinner styles */
    .store-video {
        position: relative;
        background-color: #202425;
    }

    .spinner-container {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 7px solid #eee;
        border-top: 8px solid yellowgreen;
        border-radius: 50%;
        animation: v-spin 1s linear infinite;
    }

    @keyframes v-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .store-video iframe {
        width: 100%;
        height: 250px;
        border: none;
    }

    .store-video-caption-name p {
        text-align: center;
        font-weight: 600;
        font-size: 25px;
        margin: 10px 0px 20px 0px;
    }

    .store-video-caption {
        display: inline;
        justify-content: center;
    }

    .store-video-caption-list {
        display: flex;
        justify-content: center;
        margin: 15px 20px;
    }

    .store-video-caption-list {
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .s-like-button {
        padding: 5px 0px;
        display: flex;
        border-radius: 10px;
        margin-right: 10px;
        background-color: #413b3b;
    }

    .s-ulashish-button span {
        padding: 6px 15px;
        margin-right: 5px;
        border-radius: 10px;
        cursor: pointer;
        background-color: #413b3b;
    }

    .s-dislike {
        border-left: 2px solid #fff !important;
    }

    .s-like-button button {
        cursor: pointer;
        background: none;
        padding: 0px 15px;
        outline: none;
        border: none;
        color: #fff;
        font-size: 17px;
    }

    /* store-text */
    .store-text {
        padding: 10px 15px;
    }

    .store-text p {
        font-weight: 600;
        padding: 0px 0px 10px 0px;
        font-size: 17px;
    }

    .store-s-text {
        padding: 20px 30px;
        height: 100%;
        text-align: center;
    }

    .store-s-text i {
        margin-bottom: 10px;
        font-size: 50px;
    }

    .store-s-text a {
        color: #fff;
    }

    .store-s-text button {
        outline: none;
        margin-top: 5px;
        border-radius: 5px;
        padding: 5px 10px;
        cursor: pointer;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        background: none;
        border: 2px solid yellowgreen;
    }

    .store-text-series {
        display: none;
        height: 400px;
        overflow-y: scroll;
        scrollbar-width: inherit;
        scrollbar-color: #5d5858 transparent;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    }

    .store-text-series button {
        position: relative;
        font-size: 15px;
        font-weight: 600;
        outline: none;
        margin-bottom: 10px;
        width: 100%;
        padding: 10px 0px;
        display: block;
        cursor: pointer;
        background-color: #b4a4a42b;
        border: 1px solid #413b3b;
        color: #fff;
    }

    .store-text-series button i {
        top: 12px;
        left: 25px;
        position: absolute;
        font-size: 18px;
        align-items: center;
        display: flex;
    }

    .store-section-wrapper {
        padding: 0px 25px;
    }

    /* Play ikonkasi uchun asosiy stil */
    .store-text-series button span i.fa-circle-play {
        transition: all 0.3s ease;
        display: inline-block;
    }

    /* Bosilgan tugmadagi play ikonkasi uchun animatsiya */
    .store-text-series button.active span i.fa-circle-play {
        color: yellowgreen;
        transform: scale(1.2);
        animation: pulse 1.5s infinite;
    }

    /* Pulsatsiya animatsiyasi */
    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.3);
            opacity: 0.7;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Tugma bosilganda aktiv holat */
    .store-text-series button.active {
        font-weight: bold;
        color: yellowgreen;
    }

    .section-2-span span {
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 5px;
    }

    /* ss and store-about */
    .movie-info-section {
        background: linear-gradient(135deg, #202425 0%, #141617 100%);
        color: #ffffff;
        padding: 25px 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 80px;
    }

    .movie-info-container {
        display: flex;
        margin: 0 auto;
        padding: 0 20px;
        gap: 30px;
    }

    .movie-poster {
        position: relative;
        flex-shrink: 0;
    }

    .poster-image {
        border-radius: 10px;
        width: 300px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease;
    }

    .movie-rating {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0, 0, 0, 0.7);
        padding: 8px 12px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
    }

    .rating-icon {
        color: #FFD700;
        font-size: 16px;
    }

    .rating-value {
        font-weight: bold;
    }

    .rating-source {
        opacity: 0.8;
        font-size: 12px;
    }

    .movie-details {
        flex-grow: 1;
    }

    .movie-title {
        font-size: 32px;
        margin-bottom: 10px;
        color: #ffffff;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    .original-title {
        font-size: 18px;
        opacity: 0.8;
        font-style: italic;
    }

    .detail-grid {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 15px;
        margin: 20px 0;
        font-size: 16px;
    }

    .detail-label {
        font-weight: 600;
        color: #a0a0a0;
    }

    .detail-value {
        font-weight: 500;
        width: 50%;
    }

    .age-rating {
        display: inline-block;
        padding: 2px 8px;
        background-color: #d32f2f;
        border-radius: 4px;
        font-weight: bold;
        width: 45px;
    }

    .age-16 {
        background-color: #0084ffac;
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: bold;
        width: 45px;
    }

    .movie-synopsis {
        margin: 20px 0px;
        width: 90%;
        line-height: 1.6;
    }

    .movie-synopsis h3 {
        margin-bottom: 10px;
        color: #ffffff;
    }

    .movie-synopsis p {
        font-weight: 600;
        font-size: 15px;
    }

    .action-buttons {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .watch-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
    }

    .watch-button {
        background-color: yellowgreen;
        color: white;
        border: none;
    }

    /* store-list */
    .store-header {
        margin-bottom: 5px;
    }

    .store-h-search {
        margin-top: 15px;
        display: flex;
        justify-content: center;
    }

    .store-h-search input {
        width: 310px;
        padding: 8px 10px;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: #202425;
    }

    .store-h-search button {
        font-size: 17px;
        color: #fff;
        cursor: pointer;
        border: none;
        background-color: #202425;
        outline: none;
        padding: 0px 10px 0px 0px;
    }

    .store {
        padding: 20px;
        gap: 30px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .store-l-img img {
        width: 100%;
    }

    .store-l-text {
        margin-top: -5px;
        font-weight: 600;
        padding: 10px 0px;
        background-color: #202425;
    }

    .store-l-text p {
        text-align: center;
    }

    .store-list {
        cursor: pointer;
    }

    .s-like.active,
    .s-dislike.active {
        color: #00ff00;
        /* Green for active state, adjust as needed */
        font-weight: bold;
    }

}

/* comp and notebook */
@media screen and (min-width:1120px) and (max-width: 2000px) {
    .store-section {
        padding: 15px 0px 15px 15px;
        height: 600px;
        margin-bottom: 70px;
        display: flex;
        background-color: #202425;
    }

    /* Spinner styles */
    .spinner-container {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 6px solid #eee;
        border-top: 7px solid yellowgreen;
        border-radius: 50%;
        animation: v-spin 1s linear infinite;
    }

    @keyframes v-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .store-video {
        position: relative;
        width: 70%;
        background-color: #202425;
    }

    .bunny-div iframe {
        height: 515px !important;
        z-index: 1;
    }

    .store-video-caption {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: space-between;
        padding: 13px 0px;
        position: absolute;
        bottom: 0%;
    }

    .store-video-caption-name p {
        font-weight: 600;
        font-size: 30px;
    }

    .store-video-caption-list {
        margin-top: 15px;
        display: inline-flex;
        align-items: center;
    }

    .s-like-button {
        padding: 5px 0px;
        display: flex;
        border-radius: 10px;
        margin-right: 10px;
        background-color: #413b3b;
    }

    .s-dislike {
        border-left: 2px solid #fff !important;
    }

    .s-like-button button {
        cursor: pointer;
        background: none;
        padding: 0px 10px;
        outline: none;
        border: none;
        color: #fff;
        font-size: 17px;
    }

    .s-ulashish-button span {
        padding: 6px 15px;
        margin-right: 5px;
        border-radius: 10px;
        cursor: pointer;
        background-color: #413b3b;
    }

    /* store-text */
    .store-text {
        width: 30%;
        margin-left: 15px;
    }

    .store-text p {
        font-weight: 600;
        padding: 0px 0px 10px 0px;
        font-size: 17px;
    }

    .store-s-text {
        padding: 0px 30px;
        margin-top: 40%;
        height: 100%;
        text-align: center;
    }

    .store-s-text i {
        margin-bottom: 10px;
        font-size: 50px;
    }

    .store-s-text a {
        color: #fff;
    }

    .store-s-text button {
        outline: none;
        margin-top: 5px;
        border-radius: 5px;
        padding: 3px 10px 5px 10px;
        cursor: pointer;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        background: none;
        border: 2px solid yellowgreen;
    }

    .store-text-series {
        display: none;
        height: 530px;
        padding: 0px 5px 0px 0px;
        overflow-y: scroll;
        scrollbar-width: inherit;
        scrollbar-color: #5d5858 transparent;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    }

    .store-text-series button {
        position: relative;
        font-size: 15px;
        font-weight: 600;
        outline: none;
        margin-bottom: 10px;
        width: 100%;
        padding: 10px 0px;
        display: block;
        cursor: pointer;
        background-color: #b4a4a42b;
        border: 1px solid #413b3b;
        color: #fff;
    }

    .store-text-series button i {
        top: 12px;
        left: 25px;
        position: absolute;
        font-size: 18px;
        align-items: center;
        display: flex;
    }

    /* Play ikonkasi uchun asosiy stil */
    .store-text-series button span i.fa-circle-play {
        transition: all 0.3s ease;
        display: inline-block;
    }

    /* Bosilgan tugmadagi play ikonkasi uchun animatsiya */
    .store-text-series button.active span i.fa-circle-play {
        color: yellowgreen;
        transform: scale(1.2);
        animation: pulse 1.5s infinite;
    }

    /* Pulsatsiya animatsiyasi */
    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.3);
            opacity: 0.7;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Tugma bosilganda aktiv holat */
    .store-text-series button.active {
        font-weight: bold;
        color: yellowgreen;
    }

    .section-2-span span {
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 5px;
    }

    /* ss and store-about */
    .movie-info-section {
        background: linear-gradient(135deg, #202425 0%, #141617 100%);
        color: #ffffff;
        padding: 25px 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 80px;
    }

    .movie-info-container {
        display: flex;
        margin: 0 auto;
        padding: 0 20px;
        gap: 30px;
    }

    .movie-poster {
        position: relative;
        flex-shrink: 0;
    }

    .poster-image {
        border-radius: 10px;
        width: 300px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease;
    }

    .movie-rating {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0, 0, 0, 0.7);
        padding: 8px 12px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
    }

    .rating-icon {
        color: #FFD700;
        font-size: 16px;
    }

    .rating-value {
        font-weight: bold;
    }

    .rating-source {
        opacity: 0.8;
        font-size: 12px;
    }

    .movie-details {
        flex-grow: 1;
    }

    .movie-title {
        width: 90%;
        font-size: 40px;
        padding-bottom: 15px;
        color: #ffffff;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        border-bottom: 2px solid #5d5858;
    }

    .detail-grid {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 15px;
        margin-top: 20px;
        font-size: 15px;
    }

    .detail-label {
        font-weight: 600;
        color: #bfabab;
    }

    .detail-value {
        font-weight: 500;
        width: 50%;
    }

    .age-rating {
        display: inline-block;
        padding: 2px 8px;
        background-color: #d32f2f;
        border-radius: 4px;
        font-weight: bold;
        width: 45px;
    }

    .age-16 {
        background-color: #0084ffac;
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: bold;
        width: 45px;
    }

    .movie-synopsis {
        margin: 20px 0px;
        width: 90%;
        line-height: 1.5;
    }

    .movie-synopsis h3 {
        font-size: 20px;
        margin-bottom: 5px;
        color: #ffffff;
    }

    .movie-synopsis p {
        font-weight: 600;
        font-size: 15px;
    }

    .action-buttons {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .watch-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
    }

    .watch-button {
        background-color: yellowgreen;
        color: white;
        border: none;
    }


    /* store-list */
    .store-header {
        margin-bottom: 30px;
    }

    .store-h-search {
        padding: 0px 20px;
        margin-top: 10px;
        display: flex;
    }

    .store-h-search input {
        width: 300px;
        padding: 8px 10px;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        border: none;
        outline: none;
        background-color: #202425;
    }

    .store-h-search button {
        font-size: 17px;
        color: #fff;
        cursor: pointer;
        border: none;
        background-color: #202425;
        outline: none;
        padding: 0px 10px 0px 0px;
    }

    .store {
        padding: 0px 20px;
        gap: 30px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .store-l-img img {
        width: 100%;
    }

    .store-l-text {
        margin-top: -5px;
        font-weight: 600;
        padding: 10px 0px;
        background-color: #202425;
    }

    .store-l-text p {
        text-align: center;
    }

    .store-list {
        cursor: pointer;
    }

    .s-like.active,
    .s-dislike.active {
        color: #00ff00;
        /* Green for active state, adjust as needed */
        font-weight: bold;
    }
}