/* ==========================================================================

   I. BASE & RESET

   ========================================================================== */



/* --- COLORS --- */

:root {

    --primary: #1A365D; /* Navy Blue */

    --accent: #FFC300;  /* Yellow */

    --light: #f8f9fa;

    --white: #ffffff;

}



/* --- GLOBAL RESET & SCROLLBAR FIX --- */

* { margin: 0; padding: 0; box-sizing: border-box; }



/* THIS FIXES THE JUMPING NAVBAR: Forces scrollbar track to always show */

html { overflow-y: scroll; }



body {

    font-family: 'Arial', 'Helvetica', sans-serif;

    color: #333;

    line-height: 1.6;

    background-color: #fcfcfc;

}



a { text-decoration: none; color: inherit; }

ul { list-style: none; }



/* Global h3 Color Change */

h3 { color: #1A365D; }





/* ==========================================================================

   II. LAYOUT & HEADER

   ========================================================================== */



/* --- HEADER & NAV --- */

header {

    background: var(--white);

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    position: sticky; top: 0;

    z-index: 1000;

}



nav {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 2rem;

    position: relative; /* Important for mobile menu positioning */

}


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--primary);

}



/* Nav Links Container */

.nav-links {

    display: flex;

    gap: 0.8rem;

    align-items: center;

    list-style: none; /* Removes bullet points */

}



/* Nav Buttons Style */

.nav-links a {

    color: var(--primary);

    font-weight: 500;

    font-size: 0.95rem;

    transition: all 0.3s;

    padding: 0.5rem 1rem;

    border-radius: 20px;

    text-decoration: none;

}



.nav-links a:hover { color: var(--accent); }



/* Active Page Style (Blue Button) */

.nav-links a.active {

    background-color: var(--primary);

    color: var(--white) !important;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}



.nav-links .badge {

    position: static !important;  /* Snap back to normal flow */

    transform: none !important;   /* Remove any shifting */

    margin-left: 5px;             /* Add space between Name and Badge */

    vertical-align: middle;

}



/* Login Button Specifics */

.login-link { border: 2px solid var(--primary); }

.login-link:hover { background: var(--primary); color: white !important; }



/* Subscribe Button */

.cta-button {

    background: var(--primary);

    color: var(--light);

    padding: 0.35rem 0.8rem;

    border-radius: 15px;

    font-size: 0.85rem;

    font-weight: bold;

    border: 2px solid var(--primary);

    transition: 0.3s;

    margin-left: 1rem;

    text-decoration: none;

}

.cta-button:hover {

    background: var(--accent);

    color: var(--primary);

    border-color: var(--primary);

}



/* --- HAMBURGER MENU STYLES (Hidden on Desktop) --- */

.mobile-menu {

    display: none; /* Hidden by default */

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    z-index: 1001; /* Above everything */

}



/* These are the 3 lines of the hamburger */

.mobile-menu span {

    width: 25px;

    height: 3px;

    background-color: var(--primary); /* Navy Blue Color */

    border-radius: 3px;

    display: block;

}



/* --- DROPDOWNS --- */

.dropdown {

    position: relative;

    display: inline-block;

}



.nav-dropdown-content {

    right: auto !important; /* Reset the 'right: 0' from the user menu */

    left: 0 !important;     /* Align to the left edge */

    min-width: 200px;       /* Slightly wider for text */

}



.dropdown-content {

    display: none;

    position: absolute;

    right: 0; /* Aligns dropdown to the right side of the link */

    background-color: white;

    min-width: 160px;

    box-shadow: 0 8px 16px rgba(0,0,0,0.1);

    z-index: 1;

    border-radius: 8px;

    overflow: hidden;

    margin-top: 0;

    padding-top: 5px;

}



.dropdown-content a {

    color: #1A365D !important;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

    font-weight: normal !important;

    border-bottom: 1px solid #f4f4f4;

}



.dropdown-content a:last-child {

    border-bottom: none;

}



.dropdown-content a:hover {

    background-color: #f8f9fa;

    color: var(--primary) !important;

    padding-left: 20px; /* Small animation effect */

}



