:root {
     --navy-900: #0e1c33;
     --navy-850: #12233d;
     --navy-800: #16294a;
     --navy-700: #1d3459;
     --ink: #1c2530;
     --paper: #eef1f4;
     --card: #ffffff;
     --line: #e4e8ee;
     --muted: #8994a3;
     --sub: #5c6675;
     --gold: #C69135;
     --gold-soft: #d9b968;
     --accent: #c9a24b;
     --track: #26375c;
     --shadow: 0 2px 4px rgba(16, 28, 51, .06), 0 8px 24px rgba(16, 28, 51, .08);
     --serif: 'Cormorant Garamond', Georgia, serif;
     --script: 'Dancing Script', cursive;
     --sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
     color-scheme: light;
 }

 * {
     box-sizing: border-box
 }

 body {
     margin: 0;
     font-family: 'Cormorant Garamond' !important;
     background: var(--paper);
     color: var(--ink);
     -webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Cormorant Garamond' !important;
     font-weight: 800;
 }

 .shell {
     display: flex;
     min-height: 100%;
 }

 /* ---------- Sidebar ---------- */
 .sidebar {
     width: 88px;
     flex: 0 0 88px;
     background: #002c58;
     color: #c6d0df;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding-block: 22px 20px;
     position: sticky;
     top: env(safe-area-inset-top, 0px);
     align-self: flex-start;
     height: 100vh;
 }

 .brand-mark {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: 1.5px solid rgba(201, 162, 75, .55);
     display: grid;
     place-items: center;
     margin-bottom: 34px;
     color: var(--gold-soft);
     font-family: var(--serif);
     font-size: 20px;
     font-weight: 600;
 }

 .nav {
     display: flex;
     flex-direction: column;
     gap: 4px;
     width: 100%;
     align-items: center;
     flex: 1;
 }

 .nav a {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     padding: 12px 4px;
     color: #ffffff;
     text-decoration: none;
     font-size: 12px;
     letter-spacing: .02em;
     font-weight: 500;
     position: relative;
     transition: color .15s;
 }

 .nav a svg {
     width: 25px;
     height: 25px;
     stroke: currentColor;
     fill: none;
     stroke-width: 1.6;
 }

 .nav a:hover {
     color: #e7edf5;
 }

 .nav a.active {
     color: var(--gold-soft);
 }

 .nav a.active::before {
     content: "";
     position: absolute;
     right: 0;
     top: 8px;
     bottom: 8px;
     width: 3px;
     border-radius: 3px 0px 0px 3px;
     background: var(--gold);
 }

 .nav .logout {
     margin-top: auto;
     color: #ffffff;
 }

 /* ---------- Main ---------- */
 .main {
     flex: 1;
     min-width: 0;
     max-width: 100%;
 }

 /* Hero */
 .hero {
     position: relative;
     border-radius: 0;
     overflow: hidden;
     color: #fff;
     box-shadow: var(--shadow);
     isolation: isolate;
 }


 .hero-mtn {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 60%;
     z-index: -1;
     opacity: .9;
 }

 .hero-inner {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 24px;
     padding: 34px 38px 40px;
     min-height: 230px;
 }

 .welcome {
     color: var(--gold-soft);
     font-family: var(--serif);
     font-style: normal;
     font-size: 22px;
     margin: 0 0 4px;
     font-weight: 800;
 }

 .hero h1 {
     font-family: 'Cormorant Garamond';
     font-weight: bolder;
     font-size: 46px;
     line-height: 1.02;
     margin: 0 0 14px;
     text-wrap: balance;
     letter-spacing: .5px;
 }

    .hero p.lede {
        margin: 0;
        max-width: 400px;
        font-size: 18px;
        line-height: 25px;
        color: #002c58;
    }

 .script-tag {
     position: absolute;
     right: 250px;
     top: 30px;
     font-family: var(--script);
     font-size: 26px;
     color: #e6d5a8;
     transform: rotate(-4deg);
     opacity: .92;
     text-align: center;
     line-height: 1.05;
     text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
     display: none;
 }

 /* Progress panel */
 .progress-card {
     background: rgb(0 44 88);
     border: 1px solid rgba(201, 162, 75, .28);
     backdrop-filter: blur(4px);
     border-radius: 12px;
     padding: 18px 22px 20px;
     width: 222px;
     flex: 0 0 222px;
     text-align: center;
 }

.progress-card .eyebrow 
{
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 25px;
    font-weight: 600;
}

 .ring {
     position: relative;
     width: 104px;
     height: 104px;
     margin: 0 auto 6px;
 }

 .ring svg {
     transform: rotate(-90deg);
 }

 .ring-num {
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     font-family: var(--serif);
     font-size: 30px;
     font-weight: 600;
     color: #fff;
 }

 .progress-card .count {
     font-size: 12.5px;
     color: #ffffff;
     margin: 6px 0 16px;
 }

 .progress-card .btn {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: var(--gold);
     color: #1a1204;
     border: none;
     border-radius: 7px;
     font-family: var(--sans);
     font-weight: 600;
     font-size: 12px;
     letter-spacing: .02em;
     padding: 9px 15px;
     cursor: pointer;
     text-decoration: none;
     transition: background .15s, transform .1s;
 }

 .progress-card .btn:hover {
     background: var(--gold-soft);
 }

 .progress-card .btn svg {
     width: 13px;
     height: 13px;
     stroke: currentColor;
     fill: none;
     stroke-width: 2;
 }

 /* Toolbar */
 .toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin: 26px 0 18px;
     flex-wrap: wrap;
 }

.viewby 
{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #06264A;
    font-size: 16px;
    font-weight: 700;
}

