/* elearning.html – original styles extracted from the HTML. */
:root{
      --cmpat-blue:#0078D2;
      --cmpat-blue-dark:#0078D2;
      --cmpat-border:#0078D2;
      --cmpat-muted:#6b7280;
      --cmpat-bg:#ffffff;
      --cmpat-soft:#f6f7f9;
    }
    body{
      background:var(--cmpat-bg) !important;
      color:#111827 !important;
    }
    a{ color:var(--cmpat-blue); }
    a:hover{ color:var(--cmpat-blue-dark); }

    /* Container fallback (in case ../style.css defines something unexpected) */
    .cmpat-wrap{
      width:97%;
      padding-left:1%;
      padding-right:1%;
    }
    .material-symbols-outlined{
      font-size:36px;
      font-weight:normal;
      color:#0078D2;
      vertical-align:middle;
    }

    /* App-like header */
    .cmpat-header{
      background:#ffffff;
      border-bottom-color:#0078D2;
      border-bottom-width:5px;
      border-bottom-style:solid;
    }
    .cmpat-header-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:5px;
      padding:0px 0;
    }
    .cmpat-logo{
      height:85px;
      width:auto;
      display:block;
    }

    /* Page title */
    .cmpat-title{
      margin: 5px 0 8px 0;
      font-size: 2rem;
      letter-spacing: 0.2px;
    }

    /* Tabs */
    .cmpat-tabs{
      display:flex; flex-wrap:wrap; gap:8px;
      margin: 0 0 16px 0;
    }
    .cmpat-tab{
      text-decoration:none;
      padding:8px 12px;
      border:1px solid var(--cmpat-blue);
      border-radius:10px;
      background:var(--cmpat-soft);
      color:var(--cmpat-blue);
      font-weight:bold;
    }
    .cmpat-tab:hover{ font-weight:bold; }
    .cmpat-tab.active{
      background:var(--cmpat-blue);
      border-color:var(--cmpat-blue);
      color:#ffffff;
      font-weight:bold;
    }

    /* Cards + layout */
    .cmpat-grid{
      display:grid;
      grid-template-columns: 1.6fr 0.4fr;
      gap:10px;
      align-items:start;
    }
    @media (max-width: 900px){
      .cmpat-grid{ grid-template-columns:1fr; }
    }
    .cmpat-card{
      border:1px solid var(--cmpat-border);
      border-radius:10px;
      padding:10px 10px;
      background:#ffffff;
      box-shadow: 0 1px 0 rgba(17,24,39,0.02);
    }
    .cmpat-quote{
      margin-top:12px;
      padding:12px 14px;
      border-left:4px solid var(--cmpat-blue);
      background:linear-gradient(0deg, rgba(11,94,215,0.06), rgba(11,94,215,0.02));
      border-radius:12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
    .cmpat-cta{
      display:inline-block;
      margin-top:12px;
      padding:10px 14px;
      border-radius:12px;
      background:var(--cmpat-blue);
      color:#ffffff;
      text-decoration:none;
      font-weight:700;
    }
    .cmpat-cta:hover{ background:var(--cmpat-blue-dark); color:#ffffff; }   
	.cmpat-courseCatBtn{
      display:inline-block;
      margin-top:12px;
      padding:10px 14px;
      border-radius:12px;
      background:#198754;
      color:#ffffff;
      text-decoration:none;
      font-weight:700;
    }
    .cmpat-courseCatBtn:hover{ background:#198754; color:#ffffff; }  

    /* Footer */
    .cmpat-foot{
      margin: 26px 0 20px 0;
      color: var(--cmpat-muted);
      font-size: 0.92rem;
    }