html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
 
}
@media (max-width: 1200px) {
    .poll-card {
        flex: 1 1 calc(33.33% - 2rem);
        max-width: calc(33.33% - 2rem);
    }
}

@media (max-width: 768px) {
    .poll-card {
        flex: 1 1 calc(50% - 2rem);
        max-width: calc(50% - 2rem);
    }
}

@media (max-width: 500px) {
    .poll-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to right, #1e1e2f, #2c3e50);
    color: #2c2c2c;
    min-height: 100vh;
    margin: 0;
}

.frosted-glass {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    max-width: 600px;
    width: 90%;
    color: #eee;
}

.glowing-btn {
    font-weight: 600;
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
    transition: all 0.3s ease;
    border-radius: 8px;
}

.glowing-btn:hover {
    box-shadow: 0 0 18px rgba(13, 110, 253, 0.6);
    transform: translateY(-2px);
}
.btn-outline-light:hover {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
    transition: all 0.2s ease-in-out;
}
.glowing-btn {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 10px #0d6efd, 0 0 20px #0d6efd88;
}

    .glowing-btn:hover {
        box-shadow: 0 0 15px #0d6efd, 0 0 30px #0d6efdcc;
    }



.poll-container {
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: start;
}





.poll-card {
    display: flex;
    flex-direction: column;
    align-items: start;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.05);
    border: 0px solid black;
    box-shadow: 0 0 1rem black;
    border-radius: 15px;
    padding: 1.5rem;
    width: 31%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

    .poll-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 1rem black;
    }

    .poll-card h5 {
        font-size: clamp(1rem, 2vw, 1.5rem); 
    }

    .poll-card p {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(0.8rem, 1.5vw, 1rem);
    }

    .poll-card .badge {
        font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    }
    .poll-card .btn {
        flex: 1;
        margin-right: 0.5rem;
        transition: all 0.2s ease;
        cursor: pointer
    }

        .poll-card .btn:last-child {
            margin-right: 0;
        }