.select 
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 16px;
    color: #06264A;
    font-weight: 600;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.select svg 
{
    width: 12px;
    height: 12px;
    stroke: var(--muted);
    fill: none;
    stroke-width: 2;
}

 .search 
{
     display: inline-flex;
     align-items: center;
     gap: 9px;
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 8px 13px;
     box-shadow: var(--shadow);
     min-width: 230px;
 }

 .search input {
     border: none;
     outline: none;
     font-family: var(--sans);
     font-size: 13px;
     color: var(--ink);
     width: 100%;
     background: transparent;
 }

 .search svg {
     width: 15px;
     height: 15px;
     stroke: var(--muted);
     fill: none;
     stroke-width: 2;
     flex: 0 0 auto;
 }

 /* Grid */
 .grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
 }

 .card {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: 11px;
     overflow: hidden;
     box-shadow: var(--shadow);
     cursor: pointer;
     transition: transform .16s ease, box-shadow .16s ease;
 }

 .card:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 14px rgba(16, 28, 51, .12), 0 16px 34px rgba(16, 28, 51, .14);
 }

 .thumb {
     position: relative;
     aspect-ratio: 16/10;
     display: grid;
     place-items: center;
 }

 .thumb::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(10, 20, 35, .05), rgba(10, 20, 35, .4));
 }

 .play {
     position: relative;
     z-index: 2;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .9);
     display: grid;
     place-items: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
     transition: transform .15s, background .15s;
 }

 .card:hover .play {
     transform: scale(1.08);
     background: #fff;
 }

 .play svg {
     width: 16px;
     height: 16px;
     fill: var(--navy-800);
     margin-left: 2px;
 }

 .completed-badge {
     position: absolute;
     top: 9px;
     right: 9px;
     z-index: 3;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: var(--gold);
     display: grid;
     place-items: center;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
 }

 .completed-badge svg {
     width: 12px;
     height: 12px;
     stroke: #fff;
     fill: none;
     stroke-width: 2.4;
 }

 .card-body {
     padding: 13px 14px 16px;
 }

 .card-body .tno {
     font-size: 12px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--gold);
     font-weight: 700;
     margin-bottom: 5px;
 }

 .card-body h3 {
     font-family: var(--serif);
     font-weight: 600;
     font-size: 18.5px;
     line-height: 1.12;
     margin: 0;
     color: var(--ink);
 }

 /* Footer */
 .footer {
     margin-top: 30px;
     background: linear-gradient(180deg, var(--navy-850), var(--navy-900));
     color: #c8d2e0;
     border-radius: 12px;
     padding: 22px 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
 }

 .footer .verse {
     font-family: var(--serif);
     font-style: italic;
     font-size: 20px;
     max-width: 640px;
     line-height: 1.4;
     color: #ffffff;
 }

 .footer .verse .ref {
     display: block;
     font-style: normal;
     font-size: 18px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--gold-soft);
     margin-top: 8px;
 }

 .footer .tags {
     display: flex;
     gap: 22px;
     font-size: 14px;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: #ffffff;
     font-weight: 600;
 }

 .footer .leaf {
     color: var(--gold);
 }

 /* Responsive */
 @media (max-width:1080px) {
     .grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .script-tag {
         display: none;
     }
 }

 @media (max-width:820px) {
     .grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .hero-inner {
         flex-direction: column;
     }

     .progress-card {
         width: 100%;
         flex: none;
     }

     .hero h1 {
         font-size: 38px;
     }
 }

 @media (max-width:640px) {
     .sidebar {
         width: 66px;
         flex-basis: 66px;
     }

     .main {
         padding: 18px 16px 30px;
     }

     .hero-inner {
         padding: 24px 20px 28px;
     }
 }

 @media (max-width:460px) {
     .grid {
         grid-template-columns: 1fr 1fr;
         gap: 12px;
     }

     .card-body h3 {
         font-size: 16px;
     }
 }


 .header-box {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

.profilebox ul {
    display: flex;
    align-items: center;
    padding-left: 15px;
    margin-bottom: 0;
}
 .profilebox ul li img {
     width: 100px;
 }

 .profilelist ul li {
     display: block;
 }

 .logobox img {
     width: 150px;
 }

 #header .container {
     width: 100%;
     max-width: 100%;
     padding: 0 20px;
 }

 .header-block {
     padding: 20px 0;
     background: #11223b;
 }

 .profilebox ul li {
     list-style: none;
 }

 .profilebox ul li img {
     width: 45px;
     height: 45px;
     border-radius: 50%;
 }

 .profilelist ul li a {
     text-decoration: none;
     color: #ffffff;
     padding: 50px 0;
 }

 .profilelist {
     position: relative;
 }

 .sub-menu {
     position: absolute;
     opacity: 0;
     visibility: hidden;
     width: 150px;
     background: #ffffff;
     left: -60px;
     top: 50px;
     box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
     z-index: 9;
     border-radius: 5px;
 }

 .profilelist ul:hover .sub-menu {

     opacity: 1;
     visibility: visible;

 }

 .sub-menu a {
     display: block;
     padding: 5px 10px !important;
     color: #000 !important;
 }

 .sub-menu ul {
     display: block !important;
     padding-left: 0;
 }

 .sub-menu ul li {
     border-bottom: 1px solid #f1f1f1;
 }

 .sub-menu ul li:last-child {
     border-bottom: none;
 }

 .admin-content {
     padding: 26px 30px 40px;
 }

 .profilelist ul li i {
     color: #fff;
 }

 .hero h1 {
     color: #002c58;
 }

.videotext h4 {
    font-size: 16px;
    color: #C98A18;
    font-weight: 700;
}

.videotext h1 {
    font-size: 16px;
    color: #0b2e58;
    font-weight: 700;
    height: 42px;
}

.videogallery-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 100%;
    z-index: 9;
    position: relative;
}

 .videos {
     border-radius: 10px;
     background: #fff;
     box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
 }

 .videos iframe {
     border: 0;
     border-radius: 10px 10px 0 0;
     width: 100%;
 }

.videotext {
    padding: 20px 10px;
}

.videotext .btn:hover {
    background: #002c58;
    color: #fff;
}


.videogallery-box {
    padding: 40px;
}

.videogallery-box {
    padding: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    position: relative;
    margin-top: 30px;
}

.videogallery-box:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    background: #00000069;
    top: 0;
    border-radius: 10px;
}

.traning-dash-title h1 {
    color: #fff;
}

.traning-dash-title h4 {
    color: #fff;
}

