@import url("https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* font-family: 'Reem Kufi', sans-serif; */
/* font-family: 'Spartan', sans-serif; */
* {
  font-size: 1em;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
body {
  font-family: "Spartan", sans-serif;
  overflow-x: hidden;
  color: #ffffff;
  background-color: #282f3b;
}

.navbar {
  background-color: #282f3b25;
  color: #ffffff;
  font-size: 1.8em;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.navbar .brand-navbar img:hover {
  opacity: 0.7;
}
.navbar ul {
  padding: 0px 30px 0px 0px;
}
.navbar ul li a {
  color: #ffffff;
  margin: 10px 0px 0px 10px;
  /* text-transform: uppercase; */
  font-size: 1em;
}
.navbar ul li a .fas {
  padding-right: 5px;
  padding-left: 5px;
}
.navbar ul li a:hover {
  color: #efb83a;
}
.navbar ul li.active > a {
  color: #efb83a;
  font-weight: bold;
  font-size: 12px;
  border-left: 3px solid #efb83a;
}
.iconStyle {
  color: #efb83a;
}

.hero {
  display: flex;
  justify-content: space-between;
  padding: 2em;
}

.hero h1 {
  /* font-family: 'Reem Kufi', sans-serif; */
  color: #efb83a;
  padding-top: 1em;
  font-size: 6em;
}
.img-responsive{
  height: auto;
}

.option {
  color: #282f3b;
  font-size: 1em;
}

.stripped {
  background-image: -webkit-linear-gradient(
    #efb83a 35%,
    #bd232b 66%,
    white 85%
  );
  background-position: 0 0;
  -webkit-background-clip: text;
  background-size: 100% 15px;
  background-repeat: repeat;
  -webkit-animation: stripes 3s linear infinite;
  animation: stripes 3s linear infinite;
  -webkit-text-fill-color: transparent;
}

.stripped {
  overflow: hidden;
  text-transform: uppercase;
  white-space: nowrap;
}
@-webkit-keyframes stripes {
  100% {
    background-position: 0 -50px;
  }
}
@keyframes stripes {
  100% {
    background-position: 0 -50px;
  }
}

#pizzatime {
  display: none;
}

@media (max-width: 480px) {
  .navbar-collapse.collapse:not(.show) {
    display: block;
  }
}

@media (min-width: 768px) {
  .navbar-collapse.collapse:not(.show) {
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
}