:root {
  --button-text-color:  #f6e4f7;
  --text-color: #240249;
  --background-color: #e6e7e4;
  --background-hover-color: #3b0475;
  --card-background-color: #f8f9f3;
  --font-family: 'Montserrat', serif;

} 
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.dropdown-toggle::after {
  display: none;
}
.bi-list {
  color: inherit; /* Inherit color from parent */
}
.btn.dropdown-toggle:focus,
.btn.dropdown-toggle:hover {
 /* Maintain the original color on hover and focus */

 color: var(--button-text-color);
 background: var(--text-color);

}


/* Animation CSS */
.intro {
  background: #120124;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  
}
.slider {
  background: #190132;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
}

.intro-text .text{
  color: #e6e7e4;
  font-family: 'Montserrat', serif;
  font-size: 70px;
  font-weight: 100;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ensure it takes up the full height of the parent */
  
  
}
.text {
  display: inline-block;
}

.hide {
  background:  #120124;
  overflow: hidden;
}

.hide span {
  transform: translateY(100%);
  display: inline-block;
}
/* end animation css */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.card-img-top {
  height: 200px;
  object-fit: cover;
  background-color:  var(--card-background-color);
  border-bottom: 1px solid var(--text-color);
}


.lead, .btn {
  color: var(--text-color);
  font-size: 26px;
  margin: 2px;
  font-family: var(--font-family);
}

.leadsm, .btn {
  color: var(--text-color);
  font-size: 20px;
  font-family: var(--font-family);
}

.btn:hover {
  background-color: var(--text-color);
  color: var(--button-text-color);
  margin: 2px;
  border: 2px solid var(--text-color);
}

.buttonoutline {
  border: 1px solid var(--text-color);
}

.buttonfilled:hover {
  color: var(--button-text-color);
  background-color: var(--background-hover-color) !important; 
  background-color: var(--text-color);
}

.buttonfilled {
  background-color:var(--text-color) !important;
  color: var(--button-text-color);
}

.buttonoutline:hover {
  color: var(--button-text-color);
  border: 1px solid var(--background-color);
  background-color: var(--text-color);
}

.container-fluid {
  background-size: cover;
  background-color: var(--background-color);
  height: 115vh;
 
}

.card-body {
  background-color: var(--card-background-color);
  padding-bottom: 5px;
}

.card-title {
  color: var(--text-color);
  font-size: 18px;
  margin-bottom: 5px;
  padding-top: 5px;
  font-family: var(--font-family);
}

.card-subtitle {
  color: var(--text-color);
  font-size: 18px;
  font-family: var(--font-family);
}

.badge {
  background-color: var(--text-color) !important;
  color: var(--button-text-color);
  font-size: 16px;
  font-weight: normal !important;
  font-family: var(--font-family);
  margin: 1px;
}

.card-text {
  color: var(--text-color)!important;
  margin-bottom: 5px;
  font-family: var(--font-family);
 
}

.details-container {
 align-items: center;
 height:auto;
  margin-top: 10%;
  display: flex;
  flex-direction: row;
  margin-left:-34%;
 justify-content: center;
}
.content {
height: auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
 width:100%;
  margin-left: 0%;
  margin-right:   0%;
}

.text-content {
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 5%;
  margin-right: 5%;

}

.project-details-container {
  margin-left: 0%;
  margin-right: 2%;
  width: 98%;
}

.display-1 {
  color: var(--text-color);
  font-size: 60px;
  font-family: var(--font-family);
  font-weight: 400;
}

.display-2 {
  color: var(--text-color);
  font-size: 50px;
  font-family: var(--font-family);
  margin-left: -15%;
  font-weight: 400;
  
}

.footer {
  margin-top: auto;
  padding: 1rem;
  text-align: center;
  background-color: var(--background-color);
}

.image-reference {
  color: lightgray;
  font-size: 9px;
  position: fixed;
  bottom: 5px;
  left: 10px;
}

.image-reference a {
  color:  var(--card-background-color);
}

.nav-link {
  color: var(--text-color);
  font-size: 20px;
  font-family: var(--font-family);
}

.nav-link.active {
  color: var(--text-color);
  background-color: var(--text-color);
}

.right-container-fluid {
  background-color: var(--background-color);
  align-items: center;
  height: auto;
  padding-right: 2%;
  
}

