@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Michroma&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Notable&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rowdies:wght@300;400;700&family=Seaweed+Script&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');

        .search-input {
            /* Make room for the button */
            padding-right: 130px !important; 
            /* Match the image's border */
            border-color: #ced4da !important;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        }
        .search-input:focus {
            border-color: #86b7fe !important;
            box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
        }
        
        .search-btn {
            /* Position the button */
            right: 7px;
            
            /* Style the button */
            background-color: #0d2a57; /* Dark blue from image */
            border-color: #0d2a57;
            padding: 0.5rem 1.75rem;
            font-weight: 500;
        }
        .search-btn:hover {
            background-color: #0a2145; /* Slightly darker blue */
            border-color: #0a2145;
        }
     
        @media (max-width: 576px) {
            .search-bar {
                width: 100% !important;
                margin-top: 5px;
            }
        }