/*
Theme Name: UpexamCorner
Theme URI: https://www.upexamcorner.com/
Author: Jogindar Rai Das
Author URI: https://www.upexamcorner.com/
Description: UpexamCorner is a fast, clean, responsive and SEO friendly WordPress theme specially designed for education websites, exam updates, job alerts, admit card, result and online form portals.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: upexamcorner
Tags: education, blog, news, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, responsive-layout, seo-friendly
*/
/* ===== Theme Colors ===== */
 :root{ --primary:#062660; --secondary:#ff5b0e; --accent:#1272df; --white:#ffffff;  }

/*Global CSS Start here -----------------------  */
html, body {
  margin: 0;
  padding: 0;
}
a{ color: #000; text-decoration: none;}
.text-black{ color: #000;}

/* Main Button */
.theme-btn{
    background:var(--primary);
    color:#fff;
    border:none;
    padding:10px 24px;
    border-radius:6px;
    font-size:15px;
    font-weight:600;
    display:inline-block;
    text-decoration:none;
    transition:all .3s ease;
}

.theme-btn:hover{
    background:var(--secondary);
    color:#fff;
    text-decoration:none;
}

/* Outline Button */
.theme-btn-outline{
    background:transparent;
    color:var(--primary);
    border:2px solid var(--primary);
    padding:10px 24px;
    border-radius:6px;
    font-size:15px;
    font-weight:600;
    display:inline-block;
    text-decoration:none;
    transition:all .3s ease;
}

.theme-btn-outline:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

/* Small Button */
.theme-btn-sm{
    padding:7px 18px;
    font-size:14px;
}

/* Large Button */
.theme-btn-lg{
    padding:14px 30px;
    font-size:17px;
}

/* Basic Table Border */
table {
    border-collapse: collapse; /* Ensures borders are shared between cells */
    width: 100%;
    border: 1px solid #333; /* Adjust thickness and color */
}

/* Table Header Styling */
table th {
    border: 1px solid #333; /* Adjust color and thickness */
    background-color: #f2f2f2; /* Background color for header */
    padding: 10px; /* Adjust padding as needed */
    text-align: left;
}

/* Table Data Cell Styling */
table td {
    border: 1px solid #ddd; /* Subtle cell border */
    padding: 10px; /* Adjust padding as needed */
    text-align: left;
}

/* Optional: Add Hover Effect for Rows */
table tr:hover {
    background-color: #f5f5f5; /* Row hover background color */
}

/* Optional: Alternate Row Background Color */
table tr:nth-child(even) {
    background-color: #fafafa;
}

/* Heading Global Style */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
    font-weight:700;
    line-height:1.3;
    color:#222;
}

body h1{font-size:42px; margin:25px 0 18px;}
body h2{font-size:34px; margin:22px 0 16px;}
body h3{font-size:28px; margin:20px 0 14px;}
body h4{font-size:24px; margin:18px 0 12px;}
body h5{font-size:20px; margin:16px 0 10px;}
body h6{font-size:18px; margin:14px 0 8px;}

/*Global CSS End  here -----------------------  */
.blog-details a{    display:inline-block;    background:var(--primary);    color:#fff;    padding:10px 18px;    border-radius:6px;    text-decoration:none;    font-weight:600;    font-size:16px;    margin:6px 6px 6px 0;    transition:all .3s ease;    border:1px solid var(--primary);}.blog-details a:hover{    background:var(--secondary);    border-color:var(--secondary);    color:#fff;    transform:translateY(-2px);}.blog-details a:focus{    outline:none;    box-shadow:0 0 0 0.2rem rgba(18,114,223,.25);}.blog-details a:visited{    color:#fff;}


/*Footer CSS Start here -----------------------  */


/*Footer CSS end  here -----------------------  */

/*comments CSS Start here -----------------------  */
/* Main Comment Area */.wp-comment{    background:#fff;    padding:25px;    border-radius:12px;     margin-top:30px;}/* Heading */.wp-comment h3,.wp-comment .comments-title,.wp-comment .comment-reply-title{    color:var(--primary);    font-size:28px;    font-weight:700;    margin-bottom:20px;}/* Inputs / Textarea Bootstrap Feel */.wp-comment input[type="text"],.wp-comment input[type="email"],.wp-comment input[type="url"],.wp-comment textarea{    width:100%;    padding:.75rem 1rem;    border:1px solid #ced4da;    border-radius:.5rem;    font-size:1rem;    margin-bottom:15px;    transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;}.wp-comment input:focus,.wp-comment textarea:focus{    border-color:var(--accent);    outline:0;    }/* Labels */.wp-comment label{    font-weight:600;    color:#212529;    margin-bottom:6px;    display:block;}/* Submit Button */.wp-comment input[type="submit"],.wp-comment button,.wp-comment .submit{    display:inline-block;    background:var(--primary);    color:#fff;    border:1px solid var(--primary);    padding:.65rem 1.25rem;    border-radius:.5rem;    font-weight:600;    text-decoration:none;    transition:all .2s ease-in-out;    cursor:pointer;}.wp-comment input[type="submit"]:hover,.wp-comment button:hover,.wp-comment .submit:hover{    background:var(--secondary);    border-color:var(--secondary);    color:#fff;}/* Comment List */.wp-comment .comment-list li{    list-style:none;    padding:15px;    border:1px solid #eee;    border-radius:10px;    margin-bottom:15px;}/* Reply Link */.wp-comment .reply a{    background:var(--accent);    color:#fff;    padding:6px 12px;    border-radius:6px;    text-decoration:none;    font-size:14px;}.wp-comment .reply a:hover{    background:var(--secondary);    color:#fff;}
/*comments CSS Start here -----------------------  */


.breadcrumb a{ color: #000; text-decoration: none; font-weight: 500;  }


.navigation.pagination {
    margin: 20px 0; /* Adds margin above and below the pagination */
}

.nav-links {
    display: flex; /* Use flexbox to layout the pagination items */
    justify-content: center; /* Center the pagination items */
    flex-wrap: wrap; /* Allow wrapping of items */
}

.page-numbers {
    display: inline-block; /* Makes the numbers inline */
    padding: 10px 15px; /* Adds padding for clickable area */
    margin: 0 5px; /* Space between pagination items */
    color: #00293c; /* Bootstrap primary color for links */
    text-decoration: none; /* Removes underline from links */
    border: 1px solid #00293c; /* Border to match Bootstrap styles */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Transition effects */
}

.page-numbers.current {
    background-color: #00293c; /* Background for the current page */
    color: white; /* Text color for the current page */
    border-color: #00293c; /* Ensures border matches background */
}

.page-numbers:hover:not(.current),
.page-numbers:focus:not(.current) {
    background-color: rgba(0, 123, 255, 0.1); /* Light background on hover */
    color: #00293c; /* Darker text on hover */
}

.next.page-numbers {
    background-color: #00293c; /* Same styling as the current page */
    color: white; /* White text color for the next link */
    border-color: #00293c; /* Ensures border matches */
}

/* Optionally style the next link on hover */
.next.page-numbers:hover {
    background-color: rgba(0, 123, 255, 0.1); /* Light background on hover */
    color: #00293c; /* Darker text color on hover */
}

.categories-list a{ color: #000; text-decoration: none;}
.serch-wrapper a{color: #000; text-decoration: none;}
.large-post a{ color: #000; text-decoration: none;}
h5 a, h4 a, h6 a, .read-more{color: #000; text-decoration: none; }
.post-categories a{color: #000; font-size: 16px; text-decoration: none; border: solid #000 1px; padding: 2px 10px; border-radius: 8px;; }
/* New css start here ---------------------------------------------------------------------------- */

/* Navar css start  here-------------------------------------------------------- */
.site-header .navbar {
    background-color: var(--primary);
    border-bottom: 3px solid var(--secondary);
    box-shadow: 0 2px 12px rgba(6, 38, 96, 0.5);
}

/* ✅ Top-Level Nav Links */
.site-header .navbar .navbar-nav.mynav > li > a.nav-link {
    font-size: 18px;
    font-weight: 600;
    padding: 14px 22px;
    color: #ffffff;
    position: relative;
    transition: color 0.3s ease;
}

/* ✅ Underline Indicator */
.site-header .navbar .navbar-nav.mynav > li > a.nav-link::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 22px;
    right: 22px;
    height: 2px;
    background: var(--secondary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 2px;
}

.site-header .navbar .navbar-nav.mynav > li > a.nav-link:hover::after,
.site-header .navbar .navbar-nav.mynav > li.current-menu-item > a.nav-link::after,
.site-header .navbar .navbar-nav.mynav > li.current-menu-parent > a.nav-link::after {
    transform: scaleX(1);
}

/* ✅ Hover Color */
.site-header .navbar .navbar-nav.mynav > li > a.nav-link:hover {
    color: var(--secondary);
}

/* ✅ Active / Current Page Link */
.site-header .navbar .navbar-nav.mynav > li.current-menu-item > a.nav-link,
.site-header .navbar .navbar-nav.mynav > li.current-menu-parent > a.nav-link {
    color: var(--secondary);
}

/* ✅ Dropdown Menu */
.site-header .dropdown-menu.mydropdown {
    background-color: var(--primary);
    border: none;
    border-left: 3px solid var(--accent);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(6, 38, 96, 0.4);
    padding: 8px 0;
    min-width: 220px;
}

/* ✅ Dropdown Items */
.site-header .dropdown-menu.mydropdown .dropdown-item {
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
    color: #d0dff7;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
}

/* ✅ Dropdown Item Hover */
.site-header .dropdown-menu.mydropdown .dropdown-item:hover {
    background-color: rgba(18, 114, 223, 0.15);
    color: #ffffff;
    border-left-color: var(--secondary);
    padding-left: 26px;
}

/* ✅ Dropdown Active Item */
.site-header .dropdown-menu.mydropdown .dropdown-item.active,
.site-header .dropdown-menu.mydropdown .current-menu-item > .dropdown-item {
    background-color: var(--accent);
    color: #ffffff;
    border-left-color: var(--secondary);
}

/* ✅ Dropdown Divider */
.site-header .dropdown-menu.mydropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ✅ Mobile Toggle Button */
.site-header .navbar-toggler {
    border-color: var(--accent);
    padding: 6px 10px;
}
.site-header .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(18, 114, 223, 0.4);
}
.site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ✅ Desktop Hover Animation */
@media (min-width: 992px) {
    .site-header .navbar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: all 0.25s ease;
        pointer-events: none;
    }
    .site-header .navbar-nav li.dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ✅ Submenu (3rd Level) */
.site-header .dropdown-submenu {
    position: relative;
}
.site-header .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    border-left: 3px solid var(--secondary);
    border-radius: 0 8px 8px 8px;
}
.site-header .dropdown-submenu > a::after {
    content: " ›";
    float: right;
    color: var(--accent);
}

/* ✅ Submenu Hover (Desktop) */
@media (min-width: 992px) {
    .site-header .dropdown-submenu:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ✅ Mobile Dropdown */
@media (max-width: 991px) {
    .site-header .navbar {
        border-bottom: none;
        border-top: 3px solid var(--secondary);
    }
    .site-header .dropdown-menu {
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        background-color: rgba(255, 255, 255, 0.05);
        border-left: 3px solid var(--accent);
        border-radius: 0;
        box-shadow: none;
        margin-left: 12px;
    }
    .site-header .dropdown-menu.show {
        display: block;
    }
    .site-header .navbar .navbar-nav.mynav > li > a.nav-link {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .site-header .navbar .navbar-nav.mynav > li > a.nav-link::after {
        display: none;
    }
}
/* Navar css end  here-------------------------------------------------------- */



/* ✅ Logo */
.navbar-brand img {
    height: 80px;
    width: auto;
}



.footer-menu li {
    display: inline-block;
    margin: 0 15px;
    position: relative;
}

.footer-menu li:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -18px;   /* space adjust */
    top: 0;
    color: #999;
}
.footer-menu li a {
    color: #222;
    text-decoration: none;
}

/* New css end here ---------------------------------------------------------------------------- */
/* ===== Sidebar Main Box =====---------------------------------------------------------------- */
/* ============================================================
   PRIMARY SIDEBAR - Complete CSS
   Parent: #secondary .widget-area
   --primary: #062660 | --secondary: #ff5b0e | --accent: #1272df
   ============================================================ */

/* ===== Each Widget Block ===== */
#secondary .widget {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(6, 38, 96, 0.1);
    margin-bottom: 28px;
    padding: 22px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#secondary .widget:last-child {
    margin-bottom: 0;
}

#secondary .widget:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(6, 38, 96, 0.18);
}

/* ===== Widget Title - Classic + Block ===== */
#secondary .widget-title,
#secondary .widgettitle,
#secondary .wp-block-heading {
    background: var(--primary);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: -22px -22px 16px -22px;
    padding: 14px 22px;
    position: relative;
    border-left: 4px solid var(--secondary);
}

/* ===== Search Label ===== */
#secondary .wp-block-search__label {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background: var(--primary);
    display: block;
    margin: -22px -22px 16px -22px;
    padding: 14px 22px;
    border-left: 4px solid var(--secondary);
}

/* ===== Block Group Inner ===== */
#secondary .wp-block-group__inner-container {
    padding: 0;
}

/* ===== Search Widget ===== */
#secondary .widget_search .search-form,
#secondary .wp-block-search__inside-wrapper {
    display: flex;
    gap: 8px;
}

#secondary input[type="search"],
#secondary input[type="text"] {
    width: 100%;
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 15px;
    outline: none;
    color: #333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#secondary input[type="search"]:focus,
#secondary input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(18, 114, 223, 0.12);
}

#secondary button,
#secondary input[type="submit"] {
    height: 48px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: var(--secondary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s ease;
}

#secondary button:hover,
#secondary input[type="submit"]:hover {
    background: var(--primary);
}

/* ===== Classic UL Lists ===== */
#secondary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#secondary ul li {
    padding: 9px 0;
    border-bottom: 1px solid #f1f1f1;
    transition: padding-left 0.25s ease;
}

