* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      direction: ltr;
      font-family: 'Open Sans', sans-serif;
      text-decoration: none;
    }


/* قسمت مربوط به اسلایدر */
    .slider-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    .slider {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      z-index: -1;
    }

    .slide:nth-child(1) {
      animation: fade 40s infinite;
    }

    .slide:nth-child(2) {
      animation: fade 40s infinite 4s;
    }

    .slide:nth-child(3) {
      animation: fade 40s infinite 8s;
    }

    .slide:nth-child(4) {
      animation: fade 40s infinite 12s;
    }

    .slide:nth-child(5) {
      animation: fade 40s infinite 16s;
    }

    .slide:nth-child(6) {
      animation: fade 40s infinite 20s;
    }

    .slide:nth-child(7) {
      animation: fade 40s infinite 24s;
    }

    .slide:nth-child(8) {
      animation: fade 40s infinite 28s;
    }

    .slide:nth-child(9) {
      animation: fade 40s infinite 32s;
    }

    .slide:nth-child(10) {
      animation: fade 40s infinite 36s;
    }


    /* قسمت مربوط به انمیشن اسلایدر */
    @keyframes fade {
      0% {
        opacity: 0;
      }

      0.8% {
        opacity: 1;
      }

      9.8% {
        opacity: 1;
      }

      10.4% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    /* قسمت مربوط به  فرم ورود */
    #login-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      width: 90%;
      max-width: 420px;
      padding: 32px 14px;
      background: linear-gradient(to right top, rgba(250, 158, 27, 0.9), rgba(141, 79, 255, 0.9));
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 2px solid rgb(250, 158, 27);
      border-radius: 16px;
      box-shadow: 0 10px 50px rgba(141, 79, 255, 0.9);
    }

    #login-box div {
      display: flex;
      margin-bottom: 30px;
    }


    /* قسمت مربوط به عنوان  */
    #title-text {
      color: white;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      text-align: center !important;
      margin-bottom: 25px;
    }


    /* قسمت مربوط به ورود اطلاعات  */
    #login-box input {
      border: none;
      border-bottom: 2px solid rgb(250, 158, 27);
      outline: none;
      background: transparent;
      font-size: 16px;
      caret-color: #fff;
      font-weight: 400;
      padding-bottom: 5px;
      margin-left: 25px;
    }

    ::placeholder {
      color: #fff;
      font-size: 12px;
    }

    .bi-person,
    .bi-lock {
      margin-left: -15px;
      color: #fff;
    }


    /* قسمت مربوط به بخاطرسپاری یا فراموشی رمز */
    #remember-box {
      display: flex;
      align-items: center;
    }

    #remember-box span {
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      margin-right: 30px;
    }

    #remember-box a {
      font-size: 11px;
      font-weight: 700;
      border: 1px solid transparent;
      border-radius: 8px;
      transition: 0.3s;
      padding: 3px;
      margin-left: -20px;
      color: rgb(126, 9, 116);
      animation: soft-blink 2s ease-in-out infinite;
    }

    #remember-box a:hover {
      color: rgb(250, 158, 27);
      padding: 3px;
      border: 1px solid rgb(126, 9, 116);
      background-color: rgb(126, 9, 116);
      animation: none;
      opacity: 1;
    }


    /* قسمت مربوط به دکمه ورود  */
    #buttonnn {
      background-color: rgba(250, 158, 27, 0.8);
      transition: background-color 0.4s ease;
      padding: 10px 50px;
      border: none;
      outline: none;
      cursor: pointer;
      border-radius: 27px;
      margin-left: 50px;
      margin-bottom: 35px;
    }

    #buttonnn:hover,
    #registerrr a:hover {
      background-color: rgb(126, 9, 116);
    }

    #button-text {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      color: rgb(126, 9, 116);
      animation: soft-blink 2s ease-in-out infinite;
    }

    #buttonnn:hover #button-text,
    #registerrr a:hover #register-text2 {
      color: rgb(250, 158, 27);
      animation: none;
      opacity: 1;
    }


    /* قسمت مربوط به ثبت نام */
    #registerrr {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }

    #register-text1 {
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      margin-right: 30px;
      margin-left: 15px;
    }

    #registerrr a {
      margin-left: -20px;
      padding: 0px 12px 5px;
      border-radius: 10px;
      background-color: rgb(250, 158, 27);
      cursor: pointer;
      transition: 0.2s ease;
    }

    #register-text2 {
      font-size: 11px;
      font-weight: 700;
      color: rgb(126, 9, 116);
      animation: soft-blink 2s ease-in-out infinite;
    }


    /* قسمت مربوط به انمیشن المان ها*/
    @keyframes soft-blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.4;
      }
    }