@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600');
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'optisouvenir-boldregular';
    src: url('../fonts/optisouvenir-bold-webfont.eot');
    src: url('../fonts/optisouvenir-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/optisouvenir-bold-webfont.woff') format('woff'),
         url('../fonts/optisouvenir-bold-webfont.ttf') format('truetype'),
         url('../fonts/optisouvenir-bold-webfont.svg#optisouvenir-boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
img {
  display: block;
}
html {
  scroll-behavior: smooth;
}
body {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 100%;
  font-weight: 400;
  color: #1a1a1a;
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}
.bold {
  font-weight: 700;
}
a {
  color: #1477cf;
  text-decoration: none;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  font-weight: bold;
}
a:hover {
  color: #ffffff;
  text-decoration: underline;
}
h1, h2, h3, h4, h5 {
  margin-bottom: .75rem;
}
h1 {
  color: #0171b9;
  font-family: "Caprasimo", serif;
  font-weight: 400;
  font-style: normal;
}
h2 {
  font-weight: 700;
}
ul {
  margin-left: 0;
  padding-left: 1em;
}
iframe {
  border: 0;
}
.container {
  //border: 1px solid blue;
  margin: 0 auto;
}
.btn  {
  display: inline-block;
  line-height: 1;
  text-align: center;
  transition: all .3s;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 600;
  fill: var( --e-global-color-00ac71c );
  color: var( --e-global-color-00ac71c );
  background-color: var( --e-global-color-secondary );
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  border-color: var( --e-global-color-secondary );
  border-radius: 300px 300px 300px 300px;
}
.btn:hover {
  background-color: #ffffff;
  text-decoration: none;
}
.btn-primary {
  background: #d61d23;
  border-color: #d61d23;
  color: #ffffff;
}
.btn-secondary {
  background: #ffcd34;
  border-color: #ffcd34;
  color: #1b1b1d;
}
.btn-outline {
  border-color: #0171b9;
  color: #0171b9;
  font-size: 20px;
  font-weight: 700;
}
.btn-primary:hover {
  color: #d61d23;
  border-color: #d61d23;
}
.btn-secondary:hover {
  color: #1b1b1d;
  border-color: #1b1b1d;
}
.btn-outline:hover {
  color: #ffffff;
  background: #0171b9;
}

/* header */

header {
  height: 64px;
  z-index: 600;
  position: relative;
  background: #ffffff;
}
header .navbar-brand {
  overflow: hidden;
  height: 100%;
}
header .navbar-brand img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}
header .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
header .nav-link {
  text-transform: uppercase;
  margin: 0 1.5rem;
  padding: 1rem 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: inline-block;
  position: relative;
  transition: color 0.1s ease;
  font-size: 22px;
}
header .nav-link::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--bellhop-color-grayscale-100, #d61d23);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
  overflow: hidden;
}
header .nav-link:hover {
  text-decoration: none;
  color: #0171b9;
}
header .nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
header .navigation-header-hamburger {
  background: none;
  color: inherit;
  border: none;
  padding: 0px;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  text-align: left;
    box-shadow: none !important;
    outline: none !important; /* Also remove the default outline */
}
header .navigation-header-hamburger .icon--close {
  display: none;
}
body.is-menu-open header .navigation-header-hamburger .icon--hamburger {
  display: none;
  fill: #1a1a1a;
}
body.is-menu-open header .navigation-header-hamburger .icon--close {
  display: inline;
  fill: #1a1a1a;
}

/* social styles */

.social-media {
  display: flex;
  flex-wrap: nowrap;
  min-width: 126px;
  margin-left: 1rem;
}
.social-media a {
  text-decoration: none;
}
.icon-social {
  width: 30px;
  height: 30px;
  background: #0171b9;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0171b9;
  font-size: 0;
  -moz-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
  border: 2px solid #ffffff;
  margin: 0 5px;
}
.icon-social:hover {
  background: #ffffff;
  color: #0171b9;
  border: 2px solid #0171b9;
}
.icon-fb {
  height: 18px;
  width: 18px;
}
.icon-ig {
  height: 18px;
  width: 18px;
}
.icon-social:hover .icon-fb svg {
  fill: #0171b9;
}
.icon-social:hover .icon-ig svg {
  fill: #0171b9;
}

/* Off-canvas menu (left slide-in) */
.offcanvas__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease;
  /* Keep overlay below the fixed header so header stays visible */
  z-index: 580; /* header wrapper uses ~600 */
}

.offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100vw; /* Full-width slide-in */
  /* Match header blue background */
  background: #0171b9;
  color: #ffffff;
  transform: translateX(-105%);
  transition: transform 260ms ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  /* Keep panel below the main header */
  z-index: 590;
  display: flex !important;
  flex-direction: column;
  padding-top: 64px;
  visibility: visible;
}

.offcanvas .container {
  display: block;
}

.offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.offcanvas__title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.offcanvas__close {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bellhop-color-grayscale-100, #fff);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  background: transparent;
}

.offcanvas__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.offcanvas__brand img {
  display: block;
}
.offcanvas__spacer {
  width: 2.5rem;
  height: 2.5rem;
}

.offcanvas__nav {
  overflow: auto;
  width: 100%;
}

.offcanvas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

.offcanvas__link {
  display: inline-block;
  padding: 14px 0;
  margin: 2px 0;
  color: var(--bellhop-color-grayscale-100, #fff);
  font-family:
    'Josefin Sans',
    'Noto Sans Display',
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  transition: color 0.2s ease;
}

.offcanvas__link::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--bellhop-color-grayscale-100, #ffffff);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease-out;
}

.offcanvas__link:hover {
  color: var(--bellhop-color-grayscale-100, #ffffff);
  text-decoration: none;
}

.offcanvas__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.offcanvas__property {
  margin-top: auto;
  background: var(--bellhop-color-brand-ice-blue, #d4e0ed);
  color: var(--bellhop-color-text-on-light, #2a2b2f);
}
.offcanvas__property-inner {
  padding-top: 40px;
  padding-bottom: 40px;
}
.offcanvas__property-name {
  color: var(--bellhop-color-text-on-light, #2a2b2f);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.offcanvas__property-address {
  margin-bottom: 6px;
}
.offcanvas__property-meta {
  display: block;
  gap: 24px;
  align-items: center;
}
.offcanvas__property-meta .property-sep {
  opacity: 0.6;
  visibility: visible;
}
/* Meta items and icons (off-canvas property footer) */
.offcanvas__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bellhop-color-text-on-light, #2a2b2f);
}
.offcanvas__meta-item + .offcanvas__meta-item {
  margin-left: 0.25rem;
}
.offcanvas__meta-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
}
.offcanvas__meta-icon.is-ring {
  width: 18px;
  height: 18px;
  /* border-radius: 999px; */
  /* border: 1.25px solid rgba(42, 43, 47, 0.9); */
  box-sizing: content-box;
  padding: 2px;
}
.offcanvas__meta-item a {
  color: inherit;
  text-decoration: none;
}

/* Align address and meta on one row at medium+ widths to match design */
@media (min-width: 48rem) {
  .offcanvas__property-inner {
    display: grid;
    /* Limit address column so meta sits closer, matching design */
    grid-template-columns: minmax(0, 50ch) auto;
    grid-template-areas:
      'name name'
      'address meta';
    row-gap: 10px;
    column-gap: 32px;
  }
  .offcanvas__property-name {
    grid-area: name;
  }
  .offcanvas__property-address {
    grid-area: address;
  }
  .offcanvas__property-meta {
    grid-area: meta;
    justify-self: start;
    display: flex;
  }
}

/* Open state */
body.is-menu-open .offcanvas {
  transform: translateX(0);
}
body.is-menu-open #site-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Hide/show hooks (for a11y) */
.offcanvas[hidden] {
  display: block; /* allow transition */
}
.offcanvas__overlay[hidden] {
  display: block; /* allow transition */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .offcanvas,
  .offcanvas__overlay {
    transition: none;
  }
}

/* hero slick slider */

.fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.fade.slick-initialized {
  visibility: visible;
  opacity: 1;
}
.fade.slick-dotted.slick-slider {
  margin-bottom: 0;
}

#container-hero {
  position: relative;
  height: 175px;
}
#container-hero .container-slider-dots {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}
#container-hero .container-slider-dots .container {
  position: relative;
  overflow: hidden;
  height: 100%;
}
#container-hero .slider {
  height: 100%;
}
#container-hero .slick-list {
  height: 100%;
}
#container-hero .slick-list .slick-track{
  height: 100%;
}
#container-hero .slick-slide {
  height: 100%;
}
#container-hero .slick-track .slick-slide .image {
  display: block;
  width: 100%;
  height: 100%;
}
#container-hero .slick-track .slick-slide .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
#container-hero .slick-dots {
  text-align: right;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#container-hero .slick-dots li {
  display: block;
  width: 19px;
  height: 19px;
  margin: 5px;
}
#container-hero .slick-dots li button {
  width: 19px;
  height: 19px;
}
#container-hero .slick-dots li button::before {
  font-size: 19px;
  line-height: 19px;
  width: 19px;
  height: 19px;
  color: #ffffff;
}
#container-hero .slick-dots li.slick-active button::before {
  opacity: 1;
  color: #ffffff;
}

