:root {
  --primary-color: #FFFFFF;
  --secondary-color: #00CED1;
  --tertiary-color: #26135f;
  --navbar-link-padding: 17px;
}

a {
  text-decoration: none;
}

b {
	font-weight:bolder;
}

body {
	background-color: var(--primary-color);
	max-width: 100%;
	color: black;
	font-family: 'Montserrat', sans-serif;
}

button {
  padding: 12px 28px;
  color: black;
  border: 4px solid white;
  background-color: var(--primary-color);
  font-size: 20px;
}

button:hover {
	cursor: pointer;
	background-color: var(--secondary-color);
	color: white;
	transform: scale(1.1);
}

.bg-group {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 40px; 
}

.group-img {
    width: 300px;
    height: auto;
}

.bg-group-pets {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 20px;
    text-align: center;
}

.group-pets-img {
    width: auto;
    height: 300px;
    margin-bottom: 40px;
}

.bg-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 40px; 
}

.img {
    object-fit: cover;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.card-img {
  width: 100%; /* Ensure the image takes the full width of its container */
  height: auto; /* Allow the image's height to adjust proportionally */
  object-fit: cover; /* Crop the image to cover the container */
}

.card-overlay {
  position: relative;
}

.contactLink:link {
  color: white;
  text-decoration: none;
}

.contactLink:hover {
  color: #00CED1;
}

.footer {
  font-size: 12px;
  padding: 8px 20px;
}

.homePageBannerSection .card-overlay {
  border: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.homePageBannerSection .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.homePageBannerSection .overlay-content {
  text-align: center;
  color: white;
}

.homePageBannerSection .overlay-content button {
  padding: 10px 20px;
  background-color: #7289DA;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.homePageBannerSection .image-container {
  background-color: #331A7F;
  min-height: 400px;
  overflow: hidden; /* Ensure content overflow is hidden */
}

.homePageBannerSection .card-img {
  width: 100%; /* Ensure image fills the container width */
  height: 100%; /* Ensure image fills the container height */
  object-fit: cover; /* Crop the image while maintaining aspect ratio */
  opacity: 1; /* You can adjust the opacity as desired */
}

.hoverLink { 
	min-width: 200px;
  padding: var(--navbar-link-padding);
}

.hoverLink:hover {
  color: var(--secondary-color);
  transform: scale(1.1);
  text-decoration: underline;
  text-decoration-skip-ink: none; /* Disable ink skipping */
  text-underline-offset: 16px; /* Adjust the spacing (you can change the value) */
  text-decoration-thickness: 4px;
  text-decoration-color: black;
}

hr {
	margin-bottom: 0px;
}

hr.thickSeparator {
  background-color: black;
  width: 100%;
  height: 4px;
}

h1.h1subtitle {
	animation: revealLeft 1.5s cubic-bezier(0.77, 0, 0.175, 1)
}

.image-container {
    max-height: 400px; /* Set the maximum height */
    overflow: hidden; /* Hide any overflow */
    display: flex; /* Use flex to vertically center the image */
    align-items: center; /* Vertically center the image */
    justify-content: center; /* Horizontally center the image */
}

label {
	font-size: 20px;
}

li {
  line-height: 2;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 34px 17px 34px 34px;
  text-decoration: none;
  font-size: 16px;
}

.navbar {
	background-color: var(--primary-color); 
	display: flex;
  justify-content: center;
  align-items: center;
}

.dropdown {
  position: relative;
  display: inline-block;
  color: black;
  min-width: 200px;
  padding: calc(var(--navbar-link-padding) - 8px);
}

.nav-item.dropdown .nav-link {
  color: black;
  font-size: 16px;
}

/* Hover effects on dropdown */
.nav-item.dropdown .nav-link:hover {
    transform: scale(1.1);
    color: black;
    /* color: var(--secondary-color);
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 16px;
    text-decoration-thickness: 4px;
    text-decoration-color: black; */
  }

.dropdown-menu {
  border-radius: 6px;
  border: 2px solid black;
  padding: 0px;
}

.dropdown-item {
  color: black;
  border-radius: 6px;
}

.dropdown-item:hover {
  background-color: var(--secondary-color);
  color: white;
}

.overlay {
  position: absolute;
  top: 25%;
  left: 10%;
  width: 40%;
  height: 50%;
  background-color: rgba(255, 255, 255, 0.7);
}

p {
    line-height: 2;
}

.progress-label {
	padding: 20px;
}

.projectTitle {
	font-size: 2vw;
	max-width: 100%;
}

p1 {
  color: #404040;
}
.researchTitle {
	max-width: 70%;
}

.subsection {
  animation-name: fadeIn;
  animation-duration: 1s;
  padding: 60px 112px;
}

.slider-container {
	display: flex;
	flex-direction: row;
	align-items: center;
}


.slider-title {
	width: 30%;
	text-align: left;
}


.slider-label {
	width: 15%;
	text-align: center;
}


.slider-container input.slider {
	width: 40%;
}

.statusCircle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: gray;
}

.textSection {
	max-width: 70%;
}

.transparentCard {
	background: rgba(0,0,0,0.00)
}

.value-indicator {
	width: 10%;
	text-align: center;
}

/* IDs */

#download {
  background-color: #00CED1;
  border: none;
  color: white;
  padding: 15px 32px;
  margin-left: 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 40px;
  width: 320px;
}

#mobileNavbarContainer {
	width: 80%;
	min-width: 320px;
	max-width: 1000px;
}

/* Media Queries */
@media (min-width: 1100px) {
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }

    .dropdown-menu {
      transform: translate(-20%);
    }

    #mobileNavbarContainer {
		  margin-left: 0px;
    }

    #navbarNav {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    
}

@media (max-width: 850px) {
	#bannerLabel1 {
		width: 340px;
	}

    .bg-group {
        display: block;
    }

    .bg-group-pets {
        display: block;
    }

    .bg-grid {
        display: block;
    }

    .img {
        display: block;
        width: auto;
        height: auto;
        padding-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1400px) {
	/* Change the column layout to 1 column when the screen width is 768px or less */
	.col-md-3 {
		flex: 100%; /* Make the column take up 100% width */
		max-width: 100%; /* Ensure it doesn't exceed 100% width */
	}

  #download {
    margin-top: 1000px;
  }
}

/* Animation */
@keyframes revealLeft {
  from {
	  opacity: 0;
	  transform: translate(80%,0%);
  }
  to {
	  opacity: 1;
	  transform: translate(0,0);
  }
}