body {
      font-family: 'Droid Arabic Kufi', sans-serif;
      color: #073259;
      background: #f5f5f5;
      margin: 0;
      padding: 0;
    }

    /* Navbar */
    .navbar-brand h2 {
      color: #073259;
    }
    .faf {
      display: inline-block;
      transform: scale(-1, 1);
      color: #ffbf00;
      font-size: 2rem;
      margin-right: 2rem;
    }

    /* Buttons */
    .btnteacher, .btnteacher2, .btnsave, .btnsave2 {
      color: #073259;
      border: 2px solid #ffbf00;
      background: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      transition: 0.3s;
      font-size: 1rem;
    }
    .btnteacher:hover, .btnteacher2:hover, .btnsave:hover, .btnsave2:hover {
      background: #ffbf00;
      color: #073259;
    }

    .hd {
      color: #ffbf00;
    }

    /* ================= POPUPS ================= */
    .wrapper, .wrapper2 {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 400px;
      max-width: 90%;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(20px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      z-index: 9999;
      transition: transform 0.5s ease, opacity 0.4s ease;
    }

    /* عند الفتح */
    .wrapper.active-popup, .wrapper2.active-popup2 {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }

    /* Form Box */
    .form-box-login {
      width: 100%;
      padding: 30px;
      text-align: center;
    }

    /* Close Icon */
    .icon-close2, .icon-close22 {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 40px;
      height: 40px;
      background: rgba(255,255,255,0.5);
      font-size: 1.5em;
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      cursor: pointer;
      transition: 0.3s;
    }
    .icon-close2:hover, .icon-close22:hover {
      background: crimson;
      transform: rotate(90deg);
    }

    /* Inputs */
    .input, .form-control {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

    /* Buttons wrapper */
    .button, .button2 {
      text-align: center;
      margin-top: 10px;
    }

    /* Responsive */
    @media(max-width: 768px) {
      .wrapper, .wrapper2 {
        width: 90%;
        padding: 20px;
      }
      .icon-close2, .icon-close22 {
        width: 35px;
        height: 35px;
      }
    }

    /* Footer */
    .footer {
      background: #073259;
      color: #ffffff;
      padding: 50px 0;
    }
    .footer h4 {
      color: #ffbf00;
    }
    .footer .btn-social {
      margin-right: 5px;
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffbf00;
      border: 1px solid #ffbf00;
      border-radius: 50%;
      transition: 0.3s;
    }
    .footer .btn-social:hover {
      background: #ffbf00;
      color: #073259;
    }