#secondary ul li:last-child {
    border-bottom: none;
}

#secondary ul li:hover {
    padding-left: 4px;
}

#secondary ul li a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.25s ease;
}

#secondary ul li a::before {
    content: '›';
    color: var(--secondary);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

#secondary ul li a:hover {
    color: var(--secondary);
}

/* ===== Category Count Badge ===== */
#secondary ul li .post-count,
#secondary ul li a + span {
    margin-left: auto;
    background: rgba(18, 114, 223, 0.1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

/* ===== Block Latest Posts ===== */
#secondary .wp-block-latest-posts__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#secondary .wp-block-latest-posts__list li {
    padding: 9px 0;
    border-bottom: 1px solid #f1f1f1;
    transition: padding-left 0.25s ease;
}

#secondary .wp-block-latest-posts__list li:last-child {
    border-bottom: none;
}

#secondary .wp-block-latest-posts__list li:hover {
    padding-left: 4px;
}

#secondary .wp-block-latest-posts__list li a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.25s ease;
}

#secondary .wp-block-latest-posts__list li a::before {
    content: '›';
    color: var(--secondary);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

#secondary .wp-block-latest-posts__list li a:hover {
    color: var(--secondary);
}

/* ===== Block Categories List ===== */
#secondary .wp-block-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#secondary .wp-block-categories-list li {
    padding: 9px 0;
    border-bottom: 1px solid #f1f1f1;
    transition: padding-left 0.25s ease;
}

