/**
 * Navbar Customization
 *
 * @format
 */

/* Add the Vazir font */
@font-face {
  font-family: "Vazir";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font/dist/Vazir-Medium.woff")
    format("woff");
}

/* Navbar Customization */
.custom-nav {
  background-color: rgba(0, 26, 113, 0.9);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: 18px;
}

/* Navbar Brand Styling */
.custom-nav .navbar-brand {
  font-size: 40px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
  font-family: "Vazir"; /* Apply Vazir font */
}

/* Input and Dropdown Adjustments */
.navbar-nav .form-control,
.navbar-nav .form-select {
  max-width: 250px;
  font-size: 1rem;
  font-family: "Vazir"; /* Apply Vazir font */
}

.navbar-nav .form-control {
  border-radius: 8px;
}

.navbar-nav .form-select {
  border-radius: 8px;
}

/* Table Styling */
.table-container {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 20px;
  margin-top: 80px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  font-family: "Vazir"; /* Apply Vazir font */
  width: 100%;
}

#searchInput {
  min-width: 420px;
  height: 48px;
  text-align: right;
  font-family: "Vazir"; /* Apply Vazir font */
}

.form-select {
  height: 48px;
}

table {
  font-size: 20px;
}

/* Responsive Design */

/* Small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
  .custom-nav .navbar-brand {
    font-size: 24px;
    text-align: center;
  }

  #searchInput {
    min-width: 100%;
    height: 40px;
    font-size: 14px;
  }

  .navbar-nav .form-control,
  .navbar-nav .form-select {
    max-width: 100%;
    font-size: 0.9rem;
  }

  table {
    font-size: 16px;
  }

  .table-container {
    padding: 10px;
    margin-top: 40px;
  }
}

/* Medium devices (tablets, 576px to 768px) */
@media (max-width: 768px) {
  .custom-nav .navbar-brand {
    font-size: 30px;
    text-align: center;
  }

  #searchInput {
    min-width: 300px;
    height: 42px;
    font-size: 16px;
  }

  .navbar-nav .form-control,
  .navbar-nav .form-select {
    max-width: 200px;
    font-size: 1rem;
  }

  table {
    font-size: 18px;
  }

  .table-container {
    padding: 15px;
    margin-top: 60px;
  }
  .sub-text {
    font-size: 8px;
  }
}

/* Large devices (desktops, 768px and above) */
@media (min-width: 769px) {
  .custom-nav .navbar-brand {
    font-size: 40px;
  }

  #searchInput {
    min-width: 420px;
    height: 48px;
  }

  .navbar-nav .form-control,
  .navbar-nav .form-select {
    max-width: 250px;
    font-size: 1rem;
  }

  table {
    font-size: 20px;
  }

  .table-container {
    padding: 20px;
    margin-top: 80px;
  }
}