body {
    background: linear-gradient(135deg, #dff1ff, #f7e9ff, #fffae9);
    font-family: "Poppins", sans-serif;
    color: #2f2f2f;
    min-height: 100vh;
    padding-bottom: 50px;
}

/*.state-container {
    max-width: 1100px;
    margin: auto;
}*/

/* -------------------------------------------------- */
/* CARD — GLASS EFFECT                                 */
/* -------------------------------------------------- */
.glass-card {
    /*margin-bottom: 35px;*/
    padding: 15px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 8px 8px 18px rgba(0,0,0,0.10), -4px -4px 12px rgba(255,255,255,0.6);
    transition: 0.35s ease;
}

/* .glass-card:hover {
        transform: translateY(-8px);
        box-shadow: 12px 12px 30px rgba(0,0,0,0.15), -6px -6px 18px rgba(255,255,255,0.7);
    }*/

/* -------------------------------------------------- */
/* SECTION TITLE                                       */
/* -------------------------------------------------- */
.section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    background: linear-gradient(90deg, #6a5af9, #ff4f81);
    -webkit-background-clip: text;
    color: transparent;
}

/* -------------------------------------------------- */
/* MAIN TITLE                                           */
/* -------------------------------------------------- */
.main-title {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
    text-align: center;
    background: linear-gradient(90deg, #007bff, #9333ea, #f43f5e);
    -webkit-background-clip: text;
    color: transparent;
}

/* -------------------------------------------------- */
/* PILL TAGS                                            */
/* -------------------------------------------------- */
.pill {
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 15px;
    margin: 5px;
    display: inline-block;
    color: white;
    font-weight: 500;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}

.blue {
    background: #3b82f6;
}

.pink {
    background: #ec4899;
}

.green {
    background: #22c55e;
}

.orange {
    background: #f97316;
}

.purple {
    background: #8b5cf6;
}

/* -------------------------------------------------- */
/* ICON CIRCLES                                        */
/* -------------------------------------------------- */
.icon-box {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    margin-right: 15px;
    font-weight: bold;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
}


.scrollable-tabs-container {
    overflow-x: auto; /* Enables horizontal scrolling when content overflows */
    white-space: nowrap; /* Prevents the tabs from wrapping to the next line */
}

.nav.nav-tabs {
    flex-wrap: nowrap; /* Ensures the nav items stay in a single line */
}

/* Optional: Style for the scrollbar */
.scrollable-tabs-container::-webkit-scrollbar {
    height: 8px; /* Height of the horizontal scrollbar */
}

.scrollable-tabs-container::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Color of the scrollbar thumb */
    border-radius: 4px;
}