#secondary .wp-block-categories-list li:last-child {
    border-bottom: none;
}

#secondary .wp-block-categories-list li:hover {
    padding-left: 4px;
}

#secondary .wp-block-categories-list li a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.25s ease;
}

#secondary .wp-block-categories-list li a::before {
    content: '›';
    color: var(--secondary);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

#secondary .wp-block-categories-list li a:hover {
    color: var(--secondary);
}

/* ===== Recent Post Date ===== */
#secondary .widget_recent_entries ul li .post-date,
#secondary .wp-block-latest-posts__post-date {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    padding-left: 22px;
}

/* ===== Tags Cloud ===== */
#secondary .tagcloud,
#secondary .wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#secondary .tagcloud a,
#secondary .tag-cloud-link,
#secondary .wp-block-tag-cloud a {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(18, 114, 223, 0.1);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--accent);
    transition: background 0.25s ease, color 0.25s ease;
}

#secondary .tagcloud a:hover,
#secondary .tag-cloud-link:hover,
#secondary .wp-block-tag-cloud a:hover {
    background: var(--secondary);
    color: #ffffff;
}

/* ===== Calendar Widget ===== */
#secondary .widget_calendar table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#secondary .widget_calendar th {
    background: var(--primary);
    color: #ffffff;
    padding: 6px;
    text-align: center;
}

