@import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;400;700&display=swap');

/* Custom colors */
:root {
  --my-blue-rgb: 110, 154, 192;
  --my-yellow-rgb: 254, 252, 244;
  --light: 248, 249, 250;
}
.text-blue { color: rgb(var(--my-blue-rgb)); }
.bg-blue { background-color: rgb(var(--my-blue-rgb)); }
.bg-yellow { background-color: rgb(var(--my-yellow-rgb)); }
.text-hover-blue:hover, .text-hover-blue:active  {
  color: rgb(var(--my-blue-rgb));
}
.btn-outline-blue {
  border-color: rgb(var(--my-blue-rgb));
  color: rgb(var(--my-blue-rgb));
}
.btn-outline-blue:hover, .btn-outline-blue:active {
  background-color: rgb(var(--my-blue-rgb));
  color: rgb(var(--light));
}
.btn-bg-light {
  background-color: rgb(var(--light));
}

/* font */
body {
  font-family: 'Martel Sans', sans-serif;
}
p {
  font-weight: 200;
}
/* vertical shimming to compensate for low descender line */
.btn {
  padding-bottom: 1px;
}
.navbar-brand, .navbar-collapse {
  margin-top: 5px;
}
.nav-item .btn {
  margin-top: 1px;
}
/* Add tiny font size */
.fs-7 {
  font-size: 0.8rem;
}
/* Add list without bullets */
.list-style-none {
  list-style-type: none;
  padding-left: 0;
}

/* move effective location of id to compensate for fixed header */
.ref::before {
  display: block;
  content: " ";
  margin-top: -61px;
  height: 61px;
  visibility: hidden;
  pointer-events: none;
}

/* splash image */
.container-hero {
  height: 100vh;
  background-image: url("../images/hero.jpg");
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  font-weight: 200;
  line-height: 1.2;
  font-size: 8.333vw;
  padding-top: 10vh;
  padding-bottom: 10vh;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .container-hero {
    font-size: 4rem;
  }
}
.container-hero .subtitle {
  font-size: 0.5em;
}
.container-hero .btn {
  margin-top: auto;
}

/* info bar large icons */
.row-info i {
  font-size: 2.4em;
}
/* Reduce size of info bar on medium to make it fit horizontally */
@media (min-width: 768px) and (max-width: 991px) {
  .row-info, .row-info h6 {
    font-size: 0.9rem;
  }
}

/* detail card large icons */
.row-details .card {
  position: relative;
  overflow: hidden;
}
.row-details .card i {
  font-size: 4.4rem;
  left: -1.8rem;
  position: absolute;
  opacity: 25%;
}

/* hotel and park card images */
.tall-card-image {
  width: 80%;
  max-width: 280px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.tall-card-image:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.tall-card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* not at all conspicuous input */
#naac-switcher {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: height 1s ease 0s, margin 1s ease 0s;
}
#naac-switcher input:focus, #naac-switcher button:focus {
  box-shadow: none;
  outline: 0;
}
#naac-switcher > div {
  position: absolute;
  width: 100%;
  top: 0%;
  transition: top 1s ease 0s;
}