@font-face {
  font-family: potra;
  src: url('./fonts/Potra.ttf');
}

.card{
  height: 28rem;
  position: relative;
}

.card:hover {
  cursor: pointer;
}

.card-img {
  object-fit: contain;
  /* height: 50%; */
  height: 270px;
  margin-top: 10px;
  width: 100%;
}

.add-modal {
  width: 70%;
  transition: 1s;
}
.exit-modal {
  font-size: 1.5rem;
  width: 5%;
}
.exit-modal:hover {
  cursor: pointer;
  color: lightskyblue;
}
.closing-modal,
.intro-modal {
  width: 80%;
  transition: 1s;
}

.closing-modal {
  z-index: 100;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease-out;
  background-color: rgb(103, 98, 98);
}

.card:hover .overlay {
  width: 100%;
}

.card:hover .card-text {
  display: block;
}

.card-text {
  display: none;
  color: blanchedalmond;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 200;

}

.add-btn {
  z-index: 12;
}

.details-img {
  object-fit: contain;
  height: 15em;
  width: 100%;
}

.cart-img{
  object-fit: contain;
  height: 8rem;
  width: 40%;
}

.quantity-button {
  font-size: 1.2rem;
}

.quantity-button:hover {
  cursor: pointer;
}

.quantity-container {
  border: 1px solid black;
  border-radius: 5px;
}

.item-container {
  width: 100%;
  height: 80%;
}

.cart-title,
.catalog-return {
  color:black;
}

.cart-item-container{
  border-radius: 1%;
}
.details-container{
  border-radius: 5px;
}

.home-tag,
.cart-icon-container :hover,
.catalog-return :hover{
  cursor: pointer;
}

.header-title{
  font-family: potra;
  font-size: 2em;
}

.item-card{
  transition: .25s all;
}

.item-card:hover{
  transform: translateY(-5px);
}

#input-form {
  border: 2px solid lightskyblue;
}

.carousel-item {
  height: 70vh;
}

.carousel-item img {
  height: 70vh;
  object-fit: cover;
}

.center-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}

.carousel-slide {
  background-size: cover;
  background-position: center;
}
.slide-1 {
  background-image: linear-gradient(#00000050, #00000050), url('./images/pedalBanner1.jpg');
}

.slide-2 {
  background-image: linear-gradient(#00000050, #00000050), url('./images/banner2.jpg');
}

.slide-3 {
  background-image: linear-gradient(#00000050, #00000050), url('./images/banner3.jpg');
}

.carousel-caption {
  font-weight: bolder;
}
.carousel-caption p{
  font-size: 1.5rem;
}

body{
  background-color: whitesmoke;
  overflow-x: hidden;
}

* {
  animation: fade-in 0.5s;
}
.footer-container {
  position: relative;
}
.footer-link:hover {
  color: yellow;
}
.footer-logo {
  height: 2.4rem;
}
.footer-creds {
  color: white;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes slide-in {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0%); }
}

@keyframes slide-out {
  0% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}