#secondary .widget_calendar td {
    text-align: center;
    padding: 5px;
    color: #333;
}

#secondary .widget_calendar td a {
    color: var(--accent);
    font-weight: 700;
}

#secondary .widget_calendar caption {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}

/* ===== Text Widget ===== */
#secondary .widget_text p,
#secondary .widget_block p {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
    #secondary .widget {
        margin-bottom: 20px;
        border-radius: 12px;
        padding: 18px;
    }
    #secondary .widget-title,
    #secondary .widgettitle,
    #secondary .wp-block-heading {
        font-size: 16px;
        margin: -18px -18px 14px -18px;
        padding: 12px 18px;
    }
    #secondary .wp-block-search__label {
        font-size: 16px;
        margin: -18px -18px 14px -18px;
        padding: 12px 18px;
    }
    #secondary ul li a,
    #secondary .wp-block-latest-posts__list li a,
    #secondary .wp-block-categories-list li a {
        font-size: 14px;
    }
    #secondary button,
    #secondary input[type="submit"] {
        padding: 0 14px;
        font-size: 14px;
    }
}


/* ===== Sidebar Main Box  end============================================ */

/* ============================================================
   HERO SECTION - Category Cards CSS
   Parent Class: .herosection
   ============================================================ */
.herosection {
    background-color: #f0f4fb;
}