.traning-dash-title h3 {
    color: #fff;
}
.traning-dash-title p {
    color: #fff;
}



 /* profile ************************************************ */

 .profile-page {
     width: 100%;
     margin: 0;
     background: var(--paper);
     border: 1px solid #ece8df;
     box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
 }

 .top-area {
     display: grid;
     grid-template-columns: 29% 71%;
     min-height: 410px;
 }

 .profile-panel {
     padding: 34px 28px 28px;
     text-align: center;
     border-right: 1px solid var(--border);
 }

 .photo-wrap {
     width: 160px;
     height: 160px;
     margin: 0 auto 18px;
     border-radius: 50%;
     padding: 7px;
     background: #f0eadf;
     border: 1px solid #d8d1c4;
     position: relative;
 }

 .photo-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
     display: block;
 }

 .camera-badge {
     position: absolute;
     right: 0;
     bottom: 14px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--navy);
     border: 3px solid var(--paper);
     color: white;
     display: grid;
     place-items: center;
     font-size: 14px;
 }

 .name-tag {
     display: inline-block;
     padding: 10px 16px;
     border: 1px solid var(--gold-soft);
     color: #9b6517;
     font: 700 12px/1.1 Georgia, serif;
     letter-spacing: .06em;
     background: #fffdf8;
     margin-bottom: 7px;
 }

 .role {
     color: #777;
     font-size: 12px;
     line-height: 1.5;
     margin: 0 0 27px;
 }

 .profile-quote {
     max-width: 245px;
     margin: 0 auto;
     color: #344256;
     font: italic 16px/1.4 Georgia, serif;
 }

 .form-panel {
     padding: 24px 30px 18px;
     background: #fffefa;
 }

 .form-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 18px;
 }

 .form-head h2 {
     margin: 0;
     color: var(--navy);
     font: 700 24px/1.1 Georgia, serif;
 }

 .req-note {
     font-size: 14px;
     color: #9b978f;
     padding-top: 4px;
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px 18px;
 }

 .field label {
     display: block;
     color: #29313a;
     font-size: 11px;
     font-weight: 700;
     margin-bottom: 5px;
 }

 .field input,
 .field select,
 .field textarea {
     width: 100%;
     border: 1px solid #d8d5cf;
     background: #fff;
     color: #555;
     border-radius: 2px;
     padding: 9px 10px;
     font-size: 12px;
     outline: none;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .03);
 }

 .field input,
 .field select {
     height: 35px
 }

 .field textarea {
     min-height: 58px;
     resize: vertical;
     line-height: 1.4;
 }

 .field input:focus,
 .field select:focus,
 .field textarea:focus {
     border-color: #b8aa90
 }

 .full {
     grid-column: 1/-1
 }

 .save-row {
     display: flex;
     justify-content: flex-end;
     margin-top: 14px;
 }

 .save-btn {
     border: 0;
     color: #fff;
     background: linear-gradient(#d59328, #bd7408);
     font-size: 14px;
     font-weight: 600;
     letter-spacing: .05em;
     padding: 11px 30px;
     border-radius: 2px;
     box-shadow: inset 0 1px rgba(255, 255, 255, .35);
     cursor: pointer;
 }

 .bottom-area {
     display: grid;
     grid-template-columns: 42% 58%;
     border-top: 1px solid var(--border);
     min-height: 275px;
 }

 .training-panel {
     padding: 30px 28px;
     background: #fffefa;
 }

 .eyebrow {
     color: #a67023;
     font-size: 14px;
     letter-spacing: .18em;
     font-weight: 700;
     margin-bottom: 20px;
     position: relative;
     display: inline-block;
 }

 .eyebrow:after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -6px;
     width: 70px;
     height: 1px;
     background: #d9bd8f;
 }

 .training-main {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-bottom: 16px;
 }

 .progress-ring {
     --p: 25;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     position: relative;
     flex: 0 0 auto;
     background: conic-gradient(#002c58 calc(var(--p) * 1%), #dedbd5 0);
 }

 .progress-ring:before {
     content: "";
     position: absolute;
     inset: 6px;
     background: #fffefa;
     border-radius: 50%;
 }

 .progress-ring span {
     position: relative;
     z-index: 1;
     color: var(--navy);
     font: 700 25px/1 Georgia, serif;
 }

 .count {
     color: var(--navy);
     font: 700 30px/1.15 Georgia, serif;
 }

 .count small {
     display: block;
     font: 400 10px/1.4 Arial, sans-serif;
     color: #777;
     margin-top: 5px;
 }

 .training-copy {
     font-size: 15px;
     line-height: 1.55;
     color: #777;
     max-width: 310px;
     margin-bottom: 16px;
 }

 .progress-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     background: #002c58;
     color: #fff;
     padding: 10px 16px;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: .06em;
     border-radius: 3px;
 }

 .quote-card {
     /* margin:18px 24px 18px 0; */
     position: relative;
     min-height: 235px;
     overflow: hidden;
     background: #c9c2b8;
 }

 .quote-card img {
     width: 100%;
     height: 100%;
     min-height: 235px;
     object-fit: cover;
     display: block;
 }

