.custom-navbar {
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    /* depth effect */
    transition: all 0.3s ease-in-out;
    backdrop-filter: blur(6px);
    z-index: 1030;

}

.navbar-nav .nav-link {
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    background: #f1f1f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    /* lift effect */
    color: #0d6efd !important;
}

.navbar-brand img {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
}

.navbar-toggler {
    border: none;
    outline: none;
}


 .custom-header {
   background: linear-gradient(145deg, #ffffff, #f4f4f4);
   overflow: hidden;
   padding-top: 100px;
   margin-top: 129px;
   position: relative;
   z-index: 1;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);

 }

 .custom-title {
   text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.15);
   color: #333;
 }

 .custom-subtext {
   max-width: 800px;
   font-size: 1.1rem;
   color: #555;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
 }

 .btn-3d {
   padding: 12px 25px;
   border-radius: 12px;
   font-weight: 600;
   transition: all 0.3s ease-in-out;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
 }

 .btn-3d:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
 }

 .bg-light-3d {
   background: linear-gradient(135deg, #f8f9fa, #ffffff);
 }

 .section-title-3d {
   text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.1);
 }

 .card-3d {
   background: #fff;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card-3d:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .icon-list-3d img.icon {
   width: 24px;
   height: 24px;
   vertical-align: middle;
 }

 img.shadow-lg {
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .gallery-card {
   perspective: 1000px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border-radius: 12px;
   overflow: hidden;
   transform-style: preserve-3d;
   will-change: transform;
 }

 .gallery-card img {
   transition: transform 0.5s ease, box-shadow 0.5s ease;
   border-radius: 12px;
 }

 .gallery-card:hover img {
   transform: scale(1.05) rotateY(6deg);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }

 .reservation-card {
   background: linear-gradient(to bottom right, #fdfdfd, #f0f0f0);
   transform-style: preserve-3d;
   perspective: 1000px;
   transition: transform 0.4s ease, box-shadow 0.4s ease;
 }

 .reservation-card:hover {
   transform: scale(1.01) rotateX(1deg);
   box-shadow: 0 25px 40px rgba(0, 0, 0, 0.15);
 }

 .reservation-img {
   transition: transform 0.4s ease;
   transform: rotateY(-4deg) scale(1.02);
   box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
 }

 .reservation-img:hover {
   transform: rotateY(0deg) scale(1.05);
 }

 .book-btn {
   background-color: #FF5A5F;
   color: white;
   font-weight: 600;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, background-color 0.3s ease;
 }

 .book-btn:hover {
   transform: scale(1.05);
   background-color: #e0484d;
 }

 .map-3d-wrapper {
   transform-style: preserve-3d;
   perspective: 1000px;
   transform: rotateX(2deg);
   transition: transform 0.5s ease, box-shadow 0.5s ease;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
 }

 .map-3d-wrapper:hover {
   transform: rotateX(0deg) scale(1.02);
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
 }

 .shadow-footer {
   transform-style: preserve-3d;
   perspective: 1000px;
   transform: translateZ(0) rotateX(1deg);
   box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
   transition: transform 0.5s ease, box-shadow 0.5s ease;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
 }

 .shadow-footer:hover {
   transform: translateY(-2px) rotateX(0deg);
   box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
 }

 .footer a:hover {
   text-decoration: underline;
 }

 .footer h4 {
   font-weight: bold;
   margin-bottom: 1rem;
 }