.modal-content {
    background-color: rgba(54, 54, 54, 0.6);
    width: 1000px;
    height: auto;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .modal-img img {
    width: 400px;
    height: auto;
    border-radius: 10px;
  }

  
.our-projects {
  position: relative;
}

.our-projects .card {
  cursor: pointer;
}

h4 {
  color: #000;
}

a {
  text-decoration: none;
}

h1,
h2,
h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

nav,
h2,
h3,
h4,
p {
  font-family: 'Roboto', sans-serif;
}

p {
  color: #555555;
  line-height: 35px !important;
  font-family: 'Poppins', sans-serif;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 16px !important;
}

h2 {
  font-size: 40px;
}

span {
  text-decoration: none;
  color: #000;
  position: relative;
}

span:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -0.1em;
  right: -0.1em;
  bottom: 0;
  background-color: #ffd800;
}

.btn {
  font-size: 15px;
  font-weight: bold;
  padding: 7px 45px;
  margin: auto;
  border-radius: 50rem;
  /* box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); */
  background-color: #ffd800;
}

/* Navbar */
nav .nav-link {
  font-size: 20px;
  color: #555555;
}

nav a:hover {
  color: #ffd800 !important;
}

/* OUR PROJECTS */
.our-projects {
  padding-top: 100px !important;
}

.our-projects .text {
  max-width: 400px;
  height: auto;
  margin: auto;
}

.our-projects p {
  font-size: 15px;
}

.our-projects .button {
  margin: auto;
  margin-bottom: 20px;
}

/* CARD */
.card {
  margin: 30px auto;
  border-radius: 25px;
  max-width: 250px;
  min-height: 450px;
  border: none;
  background-color: #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}

.card .img-desktop {
  max-width: 200px;
  height: auto;
  border-radius: 10px;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.card .img-mobile {
  width: 150px;
  height: auto;
}

.card-text,
h4 {
  padding: 10px;
  text-align: left;
}

h4 {
  font-weight: bold;
  color: #000;
}

.card-text {
  font-size: 14px;
}

/* MODAL */
.modal-content {
  background-color: rgba(54, 54, 54, 0.6);
}

.modal-header {
  border: none;
}

.modal-img {
  /* margin: auto; */
  border-radius: 20px;
}

/* ---------------------------------------------------------- */

@media (max-width: 768px) {
  #mobileLogo {
    display: block !important;
  }
}
/* TABLET VERSION */
@media (min-width: 768px) and (max-width: 915px){
  .card {
    width: 200px;
    min-height: 500px;
  }

  .card .img-desktop {
    width: 150px;
    height: auto;
  }

  .card .img-mobile {
    width: 90px;
    height: auto;
  }

  .modal-content {
    background-color: rgba(54, 54, 54, 0.6);
    width: 1000px;
    height: auto;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .modal-img img {
    width: 400px;
    height: auto;
    border-radius: 10px;
  }

  ul li a.active {
    color: #ffd800;
    border-bottom: 2.5px solid #ffd800;
    padding-bottom: 5px;
    transition: 0.6s;
  }

  h2 {
    font-size: 30px;
  }

  h4 {
    font-size: 20px;
  }
  .card {
    min-height: 520px;
  }
}

/* ---------------------------------------------------------- */

/* DESKTOP VERSION */
@media (min-width: 992px) {
  .our-projects .text {
    min-width: 800px;
    height: auto;
    margin: auto;
  }

  .our-projects p {
    font-size: 20px;
  }

  .card {
    min-width: 320px;
    min-height: 560px;
  }

  .card .img-desktop {
    min-width: 250px;
    height: auto;
  }

  .card .img-mobile {
    width: 150px;
    height: auto;
  }

  .card-text {
    font-size: 17px;
  }

  /* MODAL */

  .modal-content {
    /* position: absolute;
    z-index: 9;
    top: -2%;
    left: 50%; */
    transform: translate(-50%, 0);
    background-color: rgba(54, 54, 54, 0.6);
    max-width: 800px;
    height: auto;
    border-radius: 20px;
  }

  .modal-header {
    border: none;
  }

  .modal button {
    font-size: 25px;
    color: #fff !important;
    transform: translate(-8px, 10px);
  }

  .modal-img img {
    width: 700px;
    height: auto;
    margin: auto;
    border-radius: 20px;
  }
}

/* ---------------------------------------------------------- */

/* MOBILE VERSION */
@media (max-width: 773px) {
  /* MODAL */
  .modal-content {
    background-color: rgba(54, 54, 54, 0.6);
    left: 50%;
    transform: translate(-50%, 0);
    width: 500px;
    height: auto;
    margin: auto;
  }

  .logo a img {
    width: 120px !important;
  }

  #mobileLogo img {
    width: 120px !important;
  }

  .modal-header {
    border: none;
  }

  .modal-img img {
    max-width: 350px;
    height: auto;
    margin: auto;
    border-radius: 10px;
  }

  @media (max-width: 600px) {
    .modal-content {
      left: 50%;
    }

    .modal-img img {
    max-width: 250px;
  }
}
}