.quote-card:after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(90deg, rgba(250, 248, 242, .72) 0%, rgba(250, 248, 242, .35) 38%, rgba(0, 0, 0, .02) 72%); */
}

 .quote-card blockquote {
     position: absolute;
     z-index: 2;
     top: 26px;
     left: 50%;
     width: 58%;
     margin: 0;
     text-align: center;
     color: #26384d;
     font: 700 20px/1.4 Georgia, serif;
     padding: 0 28px;
     text-shadow: 0 1px rgba(255, 255, 255, .55);
     transform: translate(-50%, 0px);
 }

 @media(max-width:820px) {

     .top-area,
     .bottom-area {
         grid-template-columns: 1fr
     }

     .profile-panel {
         border-right: 0;
         border-bottom: 1px solid var(--border)
     }

     .quote-card {
         margin: 0 18px 18px
     }
 }

 @media(max-width:560px) {
     .profile-page {
         width: calc(100% - 14px);
         margin: 7px auto
     }

     .form-panel,
     .profile-panel,
     .training-panel {
         padding-left: 18px;
         padding-right: 18px
     }

     .form-grid {
         grid-template-columns: 1fr
     }

     .full {
         grid-column: auto
     }

     .form-head {
         align-items: flex-start
     }

     .form-head h2 {
         font-size: 21px
     }

     .quote-card blockquote {
         width: 78%;
         font-size: 17px;
         padding: 0 16px
     }
 }


 /* my progress cssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */

 .page {
     width: min(1180px, calc(100% - 34px));
     margin: 20px auto;
     background: #fff;
     border: 1px solid #dadbd8;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .05)
 }

 .content {
     padding: 0;
 }

 .top-grid {
     display: grid;
     grid-template-columns: 1.06fr 1.04fr .85fr;
     gap: 13px
 }

 .card {
     border: 1px solid #e2e3df;
     background: #fff;
     min-height: 150px
 }

 .progress-card {
     display: grid;
     /* grid-template-columns: 145px 1fr; */
     align-items: center;
     padding: 14px 18px
 }

 .circle-wrap {
     display: flex;
     align-items: center;
     justify-content: center
 }

 .progress-ring {
     --p: 25;
     width: 120px;
     height: 120px;
     aspect-ratio: 1;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: conic-gradient(var(--gold) calc(var(--p)*1%), #c9ced1 0);
     position: relative;
     margin-right: 25px;
 }

 .progress-ring:before {
     content: "";
     position: absolute;
     inset: 9px;
     border-radius: 50%;
     background: #fff
 }

 .progress-ring span {
     position: relative;
     z-index: 1;
     color: var(--navy);

     font-size: 29px;
     font-weight: 700
 }

 .count-box h2 {
     margin: 0 0 4px;

     color: var(--navy);
     font-size: 28px
 }

 .count-box .eyebrow {
     color: var(--navy);
     font-weight: 700;
     font-size: 16px;
     letter-spacing: .09em;
     text-transform: uppercase;
 }

 .count-box p {
     margin: 12px 0 0;
     font-size: 16px;
     line-height: 1.5;
     color: #6b7680;
 }

 .card-label {

     color: var(--navy);
     font-weight: 600;
     font-size: 16px;
     padding: 8px 12px 5px;
 }

 .current-body {
     border-top: 1px solid #ecece9;
     padding: 10px 12px 12px
 }

 .current-course {
     display: grid;
     grid-template-columns: 118px 1fr;
     gap: 12px;
     align-items: center
 }

 .thumb {
     width: 100%;
     height: 58px;
     object-fit: cover;
     display: block
 }

 .kicker {
     color: var(--gold);
     font-weight: 700;
     font-size: 16px;
     text-transform: uppercase;
     letter-spacing: .08em;
     margin-bottom: 3px;
 }

 .course-title 
{
    color: var(--navy);
    font-size: 17px;
    line-height: 1.06
}
.continue-btn 
{
    margin-top: 10px;
    height: 34px;
    width: 100%;
    border: 0;
    background: #C98A18;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    letter-spacing: .08em;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
 .quote-card 
{
    position: relative;
    text-align: center
}
 .quote-icon 
{
     width: 34px;
     height: 20px;
     border-top: 1px solid #cab89a;
     margin: 1px auto 4px;
     position: relative
}
.quote-icon:after
{
     content: "";
     position: absolute;
     width: 16px;
     height: 8px;
     border-left: 1px solid #cab89a;
     border-right: 1px solid #cab89a;
     left: 8px;
     top: -8px;
     transform: skewX(-30deg)
 }

 .quote 
 {
     margin: 2px 8px 3px;
     font-size: 20px;
     line-height: 1.28;
     color: #52606c;
 }

 .ref {
     color: #b08b59;
     font-size: 16px;
     letter-spacing: .12em;
     margin-top: 6px;
     font-weight: bold;
 }

 .section-head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin: 25px 0 20px;
 }

 .section-title {

     color: var(--navy);
     font-size: 25px;
     margin: 0
 }

 .filter-select {
     min-width: 190px;
     height: 35px;
     border: 1px solid #dfe2e4;
     background: #fff;
     color: #002c58;
     padding: 0 34px 0 12px;
     font-size: 16px;
     border-radius: 3px;
     font-weight: 600;
 }

 .dt-container .dt-search,
 .dt-container .dt-length,
 .dt-container .dt-info,
 .dt-container .dt-paging {
     display: none !important
 }

 .table-wrap {
     overflow-x: auto;
     background: #fff;
     padding: 10px 0;
     box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
     border-radius: 10px;
 }

 table.dataTable {
     width: 100% !important;
     border-collapse: collapse !important;
     border-spacing: 0 !important;
     margin: 0 !important
 }

 #trainingTable thead th {
     background: #fff;
     color: var(--navy);
     font-size: 16px;
     letter-spacing: .08em;
     text-transform: uppercase;
     font-weight: 700;
     padding: 6px 7px !important;
     white-space: nowrap;
 }

 #trainingTable tbody td {
     border-bottom: 1px solid #e8eaec !important;
     padding: 5px 7px !important;
     vertical-align: middle;
     font-size: 16px;
     color: #002c58;
     font-weight: 600;
 }

 .no {
     color: #8a949d;
     width: 28px;
     font-size: 16px !important;
     text-align: center;
 }

 .training-cell {
     display: grid;
     grid-template-columns: 58px minmax(170px, 1fr);
     align-items: center;
     gap: 8px
 }

 .training-cell img {
     width: 58px;
     height: 30px;
     object-fit: cover;
     display: block;
     border: 1px solid #ddd
 }

 .training-name {
     color: #002c58;
     font-size: 16px;
     font-weight: 600;
     line-height: 1.15;
 }

 .status {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     white-space: nowrap;
     color: #002c58;
 }

 .status-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     border: 2px solid #c5ccd1;
     display: inline-grid;
     place-items: center;
     font-size: 8px;
     font-weight: 700;
 }

 .status.completed .status-dot {
     border-color: #5caa65;
     background: #5caa65;
     color: #fff
 }

 .status.progress .status-dot {
     border-color: #d99721;
     color: #d99721
 }

 .status.notstarted {
     color: #002c58;
     font-weight: 600;
 }

 .progress-cell {
     display: flex;
     align-items: center;
     gap: 8px;
     min-width: 170px
 }

 .bar {
     height: 6px;
     border-radius: 20px;
     background: #edf0f1;
     overflow: hidden;
     flex: 1
 }

 .bar span {
     display: block;
     height: 100%;
     border-radius: 20px;
     background: #002c58;
 }

 .bar.gold span {
     background: var(--gold)
 }

 .percent {
     width: 30px;
     text-align: right;
     color: #002c58;
     font-size: 16px;
 }

 .action-btn {
     min-width: 80px;
     height: 25px;
     border-radius: 4px;
     border: 1px solid #d9dde0;
     background: #f9faf9;
     color: #002c58;
     font-size: 16px;
     cursor: pointer;
     font-weight: 600;
 }

 .action-btn.continue {
     background: linear-gradient(#d99a24, #c17e12);
     border-color: #bd7810;
     color: #fff
 }

 .bottom-banner {
     margin-top: 14px;
     /* min-height: 137px; */
     border: 1px solid #e1ded8;
     display: grid;
     grid-template-columns: 1.9fr 300px;
     align-items: center;
     background-image: url(../image/progress-bottom.webp);
     background-position: center;
     background-size: cover;
     overflow: hidden;
     padding: 20px 0;
 }

 .banner-art {
     height: 100%
 }

 .banner-copy {
     padding: 10px 14px 10px 260px;
     /* text-align: right; */
     width: 70%;
     margin: auto;
 }

 .banner-kicker {
     color: var(--gold);
     font-size: 16px;
     letter-spacing: .12em;
     text-transform: uppercase;
     font-weight: 700;
 }

 .banner-title {
     color: var(--navy);
     font-size: 40px;
     margin: 3px 0 5px;
     font-weight: bold;
 }

 .banner-sub {
     color: #76808a;
     font-size: 16px;
 }

 .resource-btn {
     justify-self: center;
     border: 1px solid #d9b77a;
     background: #fffaf2;
     color: #b67a18;
     font-size: 16px;
     font-weight: 700;
     letter-spacing: .08em;
     padding: 7px 14px;
     border-radius: 3px;
 }

 @media(max-width:900px) {
     .top-grid {
         grid-template-columns: 1fr
     }

     .progress-card {
         grid-template-columns: 120px 1fr
     }

     .bottom-banner {
         grid-template-columns: 190px 1fr
     }

     .resource-btn {
         grid-column: 2;
         margin: 0 0 16px
     }
 }

 @media(max-width:640px) {
     .page {
         width: 100%;
         margin: 0;
         border: 0
     }

     .content {
         padding: 12px
     }

     .section-head {
         align-items: center
     }

     .section-title {
         font-size: 21px
     }

     .filter-select {
         min-width: 140px
     }

     .bottom-banner {
         grid-template-columns: 1fr;
         background: #f8f2e8
     }

     .banner-art {
         display: none
     }

     .resource-btn {
         grid-column: 1;
         margin-bottom: 15px
     }
 }


 .top-grid .card.progress-card {
     width: 100%;
     display: flex !important;
     flex-direction: row;
 }

 .count-box {
     text-align: left;
 }

 :root {
     --navy: #22406b;
     --gold: #C69135;
 }


 /* notes csssssssssssssssssssssssssssssssssssssssssssssssssssss */


 p,
 small,
 span,
 button,
 input,
 textarea,
 .note-info p,
 .action-card span,
 .question-desc,
 .last-saved,
 .auto-save,
 .download-area p {
     font-size: 16px;
 }

 .notes-wrapper {
     width: 100%;
     min-height: 100vh;
     display: grid;
     grid-template-columns: 390px minmax(0, 1fr);
     background: #fff;
 }

 /* LEFT */
 .notes-sidebar {
     background: #faf8f3;
     border-right: 1px solid #e4ded2;
     display: flex;
     flex-direction: column;
 }

 .add-note {
     margin: 14px 18px 10px;
     height: 43px;
     border: 0;
     border-radius: 5px;
     background: #c77f16;
     color: #fff;
     font-family: inherit;
     font-weight: 700;
     letter-spacing: .3px;
     cursor: pointer;
 }

 .note-actions {
     display: grid;
     grid-template-columns: 1fr 1fr;
     border-bottom: 1px solid #e5dfd4;
 }

 .action-card {
     min-height: 98px;
     padding: 15px 10px 13px;
     text-align: center;
     border-right: 1px solid #e5dfd4;
 }

 .action-card:last-child {
     border-right: 0;
 }

 .action-icon {
     width: 30px;
     height: 30px;
     margin: 0 auto 7px;
     border: 2px solid #667085;
     border-radius: 3px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #667085;
    



 }

 .action-card strong {
     display: block;
     font-size: 16px;
     color: #06264A;
     margin-bottom: 3px;
 }

 .action-card span {
     color: #06264A;
     line-height: 1.25;
 }

 .notes-tabs {
     display: flex;
     align-items: flex-end;
     border-bottom: 1px solid #ddd7cc;
     padding: 0 10px;
 }

 .notes-tab {
     flex: 1;
     min-width: 0;
     padding: 12px 5px 10px;
     border: 0;
     border-bottom: 3px solid transparent;
     background: transparent;
     font-family: inherit;
     color: #625d57;
     white-space: nowrap;
     cursor: pointer;
 }

 .notes-tab.active {
     color: #bd7413;
     font-weight: 700;
     border-bottom-color: #bd7413;
 }

 .search-box {
     position: relative;
     margin: 12px 14px 8px;
 }

 .search-box .search-icon {
     position: absolute;
     left: 13px;
     top: 50%;
     transform: translateY(-50%);
     color: #77716a;
    



 }

 .search-box input {
     width: 100%;
     height: 41px;
     padding: 0 14px 0 39px;
     border: 1px solid #d7d1c6;
     border-radius: 8px;
     background: #fff;
     outline: none;
     font-family: inherit;
     color: #555;
 }

 .note-list {
     padding: 0 13px;
 }

 .note-item {
     min-height: 67px;
     display: grid;
     grid-template-columns: 63px 1fr 18px;
     gap: 11px;
     align-items: center;
     padding: 8px 5px;
     border-bottom: 1px solid #ebe6dc;
     position: relative;
     cursor: pointer;
 }

 .note-item.active {
     background: #fff8eb;
 }

 .note-item.active::after {
     content: "";
     position: absolute;
     right: -13px;
     top: 0;
     width: 4px;
     height: 100%;
     background: #c6801a;
 }

 .note-thumb {
     width: 63px;
     height: 44px;
     border-radius: 3px;
     object-fit: cover;
     display: block;
 }

 .note-info h4 {
     font-size: 16px;
     line-height: 1.15;
     color: #06264A;
     margin-bottom: 4px;
     font-weight: bold;
 }

 .note-info p {
     color: #06264A;
     line-height: 1.2;
 }

 .note-arrow {
     font-size: 22px;
     color: #b3aca2;
 }

 .sidebar-quote {
     padding: 19px 16px;
     min-height: 100px;
     border-top: 1px solid #e4ded2;
     text-align: center;
     background: #faf8f3;
 }

 .sidebar-quote p {
     font-style: italic;
     color: #06264A;
     font-size: 20px;
     line-height: 1.35;
     font-weight: bold;
 }

 .sidebar-quote small {
     color: #a59c8e;
     font-size: 20px;
 }

 /* RIGHT */
 .notes-content {
     min-width: 0;
     background: #fff;
     display: flex;
     flex-direction: column;
 }

 .content-inner {
     flex: 1;
     padding: 19px 28px 12px;
     box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
     border-radius: 0px 10px 0px 0;
 }

 .content-header {
     display: flex;
     gap: 15px;
     align-items: center;
     padding-bottom: 14px;
     border-bottom: 1px solid #ece7df;
 }

 .header-thumb {
     width: 79px;
     height: 58px;
     border-radius: 3px;
     object-fit: cover;
 }

 .header-text {
     flex: 1;
 }

 .header-text p {
     color: #C98A18;
     line-height: 1.25;
     margin-bottom: 0;
     font-weight: bold;
     font-size: 18px;
 }

 .header-text h1 {
     font-size: 22px;
     font-weight: 600;
     line-height: 1.15;
     color: #06264A;
     margin: 3px 0 4px;
 }

 .header-actions {
     display: flex;
     align-self: flex-start;
     gap: 7px;
 }

 .icon-btn {
     min-height: 36px;
     padding: 0 14px;
     border: 1px solid #ddd7cf;
     border-radius: 5px;
     background: #fff;
     font-family: inherit;
     color: #55514c;
     cursor: pointer;
 }

 .more-btn {
     width: 40px;
     padding: 0;
 }

 .question-block {
     padding: 15px 0 13px;
     border-bottom: 1px solid #eee9e1;
 }

 .question-block h3 {
     font-size: 20px;
     margin-bottom: 3px;
     color: #06264A;
     font-weight: bold;
 }

 .question-desc {
     color: #06264A;
     margin-bottom: 7px;
     line-height: 1.35;
 }

 .answer-box {
     width: 100%;
     min-height: 65px;
     border: 1px solid #d9d4cc;
     border-radius: 2px;
     background: #fff;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .025);
     resize: none;
     padding: 12px 14px;
     font-family: Georgia, "Times New Roman", serif;
     font-size: 16px;
     line-height: 1.4;
     color: #514d48;
     outline: none;
 }

 .answer-box:focus {
     border-color: #c7a06b;
 }

 .save-row {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 24px;
     padding: 12px 0 1px;
     color: #06264A;
 }

 .auto-save {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .check-circle {
     width: 18px;
     height: 18px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #7ca53f;
     color: #fff;
    



     font-size: 11px;
 }

 .bottom-bar {
     min-height: 108px;
     display: grid;
     grid-template-columns: .6fr 1fr 0;
     align-items: center;
     border-top: 1px solid #e7e1d6;
     background: #faf8f3;
 }

 .bottom-quote {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     border-right: 1px solid #e6dfd2;
     padding: 14px 18px;
 }

 .bottom-quote p {
     font-size: 17px;
     line-height: 1.35;
     color: #596176;
     font-style: italic;
 }

 .bottom-quote small {
     margin-top: 5px;
     color: #a39a8b;
 }

 .notes-matter {
     padding: 18px 35px;
     position: relative;
 }

 .notes-matter h4 {
     font-size: 16px;
     color: #c48326;
     letter-spacing: 1px;
     margin-bottom: 5px;
 }

 .notes-matter h4 {
     font-size: 16px;
     color: #C98A18;
     letter-spacing: 1px;
     margin-bottom: 5px;
     font-weight: bold;
 }

 .download-area {
     padding: 16px 19px;
     text-align: center;
 }

 .download-btn {
     width: 50%;
     padding: 12px;
     border: 1px solid #d1ad76;
     border-radius: 4px;
     background: #fff;
     color: #C98A18;
     font-family: inherit;
     font-weight: 700;
     cursor: pointer;
     margin: auto;
     text-align: center;
     margin-bottom: 10px;
 }

 .download-area p {
     text-align: center;
     color: #06264A;
     margin-top: 5px;
     line-height: 1.25;
     font-weight: bold;
 }

 @media(max-width:1000px) {
     .notes-wrapper {
         grid-template-columns: 320px minmax(0, 1fr);
     }

     .bottom-bar {
         grid-template-columns: 1fr;
     }

     .bottom-quote {
         border-right: 0;
         border-bottom: 1px solid #e6dfd2;
     }
 }

 @media(max-width:768px) {
     .notes-wrapper {
         display: block;
     }

     .notes-sidebar {
         border-right: 0;
     }

     .sidebar-quote {
         display: none;
     }

     .content-inner {
         padding: 16px;
     }

     .content-header {
         flex-wrap: wrap;
     }

     .header-actions {
         width: 100%;
         justify-content: flex-end;
     }
 }

 .notesfootercontent {
     display: flex;
     justify-content: space-between;
     background: #faf8f3;
 }

 .notes-matter p {
     color: #06264A;
     font-weight: bold;
     font-size: 17px;
 }


 /* support cssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */



 p,
 small,
 label,
 input,
 select,
 textarea,
 button,
 .accordion-body {
     font-size: 16px;
     line-height: 1.45
 }

 .help-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     border-bottom: none;
     margin-bottom: 20px;
     gap: 20px;
 }

 .help-card {
     min-height: 190px;
     padding: 34px 25px 28px;
     text-align: center;
     border-right: none;
     background: #fff;
     box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
     border-radius: 5px;
 }

 .help-card:last-child {
     border-right: 0
 }

 .help-icon {
     width: 52px;
     height: 52px;
     margin: 0 auto 17px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f5f0e7;
     color: #23324a;
     font-size: 25px
 }

 .help-card h3 {
     font-size: 22px;
     line-height: 1.2;
     margin-bottom: 8px;
     color: #06264A;
     font-weight: bold;
 }

 .help-card p {
     color: #696d75;
     max-width: 310px;
     margin: auto
 }

 .content-wrap {
     display: grid;
     grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
     gap: 24px;
     padding: 0;
 }

 .panel {
     background: #fff;
     border: 1px solid #ece7dd;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .03)
 }

 .panel-head {
     padding: 18px 20px 12px;
     border-bottom: 1px solid #ece7dd
 }

 .panel-head h2 {
     font-size: 24px;
     color: #06264A;
     line-height: 1.2;
     font-weight: 800;
 }

 .support-form {
     padding: 18px 20px 20px
 }

 .form-note {
     text-align: right;
     color: #8a857d;
     margin-bottom: 8px
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px
 }

 .form-group {
     margin-bottom: 14px
 }

 .form-group label {
     display: block;
     font-weight: 700;
     color: #06264A;
     margin-bottom: 6px
 }

 .req {
     color: #b55e45
 }

 .form-control {
     width: 100%;
     height: 44px;
     border: 1px solid #d9d4cb;
     border-radius: 3px;
     background: #fff;
     padding: 0 12px;
     font-family: inherit;
     color: #4d5157;
     outline: none
 }

 .message-control {
     width: 100%;
     min-height: 112px;
     border: 1px solid #d9d4cb;
     border-radius: 3px;
     background: #fff;
     padding: 11px 12px;
     resize: vertical;
     font-family: inherit;
     color: #4d5157;
     outline: none
 }

 .form-bottom {
     display: flex;
     align-items: center;
     gap: 18px;
     flex-wrap: wrap
 }

.send-btn {
    min-width: 205px;
    height: auto;
    border: 0;
    border-radius: 3px;
    background: #c67d16;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 8px;
}

 .response-note {
     color: #06264A;
     margin-bottom: 0;
     font-weight: 700;
 }

 .quick-help {
     padding-bottom: 10px
 }

 .panel-head p {
     margin-bottom: 0;
 }



 .footer-help {
     min-height: 122px;
     border-top: none;
     background: #faf8f3;
     display: grid;
     grid-template-columns: 1fr 1.15fr;
     align-items: stretch;
     margin: 20px 0 0;
 }

 .footer-quote {
     padding: 23px 30px;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-right: 1px solid #e5dfd4
 }

 .footer-quote p {
     font-size: 19px;
     line-height: 1.4;
     color: #06264A;
     font-style: italic;
     font-weight: bold;
 }

.footer-quote small {
    display: block;
    margin-top: 7px;
    color: #c67d16;
    font-size: 18px;
}

 .footer-helpbox {
     position: relative;
     padding: 22px 34px 22px 95px;
     display: flex;
     flex-direction: column;
     justify-content: center
 }

 .footer-leaf {
     position: absolute;
     left: 30px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 46px;
     color: #c78c32
 }

.footer-helpbox h4 
{
    font-size: 16px;
    letter-spacing: 1px;
    color: #c28227;
    margin-bottom: 6px;
    font-weight: 700;
}

 .footer-helpbox p {
     color: #06264A;
     max-width: 650px;
     font-weight: 600;
 }

 @media(max-width:900px) {
     .help-cards {
         grid-template-columns: 1fr
     }

     .help-card {
         border-right: 0;
         border-bottom: 1px solid #ece8df
     }

     .content-wrap {
         grid-template-columns: 1fr;
         padding: 18px
     }

     .footer-help {
         grid-template-columns: 1fr
     }

     .footer-quote {
         border-right: 0;
         border-bottom: 1px solid #e5dfd4
     }
 }

 @media(max-width:600px) {
     .form-row {
         grid-template-columns: 1fr;
         gap: 0
     }

     .help-card {
         padding: 26px 18px
     }

     .support-form,
     .panel-head {
         padding-left: 15px;
         padding-right: 15px
     }

     .footer-helpbox {
         padding: 22px 20px 22px 68px
     }

     .footer-leaf {
         left: 19px
     }
 }

 .accordion-button {
     color: #06264A !important;
 }

 .accordion-button {
     color: #06264A !important;
     font-weight: 700;
 }


 .accordion-button:not(.collapsed) {
     background-color: #faf8f3 !important;
     box-shadow: none !important;
 }

 /* traning details csssssssssssssssssssssssssssssssssssssssssssssssssssss */


p, small, label, button, .form-check-label {
    font-size: 16px;
    line-height: 1.45;
    color: #06264A;
    font-weight: 600;
}

 .main-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.72fr) minmax(320px, .78fr);
     min-height: 100vh
 }

 .left-column {
     padding: 16px 18px 20px;
     border-right: 1px solid #ece7dd
 }

 .right-column {
     display: flex;
     flex-direction: column;
     background: #fff
 }

 .video-wrap {
     border: 1px solid #d9d4c9;
     background: #111;
     box-shadow: 0 1px 4px rgba(0, 0, 0, .06)
 }

 .training-video {
     display: block;
     width: 100%;
     aspect-ratio: 16/8.6;
     object-fit: cover;
     background: #111
 }

 .before-section {
     padding-top: 16px
 }

 .section-title {
     font-size: 25px;
     font-weight: 700;
     color: #06264A


;
     margin: 0 0 5px
 }

 .section-subtitle {
     color: #06264A;
     margin: 0 0 12px
 }

 .reflection-list {
     border-top: 1px solid #ece7dd
 }

 .reflection-item {
     display: grid;
     grid-template-columns: 34px 1fr 24px;
     gap: 12px;
     align-items: center;
     padding: 14px 8px;
     border-bottom: 1px solid #ece7dd;
     color: #425067
 }

