.font {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(0, 33, 179);
}

/* background of about */
.background {
  background-color: rgb(0, 33, 179) !important;
}

/* figure out how to make background this color */
.color {
  background-color:rgb(219, 226, 255); 
}

body.detail-view .hero, 
body.detail-view #catalog {
    display: none !important;
}

.hero {
  background-image: url(shell-toe.jpeg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 60vh;   
  width: 100%; 
}

.detail-page .hero {
    display: none;
}

.hide-hero {
    display: none !important;
}

.antonio {
    font-size: 6rem;
}

.yatra {
  font-family: "Yatra One", system-ui;
  font-weight: 400;
  font-style: normal;
}

.blurb {
    font-family: 'Times New Roman', Times, serif;
}

/* cards */

.card {
  border: 2px solid #bbb;
    background-color: #96a1e9 !important;

  box-shadow:
    0 6px 12px rgba(0,0,0,0.2),
    0 15px 35px rgba(0,0,0,0.25);

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);

  box-shadow:
    0 12px 24px rgba(0,0,0,0.25),
    0 25px 50px rgba(0,0,0,0.35);
}