/* ===== BODY BACKGROUND ===== */
  body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      /* min-height:100vh; */
      background: linear-gradient(-45deg, #11cba6, #0a63df, #2f2c64, #cb10dc);
      background-size: 400% 400%;
      animation: gradientBG 12s ease infinite;
  }

  @keyframes gradientBG {
      0% {
          background-position: 0% 50%;
      }

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }

  /* ===== HEADER ===== */
  .glass-header {
      width: 80%;
      max-width: 1700px;
      margin: 30px auto;
      padding: 20px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.1);
      webkit-backdrop-filter: blur(15px);
      /* text-align:center; */
      color: white;
      padding: 15px 20px;
      display: flex;

  }

  .subtitle {
      font-size: 20px;
      float: left;

  }

  .logo-area {
      display: flex;

  }

  .logo {
      width: auto;
      height: 90px;
      margin-right: 180px;
  }


  /* ===== CENTER WRAPPER ===== */
  .page-wrapper {
      display: flex;
      justify-content: center;
      padding: 40px 20px;
  }

  /* ===== GLASS CONTAINER ===== */
  .glass-container {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 650px;
      padding: 40px;
      border-radius: 25px;
      background: rgba(255, 255, 255, 0.1);
      webkit-backdrop-filter: blur(15px);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      color: white;
  }

  .page-title {
      text-align: center;
      font-size: 30px;
      padding: 0px;
      margin: 0px;
  }

  /* ===== ANIMATED BORDER ===== */
  .glass-container::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 25px;
      padding: 3px;
      background: linear-gradient(45deg, #00f5ff, #ff00c8, #00ff88, #00f5ff);
      background-size: 300% 300%;
      animation: borderMove 4s linear infinite;
      mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
  }

  @keyframes borderMove {
      0% {
          background-position: 0% 50%;
      }

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }

  h1 {
      text-align: center;
      margin-bottom: 30px;
  }

  /* ===== FORM ===== */
  .form-group {
      margin-bottom: 18px;
  }

  label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
  }

  select,
  input {
      width: 100%;
      padding: 12px;
      border-radius: 8px;
      border: none;
      outline: none;
      font-size: 14px;
  }

  .inputbtn {
      width: 96%;
      padding: 12px;
      border-radius: 8px;
      border: none;
      outline: none;
      font-size: 14px;
  }

  select:focus,
  input:focus {
      box-shadow: 0 0 0 2px #00f5ff;
  }


  /* ===== BUTTONS ===== */
  /* .button-group {
      display: flex;
      gap: 10px;
      margin-top: 15px;
      flex-wrap: wrap;
  }

  button {
      padding: 10px 18px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      color: white;
      font-weight: 500;
  }

  .btn-clear {
      background: #6c757d;
  }

  .btn-submit {
      background: #007bff;
  }

  .btn-page {
      display: inline-block;
      margin-top: 20px;
      background: #28a745;
      padding: 10px 18px;
      border-radius: 8px;
      text-decoration: none;
      color: white;
  } */




  /* button */
  .button-group {
      display: flex;
      gap: 10px;
      margin-top: 15px;
      flex-wrap: wrap;
  }

  .btn {
      margin: 10px 90px;
      padding: 15px 60px;
      border: none;
      outline: none;
      background-color: #333;
      color: #FFF;
      cursor: pointer;
      position: relative;
      z-index: 0;
      border-radius: 12px;
  }

  .btn::after {
      content: "";
      z-index: -1;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #333;
      left: 0;
      top: 0;
      border-radius: 10px;
  }

  /* glow */
  .btn::before {
      content: "";
      background: linear-gradient(45deg,
              #FF0000, #FF7300, #FFFB00, #48FF00,
              #00FFD5, #002BFF, #FF00C8, #FF0000);
      position: absolute;
      top: -2px;
      left: -2px;
      background-size: 600%;
      z-index: -1;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      filter: blur(8px);
      animation: glowing 20s linear infinite;
      transition: opacity .3s ease-in-out;
      border-radius: 10px;
      opacity: 0;
  }

  @keyframes glowing {
      0% {
          background-position: 0 0;
      }

      50% {
          background-position: 400% 0;
      }

      100% {
          background-position: 0 0;
      }
  }

  /* hover */
  .btn:hover::before {
      opacity: 1;
  }

  .btn:active:after {
      background: transparent;
  }

  .btn:active {
      color: #000;
      font-weight: bold;
  }







  /* ===== FOOTER ===== */
  .glass-footer {
      width: 90%;
      max-width: 1100px;
      margin: 40px auto;
      text-align: center;
      color: white;
  }




  /* ===== ADMISSION STUDENT DETAIL CARD ===== */

  .admission-detail-card {
      /* background: #ffffff; */
      padding: 35px;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      opacity: 0;
      transform: translateY(15px);
      transition: all 0.4s ease;
  }

  .admission-detail-card.show {
      opacity: 1;
      transform: translateY(0);
  }

  /* ===== STUDENT INFO ===== */

  .student-info {
      margin-bottom: 25px;
  }

  .info-row {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      flex-wrap: wrap;
  }

  .info-row span {
      color: #e9e2e2;
      font-weight: 500;
  }

  .info-row strong {
      color: #ffffff;
  }

  /* ===== ALERT BOX ===== */

  .alert-box {
      background: #fff3cd;
      color: #856404;
      padding: 15px;
      border-radius: 6px;
      margin: 20px 0;
      border-left: 5px solid #ffc107;
  }

  /* ===== BUTTONS ===== */

  .button-group {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 15px;
      justify-content: center;
  }

  .btn {
      text-decoration: none;
      border-radius: 6px;
      color: white;
      font-size: 14px;
      transition: 0.3s;
  }

  .btn.primary {
      background: #007bff;
  }

  .btn.primary:hover {
      background: #0056b3;
  }

  .btn.secondary {
      background: #6c757d;
  }

  .btn.secondary:hover {
      background: #545b62;
  }

  .btn.success {
      background: #28a745;
  }

  .btn.success:hover {
      background: #1e7e34;
  }

  /* ===== BACK LINK ===== */

  .back-link {
      margin-top: 10px;
  }

  .back-link a {
      text-decoration: none;
      color: #bfc8d2;
  }

  .back-link a:hover {
      text-decoration: underline;
  }




  /* =====================================
📱 Mobile (Up to 768px)
===================================== */
  @media (max-width:768px) {

      .glass-header {
          flex-direction: column;
          align-items: center;
          text-align: center;
          height: auto;
          max-width: 650px;
      }

      /* Header */
      .logo-area {
          flex-direction: column;
          align-items: center;
      }

      .inputbtn {
          width: 91%;
          padding: 12px;
          border-radius: 8px;
          border: none;
          outline: none;
          font-size: 14px;
      }

      .logo {
          height: 70px;
          width: 90%;
          margin-right: 0px;
          margin-bottom: 10px;

      }

      .subtitle {
          font-size: 12px;
          text-align: center;
          float: none;
      }


      .glass-container {
          padding: 25px;
      }


      button {
          width: 100%;
      }

        

      .btn::after {
          content: "";
          z-index: -1;
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #333;
          left: 0;
          top: 0;
          border-radius: 10px;
      }

  }

  /* =====================================
💻 Large Desktop (1025px and above)
===================================== */
  @media (min-width:1025px) {

      .glass-header {
          flex-direction: row;
          align-items: center;
          justify-content: center;
          text-align: center;
         
      }

      .logo {
          /* height: 200px;
          width: 100%;
          margin-right: 0; */
          /* margin-bottom: 10px; */

      }

      .subtitle {
          font-size: 18px;
          text-align: left;
          
      }

      .glass-container {
          max-width: 700px;
          padding: 30px;
      }

      .page-wrapper {
          padding: 30px 20px;
      }

      .button-group {
          justify-content: center;
      }

  }


  /* =====================================
📱 Tablet (769px – 1024px)
===================================== */
  @media (min-width:769px) and (max-width:1024px) {

      .glass-header {
          flex-direction: row;
          align-items: center;
          justify-content: center;
          text-align: center;
          max-width: 1100px;
          width: 90%;
      }

      .logo {
          height: 200px;
          width: 100%;
          margin-right: 0;
          margin-bottom: 10px;

      }

      .logo-area {
          flex-direction: column;
          align-items: center;
      }

      .subtitle {
          font-size: 28px;
          text-align: left;
      }

      .glass-container {
          max-width: 900px;
          padding: 30px;
      }

      .glass-container h1 {
          font-size: 32px;
      }

      input,
      select,
      button {
          width: 100%;
          padding: 35px;
          border-radius: 8px;
          border: none;
          outline: none;
          font-size: 40px;
          text-align: center;
      }

      .page-title {
          text-align: center;
          font-size: 58px;
          padding: 0px;
          margin: 20px;
      }

      label {
          font-size: 50px !important;
          margin: 20px 0px 20px 0px !important;
      }
      .inputbtn {
          width: 100%;
          padding: 35px;
          border-radius: 8px;
          border: none;
          outline: none;
          font-size: 40px;
      }
      .btn {
          padding: 20px 60px;
          margin-top: 30px;
          font-size: 40px;
           cursor: pointer;
          position: relative;
          z-index: 0;
          border-radius: 15px;
      }
      .glass-footer {
         font-size: 40px;
      }

      .page-wrapper {
          padding: 30px 20px;
      }

      .button-group {
          justify-content: center;
      }

  }