.left-container-fluid {
  /* background-image: url('./Images/mist.jpg'); */
  background-size: cover;
  background-position: center;
  height: 110vh;
  background-repeat: no-repeat;
  width: 25%;
}

.left-container-carousel {
  /* background-image: url("./Images/mist.jpg"); */
  background-size: cover;
  background-position: center;
  height: 115vh;
  background-repeat: no-repeat;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  
 
}

.nav-link:hover {
  color: var(--button-text-color);
}

.nav-pills {
  justify-content: end;
}

.outline {
  border: 1px solid var(--text-color);
}

.fab {
  font-size: 24px;
  color: var(--button-text-color);
  font-family: var(--font-family);
}

.left-align {
  text-align: left;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top:  52%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  z-index: 11;
}

.carousel-control-prev {
  left: -5px;
}

.carousel-control-next {
  right: -5px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  padding: 10px;
  border-radius: 50%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 50%;
  padding: 8px;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23240249'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 0-.708 0L4 8l6.646 6.354a.5.5 0 1 0 .708-.708L5.707 8l5.647-5.646a.5.5 0 0 0 0-.708z' stroke='%23240249' stroke-width='2'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23240249'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0L12 8l-6.646 6.354a.5.5 0 1 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' stroke='%23240249' stroke-width='2'/%3E%3C/svg%3E");
}



.card {
  position: center;
  z-index: 10;
  margin-top: 0px;
  margin-bottom: 0px;
  border: 0.5px solid var(--background-hover-color);
    border-radius: 10px; /* Adjust to match the card's rounded corners */
  overflow: hidden; /* Prevents the border from being cut off */
  
}

.carousel,
.carousel-item,
.carousel-inner
.card
 {
  position: center;
  z-index: 10;
  margin-top: 30px;
  margin-bottom: 0px;

 
  
}

.small-card {
  width: auto;
  max-height: 190px;
  height:200px;
  margin-left: 27px;
  margin-right: 20px;
  background-color:  var(--card-background-color);
  margin-bottom: 10px;
}

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

.card-body {
  padding: 20px;
  background-color:  var(--card-background-color);
 
}

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

.modal-content {
  max-height: 100%;
  background-color:  var(--card-background-color);
}

.modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  overflow: auto;
}

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

.control-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0px;
}
.row {
  flex-grow: 1; /* Ensure rows grow to take up available space */
  background-color: var(--background-color);
}
.modal .modal-dialog {
  max-width: 70%;
  max-height: 70%;
}

