body {
   font-family: 'Inter', sans-serif;
   background-color: #f8f9fa;
 }

 .bg-custom-blue {
   background-color: #2e3093 !important;
 }

  .custom-cursor {
   cursor: pointer;
 }

 /* Card Image styles */
 .card-img-top {
   width: 100%;
   height: 200px;
   /* Fixed height for consistency */
   object-fit: cover;
   /* Cover the area, cropping if necessary */
 }

 /* Card transition and hover effects */
 .card {
   transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
   border: none;
   /* Remove default card border */
 }

 .card:hover {
   transform: scale(1.1);
   /* Increased zoom effect */
   box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   /* Tailwind's shadow-xl */
   z-index: 10;
   /* Ensure hovered card is on top of others */
   position: relative;
 }

 /* Modal styles for the virtual tour viewer */
 .modal {
   display: flex;
   position: fixed;
   /* Stay in place */
   z-index: 1000;
   /* Sit on top */
   left: 0;
   top: 0;
   width: 100%;
   /* Full width */
   height: 100%;
   /* Full height */
   overflow: hidden;
   /* Prevent scrollbars */
   background-color: rgba(0, 0, 0, 0);
   /* Start transparent */
   justify-content: center;
   align-items: center;
   opacity: 0;
   visibility: hidden;
   transition: background-color 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s;
 }

 .modal.is-open {
   opacity: 1;
   visibility: visible;
   background-color: rgba(0, 0, 0, 0.8);
   /* Fade to black w/ opacity */
 }

 .modal-content-wrapper {
   position: relative;
   width: 90%;
   /* Responsive width */
   max-width: 900px;
   /* Max width for larger screens */
   height: 80%;
   /* Responsive height */
   max-height: 600px;
   /* Max height for larger screens */
   background-color: #fff;
   border-radius: 0.75rem;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: scale(0.7);
   transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   /* Bouncy scale effect */
 }

 .modal.is-open .modal-content-wrapper {
   transform: scale(1);
 }

 #panorama-viewer {
   width: 100%;
   height: 100%;
 }

 .close-button {
   position: absolute;
   top: 15px;
   right: 15px;
   /* Adjusted for better spacing within the modal wrapper */
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
   cursor: pointer;
   z-index: 1001;
   /* Ensure close button is above the panorama */
   background-color: rgba(0, 0, 0, 0.5);
   /* Background for visibility */
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 1;
 }

 .close-button:hover,
 .close-button:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
 }

 /* Animated title on card footer */
 .card-footer {
   position: relative;
   overflow: hidden;
   z-index: 1;
 }

 .card-footer::before,
 .card-footer::after {
   content: "";
   position: absolute;
   top: 0;
   width: 50%;
   height: 100%;
   background-color: #d0153e;
   /* This is the color that slides in on hover */
   z-index: -1;
   transition: transform 0.4s ease;
 }

 .card-footer::before {
   left: 0;
   transform: translateX(-100%);
 }

 .card-footer::after {
   right: 0;
   transform: translateX(100%);
 }

 /* Trigger animation when hovering the parent card */
 .card:hover .card-footer::before,
 .card:hover .card-footer::after {
   transform: translateX(0);
 }

 /* Animated Gradient for Header */
 .animated-gradient-header {
   background: linear-gradient(270deg, #2a32b2, #003e88, #0051a3, #006ac5);
   background-size: 400% 400%;
   animation: moveGradient 7.5s ease infinite;
 }

 @keyframes moveGradient {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }