@charset "UTF-8";
/* CSS Document */
body {
  padding-top: 95px;
}
@media (max-width: 576px) {
  .small-hide {
    display: none;
  }
}
/* Dropdown Menu Smooth Transition */
.dropdown-menu {
  display: block; /* Keep the menu in the flow */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px); /* Initial position (slide down effect) */
  transition: all 0.3s ease-in-out; /* Smooth transition */
}
/* Adding vertical bar next to nav-item */
@media (min-width: 992px) { /* Adjust breakpoint as needed (lg, md, sm, etc.) */
  .navbar-nav .nav-item:not(:last-child) .nav-link {
    border-right: 1px solid #ccc !important; /* Add a right border */
    padding-right: 1rem !important; /* Add spacing to the right */
    padding-left: 1rem !important; /* Add spacing to the left */
  }
  /* Optional: Adjust padding for the first and last items if needed */
  .navbar-nav .nav-item:first-child .nav-link {
    padding-left: 0 !important;
  }
  .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0 !important;
  }
}
/* slider fade effect

/* Change the duration for the slide effect */
.carousel-item {
  transition: transform 1.5s ease-in-out; /* Adjust the 1.5s as desired */
}
/* If using .carousel-fade, adjust its specific transition properties */
.carousel-fade .carousel-item {
  transition-duration: .5s; /* Adjust the 1.5s as desired */
}
/* set carousel image height */
/* Default height for extra small devices */
.carousel-img {
  height: 250px;
  object-fit: cover;
}
/* Height for medium devices and up */
@media (min-width: 768px) {
  .carousel-img {
    height: 400px;
  }
}
/* Height for large devices and up */
@media (min-width: 992px) {
  .carousel-img {
    height: 500px;
  }
}
/* Gradient background for carousel */
#TGTcarousel .carousel-item::before {
  content: "";
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); /* Adjust colors/opacity as needed */
  display: block;
  position: absolute;
  top: 0;
  left: 0; /* Ensure the gradient covers the full width of the item */
  width: 100%;
  height: 100%;
  z-index: 1; /* Place the gradient above the image but below the caption */
}
/* Ensure the carousel caption is above the gradient */
#TGTcarousel .carousel-caption {
  position: absolute;
  bottom: 0px; /* Adjust positioning as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Place the caption above the gradient */
  width: 100%; /* Ensure caption spans full width */
}
/* Carousel caption lower for smaller device */
@media (max-width: 576px) {
  #TGTcarousel .carousel-caption {
    bottom: -20px; /* Adjust positioning as needed */
  }
}
/* typography */
.smallTitle {
  letter-spacing: 3px !important;
}
.featuredTitle {
  font-family: "Baskervville", serif;
  font-weight: 500;
}
.cursiveText {
  font-family: "Baskervville", serif;
  font-weight: 300;
}
/* Color Pallete */
.ChefNavy {
  color: rgb(17, 35, 51) !important;
}
.bg-ChefNavy {
  bg-opacity: 1 !important;
  background-color: rgb(17, 35, 51) !important;
}
#pillars.border-ChefNavy, .border-ChefNavy {
  border-color: #112333 !important;
}
.DeepTeal {
  color: rgb(37, 90, 116) !important;
}
.bg-DeepTeal {
  bg-opacity: 1 !important;
  background-color: rgb(37, 90, 116) !important;
}
#pillars.border-DeepTeal, .border-DeepTeal {
  border-color: #255a74 !important;
}
.SmokedCocoa {
  color: rgb(48, 35, 27) !important;
}
.bg-SmokedCocoa {
  bg-opacity: 1 !important;
  background-color: rgb(48, 35, 27) !important;
}
#pillars.border-SmokedCocoa, .border-SmokedCocoa {
  border-color: #30231b !important;
}
.HerbTaupe {
  color: rgb(127, 98, 73) !important;
}
.bg-HerbTaupe {
  bg-opacity: 1 !important;
  background-color: rgb(127, 98, 73) !important;
}
#pillars.border-HerbTaupe, .border-HerbTaupe {
  border-color: #7f6249 !important;
}