.reflection-num {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #C98A18;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
   



}

.reflection-text strong {
    display: block;
    color: #06264A;
    font-size: 18px;
    margin-bottom: 2px;
}

.reflection-text span {
    color: #06264A;
    font-size: 17px;
}

.reflection-arrow {
    color: #06264A;
    font-size: 32px;
}

.notes-btn {
    width: 30%;
    height: 48px;
    margin-top: 14px;
    border: 1px solid #d9b47b;
    background: #fff;
    color: #b8781c;
    font-weight: 700;
    border-radius: 5px;
}

 .notes-btn:hover {
     background: #fffaf1
 }

.complete-box {
    margin-top: 0;
    padding: 0;
    border-top: none;
    border-right: 1px solid #ece7dd !important;
    border-left: 1px solid #ece7dd;
    padding: 0 40px;
}

 .complete-box h3 {
     font-size: 20px;
     margin: 0 0 12px;
     color: #06264A;
 }

.complete-row {
    display: block;
    align-items: center;
    gap: 15px;
}
.complete-check {
    flex: 1;
    min-height: 47px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid #ddd8ce;
    background: #fff;
    margin-bottom: 15px;
}

 .complete-check .form-check {
     margin: 0
 }

.next-btn {
    min-width: auto;
    height: auto;
    border: 0;
    border-radius: 2px;
    background: #d8d8d4;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 20px;
}
 .next-btn.enabled {
     background: #c77e16
 }

 .about-block {
     padding: 21px 20px 18px;
     border-bottom: 1px solid #ece7dd
 }