/* Show the dropdown on hover */

.dropdown:hover .dropdown-content {

    display: block;

}



/* --- FOOTER --- */

footer { background: #1A365D; color: white; padding: 3rem 2rem 1rem; }

.footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 2rem; }

.footer-links { list-style: none; }

.footer-links a { color: white; text-decoration: none; opacity: 0.8; line-height: 2; }

.social-links { display: flex; gap: 1rem; margin-top: 1rem; }

.social-links a { width: 40px; height: 40px; background: rgba(255, 195, 0, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFC300; text-decoration: none; }

.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); opacity: 0.7; }





/* ==========================================================================

   III. COMPONENTS (Buttons, Cards, Badges, etc)

   ========================================================================== */



/* --- BUTTONS --- */

.btn-primary { background: var(--accent); color: var(--primary); padding: 1rem 2.5rem; border-radius: 30px; font-weight: bold; font-size: 1.1rem; border: 2px solid var(--accent); transition: 0.3s; display: inline-block; }

.btn-primary:hover { background: transparent; color: var(--accent); transform: translateY(-3px); }



.btn-secondary { background: transparent; color: var(--white); padding: 1rem 2.5rem; border-radius: 30px; font-weight: bold; font-size: 1.1rem; border: 2px solid var(--white); transition: 0.3s; display: inline-block; margin-left: 10px; }

.btn-secondary:hover { background: var(--white); color: var(--primary); transform: translateY(-3px); }



