/* CSstyles.css - shared styles for both  department and survey pages */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
  /* GMU colors */
  :root{
    --gmu-green: #006633;
    --gmu-yellow: #FFCC33;
    --page-bg: #e0e0e0; /* light gray body background */
    --box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    --required-color: #cc0000;
    --font-stack: "Quicksand", sans-serif;
    
  }

  html,body{
    margin:0;
    padding:0;
    font-family: var(--font-stack)!important;
    font-weight: 450 !important;
    background: var(--page-bg) !important;
    color: #222;
  }

  .my-container{
    max-width: 100vh !important; 
    margin: 0px auto; 
    background: #fff;
    padding: 25px !important;
    border-radius: 0px;
    box-shadow: var(--box-shadow);
  }

/* header box styling , common for department and survey pages */
    .header-box{
      border: 5px solid var(--gmu-green);
      padding: 16px;
      border-radius: 6px;
      box-shadow: 3px 5px 18px 10px rgba(0, 0, 0, 0.15);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,245,245,0.95));
      margin-bottom: 18px;
      display: flex;
      flex-direction: column;
    }

    #CSLogo{
      width:45%;
      height:12.9%;
    }
    #menu{
        display: flex;
        flex-direction: row;
        text-decoration: none;
        width: 100%;
        margin-left: auto;
        margin-top: auto;
        align-items:flex-end;
        padding-left: auto;
        max-height: fit-content;
        gap: 5%;
        margin-bottom: 1%;
    }
    #MenuEle{
      justify-content: flex-end !important;
    }
    #menu li{
      padding: 0 5px 0 0px;
      list-style-type: none;
      font-size: 20px;
    }

/* footer styling , common for department and survey pages*/
    footer{
      margin-top:18px;
      font-size:13px;
      color:#555;
      text-align:center;
    }

/* Department Page Styling*/
    /* h1 is GMU green */
    h1{
      color: var(--gmu-green) !important;
      margin:0 0 6px 0;
      font-family: 'Poppins',sans-serif ;
      font-weight: bold !important;
      font-size: calc(1.5rem + 0.5vw)!important;
    }
    h2,h3,h4{
      font-family: 'Poppins',sans-serif !important;
      font-weight: 700 !important; 
    }
    h2{
      font-size: calc(1.1rem + 0.5vw)!important;
    }
    h3{
      font-size: calc(0.8rem + 0.5vw)!important;
    }
    h4{
      font-size: calc(0.5rem + 0.5vw)!important;
    }

    /* table styles */
    .course-table{
      width:80%;
      border-collapse:collapse;
      margin-bottom:16px;
    }
    .course-table th, .course-table td{
      border:1px solid #ddd;
      padding:8px;
      text-align:left;
      width:50%;
    }
    .course-table th{
      background: linear-gradient(90deg, rgba(2, 191, 97, 0.06), rgba(0,102,51,0.03));
      font-family: 'Poppins',sans-serif;
      background-color:#006633;
      color: #ddd;
    }
    .course-table td{
      background-color:#e1fff1;
      color: #002e17;
    }

    .btn{
      background: var(--gmu-yellow) !important;
      color: #000000 !important;
      padding:10px 16px !important;
      border:none;
      border-radius:6px !important;
      text-decoration: none;
      font-family: "Poppins",sans-serif !important;
      font-weight:700 !important;
      cursor:pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    }

/* Survey Page Form Styling */
    .Thank{
      background: linear-gradient(90deg, rgba(0,102,51,0.06), rgba(255,204,51,0.06));
      display:inline-block;
      border:1px solid rgba(0,0,0,0.05);
    }
    .greeting{
      font-family: "Poppins",sans-serif !important;
      font-weight:700 !important;
      color: #001105;
      font-size: 1.2vw;
    }
    .greeting a{
      text-decoration: none;
      color:#006633;
    }
    /* layout helpers */
    .row{
      display:flex;
      gap: 16px;
      flex-wrap:wrap;
    }
    .col-1 { flex: 1 1 280px; }
    .col-2 { flex: 2 1 580px; }
    #row {gap: 0 !important;} 

    /* form styles */
    form label{
      display:block;
      margin-bottom:6px;
      font-weight:600;
    }

    input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
      width:100%;
      padding:8px 10px;
      border:1px solid #ccc;
      border-radius:4px;
      box-sizing: border-box;
      font-size:14px;
      margin-bottom:12px;
    }
    input[type="date"]{
      width:30%;
      padding:8px 10px;
      border:1px solid #ccc;
      border-radius:4px;
      box-sizing: border-box;
      font-size:14px;
      margin-bottom:12px;
    }
    #city, #state{
      cursor: pointer;
    }
    .checkbox, .radio{
      display:flex;
      gap:12px;
      flex-direction: row;
      flex-wrap:wrap;
      margin-bottom:12px;
    }

    .form-legend{
      font-weight:700;
      margin-top:8px;
      margin-bottom:8px;
    }
    #month{
      width:100%;
      padding:8px 10px;
      border:1px solid #ccc;
      border-radius:4px;
      box-sizing: border-box;
      font-size:14px;
      margin-bottom:12px;
    }

    /* submit button */
    .submit-btn{
      background: var(--gmu-yellow) !important;
      color: #000000 !important;
      padding:10px 16px !important;
      border:none;
      border-radius:6px !important;
      text-decoration: none;
      font-family: "Poppins",sans-serif !important;
      font-weight:700 !important;
      cursor:pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    }
    .reset-btn{
      background: var(--gmu-green) !important;
      color: #ffffff !important;
      padding:10px 16px !important;
      border:none;
      border-radius:6px !important;
      text-decoration: none;
      font-family: "Poppins",sans-serif !important;
      font-weight:700 !important;
      cursor:pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    }

    /* small helper for required explanation */
    .required-note{
      font-size: 13px;
      color: #666;
      margin-top:6px;
    }