* {
  font-family: 'Parkinsans', sans-serif;
}
:root {
  --primary-color: #93010f;
  --utility-color: #fff;
  --font-color: #5a3535;
  --font-color-1: #5c5b5b;
}
a {
  font-family: 'Sour Gummy', sans-serif;
}
/* header {
  border-bottom: 1px solid var(--primary-color);
} */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Sour Gummy', sans-serif;
  color: var(--primary-color) !important;
  line-height: 1.3 !important;
}
.highlight-text {
  font-family: 'Sour Gummy', sans-serif;
  padding: 0 6px;
  position: relative;
  color: var(--utility-color);
  z-index: 9;
}
.highlight {
  background-color: var(--primary-color) !important;
  border-radius: 12px;
  color: var(--utility-color) !important;
  position: absolute;
  top: 0;
  transform: rotate(357deg);
  width: 100%;
  height: 67px;
  z-index: 1;
}
.highlight-1 {
  background-color: var(--primary-color) !important;
  border-radius: 12px;
  color: var(--utility-color) !important;
  position: absolute;
  top: 0;
  transform: rotate(357deg);
  width: 100%;
  height: 60px;
  z-index: 1;
}
.w-fit {
  width: fit-content;
  display: inline-block;
}
h1 {
  font-size: 48px !important;
  font-weight: 700 !important;
}
h2 {
  font-size: 42px !important;
  font-weight: 700 !important;
}
h3 {
  font-size: 36px !important;
  font-weight: 700 !important;
}
h4 {
  font-size: 28px !important;
  font-weight: 600 !important;
}
h5 {
  font-size: 20px !important;
  font-weight: 600 !important;
}
h6 {
  font-size: 18px !important;
  font-weight: 600 !important;
}
p {
  color: var(--font-color);
}
.p-1 {
  font-size: 18px !important;
}
.navbar .site-logo {
  width: 125px;
}
.header-nav .nav-link {
  font-size: 20px;
}
.header-nav .nav-link:hover {
  color: var(--primary-color) !important;
}
.header-nav .navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--primary-color) !important;
}
.hero-image {
  height: 100%;
}
.hero-image img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.img-with-text {
  height: 100%;
}
.img-with-text img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 12px;
  object-fit: cover;
}
.img-text {
  height: 100%;
  justify-content: center;
  gap: 12px;
}
.f-img-with-text {
  height: 100%;
}
.f-img-with-text img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 320 px;
  border-radius: 12px;
  object-fit: cover;
}
.f-img-text {
  height: 100%;
  justify-content: center;
  gap: 12px;
}
.btn-1 {
  font-size: 20px;
  color: var(--utility-color);
  background-color: var(--primary-color);
  padding: 12px 18px;
  text-decoration: none !important;
  border-radius: 12px;
  border: 2px solid var(--primary-color);
  transition: all 0.3s ease;
  width: fit-content;
}
.btn-1:hover {
  background-color: var(--utility-color);
  color: var(--primary-color);
}
.btn-2 {
  font-size: 20px;
  color: var(--primary-color);
  padding: 12px 18px;
  text-decoration: none !important;
  border-radius: 12px;
  border: 2px solid var(--primary-color);
  transition: all 0.3s ease;
  width: fit-content;
}
.btn-2:hover {
  background-color: var(--primary-color);
  color: var(--utility-color);
}
.btn-svg {
  fill: var(--primary-color);
  transition: all 0.3s ease;
}
.btn-2:hover .btn-svg {
  fill: var(--utility-color);
}
.open-hours {
  display: flex;
  color: var(--font-color);
  padding: 12px 18px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--primary-color);
  border-radius: 12px;
}
.address {
  text-decoration: none !important;
  color: var(--font-color);
  display: flex;
  padding: 12px 18px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--primary-color);
  border-radius: 12px;
}
.font-small {
  font-size: 11px;
}
.accordion-faq {
  box-shadow: 1px 1px 14px 0px #959595;
  border-radius: 12px;
}
.accordion-faq .accordion-button:focus {
  box-shadow: none !important;
}
.accordion-faq .accordion-button:not(.collapsed) {
  color: var(--font-color) !important;
  background-color: transparent !important;
}
.accordion-faq .accordion-button {
  font-size: inherit !important;
  color: var(--font-color-1);
}
.accordion-faq .accordion-body {
  color: var(--font-color-1);
}
.featured-service {
  border-radius: 16px;
  box-shadow: 1px 1px 14px 0px #959595;
  padding: 38px 34px;
  margin: 0 !important;
  position: relative;
  transition: transform 0.3s ease;
}
.featured-service:nth-child(1) {
  margin-top: 0;
}

