/* style.css - Global Stylesheet for Second Shift Web Tech */
/* Inspired by the CBSE Portal layout: Light cyan/sky-blue background with slate-blue rounded card grids. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --bg-primary: #e6f5f8;
    --bg-secondary: #f4fafb;
    --text-dark: #0f2c3d;
    --text-muted: #4a6375;
    --card-primary-gradient: linear-gradient(135deg, #1d3c45 0%, #328cc1 100%);
    --card-hover-gradient: linear-gradient(135deg, #163038 0%, #2976a3 100%);
    --card-accent-1: linear-gradient(135deg, #0b3c5d 0%, #328cc1 100%);
    --card-accent-2: linear-gradient(135deg, #1d2731 0%, #0b3c5d 100%);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(11, 60, 93, 0.15), 0 4px 6px -2px rgba(11, 60, 93, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(11, 60, 93, 0.25), 0 10px 10px -5px rgba(11, 60, 93, 0.1);
    --border-radius-card: 16px;
    --border-radius-button: 8px;
    --max-width: 1200px;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
    overflow-x: clip;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #fcf9f5;
    background-image:
        url('../images/background_texture.png'),
        radial-gradient(at 0% 0%, rgba(255, 108, 55, 0.04) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 61, 0, 0.03) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(253, 246, 235, 0.8) 0px, transparent 50%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, auto, auto;
    background-attachment: fixed;
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

header,
main,
footer {
    position: relative;
    z-index: 1;
}

/* Header & Logo Container */
.portal-header {
    text-align: center;
    padding: 1.5rem 1.5rem 0.5rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.logo-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 0.8rem;
    border-radius: 50%;
    box-shadow: var(--shadow-md), inset 0 0 10px rgba(184, 233, 240, 0.2);
    border: 3px solid #fff;
    margin-bottom: 0.75rem;
    transition: var(--transition-smooth);
    width: 100px;
    height: 100px;
}

.logo-wrapper:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: var(--shadow-lg);
}

.logo-wrapper img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.logo-placeholder {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #0b3c5d;
    text-align: center;
    line-height: 1.2;
}

.portal-title-hi {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    color: #0b3c5d;
    font-weight: 700;
    margin-bottom: 0.1rem;
    letter-spacing: -0.5px;
}

.portal-title-en {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    background: linear-gradient(90deg, #ff6c37 0%, #ff3d00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
    display: inline-block;
}

.portal-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
    max-width: 600px;
    margin: 0.25rem auto 0;
}

/* CBSE Grid Container */
.grid-container {
    max-width: var(--max-width);
    margin: 1rem auto 5rem;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
    justify-content: center;
    gap: 2rem;
}

/* Card Styling matching normal/hover screenshots */
.cbse-card {
    background: linear-gradient(90deg, #ff6c37 0%, #ff3d00 100%);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 3px solid #ffffff !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

/* Hover background flip cross-fade */
.cbse-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff3d00 0%, #ff6c37 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.cbse-card:hover::before {
    opacity: 1;
}

/* Shiny reflection sheen animation overlay */
.cbse-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
    animation: shine-sweep 4.5s ease-in-out infinite;
}

/* Staggered offsets for cards to create a sequential wave effect */
.cbse-card:nth-child(1)::after {
    animation-delay: 0s;
}

.cbse-card:nth-child(2)::after {
    animation-delay: 0.3s;
}

.cbse-card:nth-child(3)::after {
    animation-delay: 0.6s;
}

.cbse-card:nth-child(4)::after {
    animation-delay: 0.9s;
}

.cbse-card:nth-child(5)::after {
    animation-delay: 1.2s;
}

.cbse-card:nth-child(6)::after {
    animation-delay: 1.5s;
}

.cbse-card:nth-child(7)::after {
    animation-delay: 1.8s;
}

.cbse-card:nth-child(8)::after {
    animation-delay: 2.1s;
}

.cbse-card:nth-child(9)::after {
    animation-delay: 2.4s;
}

.cbse-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

