style.css

:root {
    --bg-primary: #e7fbfb;
}
a, h3, p{
    color: #67dfc1;
}
a:hover {
    text-decoration: none;
    color: #67dfc1;
  }
#header{
    background-color: #67dfc1;
    color: #fff;
}
.navbar-light .navbar-brand{
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
}
.navbar-brand:hover{
    color: #fff;
}
.navbar-brand img{
    width: 13%;
}
.navbar-toggler{
    background-color: #fff;
}
.nav-item{
    padding: 0 15px;
}
.nav-link{
    color: #582705;
    cursor: pointer;
    font-size: 1.2rem;
}
.navbar-light .navbar-nav .nav-link:hover{
    color: #fff;
}
.title{
    font-weight: bold;
    font-size: 3.7rem;
    line-height: 1.4;
}
.download-button{
    margin: 10% 3% 5% 0;
}
.title-image{
    width: 90%;
    height: 100%;
}
.pets{
    margin: 2% 0;
}
.pets-text{
    color: #67dfc1;
    text-align: center;
}
.bg-main{
    transition: background-color 1s;
}
.bg-main:hover{
    background-color: var(--bg-primary);
}
.pet-img {
    width: 100%;
}
.carousel-indicators {
	left: 0;
	top: auto;
    bottom: -60px;
}
.carousel-indicators .active{
	background: #707070;
}
.carousel-indicators li{
    background: #67dfc1;
    border-radius: 100%;
    width: 22px;
    height: 6px;
    margin-bottom: 3%;
}

@media (max-width: 768px){
    .bg-main{
        margin-bottom: 1rem;
    }
    .carousel-indicators{
        display: none;
    }
}