.btn-sm { background: var(--primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; }

.btn-sm:hover { background: var(--accent); color: var(--primary); }



.btn-text { color: var(--primary); font-weight: bold; text-decoration: underline; font-size: 1rem; margin-top: 1.5rem; display: inline-block; }



.btn-buy { background: #1A365D; color: white; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-size: 0.9rem; transition: 0.3s; }

.btn-buy:hover { background: #FFC300; color: #1A365D; }



.btn-large { background: #1A365D; color: white; padding: 1.2rem 3rem; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 1.2rem; transition: all 0.3s; display: inline-block; border: 2px solid #1A365D; }

.btn-large:hover { background: #FFC300; color: #1A365D; }



.btn-block { display: block; text-align: center; width: 100%; }



/* --- FILTER PILLS --- */

.filter-container { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2rem; }

.filter-btn { border: none; outline: none; padding: 10px 20px; background-color: #f1f1f1; cursor: pointer; border-radius: 25px; /* Pill shape */ font-size: 0.9rem; font-weight: 600; color: #666; transition: all 0.3s ease; }

.filter-btn:hover { background-color: #ddd; color: #333; }

.filter-btn.active { background-color: var(--accent); color: var(--primary); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }



/* --- CARDS (General) --- */

.card {

    background: var(--white);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

    transition: 0.3s;

    display: flex;

    flex-direction: column;

    border: 1px solid #eee;

    display: flex;

    flex-direction: column;

    height: 100%;

}

.card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }



.card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }

.card-content p {

    color: #666;

    font-size: 0.95rem;

    margin-bottom: 1.5rem;

    /* Text Truncation Logic */

    display: -webkit-box !important;

    -webkit-line-clamp: 4 !important; /* Limits to 4 lines */

    line-clamp: 4 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    text-overflow: ellipsis;

}

.card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #eee; }



/* --- TAGS & BADGES --- */

.tag { background: #f8f9fa; color: #666; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.85rem; border: 1px solid #e0e0e0; }

.badge { position: absolute; top: 15px; right: 15px; background: var(--accent); color: var(--primary); padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; }



.certification-tag {

    display: inline-block;

    background-color: #e3f2fd; /* Light Blue background */

    color: var(--primary);

    font-size: 0.75rem;

    font-weight: bold;

    padding: 2px 8px;

    border-radius: 4px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 5px;

}

/* Duplicate rule for cert tag kept as requested */

.certification-tag {

    display: inline-block;

    background-color: #FFC300; /* Your brand's yellow */

    color: #1A365D; /* Your brand's blue for text contrast */

    font-size: 0.6rem; /* Smaller font size than the h3 */

    font-weight: bold;

    padding: 0.2rem 0.6rem; /* Padding around the text */

    border-radius: 12px; /* Rounded corners */

    margin-left: 0.8rem; /* Space between the title and the tag */

    vertical-align: middle; /* Aligns the tag with the middle of the text */

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* --- GRIDS --- */

.grid-container,

.resource-grid,



.dashboard-grid

{ display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

}



.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }





/* ==========================================================================

   IV. PAGE SPECIFIC STYLES

   ========================================================================== */



/* --- HERO & HEADERS --- */

.hero { background: linear-gradient(135deg, var(--primary) 0%, #2d4a7c 100%); color: var(--white); padding: 6rem 2rem; text-align: center; }

.hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 900; }

.hero p { font-size: 1.3rem; margin-bottom: 2rem; opacity: 0.9; max-width: 800px; margin-left: auto; margin-right: auto; }



.page-header {

    background: linear-gradient(135deg, var(--primary) 0%, #2d4a7c 100%);

    color: var(--white);

    padding: 3rem 2rem;

    text-align: center;

    margin-bottom: 2rem;

}

.page-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }

.page-header p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }



/* --- ABOUT SECTION --- */

.about { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }

.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.about-text h2 { font-size: 2.5rem; color: #1A365D; margin-bottom: 1.5rem; }

.about-text p { color: #666; font-size: 1.1rem; margin-bottom: 1rem; line-height: 1.8; }

.about-image { width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; font-size: 5rem; color: #1A365D; position: relative; }



/* --- DASHBOARD --- */

.dashboard-icon-area {

    height: 160px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 3rem;

    border-bottom: 1px solid #eee;

}

.dashboard-grid .card {

    height: 100%;

    display: flex;

    flex-direction: column;

}



/* --- SHOP & PRODUCTS --- */

.shop-section { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }



.product-card { background: white; border: 1px solid #e0e0e0; border-radius: 15px; overflow: hidden; transition: all 0.3s; display: flex; flex-direction: column; }

.product-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: translateY(-5px); }

.product-image-area { height: 180px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #1A365D; position: relative; }

.product-badge { position: absolute; top: 15px; right: 15px; background: #FFC300; color: #1A365D; padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; }

.product-details { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }

.product-details h3 { font-size: 1.2rem; color: #1A365D; margin-bottom: 0.5rem; }

.product-details p { color: #666; font-size: 0.95rem; margin-bottom: 1.5rem; }

.product-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding-top: 1rem; }

.price { font-size: 1.3rem; font-weight: bold; color: #1A365D; }



/* Duplicate Product Image rule kept */

.product-image { height: 180px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--primary); position: relative; }



/* --- RESOURCES & LEARNING --- */

.resource-list { list-style: none; max-width: 800px; margin: 0 auto; }

.resource-item {

    background: white;

    padding: 1.5rem;

    margin-bottom: 1rem;

    border-radius: 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: 0 2px 5px rgba(0,0,0,0.05);

    border-left: 5px solid #FFC300;

    transition: 0.3s;

}

.resource-item:hover { transform: translateX(5px); }

.resource-btn {

    color: #1A365D;

    font-weight: bold;

    text-decoration: none;

    border: 2px solid #1A365D;

    padding: 0.5rem 1.5rem;

    border-radius: 5px;

    white-space: nowrap;

    margin-left: 1rem;

}

.resource-btn:hover { background: #1A365D; color: white; }



.resource-grid {

    display: grid;

    /* This creates a responsive grid automatically */

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 2rem;

}



.resource-card {

    background: white;

    border: 1px solid #eee;

    border-radius: 12px;

    padding: 2rem;

    box-shadow: 0 4px 6px rgba(0,0,0,0.02);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    flex-direction: column;

}

.resource-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.1);

    border-color: var(--accent);

}

.resource-card.hide { display: none !important; }



.card-header { margin-bottom: 1rem; }

.card-header h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--primary); }

.card-desc { color: #555; font-size: 0.95rem; margin-bottom: 1.5rem; flex-grow: 1; /* Pushes the button to the bottom */ }



.card-meta {

    display: flex;

    gap: 15px;

    margin-bottom: 1.5rem;

    color: #777;

    font-size: 0.85rem; /* Slightly smaller to fit 3 items */

    font-weight: 500;

    border-top: 1px solid #f0f0f0;

    padding-top: 1rem;

    flex-wrap: wrap; /* Allows items to drop to next line on mobile */

}

.card-meta span { display: flex; align-items: center; gap: 5px; }

.card-meta i { color: var(--accent); }



/* --- CHALLENGES --- */

.challenge-card { border: 2px dashed var(--primary); background: #f0f7ff; padding: 2rem; text-align: center; border-radius: 15px; transition: 0.3s; display: flex; flex-direction: column; justify-content: space-between; }

.challenge-card:hover { background: var(--white); border-style: solid; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

.status { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; margin-bottom: 1rem; width: fit-content; margin: 0 auto 1rem auto; }

.active { background: #4caf50; color: white; }

.past { background: #9e9e9e; color: white; }

#challenge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }



.challenge-status { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; margin-bottom: 1rem; width: fit-content; margin-left: auto; margin-right: auto; }

.status-active { background: #4caf50; color: white; }

.status-past { background: #9e9e9e; color: white; }



/* --- PORTFOLIO --- */

.portfolio { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }

.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }

.portfolio-item { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: all 0.3s; cursor: pointer; }

.portfolio-image { width: 100%; height: 250px; background: linear-gradient(135deg, #1A365D 0%, #2d4a7c 100%); display: flex; align-items: center; justify-content: center; color: #FFC300; font-size: 3rem; }

.portfolio-content { padding: 1.5rem; }

.portfolio-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }



/* --- BLOG & ARTICLES --- */

.blog-section { background: #f8f9fa; padding: 5rem 2rem; }



.article-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.02); transition: all 0.3s; cursor: pointer;

display: flex; flex-direction: column; height: 100%; } /*same as portfolio item*/

.article-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.article-image { width: 100%; height: 250px; background: #eaeaea; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #FFC300;} /* icon */

/* .article-content pre { margin: 1.2rem 0; padding: 1.2rem; flex-grow: 1; } */

.article-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } /* white section from date to Read article link */

.article-meta { font-size: 0.85rem; color: #888; margin-bottom: 0.5rem; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; } /* date */

.article-title { font-size: 1.4rem; color: #1A365D; margin-bottom: 0.8rem; font-weight: bold; line-height: 1.3; } /*title */

.read-more { color: #1A365D; text-decoration: none; font-weight: bold; display: inline-block; padding-top: 1rem; margin-top: auto; }

.read-more:hover { color: #FFC300; }



.article-nav { margin-bottom: 2rem; }

.btn-back { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: bold; text-decoration: none; font-size: 0.9rem; padding: 8px 16px; background-color: #e3f2fd; border-radius: 20px; transition: all 0.2s ease; }

.btn-back:hover { background-color: var(--primary); color: white; transform: translateX(-3px); }



/* Article Body Typography */

.article-body { font-size: 1.1rem; line-height: 1.8; color: #333; }

.article-body h2 { color: var(--primary); font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 1rem; border-bottom: 2px solid #f0f0f0; padding-bottom: 0.5rem; }

.article-body h3 { color: #444; font-size: 1.4rem; margin-top: 2rem; margin-bottom: 0.8rem; }

.article-body ul, .article-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }

.article-body li { margin-bottom: 0.5rem; }

.article-body ul { list-style-type: disc; /* Ensure bullets show */ }



/* Article Tables */

.article-body table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem; border: 1px solid #b0b0b0; }

.article-body th, .article-body td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; border: 1px solid #b0b0b0; }

.article-body table th { background-color: #1A365D !important; /* Navy Blue */ color: white !important; font-weight: bold; text-transform: capitalize; padding: 12px 15px; border-bottom: 1px solid #ddd; }

.article-body tr:nth-child(even) { background-color: #f8f9fa; /* Zebra striping */ }

.article-body tr:hover { background-color: #f1f1f1; }



/* Article Code Blocks */

.article-body pre { background: #2d2d2d; /* Dark theme for code block */ color: #f8f8f2; padding: 1.5rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.9rem; }

.article-body code { background: #f4f4f4; padding: 2px 6px; border-radius: 4px; color: #e83e8c; /* Pinkish color for inline code */ font-family: monospace; }



/* Article Images */

.article-body img { max-width: 100% !important; /* Force fit within container */ height: auto !important; /* Maintain aspect ratio */ border-radius: 8px; margin: 2rem 0; /* Add space above/below */ display: block; }



/* Article Meta Row */

.article-meta-row { display: flex; gap: 20px; color: #666; font-size: 0.95rem; margin-top: 0.5rem; align-items: center; }

.article-meta-row span { display: flex; align-items: center; gap: 8px; }

.article-meta-row i { color: var(--accent); }



/* --- AUTHENTICATION (Login/Register) --- */

.auth-section { min-height: 80vh; /* Centers content vertically */ display: flex; align-items: center; justify-content: center; background: #f0f2f5; padding: 2rem; }

.auth-card { background: var(--white); width: 100%; max-width: 450px; padding: 2.5rem; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.auth-header { text-align: center; margin-bottom: 2rem; }

.auth-header h2 { color: var(--primary); font-size: 2rem; margin-bottom: 0.5rem; }



.auth-toggle { display: flex; background: #f0f2f5; padding: 5px; border-radius: 30px; margin-bottom: 2rem; position: relative; }

.toggle-btn { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 25px; font-weight: bold; color: #666; cursor: pointer; transition: 0.3s; }

.toggle-btn.active { background: var(--primary); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }



.form-group { margin-bottom: 1.5rem; }

.form-group label { display: block; margin-bottom: 0.5rem; color: var(--primary); font-weight: 500; }

.form-control { width: 100%; padding: 12px 15px; border: 2px solid #e1e1e1; border-radius: 10px; font-size: 1rem; transition: 0.3s;

    background-color: #ffffff; color: #333; border: 2px solid #e1e1e1; height: auto; min-height: 45px; }

.form-control:focus { border-color: var(--primary); outline: none; background-color: #fff; }



.auth-btn { width: 100%; padding: 12px; background: var(--accent); color: var(--primary); border: none; border-radius: 10px; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: 0.3s; margin-top: 1rem; }

.auth-btn:hover { background: var(--primary); color: var(--white); }



.forgot-password { display: block; text-align: center; margin-top: 1rem; color: #666; font-size: 0.9rem; color: var(--primary); /* Navy Blue */ text-decoration: underline; font-weight: 500; }

.forgot-password:hover { color: var(--accent); /* Yellow on hover */ }



/* --- PRICING --- */

.pricing-card { background: white; border: 1px solid #eee; border-radius: 15px; padding: 2rem; width: 100%; max-width: 350px; text-align: center; position: relative; transition: transform 0.3s ease; }

.pricing-card.premium { border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(255, 195, 0, 0.2); transform: scale(1.02); /* Make it slightly bigger */ }



.best-value { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--primary); padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 0.8rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.price-tag { font-size: 2.5rem; font-weight: bold; margin-bottom: 2rem; color: #333; }



.pricing-features { text-align: left; margin-bottom: 2rem; list-style: none; padding: 0; }

.pricing-features li { margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }

.pricing-features i.fa-check { color: green; }

.pricing-features li.disabled { opacity: 0.5; }

.pricing-features li.disabled i { color: #ccc; }



/* --- CERTIFICATIONS & MEMBERSHIP --- */

.cert-card { border-left: 4px solid var(--accent); }



.btn-cert { background-color: var(--primary); color: white; transition: all 0.3s ease; }

.btn-cert:hover { background-color: var(--accent); /* Yellow */ color: var(--primary); /* Dark Blue Text */ box-shadow: 0 5px 15px rgba(255, 195, 0, 0.4); /* Glow effect */ }



.membership-banner { background: linear-gradient(rgba(26, 54, 93, 0.95), rgba(26, 54, 93, 0.9)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); background-size: cover; background-position: center; color: white; text-align: center; padding: 5rem 2rem; margin: 2rem 0; }

.membership-content { max-width: 800px; margin: 0 auto; }

.membership-content h2 { font-size: 2.5rem; margin-bottom: 1rem; color: #FFC300; }



/* --- TESTIMONIALS --- */

.testimonials { background: #1A365D; color: white; padding: 5rem 2rem; }

.testimonials-container { max-width: 1200px; margin: 0 auto; }

.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }

.testimonial-card { background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 15px; border-left: 4px solid #FFC300; }

.testimonial-author { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }

.author-avatar { width: 50px; height: 50px; background: #FFC300; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #1A365D; }





/* ==========================================================================

   V. PLUGINS & UTILITIES

   ========================================================================== */



/* --- CKEDITOR 5 OVERRIDES --- */

.ck.ck-editor__main .ck-content { color: #000 !important; /* Pure Black */ }

.ck.ck-editor__main .ck-content p { color: #000 !important; }

.ck.ck-editor__main .ck-content h1,

.ck.ck-editor__main .ck-content h2,

.ck.ck-editor__main .ck-content h3 { color: #1A365D !important; /* Your Navy Blue */ }



/* --- CODE BLOCK TOOLBAR COPY BUTTON --- */

div.code-toolbar > .toolbar { opacity: 1 !important; top: 10px !important; right: 10px !important; }

div.code-toolbar > .toolbar > .toolbar-item > button { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 4px !important; color: #777 !important; padding: 6px 10px !important; cursor: pointer; transition: all 0.2s ease; font-size: 0 !important; }

div.code-toolbar > .toolbar > .toolbar-item > button::before { content: '\f0c5'; /* Copy Icon */ font-family: "Font Awesome 6 Free"; font-weight: 400; /* Regular Style (Outline) */ font-size: 1.3rem; color: #777; }

div.code-toolbar > .toolbar > .toolbar-item > button:hover { background-color: rgba(0,0,0,0.05) !important; }

div.code-toolbar > .toolbar > .toolbar-item > button:hover::before { color: var(--primary) !important; /* Blue on hover */ }

div.code-toolbar > .toolbar > .toolbar-item > button[data-copy-state="copied"]::before { content: '\f00c' !important; /* Checkmark Icon */ font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; /* MUST BE 900 (Solid) for Checkmark to exist! */ color: #2e7d32 !important;   /* Green */ }



/* --- GLOBAL ANNOUNCEMENT BAR --- */

.announcement-bar { width: 100%; padding: 10px 20px; text-align: center; font-size: 0.9rem; font-weight: bold; position: relative; z-index: 2000; /* Ensure it's above the navbar */ }

.announcement-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }

.announcement-link { background: rgba(255, 255, 255, 0.2); padding: 2px 10px; border-radius: 15px; color: inherit; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.4); font-size: 0.8rem; transition: 0.3s; }

.announcement-link:hover { background: rgba(255, 255, 255, 0.4); transform: translateX(3px); }



/* Announcement Color Themes */

.announcement-bar.info { background-color: #1A365D; color: white; }

.announcement-bar.warning { background-color: #FFC300; color: #1A365D; }

.announcement-bar.success { background-color: #2e7d32; color: white; }

.announcement-bar.danger { background-color: #c62828; color: white; }



/* --- SHARE BUTTONS --- */

.share-btn { color: white !important; border: none; padding: 8px 15px; border-radius: 4px; font-size: 0.85rem; font-weight: 500; transition: transform 0.2s, opacity 0.2s; display: flex; align-items: center; gap: 8px; }

.share-btn:hover { transform: translateY(-2px); opacity: 0.9; color: white !important; }

.share-btn.linkedin { background-color: #0077b5; }

.share-btn.twitter { background-color: #000000; }

.share-btn.whatsapp { background-color: #25D366; }

.share-btn.email { background-color: #666666; }

.share-btn.copy-link { background-color: #546e7a; cursor: pointer; }

.share-btn.copy-link:active { background-color: #455a64; transform: translateY(0); }



/* --- UTILITY CLASSES --- */

.hidden { display: none; }

.section-padding { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }

.bg-light { background: var(--light); }

.section-title { text-align: center; font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; }

.section-subtitle { text-align: center; color: #666; margin-bottom: 3rem; font-size: 1.1rem; }

.cta-section { background: #EDECEC; padding: 5rem 2rem; text-align: center; }

.services-container { max-width: 1200px; margin: 0 auto; }



/* Affiliate Disclosure */

.affiliate-notice { background-color: #fff8e1; /* Very light yellow */ border-bottom: 1px solid #ffe0b2; padding: 1.5rem 2rem; text-align: center; }

.notice-content { max-width: 800px; margin: 0 auto; color: #666; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* --- DARK MODE OVERRIDES (ADD TO BOTTOM OF FILE) --- */

[data-theme="dark"] body {
    background-color: #0f172a !important; /* Deep Dark */
    color: #f1f5f9 !important;
}

/* Header & Nav */
[data-theme="dark"] header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155;
}

[data-theme="dark"] .logo, 
[data-theme="dark"] .nav-links a {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .dropdown-content {
    background-color: #1e293b !important;
}

[data-theme="dark"] .dropdown-content a {
    color: #f1f5f9 !important;
    border-bottom: 1px solid #334155;
}

/* Cards & Articles */
[data-theme="dark"] .card, 
[data-theme="dark"] .article-card, 
[data-theme="dark"] .topic-card, 
[data-theme="dark"] .product-card,
[data-theme="dark"] .resource-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .article-title,
[data-theme="dark"] .card-header h3,
[data-theme="dark"] h3 {
    color: #FFC300 !important; /* Gold looks better on dark */
}

[data-theme="dark"] .card-content p,
[data-theme="dark"] .article-meta,
[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

/* Forms & Inputs */
[data-theme="dark"] .form-control {
    background-color: #0f172a !important;
    color: #fff !important;
    border-color: #334155 !important;
}

/* Sections */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .section-padding,
[data-theme="dark"] .cta-section {
    background: #0f172a !important;
}

/* ==========================================================================
   VI. DARK MODE CONTRAST OVERRIDES
   ========================================================================== */

[data-theme="dark"] body {
    background-color: #0f172a !important; /* Deep Slate Background */
    color: #e2e8f0 !important; /* High-contrast off-white text */
}

/* --- TITLES & HEADERS --- */
/* In dark mode, we switch Navy titles to Gold for maximum readability */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] .article-title, 
[data-theme="dark"] .section-title,
[data-theme="dark"] .logo {
    color: #FFC300 !important; /* Bright Gold */
}

/* --- NAVIGATION --- */
[data-theme="dark"] header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155;
}

[data-theme="dark"] .nav-links a {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .nav-links a.active {
    background-color: #FFC300 !important;
    color: #1A365D !important; /* Navy text on Gold background for active link */
}

[data-theme="dark"] .dropdown-content {
    background-color: #1e293b !important;
    border: 1px solid #334155;
}

/* --- CARDS & BORDERS --- */
[data-theme="dark"] .card, 
[data-theme="dark"] .article-card, 
[data-theme="dark"] .product-card,
[data-theme="dark"] .resource-card,
[data-theme="dark"] .auth-card {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .card-content p, 
[data-theme="dark"] .text-muted,
[data-theme="dark"] .article-meta {
    color: #94a3b8 !important; /* Brighter slate for secondary text */
}

/* --- TABLES & FORMS --- */
[data-theme="dark"] .article-body table {
    border-color: #334155 !important;
}

[data-theme="dark"] .article-body td {
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .form-control {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

/* --- BUTTONS --- */
[data-theme="dark"] .btn-back {
    background-color: #334155 !important;
    color: #FFC300 !important;
}

[data-theme="dark"] .read-more {
    color: #FFC300 !important;
}