/* cards */

.card {
  border: 0;
  background: #f4f4f4;
  border-radius: 20px;
  margin-top: 1.5rem;
}
.card .card-img-top {
  border-top-left-radius: 20px;  
  border-top-right-radius: 20px;  
}
.card .card-body {
  padding: 2rem;
}
.card .card-footer {
  background-color: transparent;
  border-top: 0;
  padding: 0 2rem 2rem 2rem;
}
.card .card-title {
  color: #0171b9;
}

/* delivery section */

#delivery {
  background: #ffcd34 url(../images/bg-delivery.png) repeat-y;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
#delivery .app-button {
  padding: 1rem .25rem;
  max-width: 96px;
}
#delivery .app-button:hover{
  animation: bounce 1.2s ease;  /* animation set */
  animation-play-state: running;              /* Run on hover! */
}

/* about section */

#about {
  font-size: 22px;
  font-weight: 600;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
#about .btn {
  font-size: 22px;
  margin: .75rem .5rem 0 .5rem;
}

/* hours and location */

#hours-and-location .iframe-container {
  padding-top: 2rem;
  height: 100%;
}
#hours-and-location iframe {
  border-radius: 15px;
  max-height: 525px;
  min-height: 400px;
}
#hours-and-location .hal-title {
  color: #0171b9;
  font-weight: 600;
  text-transform: uppercase;
}
#hours-and-location .hours {
  margin-bottom: 2rem;
  width: 100%;
}
#hours-and-location .address {
  font-size: 18px;
  margin-bottom: .5rem;
}
.address a {
  font-weight: 400;
  color: inherit;
}
#hours-and-location .btn-outline {
  margin-top: .5rem;
}

#delivery,
#hours-and-location {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* footer */

footer {
  background: #0171b9;
  color: #ffffff;
  padding-top: 2rem;
}
footer a {
  color: #ffffff;
  font-weight: 300;
  text-transform: uppercase;
}
footer .footer-logo {
  margin: 0 auto;
  margin-bottom: 1rem
}
footer .address {
  margin-bottom: .5rem;
  line-height: 1.3;
}
footer .footer-title {
  font-weight: 700;
  font-size: 20px;
  margin-top: 1rem;
  margin-bottom: .5rem;
}
footer .footer-site-map {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer .footer-site-map li {
  margin: .25rem 0;
}
footer .app-buttons {
  display: flex;
}
footer .app-buttons a {
  margin: 5px;
}
footer .footer-delivery img {
  max-width: 46px;
}
footer .footer-social-media {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
footer .footer-social-media li {
  display: inline-block;
  margin-right: .5rem;
  margin-bottom: 2.5rem;
}
footer .footer-social-media li .icon-social .icon-fb svg {
  fill: #ffffff;
}
footer .footer-social-media li .icon-social .icon-ig svg {
  fill: #ffffff;
}
footer .footer-social-media li .icon-social:hover .icon-fb svg {
  fill: #0171b9;
}
footer .footer-social-media li .icon-social:hover .icon-ig svg {
  fill: #0171b9;
}
footer .btn-outline {
  border: 2px solid #ffffff;
  color: #ffffff;
}
footer .btn-outline:hover {
  border-color: #0171b9;
  color: #0171b9;
  background: #ffffff;
}
footer .copyright {
  margin-top: 2rem;
  background: #d61d23;
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  padding: .5rem 0;
}

/* menu page */

#menu {
  font-size: 18px;
  font-weight: 500;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
#menu h2 {
  color: #0171b9;
  text-transform: uppercase;
  margin-bottom: 0;
}
#menu h3 {
  font-weight: 500;
  margin-bottom: 0;
}

