:root {
  --primary-color: #153448;
  --p-light-color: #3c5b6f;
  --secondary-color: #948979;
  --s-light-color: #dfd0b8;
}

/* for viewport is 960 pixels wide or wider */

@media screen and (min-width: 960px) {
  #body {
    background-color: ghostwhite;
  }
  #mobile-view {
    display: none;
  }
  #deskstop-view {
    display: block;
  }
  .mob-offcanvas {
    display: none;
  }
  .dek-offcanvas {
    display: block;
  }
  .form-box,
  .box-card {
    border: 1px solid ghostwhite;
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    /* filter: drop-shadow(0px 1px 1px gainsboro); */
    box-shadow: 0px 1px 5px 1px gainsboro;
  }
  .box-card .box-head {
    padding-bottom: 5px;
    border-bottom: 1px dashed gainsboro;
  }
  .fixed-btn .container-fluid {
    width: 60%;
  }
}

/* for viewport is 960 pixels smalle or smaller */

@media screen and (max-width: 960px) {
  #mobile-view {
    display: block;
  }
  #deskstop-view {
    display: none;
  }
  .mob-offcanvas {
    display: block;
  }
  .dek-offcanvas {
    display: none;
  }
  .box-card .box-head {
    padding-bottom: 5px;
    border-bottom: 1px dashed gainsboro;
  }
}