/*
 Theme Name:   Personal Branding Network
 Template:     generatepress
*/

.hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.2;
    margin-bottom: 25px !important;
    color: var(--soft-gold) !important; /* Gold color for premium look */
    font-weight: 800;
}

/* Quiz Cards Styling */
.quiz-card {
    background: #F8F8F0;
    border: 1px solid #C5BBA4; /* Muted Sand */
    border-radius: 12px;
    padding: 40px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.quiz-card:hover {
    transform: translateY(-10px);
    border-color: #C9A66B; /* Soft Gold Accent */
}

.btn-primary {
    background-color: #014421;
    color: #F8F8F0;
    border: 2px solid #014421;
}

.btn-primary:hover {
    background-color: #C9A66B; /* Gold on hover */
    border-color: #C9A66B;
}

/* Step Numbers */
.step-number {
    background: #C9A66B;
    color: #1A1A1A;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 auto 15px;
}

/* Layout Reset for Custom Page */
.page-template-page-home .site-content {
    display: block !important; /* GeneratePress flex ko khatam karega */
}

/* Page container reset */
#page {
    margin: 0 !important;
    max-width: 100% !important;
}

.site-content {
    padding: 0 !important;
}

.page-template-page-home #primary {
    width: 100% !important;
    float: none !important;
}

/* Sections ko full width aur vertical stack karna */
.hero-wrapper, 
section.intro-section, 
section.quiz-cards-section, 
section.how-it-works-section, 
section.features-section, 
section.cta-section {
    display: block !important;
    width: 100% !important;
    clear: both;
}

/* Dashboard Container ko center align karne ke liye */
.dashboard-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #F8F8F0; /* Aapka brand Ivory White color */
    padding: 40px 0;
}

.dashboard-container {
    width: 100%;
    max-width: 1200px; /* Isse content zyada wide nahi hoga */
    margin: 0 auto;
    display: flex; /* Sidebar aur Main content ko sath rakhne ke liye */
    gap: 20px;
    align-items: flex-start;
}

/* Agar sidebar aur main content shift ho rahe hon to ye lazmi add karein */
.dashboard-main {
    flex-grow: 1;
    max-width: 100%;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
        padding: 0 15px;
    }
}