@charset "UTF-8";
.site-container {
  overflow: hidden;
}

.header {
  width: calc(100% - 80px);
  left: 80px;
}

.v-setting-conatiner {
  width: 380px;
  left: -100%;
}

.nav-container {
  width: 80px;
  left: 0;
}

.visible .header {
  width: calc(100% - 460px);
  left: 460px;
}
.visible .v-setting-conatiner {
  left: 80px;
}

/* 📱 استجابة للأجهزة الصغيرة */
@media (max-width: 768px) {
  .visible .header,
  .faq-screen .header,
  .header {
    width: 100%;
    left: 0;
  }
  .v-setting-conatiner {
    width: 100%;
    left: -100%;
  }
  .nav-container {
    min-width: 100%;
    width: 100%;
  }
  .visible .v-setting-conatiner,
  .faq-screen .v-setting-conatiner {
    width: 100%;
    left: 0;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .header {
    width: 100%;
    left: 0;
  }
  .v-setting-conatiner {
    width: 360px;
    left: -100%;
  }
  .nav-container {
    min-width: 100%;
    width: 100%;
  }
  .visible .header,
  .faq-screen .header {
    width: 100%;
    left: 0;
  }
  .visible .v-setting-conatiner {
    width: 360px;
    left: 0;
  }
  .faq-screen .v-setting-conatiner {
    width: 600px;
    left: 100px;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .header,
  .visible .header,
  .faq-screen .header {
    width: calc(100% - 80px);
    left: 80px;
  }
  .v-setting-conatiner {
    width: 400px;
    left: -100%;
  }
  .visible .v-setting-conatiner {
    left: 80px;
  }
  .faq-screen .v-setting-conatiner {
    width: 600px;
    left: 100px;
  }
}
/* 📏 دعم الأجهزة المتوسطة */

/*# sourceMappingURL=width.css.map */