.about-block h2 {
    font-size: 23px;
    color: #06264A


;
    margin: 0 0 11px;
    font-weight: bold;
}

.about-block p {
    color: #06264A;
    margin-bottom: 13px;
    font-weight: 600;
}
.quote-box {
    border-left: 3px solid #c9882d;
    background: #fbf8f1;
    padding: 11px 13px;
    color: #06264A;
    font-style: italic;
    font-weight: 600;
}

 .info-list {
     padding: 8px 20px 12px
 }

.info-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 22px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee9e0;
}

.info-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #06264A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06264A;
   



    font-weight: 700;
    font-size: 30px;
}

.info-item strong {
    display: block;
    font-size: 18px;
    color: #06264A;
    margin-bottom: 1px;
}

.info-item span {
    color: #06264A;
    font-size: 17px;
}

 .side-actions {
     padding: 3px 20px 18px
 }

 .primary-side-btn,
 .secondary-side-btn {
     width: 100%;
     height: 48px;
     font-weight: 700;
     border-radius: 2px
 }

.primary-side-btn {
    border: 1px solid #C98A18;
    background: #C98A18;
    color: #fff;
    margin-bottom: 9px;
}

.secondary-side-btn {
    border: 1px solid #C98A18;
    background: #fff;
    color: #C98A18;
}
.next-up {
    margin-top: auto;
    border-top: none;
    background: #fcfaf6;
    padding: 23px 20px;
    height: 100%;
}
.next-up h4 {
    font-size: 18px;
    margin: 0 0 10px;
    color: #06264A;
    font-weight: 600;
}

 .next-card {
     display: grid;
     grid-template-columns: 82px 1fr 18px;
     gap: 11px;
     align-items: center
 }