/* ✅ Card Base */
.herosection .card {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.herosection .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(6, 38, 96, 0.25);
}

/* ✅ Card Header - Dark Background */
.herosection .card .card-header {

        background-color: var(--white);

    border: none;
    padding:15px 22px 15px;
    position: relative;
    overflow: hidden;
}

/* ✅ Card Header Decorative Top Line */
.herosection .card .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--accent));
}

/* ✅ Category Title */
.herosection .card .card-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* ✅ Title Underline */
.herosection .card .card-header h3::after {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: var(--accent);
    margin-top: 8px;
    border-radius: 2px;
}

/* ✅ Category Description */
.herosection .card .card-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 10px 0 0;
}

/* ✅ Card Body - White Background */
.herosection .card .card-body {
    background-color: #ffffff;
    padding: 18px 22px;
}

/* ✅ Post List */
.herosection .card-body ul {
    margin: 0;
    padding: 0;
}

/* ✅ List Item */
.herosection .card-body ul li {
    border-bottom: 1px solid #f0f0f0;
    padding: 9px 0;
    transition: padding-left 0.25s ease;
}

.herosection .card-body ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.herosection .card-body ul li:hover {
    padding-left: 6px;
}

/* ✅ Post Links */
.herosection .card-body ul li a {
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ✅ Arrow Icon */
.herosection .card-body ul li a::before {
    content: '›';
    color: var(--secondary);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/* ✅ Link Hover */
.herosection .card-body ul li a:hover {
    color: var(--accent);
}

.herosection .card-body ul li a:hover::before {
    transform: translateX(3px);
}

/* ✅ No Posts */
.herosection .card-body ul li:only-child {
    color: #aaaaaa;
    font-size: 14px;
}

/* ✅ Mobile */
@media (max-width: 767px) {
    .herosection .card .card-header {
        padding: 20px 18px 16px;
    }
    .herosection .card .card-header h3 {
        font-size: 18px;
    }
    .herosection .card .card-body {
        padding: 14px 18px;
    }
    .herosection .card-body ul li a {
        font-size: 14px;
    }
}

/* ============================================================
End of HERO SECTION - Category Cards CSS
   ============================================================ */

/* ============================================================
ONLY QUIZ PAGE  start here
 ============================================================ */

.quiz-page-wrap .card{
    border:0;
    border-radius:18px;
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.quiz-page-wrap .card-body h3{
    color:var(--primary);
    font-weight:700;
    border-left:4px solid var(--secondary);
    padding-left:14px;
}

/* Question Box */
.quiz-page-wrap .question-block .bg-light{
    background:#f8fbff !important;
    border:1px solid #dce9ff;
    border-radius:14px;
}

/* Options */
.quiz-page-wrap .quiz-option{
    display:block;
    background:#fff;
    border:2px solid #dbe7ff;
    border-radius:14px;
    padding:14px;
    font-weight:600;
    color:var(--primary);
    transition:.3s;
}

.quiz-page-wrap .quiz-option:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.quiz-page-wrap .form-check-input:checked + .quiz-option{
    background:linear-gradient(135deg,var(--accent),var(--primary));
    color:#fff;
    border-color:var(--accent);
}

/* Buttons */
.quiz-page-wrap #nextQuestion{
    background:var(--secondary);
    border:none;
    border-radius:12px;
}

.quiz-page-wrap #submitQuiz{
    background:var(--accent);
    border:none;
    border-radius:12px;
}

/* Sidebar */
.quiz-page-wrap .widget,
.quiz-page-wrap aside{
    background:#fff;
    padding:22px;
    border-radius:16px;
    box-shadow:0 10px 22px rgba(0,0,0,.05);
    margin-bottom:25px;
}

.quiz-page-wrap .widget-title{
    color:var(--primary);
    font-weight:700;
}

/* ============================================================
   HERO SECTION HEADER - Option A (White Card)
   Parent: .herosection-header
   --primary: #062660 | --secondary: #ff5b0e | --accent: #1272df
   ============================================================ */

.herosection-header {
    background: #f4f7fc;
    padding: 20px 0;
}

.herosection-header .header-content {
    background: #ffffff;
    border-bottom: 4px solid var(--primary);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(6, 38, 96, 0.08);
    padding: 20px 28px;
    text-align: center;
}

/* ===== Heading ===== */
.herosection-header .header-content h2 {
    color: var(--primary);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

/* ===== Tagline ===== */
.herosection-header .header-content .tagline {
    color: #444;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px 0;
    line-height: 1.6;
}

/* ===== Subtitle ===== */
.herosection-header .header-content .subtitle {
    color: #666;
    font-size: 13px;
    font-weight: 400;
    margin: 0 0 10px 0;
    line-height: 1.6;
}

/* ===== Tag Badge ===== */
.herosection-header .header-content .tag {
    display: inline-block;
    background: #fff3ee;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 91, 14, 0.2);
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
    .herosection-header {
        padding: 14px 0;
    }
    .herosection-header .header-content {
        padding: 16px 18px;
    }
    .herosection-header .header-content h2 {
        font-size: 16px;
    }
    .herosection-header .header-content .tagline {
        font-size: 13px;
    }
    .herosection-header .header-content .subtitle {
        font-size: 12px;
    }
}
/* ============================================================
End of HERO SECTION HEADER - Option A (White Card)
   ============================================================ */
.tagcategories{
    background:#f8f9fa;
    padding:18px 22px;
    border-radius:12px;
    border-left:4px solid var(--primary);
    margin-top:25px;
    margin-bottom:25px;
    box-shadow:0 .125rem .25rem rgba(0,0,0,.05);
}

.tagcategories p{
    margin:0 0 12px;
    font-size:16px;
    color:#212529;
    line-height:1.6;
}

.tagcategories p:last-child{
    margin-bottom:0;
}

.tagcategories strong{
    color:var(--primary);
    font-weight:700;
    margin-right:6px;
}

/* Links */
.tagcategories a{
    display:inline-block;
    background:#fff;
    color:var(--primary);
    border:1px solid #dee2e6;
    padding:6px 12px;
    margin:4px 6px 4px 0;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:all .25s ease;
}

/* Hover */
.tagcategories a:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    transform:translateY(-2px);
}

/* Tag Style Different Color */
.tagcategories p:last-child a:hover{
    background:var(--secondary);
    border-color:var(--secondary);
    color:#fff;
}

/* Mobile */
@media(max-width:768px){
    .tagcategories{
        padding:15px;
    }

    .tagcategories a{
        font-size:13px;
        padding:5px 10px;
    }
}
/* Main Section */
.relatedpost{
    margin-top:35px;
    margin-bottom:35px;
    padding:25px;
    background:#f8f9fa;
    border-radius:14px;
    box-shadow:0 .125rem .25rem rgba(0,0,0,.05);
}

/* Heading */
.relatedpost h3{
    font-size:28px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:25px;
    padding-bottom:10px;
    border-bottom:2px solid #e9ecef;
}

/* Card */
.related-post-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    height:100%;
    box-shadow:0 .125rem .25rem rgba(0,0,0,.08);
    transition:all .3s ease;
}

