.btn-outline {
    border: 2px solid #0057b8 !important;
    color: #0057b8 !important;
    font-size: 16px; 
}
.btn-outline:hover {
    background: #0057b8 !important;
    color: #ffffff !important; 
}
    
.btn-outline-members {
    background-color: transparent !important;
    border: 2px solid #0057b8 !important;
    color: #0057b8;
    font-family: "Montserrat", sans-serif;
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none !important;
    min-height: 44px; /* Touch-friendly */
    line-height: 1.4;
}
.btn-outline-members:hover {
    background-color: #0057b8 !important;
    color: #ffffff !important;
}

.btn {
    background-color: transparent; 
    color: #0057b8;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    border-radius: 0px !important;
    min-height: 44px;
    line-height: 1.4;
}

/* Hover effect */
.btn:hover {
    background-color: #0057b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Outline button */
.btn-outline {
    background: transparent;
    border: 2px solid #0057b8;
    color: #0057b8;
    padding: 12px 24px;
}
.btn-outline:hover {
    background: #0057b8;
    color: white;
    text-decoration: none;
}

/* White Outline button */
.btn-outline-white {
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 12px 24px;
}
.btn-outline-white:hover {
    background: #ffffff;
    color: #0057b8;
}

.btn,
.btn-outline,
.btn-outline-white,
.btn-outline-members {
    white-space: nowrap; /* Prevents text from wrapping */
}

/* Alternative: if you want to allow wrapping but control it better */
.btn,
.btn-outline,
.btn-outline-white,
.btn-outline-members {
    white-space: normal;
    text-align: center;
    line-height: 1.3; /* Tighter line height for multi-line buttons */
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    .btn,
    .btn-outline,
    .btn-outline-white {
        padding: 10px 20px;
        font-size: 15px;
        width: 100%; /* Optional: makes buttons full-width on mobile */
        max-width: 300px; /* Prevents overly wide buttons */
    }
    
    .btn-outline-members {
        padding: 6px 12px !important;
        font-size: 14px;
        line-height: 2;
    }
    
    /* Disable transform on mobile to prevent layout shifts */
    .btn:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .btn,
    .btn-outline,
    .btn-outline-white {
        font-size: 14px;
        padding: 10px 16px;
    }
}