body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #e9ecef;
    }

    /* Header */
    header {
        background-color: #004b87;
        color: white;
        padding: 15px 20px;
        font-size: 1.2em;
        font-weight: bold;
    }
    header span {
        color: #f7b500;
    }

    /* Main Content */
    .container {
        max-width: 900px;
        margin: 20px auto;
        background: #fff;
        padding: 20px;
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .welcome {
        background-color: #00a0e3;
        color: white;
        padding: 15px;
        font-size: 1.2em;
        border-radius: 6px 6px 0 0;
    }

    .info-box {
        background: #f5f5f5;
        padding: 15px;
        margin: 15px 0;
        font-size: 0.95em;
        border-radius: 4px;
    }

    /* Login Form */
    form {
        display: flex;
        flex-direction: column;
    }
    label {
        margin-top: 10px;
        font-weight: bold;
    }
    input {
        padding: 10px;
        font-size: 1em;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    button {
        background: #00a0e3;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 4px;
        margin-top: 15px;
        font-size: 1em;
        cursor: pointer;
    }
    button:hover {
        background: #008ec6;
    }
    .links {
        margin-top: 10px;
        font-size: 0.9em;
    }
    .links a {
        color: #00a0e3;
        text-decoration: none;
    }

    /* Footer */
    footer {
        background-color: #004b87;
        color: white;
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        font-size: 0.85em;
    }

    /* Responsive */
    @media (max-width: 600px) {
        .container {
            margin: 10px;
            padding: 15px;
        }
    }

 

 
    :root{
      --blue-1:#0b5b95;      /* deep blue */
      --blue-2:#0a7db0;      /* mid blue */
      --teal:#0a8080;        /* teal for announcement */
      --muted:#6b7280;
      --accent:#0076a8;
      --rounded:14px;
    }
    *{box-sizing:border-box}
    body{
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      margin:0;
      color:#16324a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      background: #ffffff;
      line-height:1.4;
    }

    /* Top utility row */
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 22px;
      border-bottom:1px solid #e6eef6;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .brand img{height:36px; width:auto; display:block}
    .utility{
      display:flex;
      gap:18px;
      align-items:center;
      color:var(--muted);
      font-size:14px;
    }
    .join-btn{
      background:var(--accent);
      color:#fff;
      border-radius:999px;
      padding:8px 14px;
      font-weight:600;
      text-decoration:none;
      box-shadow:0 3px 6px rgba(7,45,80,0.12);
    }

    /* Main nav */
    nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 22px;
      gap:12px;
    }
    .nav-left{display:flex; gap:18px; align-items:center;}
    .nav-menu{display:flex; gap:18px; align-items:center; font-weight:500; color:var(--muted)}
    .nav-menu > .item{position:relative; padding:8px 6px; cursor:pointer;}
    .nav-menu .dropdown{
      position:absolute;
      min-width:180px;
      top:42px;
      left:0;
      background:#fff;
      border-radius:8px;
      box-shadow: 0 8px 24px rgba(10,30,60,0.08);
      padding:8px 0;
      display:none;
      z-index:20;
    }
    .nav-menu .item:hover .dropdown{display:block;}
    .nav-menu .dropdown a{
      display:block;
      padding:8px 14px;
      color:#18324a;
      text-decoration:none;
      font-size:14px;
    }
    .nav-right{display:flex; gap:12px; align-items:center;}

    /* Announcement banner */
    .announce{
      background: linear-gradient(90deg,var(--teal), #0a6c80);
      color:#fff;
      padding:14px 22px;
      text-align:center;
      font-weight:600;
      font-size:15px;
      position:relative;
    }
    .announce a{ color: #fff; text-decoration:underline; font-weight:700; }
    .announce .close{
      position:absolute;
      right:14px;
      top:10px;
      background:transparent;
      color:#fff;
      border:0;
      font-size:20px;
      cursor:pointer;
    }

    /* Hero */
    .hero{
      display:grid;
      grid-template-columns: 1fr 480px;
      align-items:center;
      gap:0;
      padding:46px 42px;
      max-width:1200px;
      margin:0 auto;
    }
    .hero-left{
      padding-right:36px;
    }
    .eyebrow{
      color:var(--muted);
      font-weight:600;
      margin-bottom:8px;
      font-size:15px;
    }
    h1{
      font-family: "Montserrat", sans-serif;
      font-size:56px;
      line-height:0.95;
      margin:6px 0 18px;
      color:var(--blue-1);
      letter-spacing:-0.5px;
    }
    p.lead{
      color:#6b7280;
      max-width:640px;
      font-size:16px;
      margin-bottom:22px;
    }
    .cta{
      display:inline-block;
      background:var(--blue-2);
      color:white;
      padding:12px 18px;
      border-radius:999px;
      text-decoration:none;
      font-weight:700;
      box-shadow:0 6px 18px rgba(9,76,122,0.12);
    }

    .hero-right{
      position:relative;
      height:360px;
      border-radius:20px;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(90deg, rgba(10,80,120,0.06), rgba(0,0,0,0.02));
    }
    .hero-right img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* small visual callout */
    .together{
      font-weight:700;
      margin-top:18px;
      color:#213b50;
    }

    /* footer-ish bar to simulate site continuation */
    .blue-strip{
      background:var(--blue-1);
      color:#fff;
      padding:18px 22px;
      margin-top:28px;
      text-align:center;
      font-weight:700;
    }

    /* Responsive */
    @media (max-width:1000px){
      .hero{ grid-template-columns: 1fr 360px; padding:36px 20px;}
      h1{font-size:44px}
      .hero-right{height:320px}
    }
    @media (max-width:820px){
      .topbar{padding:10px 14px}
      nav{padding:10px 14px}
      .nav-menu{display:none}
      .nav-toggle{display:block}
      .join-btn{display:none}
      .hero{ grid-template-columns: 1fr; padding:28px 14px; gap:18px; }
      .hero-right{ order: -1; height:260px; }
      h1{font-size:34px}
    }

    /* Mobile nav drawer */
    .mobile-nav{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(6,12,25,0.6);
      z-index:60;
      padding:18px;
    }
    .mobile-nav .panel{
      width:92%;
      max-width:360px;
      background:#fff;
      border-radius:12px;
      padding:16px;
      height:100%;
      overflow:auto;
    }
    .mobile-links{display:flex;flex-direction:column;gap:6px;margin-top:12px}
    .mobile-links a{padding:10px;border-radius:8px;text-decoration:none;color:#153047;font-weight:600}
    .mobile-close{float:right;border:0;background:transparent;font-size:20px;cursor:pointer}
    .nav-toggle{display:none;background:transparent;border:0;font-size:20px;cursor:pointer;color:var(--muted)}




    img{
  height:150px;
  width:100%;
}

div [class^="col-"]{
  padding-left:5px;
  padding-right:5px;
}
.card{
  transition:0.5s;
  cursor:pointer;
}
.card-title{  
  font-size:15px;
  transition:1s;
  cursor:pointer;
}
.card-title i{  
  font-size:15px;
  transition:1s;
  cursor:pointer;
  color:#ffa710
}
.card-title i:hover{
  transform: scale(1.25) rotate(100deg); 
  color:#18d4ca;
  
}
.card:hover{
  /* transform: scale(1.05); */
  box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}
.card-text{
  height:80px;  
}

.card::before, .card::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale3d(0, 0, 1);
  transition: transform .3s ease-out 0s;
  background: rgba(255, 255, 255, 0.1);
  content: '';
  pointer-events: none;
}
.card::before {
  transform-origin: left top;
}
.card::after {
  transform-origin: right bottom;
}
 

.ck-editor__editable[role="textbox"] {
    min-height: 200px;
    resize: both;
}
.ck-content .image {
    max-width: 80%;
    margin: 20px auto;
}