/* Mobile view */
@media (max-width: 576px) {

  .row {
    flex-grow: 1; 
}
  .footer {
    margin-top: auto;
    padding: 1rem;
    text-align: center;
    background-color: var(--background-color);
 
  }
  html, body {
    height: 105vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}


  .intro-text .text{
    font-size: 100%;
  }
  .lead, .btn {
    font-size: 18px;
  }

  .leadsm, .btn {
    font-size: 16px;
  }

  .display-1 {
    font-size: 40px;
    font-family: var(--font-family);
  }

  .display-2 {
    font-size: 28px;
    font-family: var(--font-family);
    margin-left: -50%;
  }

  .details-container {
    flex-grow: 1; /* Ensure the content area expands */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0px;
}

  .nav-link {
    font-size: 14px;
    font-family: var(--font-family);
  }

  .right-container-fluid {
    padding-right: 10px;
    height: 100vh;
  }

  .left-container-fluid {
    height: auto;

  }

  .card-subtitle {
    font-size: 14px;
    font-family: var(--font-family);
  }

  .card-body {
    height: auto;
  }

  .carousel-inner .carousel-item img {
    height: 100%;
    object-fit: contain;
    align-items: center;
  }
  


  .small-card {
    width: auto;
    height: 240px;
    max-height: 240px;
    margin-left: 25px;
    margin-right: 20px;
    background-color:  var(--card-background-color);
    
  }

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

/* Small tablets - ipad mini*/
@media (min-width: 577px) and (max-width: 768px)
{
.lead, .btn {
  font-size: 20px;
  font-family: var(--font-family);
}

.leadsm, .btn {
  font-size: 18px;
  font-family: var(--font-family);
}
.container-fluid {
 min-height: auto;
}
.display-1 {
  font-size: 50px;
  font-family: var(--font-family);
}

.display-2 {
  font-size: 40px;
  font-family: var(--font-family);
  margin-left: -50%;
}

.details-container {
  margin-left: -30%;
  margin-top: 80px;
  flex-direction: column;
  height: auto;
}
.content {
  height: auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-left: 0%;
  margin-right: 0%;
}

.nav-link {
  font-size: 16px;
  font-family: var(--font-family);
  justify-content: end;
}
.nav-pills {
  align-self: end;
}

.left-container-fluid {
  height: auto;
 
}

.project-details-container {
  width: 100%;

}

.card-body {
  height: auto;
}

.left-container-carousel {
  /* background-image: url("./Images/thunder.jpg"); */
  background-size: cover;
  background-position: center;
  height: auto;
  background-repeat: no-repeat;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  width:40%;
 
   
}

.right-container-fluid {
  background-color: var(--background-color);
  align-items: center;
  height: 105vh;
  padding-left: 0%;
  width: 75%;
}

.right-container-fluid-project {
  background-color: var(--background-color);
  align-items: center;
  height: 105vh;
  padding-left: 0%;
  width: 55%;
}

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

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

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

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

/* Large tablets - ipad air*/
@media (min-width: 769px) and (max-width: 992px) {
  .lead, .btn {
    font-size: 24px;
    font-family: var(--font-family);
  }

  .leadsm, .btn {
    font-size: 20px;
    font-family: var(--font-family);
  }
  .container-fluid {
   min-height: auto;
  }
  .display-1 {
    font-size: 60px;
    font-family: var(--font-family);
  }

  .display-2 {
    font-size: 40px;
    font-family: var(--font-family);
    margin-left: -50%;
  }

  .details-container {
    margin-left: -30%;
    margin-top: 80px;
    flex-direction: column;
    height: auto;
  }

  .nav-link {
    font-size: 18px;
    font-family: var(--font-family);
    justify-content: end;
  }
  .nav-pills {
    align-self: end;
  }

  .right-container-fluid {
    padding-right: 10px;
    width: auto;
    height: auto;
  }

  .left-container-fluid {
    height: auto;
  }

  .project-details-container {
    width: 100%;
  }

 

  .card-body {
    height: auto;
  }

  .left-container-carousel {
    /* background-image: url("./Images/thunder.jpg"); */
    background-size: cover;
    background-position: center;
    height: auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items:flex-start;
    margin-top: 100px;
    width: 35%;
  }
  

  .right-container-fluid {
    background-color: var(--background-color);
    align-items: center;
    height: 105vh;
    padding-right: 2%;
    width: 75%;
  }
  .right-container-fluid-project {
    background-color: var(--background-color);
    align-items: center;
    height: 105vh;
    padding-left: 0%;
    width: 65%;
  }
  .modal-dialog-centered {
    max-height: 90%;
    max-width: 90%;
    width: auto;
    height: auto;
  }

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

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

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

/* Extra large tablets -eg ipad pro */

@media (min-width: 993px) and (max-width: 1035px) {
  .lead, .btn {
    font-size: 24px;
    font-family: var(--font-family);
  }

  .leadsm, .btn {
    font-size: 20px;
    font-family: var(--font-family);
  }
  .container-fluid {
   min-height: auto;
  }
  .display-1 {
    font-size: 60px;
    font-family: var(--font-family);
  }

  .display-2 {
    font-size: 40px;
    font-family: var(--font-family);
  }

  .details-container {
    margin-left: -30%;
    margin-top: 80px;
    flex-direction: column;
    height: auto;
  }

  .nav-link {
    font-size: 18px;
    font-family: var(--font-family);
    justify-content: end;
  }
  .nav-pills {
    align-self: end;
  }

  .right-container-fluid {
    padding-right: 10px;
    width: auto;
    height: auto;
  }

  .left-container-fluid {
    height: auto;
  }

  .project-details-container {
    width: 100%;
  }

 

  .card-body {
    height: auto;
  }

  .left-container-carousel {
    /* background-image: url("./Images/thunder.jpg"); */
    background-size: cover;
    background-position: center;
    height: auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items:flex-start;
    margin-top: 120px;
    width: 35%;
  }

  .right-container-fluid {
    background-color: var(--background-color);
    align-items: center;
    height: 105vh;
    padding-right: 2%;
    width: 75%;
  }
  .right-container-fluid-project {
    background-color: var(--background-color);
    align-items: center;
    height: 105vh;
    padding-left: 0%;
    width: 65%;
  }
  .modal-dialog-centered {
    max-height: 90%;
    max-width: 90%;
    width: auto;
    height: auto;
  }

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

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

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