.featured-service:nth-child(2) {
  margin-top: -50px; /* Adjust this value for stacking effect */
}

.featured-service:nth-child(3) {
  margin-top: -100px; /* Adjust this value for stacking effect */
}

.featured-service:nth-child(4) {
  margin-top: -150px; /* Adjust this value for stacking effect */
}
.featured-service.in-view {
  transform: translateY(0); /* This will create a smoother stacking effect */
}
.featured-services .row > * {
  margin: 0 !important;
}
@media (max-width: 767px) {
  .featured-service {
    gap: 12px;
  }
  .header-nav .navbar-brand {
    position: relative;
    transition: transform 0.3s ease;
  }
  @keyframes centerLogo {
    from {
      left: 0;
      transform: translateX(0);
    }
    to {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  @keyframes leftLogo {
    from {
      left: 50%;
      transform: translateX(-50%);
    }
    to {
      left: 0;
      transform: translateX(0);
    }
  }
  .header-nav .navbar-brand.center-logo {
    animation-name: centerLogo;
    animation-duration: 0.3s; /* Matches your transition duration */
    animation-timing-function: ease;
    animation-fill-mode: forwards; /* Ensures the animation stays at the end state */
    position: relative; /* Required for the `left` property to work */
    left: 50%; /* This should align with your keyframes */
    transform: translateX(-50%);
  }
  .header-nav .navbar-brand.collapsed {
    animation-name: leftLogo;
    animation-duration: 0.3s; /* Matches your transition duration */
    animation-timing-function: ease;
    animation-fill-mode: forwards; /* Ensures the animation stays at the end state */
    position: relative; /* Required for the `left` property to work */
    left: 0; /* This should align with your keyframes */
    transform: translateX(0);
  }
}

/* #93010f accent Color */

/* Slide-in from left */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide-in from right */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide-in from top */
@keyframes slideInTop {
  from {
    transform: translateY(
      -100%
    ); /* Start above the element's original position */
    opacity: 0;
  }
  to {
    transform: translateY(0); /* End at its normal position */
    opacity: 1;
  }
}

/* Slide-in from bottom */
@keyframes slideInBottom {
  from {
    transform: translateY(
      100%
    ); /* Start below the element's original position */
    opacity: 0;
  }
  to {
    transform: translateY(0); /* End at its normal position */
    opacity: 1;
  }
}

/* Initially, set opacity to 0 */
.slide-in-left,
.slide-in-right,
.slide-in-top,
.slide-in-bottom {
  opacity: 0;
}

/* Apply the animations when the element is visible */
.slide-in-visible {
  animation-duration: 1s;
  animation-fill-mode: forwards; /* Keeps the final state of the animation */
  animation-timing-function: ease-out;
  opacity: 1; /* Make sure the element stays visible after animation */
}

/* Specific animations for each direction */
.slide-in-left.slide-in-visible {
  animation-name: slideInLeft;
}

.slide-in-right.slide-in-visible {
  animation-name: slideInRight;
}

.slide-in-top.slide-in-visible {
  animation-name: slideInTop; /* Apply slideInTop animation */
}

.slide-in-bottom.slide-in-visible {
  animation-name: slideInBottom; /* Apply slideInBottom animation */
}