:root {
    --bg-color: #641d1d;
    --font-color: #ffffff;
    --border-radius-medium: 25px;
    --box-title-color: #ffffff;
    --box-title-hover: #0066CC;
    --box-font-color: #ff8e8e;
    --pay-btn-bg: #500b0b;
    --pay-bt-color: #ffffff;
    --white-color: #f8f8f8;
    --secondary-color: #0066CC;
    --section-bg-color: #f0f8ff;
    --custom-btn-bg-color: #e0b532;
    --custom-btn-bg-hover-color: #00CC99;
    --dark-color: #000000;
    --p-color: #717275;
    --border-color: #7fffd4;
    --link-hover-color: #0066CC;
    --body-font-family: 'Montserrat', sans-serif;
    --title-font-family: 'Sono', sans-serif;
    --h1-font-size: 58px;
    --h2-font-size: 46px;
    --h3-font-size: 32px;
    --h4-font-size: 28px;
    --h5-font-size: 24px;
    --h6-font-size: 22px;
    --p-font-size: 16px;
    --menu-font-size: 14px;
    --border-radius-large: 100px;
    --border-radius-small: 10px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}
.container:has(.scroll-container){
    padding:1rem;
}
.scroll-container{
    height:auto;
    overflow-x:scroll;
    width: inherit;
    flex-wrap:nowrap;
    margin:0 auto;
}
.scroll-container::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
    height: 8px; /* 横向滚动条高度 */
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #81e2fe; /* 滚动条滑块颜色 */
    border-radius: 10px; /* 圆角 */
}

.scroll-container::-webkit-scrollbar-track {
    background:   #0c8ff7; /* 滚动条轨道颜色 */

}