/* .pro-head:hover::after {
      content: "View Map";
      position: right;
      background-color: transparent;
      color: white;
      padding: 5px;
      border-radius: 5px;
    } */

    .pro-head:hover::after {
      content: "View Map";
      position: absolute;
      bottom: -40px;
      left: 75%;
      transform: translateX(-50%);
      background-color: transparent;
      color: white;
      padding: 5px;
      border-radius: 5px;
    }

    #modalButtons {
        border-radius: 25px;/* Adjust the radius for smoother edges */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adds a shadow for a floating effect */
        padding: 10px 20px;/* Adjust padding as needed */
    }

    .form-control {
        border-radius: 25px;/* Adjust the radius for smoother edges */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adds a shadow for a floating effect */
        padding: 10px 20px;/* Adjust padding as needed */
    }


    /* Logo Responsiveness */
     .b-brand {
         display: flex;
         align-items: center;
     }

    .main-logo {
        width: 70%;
        height: auto; /* Maintain aspect ratio */
    }

    .logo-thumb {
        display: none; /* Hide thumbnail by default */
    }

    /* Adjust logo size for smaller screens */
    @media (max-width: 768px) {
        .main-logo {
            width: 40%;
        }
    }

    @media (max-width: 576px) {
        .main-logo {
            width: 40%;
        }

        /* Show thumbnail on very small screens */
        .main-logo {
            display: block;
            width: 40%;
            height: auto;
        }

        .logo-thumb {
            display: block;
            width: 50px; /* Set appropriate width for small screens */
            height: auto; /* Maintain aspect ratio */
        }
    }