:root {
  --blue: #1709d2;
  --black: #000000;
  --lightblack: #1b1b1b;
  --white: #fff;
  --lightblue: #5e55e4;
  --lightblue2: #7c74e8;
  --lightblue3: #736dc4;
  --ash: #dddddd;
  --ash2: #d3e4ee;

  --choco: #e1c9b7;
  --gold: #ffa600;
}

.helloIAm {
  font-family: "Times New Roman", Times, serif;
  /* background-color: var(--blue) !important; */
}

/* for all the fa icon hover  */
.fa:hover {
  color: var(--blue) !important;
}

/* for about button for download */
.fa-download:hover {
  color: var(--white) !important;
}

/* about bio */
.abt-bio-txt {
  font-family: "Times New Roman", Times, serif !important;
  color: var(--white) !important;
}

/* what i do, interior */
.abt-interior {
  /* background-color: red; */
  margin: auto;
  margin-top: 50px;
}

@media screen and (max-width: 574px) {
  .abt-interior {
    margin-top: 0px;
  }
}

/* about me */
.mh-about h2 {
  border-bottom: 1px solid var(--gold) !important;
  display: inline-block;
}

.fa-bootstrap:hover,
.fa-js:hover,
.fa-php:hover {
  color: var(--blue);
  scale: 1.5;
  transition: 0.3s ease-in-out;
}

/* what i do */
.mh-service h2 {
  border-bottom: 1px solid var(--gold) !important;
  display: inline-block;
}

/* waht i do bio */
.what-bio {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  margin-bottom: 40px !important;
}

/* what i do fa icons */
.fa-book,
.fa-mobile,
.fa-home {
  color: var(--blue) !important;
}

.fa-book:hover,
.fa-mobile:hover,
.fa-home:hover {
  color: var(--gold) !important;
}

.fa-code {
  color: var(--gold) !important;
}

/* featured projects images */
.mh-featured-item img {
  width: 280px !important;
}

/* featured projects main headings */
.mh-featured-item span {
  font-weight: 600;
}

/* visit to see */
.visitToSee:hover {
  background-color: var(--blue);
  color: var(--gold);
}

.visitToSee:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* interested to work */
.interest-header-ctn {
  display: flex;
  margin: auto !important;
  justify-content: space-around !important;
  justify-items: center !important;
  text-align: start !important;
  width: 700px;
  margin-bottom: 25px !important;
}

@media screen and (max-width: 774px) {
  .interest-header-ctn {
    flex-direction: column;
    width: fit-content;
  }

  .interest-items {
    margin: 1px;
    display: inline-block;
    border-left: none !important;
    padding: 0px 5px;
  }
}

.interest-items {
  margin: 1px;
  display: inline-block;
  /* border-left: 1px solid var(--blue); */
  padding: 0px 5px;
}

.interest-header {
  font-weight: 900;
  font-size: 15px;
}

.section-separator li {
  text-decoration: none;
  list-style: none;
}

.interest-header-ctn li::before {
  content: "\1A1";
  color: var(--gold);
  padding-right: 10px;
  font-weight: bolder;
}

/* contact, footer */
.formDiv {
  margin-top: -29px;
}

.email-ctn a {
  /* font-size: 14px; */
}

/* pricing, modal */

.modal {
  width: 100%;
  text-align: start !important;
  height: fit-content !important;

  margin-top: 40px;

}

.modal-content {
  background-color: var(--white) !important;
  border-radius: 10px;
}

.modal-content:hover .modal-button {
  background-color: red !important;
}

.modal-title {
  color: var(--blue) !important;
  font-family: "Times New Roman", Times, serif;
  font-weight: 600;
  text-shadow: none !important;
}

.modal-header {
  border: none;
}

.modal-body a {
  text-decoration: none !important;
  color: var(--blue);
  text-shadow: none !important;
  font-size: 17px !important;
  font-family: "Times New Roman", Times, serif;
}

.modal-body a:hover,
.modal-body a .fa {
  color: var(--lightblue);
}

.modal-body a .fa {
  font-size: 20px !important;
  color: var(--blue) !important;
}

.modal .modal-button {
  background-color: red !important;
  color: var(--white) !important;
  font-family: "Times New Roman", Times, serif;
}

.modal .modal-button:focus {
  box-shadow: none !important;
}

.modal .modal-footer button:hover {
  background-color: darkred !important;
}

.modal .modal-footer button:active {
  background-color: black;
}

.telPhone {
  margin-top: -20px;
}

/* submit */
.submit-msg:hover {
  cursor: pointer;
}

/* developed by  */
.dev-by {
  color: var(--lightblue2) !important;
}

/* can't be dragged, or highlighted  */
.non-interactive-image {
  /* 1. Prevents the image from being selected/highlighted like text */
  -webkit-user-select: none;
  /* Safari, Chrome, Edge */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Standard syntax */

  /* 2. Prevents the image from being dragged (the key fix for desktop) */
  -webkit-user-drag: none;
  /* Safari, Chrome, Edge */
  user-drag: none;
  /* Standard syntax */

  /* 3. Removes the blue/colored outline that appears when the image is focused (if it was a link) */
  outline: none;

  /* 4. Changes the cursor from the pointer/grab icon back to the default arrow */
  cursor: default;
}

/* responsive */
@media only screen and (max-width: 768px) {
  .mh-pricing .mh-pricing:hover .btn {
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color: var(--blue);
    color: var(--white);
    letter-spacing: 0;
  }
}