@keyframes shine-sweep {
    0% {
        left: -150%;
    }

    35% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.card-title-hi {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    letter-spacing: -0.3px;
    color: #ffffff;
    z-index: 2;
    transition: color 0.3s ease;
}

.card-title-en {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-transform: uppercase;
    z-index: 2;
    transition: color 0.3s ease;
}

.cbse-card:hover .card-title-hi,
.cbse-card:hover .card-title-en {
    color: #ffffff !important;
    text-decoration: underline;
}


/* Secondary Header Bar (For Category and Detail pages) */
.sub-navbar {
    background: linear-gradient(90deg, #ff6c37 0%, #ff3d00 100%);
    /* Orange gradient */
    border-bottom: 3px solid #ffffff;
    /* White bottom border */
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.sub-navbar-brand {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: #ffffff;
    /* White text */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sub-navbar-brand img {
    height: 35px;
    width: auto;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    /* White text */
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1.2rem;
    border-radius: var(--border-radius-button);
    transition: var(--transition-smooth);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    /* White outline */
    background: transparent;
}

.back-btn:hover {
    background: #ffffff;
    /* Flips to white background */
    color: #ff3d00;
    /* Orange text */
    border-color: #ffffff;
    transform: translateX(-4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Sub-category Layout */
.sub-layout-header {
    text-align: center;
    padding: 1.2rem 1.5rem 0.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.sub-layout-title-hi {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #0b3c5d;
    font-weight: 700;
}

.sub-layout-title-en {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    background: linear-gradient(90deg, #ff6c37 0%, #ff3d00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    display: inline-block;
}

.sub-layout-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
}

/* Details Page CSS */
.details-container {
    max-width: 950px;
    margin: 2rem auto 4rem;
    padding: 0 1.5rem;
}

.details-card {
    background: #ffffff;
    border-radius: var(--border-radius-card);
    padding: 3.5rem 3rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(184, 233, 240, 0.4);
}

.details-header {
    border-bottom: 2px solid #e6f5f8;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.details-title-hi {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    color: #0b3c5d;
    font-weight: 700;
}

.details-title-en {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    background: linear-gradient(90deg, #ff6c37 0%, #ff3d00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0.25rem;
    display: inline-block;
}

.details-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
}

@media (max-width: 768px) {
    .details-body {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .details-card {
        padding: 2rem 1.5rem;
    }
}

.details-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #0b3c5d;
    font-weight: 700;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feature-list,
.benefit-list,
.deliverable-list {
    list-style: none;
    margin-bottom: 2rem;
}

.feature-list li,
.benefit-list li,
.deliverable-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    color: #334d5c;
}

.feature-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 0;
    color: #328cc1;
    font-size: 1.1rem;
}

.benefit-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #27ae60;
    font-weight: bold;
    font-size: 1.1rem;
}

.deliverable-list li::before {
    content: "📦";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1rem;
}

/* Sidebar Details / Form box */
.sidebar-box {
    background: var(--bg-secondary);
    border: 1px solid rgba(184, 233, 240, 0.5);
    border-radius: 12px;
    padding: 2rem;
    height: fit-content;
}

.sidebar-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #0b3c5d;
}

.form-group input,
.form-group textarea {
    padding: 0.8rem;
    border: 1px solid rgba(11, 60, 93, 0.2);
    border-radius: var(--border-radius-button);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: var(--transition-smooth);
    background: #ffffff;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #328cc1;
    box-shadow: 0 0 0 3px rgba(50, 140, 193, 0.15);
}

.submit-btn {
    background: #0b3c5d;
    color: #ffffff;
    border: none;
    padding: 0.9rem;
    border-radius: var(--border-radius-button);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.submit-btn:hover {
    background: #328cc1;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Footer styling */
.portal-footer {
    margin-top: auto;
    background: linear-gradient(90deg, #ff6c37 0%, #ff3d00 100%);
    /* Orange gradient matching cards */
    color: #ffffff;
    /* White text */
    padding: 3.5rem 1.5rem 3rem;
    text-align: center;
    border-top: 4px solid #ffffff;
    /* Solid White Top Border */
    box-shadow: 0 -10px 30px rgba(255, 61, 0, 0.15);
    /* Soft orange glow shadow */
}

.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.footer-tag {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    line-height: 1.6;
    font-weight: 500;
}

/* Centered Social Connect with white circles and orange icons */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin: 0.2rem 0;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #ffffff;
    /* White circles */
    border-radius: 50%;
    color: #ff3d00;
    /* Orange icons */
    text-decoration: none;
    font-size: 1rem;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.footer-socials a:hover {
    background: #fff0e6;
    /* Soft light peach on hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.footer-admin-link a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition-smooth);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
    padding-bottom: 2px;
}

.footer-admin-link a:hover {
    color: #fff0e6;
    border-color: #ffffff;
}

.footer-copyright {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.5rem;
    width: 100%;
}

/* Responsiveness */
@media (max-width: 1024px) {
    .grid-container {
        gap: 1.5rem;
    }

    .portal-title-hi {
        font-size: 2rem;
    }
}

@media (max-width: 650px) {
    .grid-container {
        gap: 1.5rem;
    }

    .portal-header {
        padding: 2.5rem 1rem 1.5rem;
    }

    .logo-wrapper {
        width: 120px;
        height: 120px;
        padding: 1rem;
    }

    .portal-title-hi {
        font-size: 1.6rem;
    }

    .portal-title-en {
        font-size: 1.2rem;
    }

    .cbse-card {
        min-height: 200px;
        padding: 2rem 1.5rem;
    }
}

/* Font Awesome icon backup styling */
.icon-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: var(--transition-smooth);
}

.cbse-card:hover .icon-container {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Custom SVG Icons style */
.svg-icon {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.svg-icon-large {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

/* Admin Portal Styles */
.admin-login-container {
    max-width: 420px;
    width: 100%;
    margin: 4rem auto;
    padding: 0 1.5rem;
}

.admin-card {
    background: #ffffff;
    border-radius: var(--border-radius-card);
    padding: 3rem 2.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(184, 233, 240, 0.4);
}

.admin-dashboard-container {
    max-width: var(--max-width);
    width: 100%;
    margin: 2rem auto 4rem;
    padding: 0 1.5rem;
}

.dashboard-card {
    background: #ffffff;
    border-radius: var(--border-radius-card);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(184, 233, 240, 0.4);
}

.dashboard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.dashboard-search {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.dashboard-search input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    border: 1px solid rgba(11, 60, 93, 0.2);
    border-radius: var(--border-radius-button);
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.dashboard-search input:focus {
    outline: none;
    border-color: #328cc1;
    box-shadow: 0 0 0 3px rgba(50, 140, 193, 0.15);
}

.dashboard-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.dashboard-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    color: #0b3c5d;
    border: 1px solid rgba(11, 60, 93, 0.25);
    padding: 0.75rem 1.2rem;
    border-radius: var(--border-radius-button);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-secondary:hover {
    background: #e6f5f8;
    border-color: #0b3c5d;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #c0392b;
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.2rem;
    border-radius: var(--border-radius-button);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-danger:hover {
    background: #e74c3c;
    box-shadow: var(--shadow-sm);
}

/* Custom Table Styles */
.table-responsive {
    overflow-x: auto;
    border: 1px solid rgba(184, 233, 240, 0.4);
    border-radius: 8px;
    margin-top: 1rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
}

.admin-table th {
    background: #f4fafb;
    color: #0b3c5d;
    font-weight: 700;
    padding: 1rem 1.2rem;
    border-bottom: 2px solid rgba(184, 233, 240, 0.6);
    font-family: 'Outfit', sans-serif;
}

.admin-table td {
    padding: 1.2rem;
    border-bottom: 1px solid rgba(184, 233, 240, 0.3);
    color: #334d5c;
    vertical-align: top;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: #fcfdfe;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
}

.status-badge.success {
    background: #e2fbe8;
    color: #1e7e34;
}

.status-badge.warning {
    background: #fff3cd;
    color: #856404;
}

.no-records {
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Premium Preloader Overlay */
.preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fcf9f5;
    /* Warm ivory matching body */
    background-image:
        url('../images/background_texture.png'),
        radial-gradient(at 0% 0%, rgba(255, 108, 55, 0.04) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 61, 0, 0.03) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(253, 246, 235, 0.8) 0px, transparent 50%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, auto, auto;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.5s ease;
}

.preloader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-spinner-box {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.preloader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 108, 55, 0.15);
    border-top: 3px solid #ff3d00;
    border-right: 3px solid #ff6c37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.preloader-logo-circle {
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 2px solid #ffffff;
}

.preloader-logo-circle img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.preloader-brand-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #0b3c5d;
    margin-bottom: 0.2rem;
    letter-spacing: -0.5px;
    animation: fadeInUp 0.6s ease forwards;
}

.preloader-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ff3d00;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: fadeInUp 0.8s ease forwards;
}

.preloader-progress-bar {
    width: 160px;
    height: 4px;
    background: rgba(255, 108, 55, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.preloader-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ff6c37 0%, #ff3d00 100%);
    border-radius: 4px;
    animation: fillProgress 2.8s cubic-bezier(0.1, 0.8, 0.1, 1) forwards;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fillProgress {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dynamic Inquiry Modal (Option A) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 60, 93, 0.6);
    /* Blue-slate glass background */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 100px 16px 40px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.modal-content-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(255, 61, 0, 0.1);
    border: 1px solid rgba(255, 108, 55, 0.15);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay.active .modal-content-card {
    transform: scale(1);
}

.modal-close-x {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    transition: var(--transition-smooth);
}

.modal-close-x:hover {
    color: #ff3d00;
}

/* Header & Footer shine sweep animations */
.portal-header,
.portal-footer {
    position: relative;
    overflow: hidden;
}

.portal-header::after,
.sub-navbar::after,
.portal-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
    animation: shine-sweep 4s ease-in-out infinite;
}

/* Stagger delays to orchestrate the light sweeps across the page */
.portal-header::after {
    animation-delay: 0.4s;
}

.sub-navbar::after {
    animation-delay: 0.4s;
}

.portal-footer::after {
    animation-delay: 1.6s;
}

/* Logo Wrapper shine animation */
.logo-wrapper {
    position: relative;
    overflow: hidden;
    animation: logo-glow 4s ease-in-out infinite;
    animation-delay: 0.15s;
}

.logo-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
    animation: shine-horizontal-logo 4s ease-in-out infinite;
    animation-delay: 0.15s;
    /* Soft stagger offset after grid cards start */
}

@keyframes shine-horizontal-logo {
    0% {
        left: -150%;
    }

    75% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes logo-glow {
    0% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    }

    35% {
        box-shadow: 0 12px 30px rgba(255, 61, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    }

    70% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    }

    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    }
}

/* Custom Grid specifically for Circular Subcategory Cards */
.grid-container-sub {
    max-width: 800px;
    /* Restrict width to fit max 3 columns */
    margin: 1rem auto 2.5rem;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, 220px);
    justify-content: center;
    gap: 1.6rem;
}

/* Circular Subcard Styling */
.cbse-sub-card {
    width: 220px;
    height: 220px;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 3px solid #ffffff !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    margin: 0 auto;
}

.cbse-sub-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Hover background flip cross-fade */
.cbse-sub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff3d00 0%, #ff6c37 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: 50% !important;
}

.cbse-sub-card:hover::before {
    opacity: 1;
}

/* Card-Specific Themes matching their respective Details page Hero gradients */

/* 1. Fresh Affiliation - Orange */
.cbse-sub-card.card-fresh-affiliation {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-fresh-affiliation::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}

.cbse-sub-card.card-fresh-affiliation:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. Extension & Renewal - Dark Green */
.cbse-sub-card.card-extension-renewal {
    background: linear-gradient(135deg, #1e4530 0%, #0d2219 100%);
    box-shadow: 0 6px 15px rgba(13, 34, 25, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-extension-renewal::before {
    background: linear-gradient(135deg, #0d2219 0%, #1e4530 100%);
}

.cbse-sub-card.card-extension-renewal:hover {
    box-shadow: 0 12px 25px rgba(13, 34, 25, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. Upgradation Support - Yellow/Gold */
.cbse-sub-card.card-upgradation-support {
    background: linear-gradient(135deg, #d9a008 0%, #fec20f 100%);
    box-shadow: 0 6px 15px rgba(217, 160, 8, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-upgradation-support::before {
    background: linear-gradient(135deg, #fec20f 0%, #d9a008 100%);
}

.cbse-sub-card.card-upgradation-support:hover {
    box-shadow: 0 12px 25px rgba(217, 160, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. Section Increase - Purple */
.cbse-sub-card.card-section-increase {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-section-increase::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}

.cbse-sub-card.card-section-increase:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4b. Oasis Land Area - Fuchsia/Magenta */
.cbse-sub-card.card-oasis-land-area {
    background: linear-gradient(135deg, #701a75 0%, #db2777 100%);
    box-shadow: 0 6px 15px rgba(112, 26, 117, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-oasis-land-area::before {
    background: linear-gradient(135deg, #db2777 0%, #701a75 100%);
}

.cbse-sub-card.card-oasis-land-area:hover {
    box-shadow: 0 12px 25px rgba(112, 26, 117, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4c. Change Name - Blue/Sky Blue */
.cbse-sub-card.card-change-name {
    background: linear-gradient(135deg, #0f172a 0%, #0284c7 100%);
    box-shadow: 0 6px 15px rgba(2, 132, 199, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-change-name::before {
    background: linear-gradient(135deg, #0284c7 0%, #0f172a 100%);
}

.cbse-sub-card.card-change-name:hover {
    box-shadow: 0 12px 25px rgba(2, 132, 199, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4d. Transfer School - Emerald/Mint Green */
.cbse-sub-card.card-transfer-school {
    background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
    box-shadow: 0 6px 15px rgba(5, 150, 105, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-transfer-school::before {
    background: linear-gradient(135deg, #059669 0%, #064e3b 100%);
}

.cbse-sub-card.card-transfer-school:hover {
    box-shadow: 0 12px 25px rgba(5, 150, 105, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. Oasis & Saras - Teal */
.cbse-sub-card.card-oasis-saras {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-oasis-saras::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

.cbse-sub-card.card-oasis-saras:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. CBSE Circulars Compliance - Rose/Red */
.cbse-sub-card.card-cbse-circulars {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-cbse-circulars::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}

.cbse-sub-card.card-cbse-circulars:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* School ERP Systems subcategory cards - Separate Color Brand Kits (CBSE Mapping) */

/* 1. Student Information System - Orange */
.cbse-sub-card.card-student-info {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-student-info::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}

.cbse-sub-card.card-student-info:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. Academic & Examination - Dark Green */
.cbse-sub-card.card-academic-exams {
    background: linear-gradient(135deg, #1e4530 0%, #0d2219 100%);
    box-shadow: 0 6px 15px rgba(13, 34, 25, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-academic-exams::before {
    background: linear-gradient(135deg, #0d2219 0%, #1e4530 100%);
}

.cbse-sub-card.card-academic-exams:hover {
    box-shadow: 0 12px 25px rgba(13, 34, 25, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. Fee & Finance Management - Gold/Yellow */
.cbse-sub-card.card-fee-finance {
    background: linear-gradient(135deg, #d9a008 0%, #fec20f 100%);
    box-shadow: 0 6px 15px rgba(217, 160, 8, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-fee-finance::before {
    background: linear-gradient(135deg, #fec20f 0%, #d9a008 100%);
}

.cbse-sub-card.card-fee-finance:hover {
    box-shadow: 0 12px 25px rgba(217, 160, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. Teacher & HR Portal - Purple */
.cbse-sub-card.card-teacher-hr {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-teacher-hr::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}

.cbse-sub-card.card-teacher-hr:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. Parent & Student Mobile App - Teal */
.cbse-sub-card.card-parent-student-app {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-parent-student-app::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

.cbse-sub-card.card-parent-student-app:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. Exclusive Reports Generation - Rose */
.cbse-sub-card.card-reports-generation {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-reports-generation::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}

.cbse-sub-card.card-reports-generation:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* NIOS & Skill Support subcategory cards - Separate Color Brand Kits */

/* 1. Academic Center Accreditation - Orange */
.cbse-sub-card.card-academic-accreditation {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-academic-accreditation::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}

.cbse-sub-card.card-academic-accreditation:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. Vocational Center Accreditation - Dark Green */
.cbse-sub-card.card-vocational-accreditation {
    background: linear-gradient(135deg, #1e4530 0%, #0d2219 100%);
    box-shadow: 0 6px 15px rgba(13, 34, 25, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-vocational-accreditation::before {
    background: linear-gradient(135deg, #0d2219 0%, #1e4530 100%);
}

.cbse-sub-card.card-vocational-accreditation:hover {
    box-shadow: 0 12px 25px rgba(13, 34, 25, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. Open Basic Education (OBE) Center - Gold/Yellow */
.cbse-sub-card.card-obe-accreditation {
    background: linear-gradient(135deg, #d9a008 0%, #fec20f 100%);
    box-shadow: 0 6px 15px rgba(217, 160, 8, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-obe-accreditation::before {
    background: linear-gradient(135deg, #fec20f 0%, #d9a008 100%);
}

.cbse-sub-card.card-obe-accreditation:hover {
    box-shadow: 0 12px 25px rgba(217, 160, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. Skill Subjects Affiliation - Purple */
.cbse-sub-card.card-skill-affiliation {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-skill-affiliation::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}

.cbse-sub-card.card-skill-affiliation:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. SAIED Special Center Accreditation - Teal */
.cbse-sub-card.card-saied-accreditation {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-saied-accreditation::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

.cbse-sub-card.card-saied-accreditation:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. Portal Filings & Compliance - Rose */
.cbse-sub-card.card-portal-filings {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-portal-filings::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}

.cbse-sub-card.card-portal-filings:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   SCHOOL DIGITAL SUPPORT SUBCARDS COLOR BRAND KITS
   ========================================================================== */

/* 1. Admission Lead Campaigns - Orange */
.cbse-sub-card.card-admission-campaigns {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-admission-campaigns::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}

.cbse-sub-card.card-admission-campaigns:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. Bilingual Fee Gateways - Dark Green */
.cbse-sub-card.card-fee-gateways {
    background: linear-gradient(135deg, #1e4530 0%, #0d2219 100%);
    box-shadow: 0 6px 15px rgba(13, 34, 25, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-fee-gateways::before {
    background: linear-gradient(135deg, #0d2219 0%, #1e4530 100%);
}

.cbse-sub-card.card-fee-gateways:hover {
    box-shadow: 0 12px 25px rgba(13, 34, 25, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. Document Verification Portals - Gold */
.cbse-sub-card.card-doc-verification {
    background: linear-gradient(135deg, #d9a008 0%, #fec20f 100%);
    box-shadow: 0 6px 15px rgba(217, 160, 8, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-doc-verification::before {
    background: linear-gradient(135deg, #fec20f 0%, #d9a008 100%);
}

.cbse-sub-card.card-doc-verification:hover {
    box-shadow: 0 12px 25px rgba(217, 160, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. Interactive Notice Boards - Purple */
.cbse-sub-card.card-interactive-notices {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-interactive-notices::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}

.cbse-sub-card.card-interactive-notices:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. Alumni & Parent Network - Teal */
.cbse-sub-card.card-alumni-network {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-alumni-network::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

.cbse-sub-card.card-alumni-network:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. Bilingual Content Panels - Rose */
.cbse-sub-card.card-bilingual-cms {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-bilingual-cms::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}

.cbse-sub-card.card-bilingual-cms:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
   BLOG & INSIGHTS SUBCARDS COLOR BRAND KITS
   ========================================================================== */

/* 1. CBSE Compliance & Affiliation - Deep Orange */
.cbse-sub-card.card-cbse-blog {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-cbse-blog::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}

.cbse-sub-card.card-cbse-blog:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. School ERP & Management - Navy Blue */
.cbse-sub-card.card-erp-blog {
    background: linear-gradient(135deg, #0b3c5d 0%, #1a6fa0 100%);
    box-shadow: 0 6px 15px rgba(11, 60, 93, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-erp-blog::before {
    background: linear-gradient(135deg, #1a6fa0 0%, #0b3c5d 100%);
}

.cbse-sub-card.card-erp-blog:hover {
    box-shadow: 0 12px 25px rgba(11, 60, 93, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. NIOS & Skill Education - Royal Purple */
.cbse-sub-card.card-nios-blog {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-nios-blog::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}

.cbse-sub-card.card-nios-blog:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. Digital Marketing for Schools - Indigo Violet */
.cbse-sub-card.card-digital-marketing-blog {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    box-shadow: 0 6px 15px rgba(67, 56, 202, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-digital-marketing-blog::before {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
}

.cbse-sub-card.card-digital-marketing-blog:hover {
    box-shadow: 0 12px 25px rgba(67, 56, 202, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. Website Development Insights - Dark Teal */
.cbse-sub-card.card-web-dev-blog {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-web-dev-blog::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

.cbse-sub-card.card-web-dev-blog:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. Creative Design & Media - Hot Pink / Rose */
.cbse-sub-card.card-creative-blog {
    background: linear-gradient(135deg, #be185d 0%, #ec4899 100%);
    box-shadow: 0 6px 15px rgba(190, 24, 93, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-creative-blog::before {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.cbse-sub-card.card-creative-blog:hover {
    box-shadow: 0 12px 25px rgba(190, 24, 93, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 7. School Digital Infrastructure - Slate Blue */
.cbse-sub-card.card-digital-support-blog {
    background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%);
    box-shadow: 0 6px 15px rgba(30, 58, 95, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-digital-support-blog::before {
    background: linear-gradient(135deg, #3b82f6 0%, #1e3a5f 100%);
}

.cbse-sub-card.card-digital-support-blog:hover {
    box-shadow: 0 12px 25px rgba(30, 58, 95, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 8. Tech Innovations & AI - Dark Forest Green */
.cbse-sub-card.card-tech-innovations {
    background: linear-gradient(135deg, #1e4530 0%, #059669 100%);
    box-shadow: 0 6px 15px rgba(30, 69, 48, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-tech-innovations::before {
    background: linear-gradient(135deg, #059669 0%, #1e4530 100%);
}

.cbse-sub-card.card-tech-innovations:hover {
    box-shadow: 0 12px 25px rgba(30, 69, 48, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 9. Digital Marketing Trends - Crimson Red */
.cbse-sub-card.card-marketing-trends {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-marketing-trends::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}

.cbse-sub-card.card-marketing-trends:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Digital Marketing subcategory cards - Separate Color Brand Kits */

/* 1. SEO (Search Engine Optimization) - Orange */
.cbse-sub-card.card-seo {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-seo::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}

.cbse-sub-card.card-seo:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. SEM (Search Engine Marketing) - Dark Green */
.cbse-sub-card.card-sem {
    background: linear-gradient(135deg, #1e4530 0%, #0d2219 100%);
    box-shadow: 0 6px 15px rgba(13, 34, 25, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-sem::before {
    background: linear-gradient(135deg, #0d2219 0%, #1e4530 100%);
}

.cbse-sub-card.card-sem:hover {
    box-shadow: 0 12px 25px rgba(13, 34, 25, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. Social Media Marketing - Gold/Yellow */
.cbse-sub-card.card-smm {
    background: linear-gradient(135deg, #d9a008 0%, #fec20f 100%);
    box-shadow: 0 6px 15px rgba(217, 160, 8, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-smm::before {
    background: linear-gradient(135deg, #fec20f 0%, #d9a008 100%);
}

.cbse-sub-card.card-smm:hover {
    box-shadow: 0 12px 25px rgba(217, 160, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. Content Marketing - Purple */
.cbse-sub-card.card-content-marketing {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-content-marketing::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}

.cbse-sub-card.card-content-marketing:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. Email Marketing - Teal */
.cbse-sub-card.card-email-marketing {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-email-marketing::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

.cbse-sub-card.card-email-marketing:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. WhatsApp & SMS Marketing - Rose */
.cbse-sub-card.card-whatsapp-sms {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-whatsapp-sms::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}

.cbse-sub-card.card-whatsapp-sms:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Website Development subcategory cards - Separate Color Brand Kits */

/* 1. CBSE School Website - Orange */
.cbse-sub-card.card-cbse-school-website {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-cbse-school-website::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}

.cbse-sub-card.card-cbse-school-website:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. Website Design - Dark Green */
.cbse-sub-card.card-web-design {
    background: linear-gradient(135deg, #1e4530 0%, #0d2219 100%);
    box-shadow: 0 6px 15px rgba(13, 34, 25, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-web-design::before {
    background: linear-gradient(135deg, #0d2219 0%, #1e4530 100%);
}

.cbse-sub-card.card-web-design:hover {
    box-shadow: 0 12px 25px rgba(13, 34, 25, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. E-commerce Development - Gold/Yellow */
.cbse-sub-card.card-ecommerce {
    background: linear-gradient(135deg, #d9a008 0%, #fec20f 100%);
    box-shadow: 0 6px 15px rgba(217, 160, 8, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-ecommerce::before {
    background: linear-gradient(135deg, #fec20f 0%, #d9a008 100%);
}

.cbse-sub-card.card-ecommerce:hover {
    box-shadow: 0 12px 25px rgba(217, 160, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. CMS Development - Purple */
.cbse-sub-card.card-cms {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-cms::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}

.cbse-sub-card.card-cms:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. Mobile App Development - Teal */
.cbse-sub-card.card-mobile-apps {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-mobile-apps::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

.cbse-sub-card.card-mobile-apps:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. Website Maintenance - Rose */
.cbse-sub-card.card-maintenance {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-maintenance::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}

.cbse-sub-card.card-maintenance:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Poster & Print Design subcategory cards - Separate Color Brand Kits */

/* 1. Custom Posters - Orange */
.cbse-sub-card.card-custom-posters {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-custom-posters::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}

.cbse-sub-card.card-custom-posters:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. Event Posters - Dark Green */
.cbse-sub-card.card-event-posters {
    background: linear-gradient(135deg, #1e4530 0%, #0d2219 100%);
    box-shadow: 0 6px 15px rgba(13, 34, 25, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-event-posters::before {
    background: linear-gradient(135deg, #0d2219 0%, #1e4530 100%);
}

.cbse-sub-card.card-event-posters:hover {
    box-shadow: 0 12px 25px rgba(13, 34, 25, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. Promotional Posters - Gold/Yellow */
.cbse-sub-card.card-promo-posters {
    background: linear-gradient(135deg, #d9a008 0%, #fec20f 100%);
    box-shadow: 0 6px 15px rgba(217, 160, 8, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-promo-posters::before {
    background: linear-gradient(135deg, #fec20f 0%, #d9a008 100%);
}

.cbse-sub-card.card-promo-posters:hover {
    box-shadow: 0 12px 25px rgba(217, 160, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. Infographic Posters - Purple */
.cbse-sub-card.card-infographic-posters {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-infographic-posters::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}

.cbse-sub-card.card-infographic-posters:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. Brochures & Prospectus - Teal */
.cbse-sub-card.card-brochures-prospectus {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-brochures-prospectus::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

.cbse-sub-card.card-brochures-prospectus:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. Social Media Graphics - Rose */
.cbse-sub-card.card-social-media-graphics {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-social-media-graphics::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}

.cbse-sub-card.card-social-media-graphics:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Creative Services main subcategory cards - Separate Color Brand Kits */

/* 1. Poster & Print Design - Purple-Magenta Gradient */
.cbse-sub-card.card-poster-design {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    box-shadow: 0 6px 15px rgba(124, 58, 237, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-poster-design::before {
    background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%);
}

.cbse-sub-card.card-poster-design:hover {
    box-shadow: 0 12px 25px rgba(124, 58, 237, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. Video Design & Explainer Ads - Blue-Teal Gradient */
.cbse-sub-card.card-video-design {
    background: linear-gradient(135deg, #0284c7 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(2, 132, 199, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbse-sub-card.card-video-design::before {
    background: linear-gradient(135deg, #0d9488 0%, #0284c7 100%);
}

.cbse-sub-card.card-video-design:hover {
    box-shadow: 0 12px 25px rgba(2, 132, 199, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Video Design child card themes matching Poster Design brand kits order */

/* 1. Motion Graphics - Orange */
.cbse-sub-card.card-motion-graphics {
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cbse-sub-card.card-motion-graphics::before {
    background: linear-gradient(135deg, #ff3d00 0%, #ff6c37 100%);
}
.cbse-sub-card.card-motion-graphics:hover {
    box-shadow: 0 12px 25px rgba(255, 61, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 2. Animated Explainers - Dark Green */
.cbse-sub-card.card-animated-explainers {
    background: linear-gradient(135deg, #1e4530 0%, #0d2219 100%);
    box-shadow: 0 6px 15px rgba(13, 34, 25, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cbse-sub-card.card-animated-explainers::before {
    background: linear-gradient(135deg, #0d2219 0%, #1e4530 100%);
}
.cbse-sub-card.card-animated-explainers:hover {
    box-shadow: 0 12px 25px rgba(13, 34, 25, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 3. Product Videos - Gold/Yellow */
.cbse-sub-card.card-product-videos {
    background: linear-gradient(135deg, #d9a008 0%, #fec20f 100%);
    box-shadow: 0 6px 15px rgba(217, 160, 8, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cbse-sub-card.card-product-videos::before {
    background: linear-gradient(135deg, #fec20f 0%, #d9a008 100%);
}
.cbse-sub-card.card-product-videos:hover {
    box-shadow: 0 12px 25px rgba(217, 160, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 4. Corporate Videos - Purple */
.cbse-sub-card.card-corporate-videos {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 6px 15px rgba(76, 29, 149, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cbse-sub-card.card-corporate-videos::before {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}
.cbse-sub-card.card-corporate-videos:hover {
    box-shadow: 0 12px 25px rgba(76, 29, 149, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 5. Event Coverage - Teal */
.cbse-sub-card.card-event-coverage {
    background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
    box-shadow: 0 6px 15px rgba(17, 94, 89, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cbse-sub-card.card-event-coverage::before {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}
.cbse-sub-card.card-event-coverage:hover {
    box-shadow: 0 12px 25px rgba(17, 94, 89, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 6. Video Editing - Rose */
.cbse-sub-card.card-video-editing {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    box-shadow: 0 6px 15px rgba(159, 18, 57, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cbse-sub-card.card-video-editing::before {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
}
.cbse-sub-card.card-video-editing:hover {
    box-shadow: 0 12px 25px rgba(159, 18, 57, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Contact & Support - inquiry card - Orange-Amber Gradient */
.cbse-sub-card.card-inquiry {
    background: linear-gradient(135deg, #e65c00 0%, #f97316 100%);
    box-shadow: 0 6px 15px rgba(230, 92, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cbse-sub-card.card-inquiry::before {
    background: linear-gradient(135deg, #f97316 0%, #e65c00 100%);
}
.cbse-sub-card.card-inquiry:hover {
    box-shadow: 0 12px 25px rgba(230, 92, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Contact & Support - support card - Yellow-Orange Gradient */
.cbse-sub-card.card-support {
    background: linear-gradient(135deg, #f59e0b 0%, #f9d423 100%);
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.25), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cbse-sub-card.card-support::before {
    background: linear-gradient(135deg, #f9d423 0%, #f59e0b 100%);
}
.cbse-sub-card.card-support:hover {
    box-shadow: 0 12px 25px rgba(245, 158, 11, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}




/* White gloss sheen sweep animation */
.cbse-sub-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
    animation: shine-sweep 3s ease-in-out infinite;
}

/* Staggered offsets for circular cards to create sequential light ripples */
.cbse-sub-card:nth-child(1)::after {
    animation-delay: 0s;
}

.cbse-sub-card:nth-child(2)::after {
    animation-delay: 0.15s;
}

.cbse-sub-card:nth-child(3)::after {
    animation-delay: 0.30s;
}

.cbse-sub-card:nth-child(4)::after {
    animation-delay: 0.45s;
}

.cbse-sub-card:nth-child(5)::after {
    animation-delay: 0.60s;
}

.cbse-sub-card:nth-child(6)::after {
    animation-delay: 0.75s;
}

/* Adjust card text components to fit circular boundary */
.cbse-sub-card .card-title-hi {
    font-size: 1.15rem !important;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #ffffff;
    line-height: 1.3;
    max-width: 170px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cbse-sub-card .card-title-en {
    font-size: 0.85rem !important;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.35;
    max-width: 170px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cbse-sub-card:hover .card-title-hi,
.cbse-sub-card:hover .card-title-en {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Compliance Audit Checklist & Lead Modal Styles */
.audit-container {
    max-width: 800px;
    margin: 2rem auto 5rem;
    padding: 2.5rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 3px solid #ffffff;
}

.audit-score-card {
    text-align: center;
    background: linear-gradient(135deg, #f4fafb 0%, #e6f5f8 100%);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(184, 233, 240, 0.4);
    position: relative;
    overflow: hidden;
}

.audit-score-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shine-sweep 4s ease-in-out infinite;
}

.score-display {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #ffffff;
    border: 6px solid #e2e8f0;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.score-display.evaluating {
    border-color: #328cc1;
}

.score-display.ready {
    border-color: #ff3d00;
    box-shadow: 0 0 20px rgba(255, 61, 0, 0.25);
}

.score-number {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #0b3c5d;
    line-height: 1;
}

.score-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.audit-checklist {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.audit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: #fcfdfe;
    border: 1px solid rgba(11, 60, 93, 0.08);
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.audit-item:hover {
    background: #ffffff;
    border-color: rgba(255, 108, 55, 0.25);
    box-shadow: var(--shadow-sm);
}

.audit-text {
    flex: 1;
    padding-right: 2rem;
}

.audit-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #0b3c5d;
    margin-bottom: 0.2rem;
}

.audit-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Beautiful custom toggle switches */
.switch-container {
    position: relative;
    display: inline-block;
    width: 68px;
    height: 34px;
}

.switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: .3s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slider-switch:before {
    position: absolute;
    content: "No";
    font-size: 0.75rem;
    font-weight: 800;
    color: #718096;
    text-align: center;
    line-height: 26px;
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

input:checked+.slider-switch {
    background-color: #ff3d00;
}

input:checked+.slider-switch:before {
    content: "Yes";
    color: #ff3d00;
    transform: translateX(34px);
}

/* Dynamic advice block styling */
.audit-advice-box {
    margin-top: 2rem;
    background: #fff8f5;
    border-left: 4px solid #ff3d00;
    padding: 1.5rem;
    border-radius: 0 12px 12px 0;
    display: none;
}

.audit-advice-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #ff3d00;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.audit-advice-list {
    margin-left: 1.25rem;
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
}

.audit-advice-list li {
    margin-bottom: 0.4rem;
}

/* Modal Lead Dialog popup */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 60, 93, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 100px 16px 40px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.lead-modal-card {
    background: #ffffff;
    max-width: 500px;
    width: 90%;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    border: 3px solid #ffffff;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-overlay.active .lead-modal-card {
    transform: translateY(0);
}

/* Full Width details layout (no sidebar) */
.details-container.no-sidebar {
    max-width: 1200px;
}

.details-body.no-sidebar {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
}

.details-body.no-sidebar .details-main-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Premium Floating Sticky CTA Button */
.sticky-cta-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 99999;
    background: linear-gradient(135deg, #ff6c37 0%, #ff3d00 100%);
    color: #ffffff;
    padding: 0.9rem 1.8rem;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(255, 61, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 2px solid #ffffff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.sticky-cta-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    animation: stickyPulse 3s infinite ease-in-out;
}

.sticky-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255, 61, 0, 0.5);
    background: linear-gradient(135deg, #ff7e4d 0%, #ff4d14 100%);
}

.sticky-cta-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(255, 61, 0, 0.3);
}

@keyframes stickyPulse {
    0% {
        box-shadow: 0 10px 25px rgba(255, 61, 0, 0.35);
    }

    50% {
        box-shadow: 0 10px 32px rgba(255, 61, 0, 0.6);
    }

    100% {
        box-shadow: 0 10px 25px rgba(255, 61, 0, 0.35);
    }
}

/* Adjust for small screens */
@media (max-width: 576px) {
    .sticky-cta-btn {
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.8rem 1.4rem;
        font-size: 0.85rem;
    }
}

/* Comprehensive Mobile View Port responsiveness overrides for all 6 CBSE Support subpages */
@media (max-width: 768px) {

    /* 1. Reduce padding and constrain width on details containers and outer details card wrapper to fit mobile screens without stretching */
    .details-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0.75rem !important;
        margin: 1rem auto 2rem !important;
        box-sizing: border-box !important;
    }

    .details-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem 1rem !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .details-header {
        padding-bottom: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .details-title-hi {
        font-size: 1.5rem !important;
    }

    .details-title-en {
        font-size: 1.1rem !important;
    }

    /* 2. Target all features grids to stack vertically in a single column */
    .fresh-features-grid,
    .upgradation-features-grid,
    .section-increase-features-grid,
    .oasis-saras-features-grid,
    .cbse-circulars-features-grid,
    .features-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* 3. Target all checklists to stack vertically in a single column */
    .fresh-checker-checklist,
    .upgradation-checklist,
    .section-increase-checklist,
    .oasis-saras-checklist,
    .cbse-circulars-checklist,
    .cbse-checklist,
    .checker-checklist {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* 4. Target all checker card wrappers and checklists */
    .fresh-checker-card,
    .upgradation-checker-card,
    .section-increase-checker-card,
    .oasis-saras-checker-card,
    .cbse-circulars-checker-card,
    .checker-card {
        padding: 1.25rem !important;
    }

    /* 5. Lead Form Cards & grids */
    .fresh-lead-form-card,
    .upgradation-lead-form-card,
    .section-increase-lead-form-card,
    .oasis-saras-lead-form-card,
    .cbse-circulars-lead-form-card,
    .lead-form-card {
        padding: 1.5rem 1.25rem !important;
        margin-top: 2.5rem !important;
    }

    .fresh-lead-form-grid,
    .upgradation-form-grid,
    .section-increase-form-grid,
    .oasis-saras-form-grid,
    .cbse-circulars-form-grid,
    .lead-form-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    /* 6. Hero Banners padding */
    .upgradation-hero,
    .section-increase-hero,
    .oasis-saras-hero,
    .cbse-circulars-hero,
    .fresh-hero,
    .renewal-hero {
        padding: 2.2rem 1.25rem !important;
        margin-bottom: 2rem !important;
    }

    .upgradation-hero h1,
    .section-increase-hero h1,
    .oasis-saras-hero h1,
    .cbse-circulars-hero h1,
    .fresh-hero h1,
    .renewal-hero h1 {
        font-size: 1.7rem !important;
    }

    .upgradation-hero h2,
    .section-increase-hero h2,
    .oasis-saras-hero h2,
    .cbse-circulars-hero h2,
    .fresh-hero h2,
    .renewal-hero h2 {
        font-size: 1rem !important;
    }

    /* 7. Reduce padding on any subpage inner cards with inline paddings */
    .details-main-content div[style*="padding: 2.5rem"],
    .details-main-content div[style*="padding:2.5rem"],
    .details-main-content div[style*="padding: 2rem"],
    .details-main-content div[style*="padding:2rem"],
    .details-main-content div[style*="padding: 1.8rem"],
    .details-main-content div[style*="padding:1.8rem"] {
        padding: 1.25rem !important;
    }

    /* 8. Override inline flex and grid structures to stack vertically */
    .details-main-content div[style*="display: flex"],
    .details-main-content div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .details-main-content div[style*="display: grid"],
    .details-main-content div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* 9. Reset inline min-width constraints */
    .details-main-content div[style*="min-width"] {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* 10. Enable scrolling for tables and parent containers with overflow hidden styles */
    .details-main-content table,
    .fresh-labs-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .details-main-content div[style*="overflow: hidden"],
    .details-main-content div[style*="overflow:hidden"] {
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* 11. Custom section headings wrap */
    .section-title-premium,
    .section-title-blue,
    .section-title-purple,
    .section-title-teal,
    .section-title-rose {
        flex-wrap: wrap !important;
        height: auto !important;
        font-size: 1.15rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* 12. Fix inline-flex custom buttons from breaking layout boundaries */
    .details-main-content .hero-cta-btn,
    .details-main-content .submit-btn,
    .details-main-content .hero-cta-btn-purple,
    .details-main-content .hero-cta-btn-teal,
    .details-main-content .hero-cta-btn-rose,
    .hero-cta-btn-rose,
    .hero-cta-btn-teal,
    .hero-cta-btn-purple,
    .hero-cta-btn {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 0.8rem 1.25rem !important;
    }

    /* 13. Fix sub-navigation header bar brand & buttons overflow */
    .sub-navbar {
        padding: 0.8rem 1rem !important;
    }

    .sub-navbar-brand span {
        font-size: 1rem !important;
    }

    .back-btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }

    /* Category page — circular subcategory cards grid */
    .grid-container-sub {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
        padding: 0 1rem !important;
    }

    .cbse-sub-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        max-width: 180px;
        padding: 1.2rem !important;
    }

    .cbse-sub-card .card-title-hi {
        font-size: 1rem !important;
        max-width: 140px;
    }

    .cbse-sub-card .card-title-en {
        font-size: 0.72rem !important;
        max-width: 140px;
    }

    /* Category page — header text and description overflow */
    .sub-layout-header {
        padding: 1rem 1rem 0.5rem !important;
    }

    .sub-layout-title-hi {
        font-size: 1.4rem !important;
        word-break: break-word;
    }

    .sub-layout-title-en {
        font-size: 0.9rem !important;
    }

    .sub-layout-desc {
        font-size: 0.92rem !important;
        padding: 0 0.5rem;
    }

    /* Category page — CBSE byelaws CTA button text wrap */
    .sub-layout-header+div a,
    a[href*="cbse-byelaws"] {
        font-size: 0.82rem !important;
        padding: 0.65rem 1.2rem !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.4 !important;
        max-width: 100%;
    }
}

/* Hide navigation header brand text on small phone viewports to prevent overflow */
@media (max-width: 480px) {
    .sub-navbar-brand span {
        display: none !important;
    }

    /* Single column for very small phones */
    .grid-container-sub {
        grid-template-columns: 1fr !important;
    }

    .cbse-sub-card {
        max-width: 170px;
    }
}