/* Hide arrows in Chrome, Safari, and Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide arrows in Firefox */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
    /* Add this for standard compatibility */
}


.brand-logo {
    display: flex;
    /* Use flexbox for layout */
    padding: 10px;
    /* Optional: add some padding */
    margin-bottom: 0px !important;
    /* Ensure no margin at the bottom */
    margin-top: 0px !important;
    /* Ensure no margin at the top */
    align-items: center;
    /* Center the logo vertically */
    padding-left: 1px !important;
    /* Add a small left padding */
    justify-content: flex-start;
    /* Align items to the left by default */
}

.responsive-logo {
    width: 200px !important;
    /* Default logo width */
    height: auto;
    /* Maintain aspect ratio */
    object-fit: contain;
    /* Ensure the logo scales properly without distortion */
}

/* Mobile Styles */
@media (max-width: 767px) {

    /* Mobile Styles */
    .brand-logo {
        justify-content: center;
        /* Center the logo on mobile */
    }

    .responsive-logo {
        width: 185px;
        /* Set logo width to 185px for mobile */
    }
}

/* Desktop Styles */
@media (min-width: 768px) {

    /* Adjust based on your breakpoint for desktop */
    .responsive-logo {
        width: 200px;
        /* Set logo width to 200px for desktop */
    }
}


.logo-video {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 330px;
    border-radius: 10px;
}