* {
    font-family: "Open Sans", Muli, Helvetica, Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
}

.backdrop-blur-25 {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.tw-bg-white\/80 {
    background-color: hsla(0, 0%, 100%, .8) !important;
}

.bg-custom-Button {
    background: #0069cc;
}

    .bg-custom-Button:hover {
        background: #0a59ab;
    }

input:focus {
    border: none; /* Lighter border color on focus */
    outline: none; /* Remove default outline if needed */
}

.searchlabel {
    font-weight: bold;
}

/* Default for larger screens */
.bg-main-img {
    background-size: cover;
    background-position: 0 -35px;
    transition: background-image 1s ease-in-out; /* Smooth transition */
}

#find-your {
    letter-spacing: 4px;
}

#descriptionAtFold {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.6);
}

#discover-the-best {
    margin-top: -30px !important;
    color: white;
}

.formitem {
    border-radius: 4px !important;
}

div.formitem {
    border-radius: 4px !important;
    border: 1px solid #ccc !important; /* Ensures the border is visible with the specified color */
}

#greeting {
    margin-top: 0;
    bottom: 0;
}
/* Media query for phone screens (example: max-width of 768px) */
@media only screen and (max-width: 768px) {
    .bg-main-img {
        background-position: 0 90px;
        backdrop-filter: blur(5px);
        background-size: 100;
        background-image: url('/img/bg-small.jpg');
    }



    #submit {
        float: right;
        width: 100%;
    }

    #find-your {
        letter-spacing: 2px;
    }


    .formitem {
        border-radius: 6px !important;
    }

    div.formitem {
        border-radius: 6px !important;
        border: 1px solid #ccc !important; /* Ensures the border is visible with the specified color */
    }

    .backdrop-blur-25 {
        background: #eee !important;
        max-width: 96% !important;
        margin-top: 10px !important;
        border-radius: 5px;
    }

    #greeting {
        margin-top: 330px;
    }

    #searchPanel {
        background-color: #2b29297d !important;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    #descriptionAtFold {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        background-color: #2b29297d;
    }
}