.next-thumb {
    width: 82px;
    height: 55px;
    object-fit: cover;
    border-radius: 5px;
}

.next-text small {
    display: block;
    color: #C98A18;
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: bold;
}

.next-text strong 
{
    font-size: 16px;
    color: #06264A;
}

.next-arrow 
{
    color: #06264A;
    font-size: 42px;
}

 @media(max-width:900px) {
     .main-grid {
         grid-template-columns: 1fr
     }

     .left-column {
         border-right: 0
     }

     .complete-row {
         flex-direction: column;
         align-items: stretch
     }

     .next-btn {
         width: 100%
     }
 }


.headernav ul li a 
{
    color: #fff;
    text-decoration: none;
}

.headernav ul li 
{
    padding-left: 30px;
}

.headernav 
{
    margin-right: 70px;
}

.accordion-body {
    font-weight: 700 !important;
}

.form-control {
    font-weight: 600 !important;
}

.video-wrap iframe {
    width: 100%;
    height: 300px;
}




.video-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.video-wrap iframe,
.video-wrap .video-poster {
    width: 100%;
    height: 100%;
}

.video-poster {
    position: relative;
    cursor: pointer;
}

.video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    background: rgb(0 44 88);
    color: #fff;
    font-size: 20px;
    line-height: 55px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.left-column .video-wrap iframe {
    width: 100%;
    height: 445px !important;
}