.related-post-card:hover{
    transform:translateY(-5px);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.12);
}

/* Image */
.related-post-card img{
    width:100%;
    height:180px;
    object-fit:cover;
    transition:transform .3s ease;
}

.related-post-card:hover img{
    transform:scale(1.05);
}

/* Title */
.related-post-title{
    margin:0;
    padding:15px;
    font-size:16px;
    line-height:1.5;
    font-weight:600;
}

/* Link */
.related-post-title a{
    color:#212529;
    text-decoration:none;
    transition:color .25s ease;
}

.related-post-title a:hover{
    color:var(--primary);
}

/* Mobile */
@media(max-width:991px){
    .related-post-card img{
        height:160px;
    }
}

@media(max-width:767px){
    .relatedpost{
        padding:18px;
    }

    .relatedpost h3{
        font-size:24px;
    }

    .related-post-card img{
        height:200px;
    }
}

.custom-page{
    padding:40px 0;
    background:#f8f9fa;
}

/* Main Content Box */
.custom-page article{
    background:#fff;
    padding:30px;
    border-radius:14px;
    box-shadow:0 .125rem .25rem rgba(0,0,0,.06);
    margin-bottom:30px;
}

/* Heading */
.custom-page article h1{
    font-size:38px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:20px;
    padding-bottom:12px;
    border-bottom:2px solid #eef1f4;
    line-height:1.3;
}

/* Content */
.custom-page article p{
    font-size:17px;
    line-height:1.8;
    color:#212529;
    margin-bottom:18px;
}

/* Links */
.custom-page article a{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
}

.custom-page article a:hover{
    color:var(--secondary);
    text-decoration:underline;
}

/* Images */
.custom-page article img{
    max-width:100%;
    height:auto;
    border-radius:10px;
    margin:15px 0;
}

/* Sidebar */
.custom-page .sidebar{
    background:#fff;
    border-radius:14px;
    box-shadow:0 .125rem .25rem rgba(0,0,0,.06);
    padding:20px;
}

/* Mobile */
@media(max-width:991px){
    .page article h1{
        font-size:32px;
    }
}

@media(max-width:767px){
    .custom-page{
        padding:25px 0;
    }

    .custom-page article{
        padding:20px;
    }

    .custom-page article h1{
        font-size:28px;
    }

    .custom-page article p{
        font-size:16px;
        line-height:1.7;
    }
}