:root {
  --df--background: rgb(42, 47, 51);
  --df-color-green: rgb(32, 201, 151);
  --df-color-purple: rgb(87, 24, 69);
  --df-color-waterBlue: rgb(110, 168, 254);
  --df-color-darkBlue: rgb(5, 44, 101);
  --df-color-lightBlue: rgb(61, 139, 253);
  --df-color-lightPurple: rgb(102, 16, 242);
  --df-color-drill: rgb(253, 126, 20);
  --df-color-dark: rgb(17, 17, 17);
}
* {
  font-family: "vazir";
}

/* Media query for DESKTOP size devices: */

@media screen and (min-width: 769px) {
  .form-check-input:checked {
    background-color: red !important;
  }
  body {
    background-color: var(--df--background) !important;
  }

  h1 {
    font-family: "vazir-bold";

    font-weight: bold;
  }
  h2,
  h3,
  h4,
  h5 {
    font-family: "vazir-bold";
    margin-bottom: 3rem;
    font-weight: bold;
  }
  strong {
    color: rgb(1, 85, 175);
  }
  .df-bg-green {
    background-color: var(--df-color-green);
  }
  .df-bg-purple {
    background-color: var(--df-color-purple);
  }
  .df-bg-waterBlue {
    background-color: var(--df-color-waterBlue);
  }
  .df-bg-darkBlue {
    background-color: var(--df-color-darkBlue);
  }
  .df-bg-lightBlue {
    background-color: var(--df-color-lightBlue);
  }
  .df-bg-lightPurple {
    background-color: var(--df-color-lightPurple);
  }
  .df-bg-orange {
    background-color: var(--df-color-orange);
  }
  .df-form {
    width: 50%;
  }
  .form-check-input:checked {
    background-color: var(--bs-warning) !important;
  }
  .df-container-desktop-70 {
    width: 70%;
  }
  .df-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 3;
  }
}

/* Media query for MOBILE size devices: */
@media screen and (max-width: 768px) {
  body {
    background-color: var(--df--background) !important;
  }
  .container {
    max-width: 93%;
  }
  h1 {
    font-family: "vazir-bold";
    font-weight: bold;
  }
  h2,
  h3,
  h4,
  h5 {
    font-family: "vazir-bold";
    margin-bottom: 3rem;
    font-weight: bold;
  }
  strong {
    color: rgb(1, 85, 175);
  }
  .df-bg-green {
    background-color: var(--df-color-green);
  }
  .df-bg-purple {
    background-color: var(--df-color-purple);
  }
  .df-bg-waterBlue {
    background-color: var(--df-color-waterBlue);
  }
  .df-bg-darkBlue {
    background-color: var(--df-color-darkBlue);
  }
  .df-bg-lightBlue {
    background-color: var(--df-color-lightBlue);
  }
  .df-bg-lightPurple {
    background-color: var(--df-color-lightPurple);
  }
  .df-form {
    max-width: 100%;
  }
  .df-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 3;
  }
}