/* Custom styles for Project wide */
:root {
  --button-text-color:  #f6e4f7;
  --text-color: #240249;
  --background-color: #e6e7e4;
  --background-hover-color:  #3b0475;
  --card-background-color: #f8f9f3;
  --font-family: 'Montserrat', serif;
}

.small-card {
  height: 190px; 
  margin-top: 10px;
  width: 300px;
  margin-bottom: 50px;
}


.projectWide-container {
  height: 100vh;
}

.modal-dialog {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.projectWide-modal  {
  height: 100%;
  width: 100%;
}

/* Image inside the modal */
 .modal-body img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Set the modal width */
.modal-dialog-centered-projectWide {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background-color: var(--background-color);
}

/* Set the modal width */
.modal .modal-dialog {
  max-width: 80%;
  max-height: 80%;
  height: auto;
  width: auto;
  background-color: var(--background-color);
}


.card-body {
  
  padding: 15px; /* Reduced padding around the text */
  background-color: var(--card-background-color); /* Ensure the background color remains consistent */
}

.card-title {
  color: #240249;
  font-size: 16px;
  margin-bottom: 10px; /* Reduce space below the title */
  font-family: var(--font-family);
  
}

.card-text {
  color: #240249 !important;
  margin-bottom: 5px; /* Reduce space below the text */
  font-family: var(--font-family);
}

/* Mobile view */
@media (max-width: 576px) {
  .small-card {
    width: 350px;
    height: 200px;
    max-height: 200px;
    margin-left: 25px;
    background-color: var(--card-background-color);
  }
  .small-card img {
    width: 100%;
    object-fit: cover;
    background-color: var(--card-background-color);
    height: 190px;
  }
/* Set the modal width  and centre the modal*/
.modal .modal-dialog {
  margin-top:15%;
  max-width: 95%;
  max-height: 95%;
  height: auto;
  width: auto;
  background-color: var(--background-color);
}

  .modal-body img {
   
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    
  }




/* Small tablets */
@media (min-width: 577px) and (max-width: 768px) {
  .small-card {
    width: 225px;
    height: 150px;
    max-height: 150px;
    margin-left: 25px;
    background-color: var(--card-background-color);
  }

  .small-card img {
    width: 100%;
    object-fit: cover;
    background-color: var(--card-background-color);
    height: 150px;
  }

  .modal-dialog .projectWide-modal .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
  }

  .modal-content {
    height: auto;
    width: auto;
    background-color: var(--card-background-color);
    margin-top: 300px;
  }

  /* Set the modal width */
.modal .modal-dialog {
  max-width: 80%;
  max-height: 80%;
  height: auto;
  width: auto;
  background-color: var(--background-color);
}

  .modal-body img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
  }
}

/* Large tablets */
@media (min-width: 769px) and (max-width: 992px) {


  .projectWide-modal .modal-dialog {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 160px;
  }

  .modal-content {
    height: auto;
    width: auto;
    background-color: var(--card-background-color);
  }
  /* Set the modal width */
.modal .modal-dialog {
  max-width: 80%;
  max-height: 80%;
  height: auto;
  width: auto;
  background-color: var(--background-color);
}
  
    .modal-body img {
      max-height: 100%;
      max-width: 100%;
      object-fit: cover;
    }
}
}