/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

#hero {
     width: 100%;
     height: 100vh;
     background-color: rgba(39, 37, 34, 0.8);
     overflow: hidden;
     padding: 0;
     margin-top: -40px;
     box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
     position: relative;
 }

 #hero .carousel-item {
     width: 100%;
     height: 100vh;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
 }

 #hero .carousel-item::before {
     content: "";
     background-color: rgba(12, 11, 10, 0.5);
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
 }

 #hero .carousel-container {
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     bottom: 0;
     top: 0;
     left: 0;
     right: 0;
 }

 #hero .carousel-content {
     text-align: center;
 }

 #hero h2 {
     color: #fff;
     margin-bottom: 30px;
     font-size: 40px;
     font-family: 'Poppins';
     font-weight: 600;
     text-shadow: 1px 1px 8px black;
 }

 #hero h2 span {
     color: #ffb03b;
 }

 #hero p {
     width: 80%;
     -webkit-animation-delay: 0.4s;
     animation-delay: 0.4s;
     margin: 0 auto 30px auto;
     color: #fff;
 }

 #hero .carousel-inner .carousel-item {
     transition-property: opacity;
     background-position: center top;
 }

 #hero .carousel-inner .carousel-item,
 #hero .carousel-inner .active.carousel-item-start,
 #hero .carousel-inner .active.carousel-item-end {
     opacity: 0;
 }

 #hero .carousel-inner .active,
 #hero .carousel-inner .carousel-item-next.carousel-item-start,
 #hero .carousel-inner .carousel-item-prev.carousel-item-end {
     opacity: 1;
     transition: 0.5s;
 }

 #hero .carousel-inner .carousel-item-next,
 #hero .carousel-inner .carousel-item-prev,
 #hero .carousel-inner .active.carousel-item-start,
 #hero .carousel-inner .active.carousel-item-end {
     left: 0;
     transform: translate3d(0, 0, 0);
 }

 #hero .carousel-control-next-icon,
 #hero .carousel-control-prev-icon {
     background: none;
     font-size: 30px;
     line-height: 0;
     width: auto;
     height: auto;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50px;
     transition: 0.3s;
     color: rgba(255, 255, 255, 0.5);
     width: 54px;
     height: 54px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 #hero .carousel-control-prev,
 #hero .carousel-control-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 60px;
     height: 60px;
     opacity: 1;
     z-index: 5;
 }
 #hero .carousel-control-prev { left: 18px; }
 #hero .carousel-control-next { right: 18px; }

 #hero .carousel-control-next-icon:hover,
 #hero .carousel-control-prev-icon:hover {
     background: rgba(255, 255, 255, 0.3);
     color: rgba(255, 255, 255, 0.8);
 }

 #hero .carousel-indicators {
     position: absolute;
     left: 50%;
     bottom: 22px;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     margin: 0;
     z-index: 6;
 }
 #hero .carousel-indicators button {
     width: 10px;
     height: 10px;
     border: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.45);
     cursor: pointer;
     padding: 0;
 }
 #hero .carousel-indicators button.active {
     background: #ffffff;
 }

 #hero .btn-menu,
 #hero .btn-book {
     font-weight: 600;
     font-size: 13px;
     letter-spacing: 1px;
     text-transform: uppercase;
     display: inline-block;
     padding: 12px 30px;
     border-radius: 50px;
     transition: 0.5s;
     line-height: 1;
     margin: 0 10px;
     -webkit-animation-delay: 0.8s;
     animation-delay: 0.8s;
     color: #fff;
     border: 2px solid #ed3c0d;
 }

 #hero .btn-menu:hover,
 #hero .btn-book:hover {
     background: #ed3c0d;
     color: #fff;
 }

 @media (max-width: 768px) {
     #hero h2 {
         font-size: 26px;
         font-family: 'Poppins';
         font-weight: 600;
         text-shadow: 1px 1px 8px black;
     }
     #hero .carousel-control-prev { left: 10px; }
     #hero .carousel-control-next { right: 10px; }
     #hero .carousel-control-next-icon,
     #hero .carousel-control-prev-icon {
         width: 44px;
         height: 44px;
         font-size: 24px;
     }
 }

 @media (min-width: 1024px) {
     #hero p {
         width: 50%;
     }

     #hero .carousel-control-prev,
     #hero .carousel-control-next {
         width: 5%;
     }
 }