.videotext .btn 
{
    background: #c69135;
    padding: 3px 10px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
}

.traning-footer {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr 0.9fr;
    border-top: 1px solid #c98a18;
    padding-top: 20px;
    gap: 0px;
}

.next-text p 
{
    margin-bottom: 0;
}

.traning-footer a {
    text-decoration: none;
}


.mobile-menu-btn {
    display: none;
    background: transparent;
    border: 0;
    padding: 5px;
    font-size: 26px;
    cursor: pointer;
    color: #000;
}

/* Overlay */
.sidebar-overlay {
    display: none;
}


@media (max-width:1100px)
{
    .banner-copy {
        padding: 10px 14px 10px 90px;
    }
}


@media (max-width:991px)
{
    .notes-btn {
    width: 100%;
}

.banner-copy {
    padding: 0;
    margin-bottom: 30px;
}

.bottom-banner {
    display: block;
    text-align: center;
}

.bottom-banner {
    background-position: left;
}

.banner-kicker {
    color: #ffffff;
}

.banner-title {
    color: #ffffff;
}

.banner-sub {
    color: #ffffff;
    font-size: 18px;
}

.headernav {
    margin-right: 70px;
    display: none;
}
.section-title {
    font-size: 23px;
}

.bottom-bar {
    padding: 30px;
}
.download-area {
    padding: 0;
    text-align: left;
}
.notes-matter {
    padding: 0;
    position: relative;
}

.download-area p {
    text-align: left;
}

.content-wrap {
    grid-template-columns: 1fr;
    padding: 0 !important;
}

.panel-head h2 {
    font-size: 22px;
}
}

@media (max-width: 767px) {

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: 15px;
        z-index: 1002;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 260px;
        height: 100vh;
        background: #fff;
        z-index: 1001;
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    .sidebar.active {
        left: 0;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(198 145 53 / 35%);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    body.menu-open {
        overflow: hidden;
    }

    .shell {
        display: block;
    }

    .main {
        width: 100%;
        margin-left: 0;
    }

   .nav a svg {
    stroke: rgb(0 44 88);
}

    .nav a {
    color: #002c58;
    font-size: 16px;
    font-weight: 600;
}

#mobileMenuBtn i {
    color: #ffffff;
}
.headernav {
    margin-right: 70px;
    display: none;
}

.nav .logout {
    margin-top: auto;
    color: #002c58;
}

.nav a.active svg {
    stroke: rgb(198 145 53);
}

.videogallery-content {
    grid-template-columns: repeat(2, 1fr);
}

.traning-dash-title {
    grid-column: 1 / -1;
}

.header-block {
    background-image: none !important;
}

.traning-footer {
    grid-template-columns: 1fr;
}

.complete-box {
    border-right: none !important;
    border-left: none;
    padding: 0 0px;
}

.traning-footer {
    border-top: none !important;
}

.left-column {
    padding: 16px 0px 20px;
    border-right: none;
}

.about-block {
    padding: 21px 0px 18px;
    border-bottom: 1px solid #ece7dd;
}

.info-list {
    padding: 8px 0px 12px;
}

.info-item:last-child {
    border-bottom: none;
}

.side-actions {
    padding: 10px 0px 18px;
}

.hero-inner {
    justify-content: center;
}

.banner-kicker {
    color: #c98a18;
}

.banner-title {
    color: #002c58;
}

.banner-sub {
    color: #002c58;
    font-size: 18px;
}

.download-btn {
    width: 100%;
}

.save-row {
    display: block;
    gap: 24px;
    padding: 0px 0 0px;
}


.count-box {
    text-align: center;
}

.progress-card .eyebrow {
    margin: 0 0 5px;
}

.progress-ring {
    margin-right: 0;
    margin-bottom: 10px;
}


.bottom-banner:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: #0000008a;
    left: 0;
    top: 0;
}

.bottom-banner {
    background-image: url(../image/progress-bottom.webp) !important;
    background-size: cover !important;
    background-position: left;
    position: relative;
    border-radius: 10px;
    padding: 30px 0;
}

.banner-kicker {
    color: #ffffff;
    z-index: 9;
    position: relative;
}

.banner-title {
    color: #ffffff;
    z-index: 9;
    position: relative;
}

.banner-sub {
    color: #ffffff;
    font-size: 18px;
    z-index: 9;
    position: relative;
}

.resource-btn {
    z-index: 9;
    position: relative;
}

.banner-copy {
    width: 90%;
}

.content {
    padding: 0 !important;
}

.quote-card {
    margin: 0 0 20px !important;
}

.quote-icon {
    display: none;
}

.quote {
    margin: 0px 8px 3px;
}
.eyebrow:after {
    left: 50%;
    transform: translate(-50%, 0px);
}

.top-grid .card.quote-card {
    justify-content: center;
}

}

@media (max-width:640px)
{
    .main 
    { 
        padding: 0;
    }
    .hero h1 
    {
        font-size: 35px;
    }

    .progress-card {
        display: block;
    }

    .videogallery-box {
        padding: 20px;
    }
.hero h1 {
    font-size: 30px;
}

.traning-dash-title h4 {
    color: #fff;
    font-size: 18px;
}
.traning-dash-title h3 {
    color: #fff;
    font-size: 20px;
}
.tags span {
    font-size: 14px;
}

.nav .logout {
    margin-top: 0;
    color: #002c58;
}

.section-title {
    font-size: 23px;
}

.complete-box {
    margin: 20px 0px;
}

.banner-title {
    font-size: 25px;
}

.banner-copy {
    padding: 0;
    margin-bottom: 15px;
}


.top-grid .card.progress-card {
    display: block !important;
}

.circle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring span {
    font-size: 23px;
}

.progress-ring {
    width: 100px;
    height: 100px;
}

}

@media (max-width:480px)
{
    .hero h1 {
    font-size: 25px;
}

.admin-content {
    padding: 26px 15px 40px;
}
.videogallery-content {
    grid-template-columns: repeat(1, 1fr);
}
.footer .tags {
    display: block;
}
.tags span {
    font-size: 14px;
    display: block;
}

.top-grid .card.progress-card {
    width: 100%;
    display: block;
    flex-direction: row;
}

.count-box {
    text-align: center;
    margin: 30px 0 10px;
}

.progress-card .eyebrow {
    margin: 0 0 5px;
}

.eyebrow:after {
    left: 50%;
    transform: translate(-50%, 0px);
}

.progress-ring {
    margin-right: 0;
}
.count-box {
    text-align: center;
    margin: 10px 0 10px;
}
}