/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .container {
    //border: 1px solid red;
  }

  footer .footer-title {
    margin-top: 0;
  }


}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  .container {
    //border: 1px solid orange;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  .container {
    //border: 1px solid blue;
  }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  .container {
    //border: 1px solid purple;
    max-width: 1284px;
  }
  header .container,
  #menu .container,
  #container-hero .container {
    max-width: 1600px;
  }

  #container-hero {
    height: 440px;
  }

  #hours-and-location .iframe-container {
    padding-top: 0;
  }

  h1 {
    font-size: 56px;
  }
  h2 {
    font-size: 22px;
  }
  h3 {
    font-size: 18px;
  }

  header {
    height: 101px;
  }
  header .navbar-brand img {
  }
  header .navbar {
    justify-content: center;
  }
  footer {
    padding-top: 5.5rem;
  }
  footer .copyright {
    margin-top: 5.5rem;
  }

  #about {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  #delivery {
    padding-top: 5rem;
    padding-bottom: 5rem;
    font-size: 22px;
  }
  #delivery .app-button {
    padding: 1rem 1rem 0 1rem;
    max-width: 106px;
  }
  #hours-and-location {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  #hours-and-location .hours {
    width: 50%;
  }

}

/* Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1320px) {

  .container {
    //border: 1px solid black;
  }

}

@media (min-width: 1460px) {}
@media (min-width: 1560px) {}
@media (min-width: 1600px) {}


/* Subtle slide-in from right (compatible with animate.css naming) */
@keyframes slideInRightSmall {
  0% {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

.animate__slideInRightSmall {
  animation-name: slideInRightSmall;
}

/* Subtle zoom-out reveal (scales down to 1 while fading in) */
@keyframes zoomOutReveal {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate__zoomOutReveal {
  animation-name: zoomOutReveal;
}

.animate__animated {
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}

/* Scroll Animation System Styles */
.animation-container {
  /* Ensure smooth transitions and proper initial states */
  transition: opacity 0.3s ease;
  /* Initially hide elements until animation is triggered */
  opacity: 0;
  transform: translateY(20px);
}

.animation-container[data-animated='true'] {
  /* Final state - ensure element is fully visible and maintains its styling */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Show element when animation starts */
.animation-container.animate__animated {
  opacity: 1;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1) !important;
    animation-timing-function:cubic-bezier(.215,.61,.355,1) !important
  }
  0% {
    opacity:0 !important;
    -webkit-transform:scale3d(.3,.3,.3) !important;
    transform:scale3d(.3,.3,.3) !important
  }
  20% {
    -webkit-transform:scale3d(1.1,1.1,1.1) !important;
    transform:scale3d(1.1,1.1,1.1) !important
  }
  40% {
    -webkit-transform:scale3d(.9,.9,.9) !important;
    transform:scale3d(.9,.9,.9) !important
  }
  60% {
    opacity:1 !important;
    -webkit-transform:scale3d(1.03,1.03,1.03) !important;
    transform:scale3d(1.03,1.03,1.03) !important
  }
  80% {
    -webkit-transform:scale3d(.97,.97,.97) !important;
    transform:scale3d(.97,.97,.97) !important
  }
  to {
    opacity:1 !important;
    -webkit-transform:scaleX(1) !important;
    transform:scaleX(1) !important
  }
}
@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1) !important;
    animation-timing-function:cubic-bezier(.215,.61,.355,1) !important;
  }
  0% {
    opacity:0 !important;
    -webkit-transform:scale3d(.3,.3,.3) !important;
    transform:scale3d(.3,.3,.3) !important;
  }
  20% {
    -webkit-transform:scale3d(1.1,1.1,1.1) !important;
    transform:scale3d(1.1,1.1,1.1) !important
  }
  40% {
    -webkit-transform:scale3d(.9,.9,.9) !important;
    transform:scale3d(.9,.9,.9) !important
  }
  60% {
    opacity:1;
    -webkit-transform:scale3d(1.03,1.03,1.03) !important;
    transform:scale3d(1.03,1.03,1.03) !important
  }
  80% {
    -webkit-transform:scale3d(.97,.97,.97) !important;
    transform:scale3d(.97,.97,.97) !important
  }
  to {
    opacity:1 !important;
    -webkit-transform:scaleX(1) !important;
    transform:scaleX(1) !important;
  }
}
.animate__bounceIn {
  -webkit-animation-duration:.75s !important;
  animation-duration:.75s !important;
  -webkit-animation-duration:calc(var(--animate-duration)*.75) !important;
  animation-duration:calc(var(--animate-duration)*.75) !important;
  -webkit-animation-name:bounceIn !important;
  animation-name:bounceIn !important
}

/** fadeIn **/

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in-image {
  animation: fadeIn 3s;
}