html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}



/* Responsive styles for small screens */
@media (max-width: 576px) {
    .rounded-panel {
        margin: 0.75rem; /* reduced from 1rem */
        padding: 0.9rem;
        border-radius: 12px;
    }

        .rounded-panel .panel-icon {
            width: 36px;
            height: 36px;
            min-width: 36px;
        }
}

/* Reduce the vertical gaps of panels and content */
.rounded-panel {
    max-width: 820px;
    margin: 1rem auto; /* reduced from 2rem auto */
    padding: 1rem; /* slightly reduced space inside */
    border-radius: 16px;
    xbackground: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 8px 20px rgba(22, 33, 64, 0.08);
    border: 1px solid rgba(22, 33, 64, 0.06);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden; /* keeps rounded corners clean for images */
}

    /* Reset default margins of headings/paragraphs inside panels to tighten vertical spacing */
    .rounded-panel h1,
    .rounded-panel h2,
    .rounded-panel h3,
    .rounded-panel p {
        margin-top: 0;
        margin-bottom: 0.5rem; /* small consistent gap */
    }

    /* panel internals */
    .rounded-panel .panel-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .rounded-panel .panel-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        background: #eef2ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: #4338ca;
        font-size: 0.95rem;
    }

    .rounded-panel .panel-title {
        margin: 0;
        font-size: 1.125rem;
        color: #0f172a;
    }

    .rounded-panel .panel-subtitle {
        margin: 0;
        color: #6b7280;
        font-size: 0.875rem;
    }

    .rounded-panel .panel-body {
        margin-top: 0.5rem; /* reduced from 0.75rem */
        color: #374151;
        line-height: 1.45;
    }


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}


/* New: Inline two-panel layout matching rounded-panel style */
.panel-row {
    display: flex;
    gap: 0.5rem; /* reduced gap between panels (also reduces vertical gap when stacked) */
    align-items: flex-start;
    justify-content: center;
    margin: 1rem auto; /* reduced from 2rem auto */
    max-width: 820px;
    xpadding: 0 1rem;
    box-sizing: border-box;
}

/* Left 66%, right 33% */
.panel-left {
    flex: 0 0 60%;
    max-width: 60%;
    /* remove fixed height to allow content to size naturally */
}

.panel-right {
    flex: 0 0 40%;
    max-width: 40%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}


.panel-triple1 {
    flex: 0 0 33%;
    max-width: 33%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.panel-triple2 {
    flex: 0 0 33%;
    max-width: 33%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.panel-triple3 {
    flex: 0 0 33%;
    max-width: 33%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Gold hover / focus glow for panel-triple1 */
.panel-triple1 {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    will-change: transform, box-shadow;
    cursor: default; /* change to pointer if clickable */
}

    /* hover + keyboard focus-visible for accessibility */
    .panel-triple1:hover,
    .panel-triple1:focus-visible {
        transform: translateY(-6px);
        border-color: rgba(255,215,0,0.9);
        box-shadow: 0 12px 30px rgba(22, 33, 64, 0.12), /* subtle depth shadow */
        0 0 18px 6px rgba(255,215,0,0.12), /* soft gold halo */
        0 0 6px 2px rgba(255,215,0,0.22) inset; /* inner warm rim */
        outline: none; /* focus-visible handles keyboard focus */
    }

    /* stronger effect if you want a more pronounced glow */
    .panel-triple1.hover-strong:hover,
    .panel-triple1.hover-strong:focus-visible {
        box-shadow: 0 18px 40px rgba(22, 33, 64, 0.16), 0 0 30px 10px rgba(255,215,0,0.18), 0 0 8px 3px rgba(255,215,0,0.28) inset;
        transform: translateY(-8px);
    }

@media (max-width: 768px) {
    .panel-row {
        flex-direction: column;
        gap: 0.5rem; /* smaller vertical spacing when stacked */
    }

    .panel-left,
    .panel-right {
        flex: 1 1 auto;
        max-width: 100%;
    }
}


.highlightergreen {
    font-weight: bolder;
    background: linear-gradient(104deg, rgba(130, 255, 173,0) 0.9%, rgba(130, 255, 173,1.25) 2.4%, rgba(130, 255, 173,0.5) 5.8%, rgba(130, 255, 173,0.1) 93%, rgba(130, 255, 173,0.7) 96%, rgba(130, 255, 1732,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(130, 255, 173,0.3) 7.9%, rgba(130, 255, 173,0) 15%);
    padding: 0.6em 13.7px;
    box-decoration-break: clone;
    margin: 0;
    border-radius: 7.5px;
    text-shadow: -12px 12px 9.8px rgba(130, 255, 173,0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1);
}

.highlighterpink {
    font-weight: bolder;
    background: linear-gradient(104deg, rgba(255, 182, 193,0) 0.9%, rgba(255, 182, 193,1.25) 2.4%, rgba(255, 182, 193,0.5) 5.8%, rgba(255, 182, 193,0.1) 93%, rgba(255, 182, 193,0.7) 96%, rgba(255, 182, 1932,0) 98%), linear-gradient(183deg, rgba(255, 182, 193,0) 0%, rgba(255, 182, 193,0.3) 7.9%, rgba(255, 182, 193,0) 15%);
    padding: 0.6em 13.7px;
    box-decoration-break: clone;
    margin: 0;
    border-radius: 7.5px;
    text-shadow: -12px 12px 9.8px rgba(255, 182, 193,0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1);
}