/**/
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; overflow-x: hidden; }
    #wrapper {border: 0px solid;}
    div::-webkit-scrollbar {display: none;}

    /* Button styles */
    .details-btn { align-self: center; padding: 10px; background-color: navy; color: white; border: none; border-radius: 0px;}
    .details-btn:hover { background-color: darkblue;}
    .kr-buttons .hero-button{ background-color: orange; color: #000; border: 0px solid #000; }
    .kr-buttons .hero-button:hover{ background-color: #000; color: #fff; border: 0px solid #d10000; }
    .quick-forms button { margin-top: 20px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer; border-radius: 0px; background-color: #010039;}
    .quick-forms button:hover { background-color: #0056b3;}
    .carousel-item #exa button, .carousel-item #exb button, .carousel-item #exc button, .carousel-item #exd button, .carousel-item #exe button, .carousel-item #exf button 
    { height: 40px; background-color: white; color: #000; width: 80px; border: 0px; border: 1px solid #000; background-color: navy; color: white; padding-bottom: 5px; border: 1px solid #000;}
    .item-cover button { align-self: center; padding: 10px; background-color: navy; color: white; border: none; border-radius: 0px;}
    .item-cover button {align-self: center; padding: 10px; background-color: navy; color: white; border: none; border-radius: 0;}
    .hero-button {align-self: center; padding: 10px; background-color: navy; color: white; border: none; border-radius: 0;}
    .details-button { align-self: center; padding: 10px; background-color: navy; color: white; border: none; border-radius: 0px; text-transform: uppercase;}

    /**/
    .full-music-player { border: 1px solid #000; height: 100%;}
    .container {height: 400px;}

    /**/
    input[type="range"] { -webkit-appearance: none; appearance: none; height: 1px; background-color: #000; outline: none; border-radius: 5px; margin-top: 10px; overflow: visible; }
    #seek-bar, #volume-bar { width: 80%; }
    #seek-bar::-webkit-slider-runnable-track, #seek-bar::-moz-range-progress, #volume-bar::-webkit-slider-runnable-track, #volume-bar::-moz-range-progress { background: linear-gradient(to right, #001702 0%, #302403 0%, #ddd 0%); height: 1px; border-radius: 5px; }
    #seek-bar::-webkit-slider-thumb, #seek-bar::-moz-range-thumb, #volume-bar::-webkit-slider-thumb, #volume-bar::-moz-range-thumb { width: 16px; height: 16px; background-color: black; border-radius: 50%; cursor: pointer; margin-top: -7px; }

    /**/
    .cons-article > h3, h4, h5, p { padding-bottom: 5px; line-height: 20px;}
    .cons-article .content {text-align: center; }
    .cons-article .content img {margin-bottom: 10px; width: 80px;}

    /**/
    .top-locations{ display: flex; justify-content: center; align-items: center; height: auto; font-family: Arial, sans-serif; margin: 0; }
    .card { margin: 0 10px;  width: 250px; text-align: center; border-radius: 15px; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; }
    .card > .image {border-radius: 20px;}
    .card > .title { margin-bottom: 0px; }
    .title { color: #ffffff; font-weight: bold; font-size: 1.2rem; margin-top: 20px; }
    .subtitle { color: #ffffff; font-size: 1rem; margin: 5px 0 15px; }
    .image { width: 100%; height: 300px;}
    .stars { margin: 15px 0; color: #ff9f1c; font-size: 1.2rem; }
    .stars span { color: #ccc; }
    .place-name { font-weight: bold; font-size: 1rem; margin-bottom: 20px; color: #ffffff; }

    /**/
    .recruit-section { border: 0px solid; max-width: 900px; margin: 0 auto;}
    .middle-text { border: 0px solid; max-width: 550px; margin: 40px auto 50px; text-align: center;}
    .middle-text h2 { margin-bottom: 20px; margin-top: 10px; color: #000048; line-height: 1.5em; font-size: 30px;}
    .middle-text p { margin-bottom: 20px; margin-top: 10px; color: #000048; line-height: 1.5em; font-size: 14px; }

    .join-section button:hover {background-color: #fff; border: 1px solid; color: #32cd32;}

    /**/
    .forms {  display: flex; flex-direction: column; align-items: center; background-color: #F9F9F9; }
    .form > div {margin: 0 auto; width: 900px; display: block;}
    .join-section { display: flex; margin-top: 20px; width: 800px; margin: 0 auto; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.05); background-color: #FfFfFf; text-align: left;}
    .join-text { flex: 1; padding: 20px; text-align: left; }
    .join-text h2 { color: #333; font-size: 12px; padding-bottom: 10px; }
    .join-text h1 { font-size: 24px; color: #333; font-weight: 100; }
    .join-text h1 span { color: #001D62; font-weight: bold; }
    .join-text p { margin-top: 10px; color: #333; font-size: 15px; }
    .join-text h3 { font-weight: bold; color: #333; margin-top: 20px; }
    .join-text ul { margin-top: 10px; color: #333; list-style-type: disc; padding-left: 20px; }
    .join-text ul li {font-size: 15px; line-height: 25px; }
    .join-text img { width: 100%; margin-top: 20px; border-radius: 10px; }
    .join-text ul li{ line-height: 0; box-shadow: none;}
    .join-form { flex: 1; padding: 20px; border-left: 1px solid #CCCCCC; }
    .join-form h4 { margin-bottom: 10px; color: #333; }
    .join-form input[type="text"] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #CCCCCC; border-radius: 5px; }
    .join-form button { margin-top: 10px; padding: 8px; width: 100%; background-color: white; border: 1px solid #001D62; color: #001D62; border-radius: 5px; cursor: pointer; }
    .submit-button { background-color: #2ECC71; color: white; }
    .network-section { border: 0px solid #000;  margin-top: 20px; width: 800px; padding: 40px 10px; background-color: #ffffff; border-radius: 0px; margin: 0 auto; box-shadow: 0px 0px 100px 16px #0000001c;}
    .network-section h3 { margin-bottom: 10px; }
    .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; margin-top: 20px; }
    .checkbox-group label { display: flex; align-items: center; padding: 10px; }
    .checkbox-group input[type="checkbox"] { margin-right: 8px; border: 1px solid #000;}
    .checkbox-group span { color: #333; font-size: 13px; }
    .network-section input[type="email"] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #5d5d5d !important; border-radius: 5px;}
    .connect-button { width: 100%; padding: 10px; background-color: #001D62; color: white; border: none; border-radius: 5px; cursor: pointer; }
    .review-section { margin-top: 10px; width: 800px; padding: 20px; background-color: #ffffff; border-radius: 0px !important; color: white; margin: 0 auto;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); padding: 20px;}
    .review-form { display: flex; flex-direction: column; gap: 10px; }
    .review-form input[type="text"], .review-form textarea { width: 100%; padding: 8px; border: 1px solid #CCCCCC; border-radius: 5px; }
    .review-form textarea { height: 80px; resize: none; }
    .stars { font-size: 20px; color: #FFA500; }
    .stars span { color: #4C4C4C; }
    .submit-review { padding: 10px; background-color: white; color: #001D62; border: none; border-radius: 5px; cursor: pointer; }

    /**/
    .review-section { width: 800px; margin: 0px auto; padding: 20px; color: #001D62; border: 5px solid #fff; margin: auto 5px;}
    .review-section h3 { margin-bottom: 0px; color: #001D62; width: 50%;}
    .review-form { display: flex; flex-direction: row; gap: 20px; }
    .left-column, .right-column { display: flex; flex-direction: column; }
    .left-column { width: 33%; }
    .right-column { width: 67%; align-items: flex-end; }
    .left-column label { display: flex; align-items: center; margin-bottom: 0px; color: white; font-weight: bold; }








    .left-column input[type="text"] { width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #CCCCCC; margin-left: 0px; font-size: 13px; }
    .stars { font-size: 20px; color: #FFA500; margin: 0 auto 0 0px; text-align: center; }
    .stars span { color: #4C4C4C; }
    .right-column textarea { width: 100%; height: 100%; padding: 10px; border-radius: 5px; border: 1px solid #CCCCCC; resize: none; }
    .submit-review { width: 100%; margin-top: 10px; padding: 10px; background-color:  #001D62; color: #ffffff; border: none; border-radius: 0px; cursor: pointer; }

    /**/
    .stars span { font-size: 24px; cursor: pointer; color: #ffffff; /* Default color for unselected stars */}
    .stars .highlighted { color: #FFD700; /* Color for selected stars */}

    /**/
    input, input[type="checkbox"], textarea, .checkbox-group input[type="checkbox"] { border: 1px solid #8b8b8b !important; border-radius: 0px !important;}
    a { text-decoration: none;}
    .ticket:hover { background:rgb(255, 140, 0); color: white; }
    .ticket { color: white; background:green; }
    #portuguesa-button .ticket:hover{background:rgb(255, 0, 0);}

    /**/
    .network-section { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; max-width: 900px; margin: 0 auto;}
    .image-container { flex: 1; display: flex; height: 300px; border: 1px solid; }
    .content-container {flex: 3; width: 90%; margin: 0 auto;}
    .artist-1{ display: flex; background-position: center; background-repeat: no-repeat; background-size: cover; max-width: 300px; border-radius: 10px; margin-left: 20px; width: 100%; border: 0px solid; max-width: 300px;height: 400px !important;}
    .artist-from{ height: 400px; margin-left: 20px; width: 100%; border: 0px solid; max-width: 400px;}
    .checkbox-group label{display: block; padding: 0px 10px; width: 100%;}

    @keyframes gradient {0% { background-position: 0% 50%;} 50% { background-position: 100% 50%;} 100% { background-position: 0% 50%;}}
    .gradient-box { padding: 5px 0px; width: fit-content; margin: 0 auto; height: auto; background: linear-gradient(-45deg, #ee7752, #ff631c, #008e6d, #23d571); background-size: 400% 400%; animation: gradient 15s ease infinite; border-radius: 0px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);}
    .network-section-wrapper { position: relative; padding: 20px 0;}

    /* Blue block before the form */
    .network-section-wrapper::before { content: ""; display: block; margin-bottom: 0px; background-position: center; background-repeat: no-repeat; margin: 0 auto; background-size: contain; width: 800px; height: 190px; transform: translateY(1px); z-index: 1;}
    /* Red block after the form */
    .network-section-wrapper::after { content: ""; display: block; width: 800px; height: 190px; margin-top: 0px; background-position: center; background-repeat: no-repeat; margin: 0 auto; background-size: contain; z-index: 1;}

    .carta-lisgoa { border: 0px solid #000; text-align: center; background-position: center; background-size: contain; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; min-width: 350px; height: 500px; padding: 20px; border-radius: 10px;  margin-bottom: 30px;}
    .carta-lisgoa h3 {color: rgb(0, 70, 140); font-size: 20px; margin-bottom: 5px; margin-top: 5px;}
    .carta-lisgoa h4 {color: navy; margin: 0; padding: 10px 0;}
    .carta-lisgoa p {width: 80%; text-align: center; font-size: 13px; margin: 0 auto; color: navy;}
    .carta-lisgoa img {width: 150px; color: #000; width: 40%; margin: 15px auto 5px;}

    .item-cover {display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 10px; border: 0px solid #000;  min-width: 300px; height: 500px;}
    .item-cover h4 {color: #fff; margin: 0;}
    .item-cover {min-width: 300px; height: 500px; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 10px;}

    .hero-container {display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; transition: transform 0.5s ease; padding-left: 30vw;}
    .hero-card {min-width: 300px; height: 500px; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 10px;}
    .hero-content {display: flex; flex-direction: column; justify-content: space-between;}
    .hero-title {color: rgb(0, 70, 140); font-size: 20px; margin-bottom: 5px; margin-top: 20px;}
    .hero-subtitle {color: navy; padding: 10px 0; margin: 0 auto;}
    .hero-description {width: 80%; text-align: center; font-size: 13px; margin: 0 auto; color: navy;}
    .hero-card-title {color: #fff; margin: 0;}


    .cinema-section {padding: 20px 0;}
    .films {overflow: hidden; width: 100%; margin: 20px 0;}
    .films > div {display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; transition: transform 0.5s ease; padding-left: 30vw;}

    /* General styles */
    .carousel-container { overflow: hidden; width: 100%; margin: 20px 0;}
    .carousel { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; transition: transform 0.5s ease; padding-left: 30vw;}
    .carousel-item{ min-width: 300px; height: 500px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 10px; background-size: cover;background-position: center; }

    /* Specific background styles */
    .carousel-item.empty { background: #fff; }
    .carousel-item img { width: 50px; margin: 0 auto; vertical-align: -20px; margin-right: 10px; }
    

    /* Additional specific styles for the "item" sections */
    /* .carousel-item:nth-child(1) { background-image: url('./images/placeholder-images/leaf.avif');}
    /* .carousel-item:nth-child(2) { background-image: url('./images/placeholder-images/Org-1.avif');} */
    /* .carousel-item:nth-child(3) {background-image: url('./images/placeholder-images/Street Food.avif');} */
    .carousel-container { overflow: hidden; width: 100%; margin: 20px 0; }
    .carousel { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; transition: transform 0.5s ease; padding-left: 30vw; }
    .carousel-item .item-content p { text-align: left; width: 100%; color: #fff;}
    .carousel .item-content img { display: inline; margin-right: 10px;}

    .item-content h3, .item-content h4, .item-content p { margin: 0; }
    .item-content h3 { color: rgb(0, 70, 140); font-size: 20px; margin-bottom: 5px; margin-top: 20px; color: rgb(0, 70, 140); font-size: 20px; margin-top: 20px; margin-bottom: 5px; }
    .item-content h4 { color: rgb(255, 255, 255); margin: 0; padding: 10px 0; }
    .carta-lisgoa .item-content h4 { color: rgb(0, 70, 140); margin: 0; padding: 10px 0; }
    .item-content p { width: 80%; text-align: center; font-size: 13px; margin: 0 auto; color: navy; }
    .item-content img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

    /* General styles */
    .carta-content {display: flex;flex-direction: column;justify-content: space-between;text-align: center;}
    .carta-content h3 {color: rgb(0, 70, 140);font-size: 20px;margin: 20px 0 5px;}
    .carta-content h4 {color: navy;margin: 0;padding: 10px 0;}
    .carta-content p {width: 80%;margin: 0 auto;font-size: 13px;color: navy;}
    .books {padding: 20px 0px;}
    .gallery-container { overflow: hidden;width: 100%;margin: 20px 0; padding-left: 0vw;}
    .gallery {display: flex;gap: 10px;overflow-x: auto;scroll-behavior: smooth;transition: transform 0.5s ease; padding-left: 0vw;}
    .books .gallery { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; transition: transform 0.5s ease; padding-left: 30vw;}
    .book-item { min-width: 300px; height: 500px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: 10px; background-size: cover; background-repeat: no-repeat; background-position: center;}
    .book-item h4 { color: #fff; margin: 0;}

    








    /*****************/

    /* Popup background */
    .popup { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); overflow-y: auto; padding: 20px; box-sizing: border-box; }

    /* Popup content box */
    .popup-content { background-color: #fff; margin: auto; padding: 20px; border: 0px solid #888; max-width: 600px; height: 90%; display: flex; flex-wrap: wrap; border-radius: 8px; box-sizing: border-box; overflow: auto; }

    /* Close button */
    .close { color: #ff0000; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; top: 10px; right: 20px; z-index: 1001; }
    .close:hover, .close:focus { color: #000; text-decoration: none; }

    .lisgoa-button {width: 300px;}

    .area .info-container p { border: 0px solid #000; margin: 0px; height: 100%; padding: 0px; font-size: 13px;}

    .area .info-container { background-color: white; border: 2px solid #f0f0f0; width: fit-content;
        margin: 0 auto; padding: 10px; transition: all 0.3s ease-in-out; color: navy; font-size: 13px;}

    .area .info-container:hover {background-color: white; box-shadow: 0px 0px 10px 5px #c6c6c630; width: fit-content;
    margin: 0 auto; padding: 10px;  transition: all 0.3s ease-in-out; font-size: 13px;}
    

    /* Responsive behavior for mobile screens */
    @media (max-width: 768px) { 
        
        
        .popups #popup1, .popups #popup2, .popups #popup3, .popups #popup4 
        { border: 0px solid #000; width: 100% !important; padding: 5px; }

        .popup-content {flex-direction: column;  height: 95%; padding: 0px; position: relative; background-color: white; overflow-y: auto;}

        .area .info-container div {display: block;}

    }

    /*****************/

    .full-music-player { border: 0px solid; }
    .full-music-player .container { height: 450px; border: 0px solid; border-radius: 20px; padding: 30px; background-repeat: no-repeat; background-position: center; background-size: contain; width: 300px;}
    .full-music-player .container .player-contents{ text-align: center; font-size: 12px; color: white;}

    .music-player { background-repeat: no-repeat; background-position: center; background-size: cover; color: white;}

    input[type="text"]{ margin-bottom: 10px;}

    /* General styles for book items */
    .book-item { width: 300px;  /* Set width to your desired value */ height: 500px; /* Set height to your desired value */ background-size: cover; background-position: center; position: relative; transition: background-image 0.3s ease-in-out; /* Optional: smooth transition for background image */}

    /* Optional: styling for the button */
    .details-button { position: absolute; bottom: 20px;  color: white; padding: 10px 20px; border: none; transition: background-color 0.3s;}

    .details-button:hover { background-color: rgba(0, 0, 0, 0.7);}
    

    .popup div img { height: 250px; margin: 0px 3px; border-radius: 5px; }
    .popup .carousel {padding-left: 0px; height: 300px !important; border-right: 3px solid #ff5600;}

    .quick-forms h1 { text-align: center;}
    .quick-forms form { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 600px; margin: 20px auto; height: 200px;}
    .quick-forms label { display: block; margin-top: 10px;}
    .quick-forms input, textarea, select { width: 100%; padding: 8px; margin-top: 5px; border-radius: 4px; border: 1px solid #ccc;}
    .quick-forms textarea { height: 150px;}
   





    

    /* General styles */
    .carousel-container { overflow: hidden; width: 100%; margin: 20px 0;}
    .carousel-itself { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; transition: transform 0.5s ease; padding-left: 30vw;}
    .carousel-item{ min-width: 300px; height: 500px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 10px; background-size: cover;background-position: center; }
    .carousel-itself .item-content img { display: inline; margin-right: 10px;}
    .carousel-item.empty { background: #fff; }
    .carousel-item img { width: 50px; margin: 0 auto; vertical-align: -20px; margin-right: 10px;  display: inline-block !important; border: 5px solid #ffffff; border-radius: 200px; }
    .carousel-item #exa .item-content .title { color: #000000; font-weight: bold; font-size: 18px; padding: 10px; }
    .carousel-item #exb .item-content .title { color: #ffffff; font-weight: bold; font-size: 18px; padding: 10px; }
    .carousel-item #exc .item-content .title { color: #ffb300; font-weight: bold; font-size: 18px; padding: 10px; }
    .carousel-item #exa .item-content h1, .carousel-item #exa .item-content h2, .carousel-item #exa .item-content h3, .carousel-item #exa .item-content h4, .carousel-item #exa .item-content h5, .carousel-item #exa .item-content p { color: #000000; text-align: left; width: 100%;}
    .carousel-item #exb .item-content h1, .carousel-item #exb .item-content h2, .carousel-item #exb .item-content h3, .carousel-item #exb .item-content h4, .carousel-item #exb .item-content h5, .carousel-item #exb .item-content p { color: #ffffff; text-align: left; width: 100%;}
    .carousel-item #exc .item-content h1, .carousel-item #exc .item-content h2, .carousel-item #exc .item-content h3, .carousel-item #exc .item-content h4, .carousel-item #exc .item-content h5, .carousel-item #exc .item-content p { color: #000000; text-align: left; width: 100%;}
    
    .carousel-item #exb .item-content p, .carousel-item #exa .item-content p, .carousel-item #exc .item-content p { text-align: left; width: 100%; margin: 20px auto; font-size: 13px;}

    .carousel-item.top-locations { padding-bottom: 10px; padding-top: 0px;}
    .carousel-item.top-locations #exd h3 { color: #000;}
    .carousel-item .top-locations .star-rating span { color: white;}
    .carousel-item.top-locations .star-rating { margin-bottom: 0px;}
    /* .carousel-item #exb .star-rating span { color: white;} */

    /* Scroll content box type 2*/
    .star-rating { color: #000000; }

    .carousel-item #exa, .carousel-item #exb, .carousel-item #exc, .carousel-item #exd,  .carousel-item #exe, .carousel-item #exf 
    { width: 250px; text-align: center; font-family: Arial, sans-serif; border-radius: 15px; overflow: hidden;}

    .carousel-item #exa, .carousel-item #exb, .carousel-item #exc, .carousel-item #exd, .carousel-item #exe, .carousel-item #exf 
    { margin: auto auto;}

    .carousel-item #exa .image {margin: 10px auto; height: 380px; background-size: cover; background-position: center; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20px;}
    .carousel-item #exb .image {margin: 10px auto; height: 380px; background-size: cover; background-position: center; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20px;}
    .carousel-item #exc .image {margin: 10px auto; height: 380px; background-size: cover; background-position: center; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20px;}
    .carousel-item #exd .image {margin: 10px auto; height: 380px; background-size: cover; background-position: center; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20px;}
    .carousel-item #exe .image {margin: 10px auto; height: 380px; background-size: cover; background-position: center; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20px;}
    .carousel-item #exf .image {margin: 10px auto; height: 380px; background-size: cover; background-position: center; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20px;}
    
    .quick-forms-2 ul li { border: 0px solid #000; margin: 0px; padding: 0px 10px; border-radius: 0px;}

    .kr-buttons .hero-button:hover { background-color: #000 !important; color: #fff !important;}

    .black-lable {align-self: center; min-width: 20px; padding: 10px 10px; background-color: rgb(0, 0, 0); color: white; border: none; border-radius: 0px; font-size: 14px;}


    #book-contribute button:hover { background-color: orange !important; color: black !important;}


    .lisgoenkar .kr-buttons { display: flex; gap: 20px; max-width: fit-content; margin: 0 auto;}


    @media (max-width: 600px) {  .lisgoenkar .kr-buttons { display: block; max-width: 90%; } 
}
    /* End of Scrollable*/