/* 
 * RAPID IT STANDARDIZED BUTTON STYLES
 * This file contains the master button styling that should be used across the entire website
 * All buttons should reference these styles to maintain brand consistency
 * Based on the home page "Our Services" and "Contact Us" button design
 */

/* Base Button Container */
.standardized-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* Core Button Styling - Master Template */
.btn-standardized {
    font-size: 18px !important;
    padding: 16px 40px !important;
    margin: 0 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid !important;
    transition: all 0.3s ease-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 160px !important;
    font-family: 'Nunito', sans-serif !important;
    cursor: pointer !important;
}

/* Primary Button - Blue (Our Services Style) */
.btn-standardized-primary {
    background: #4A90E2 !important;
    color: #ffffff !important;
    border-color: #4A90E2 !important;
}

.btn-standardized-primary:hover {
    background: #357abd !important;
    border-color: #357abd !important;
    box-shadow: 0 15px 35px rgba(74, 144, 226, 0.4) !important;
    transform: translateY(-3px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Secondary Button - White (Contact Us Style) */
.btn-standardized-secondary {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

.btn-standardized-secondary:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-3px) !important;
    text-decoration: none !important;
}

/* Focus States for Accessibility */
.btn-standardized:focus,
.btn-standardized-primary:focus,
.btn-standardized-secondary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(43, 57, 144, 0.3) !important;
}

/* Alternative Classes for Existing Class Names */
.cta-buttons .btn:first-child,
.hero-buttons .btn:first-child {
    background: #4A90E2 !important;
    color: #ffffff !important;
    border-color: #4A90E2 !important;
    font-size: 18px !important;
    padding: 16px 40px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease-out !important;
}

.cta-buttons .btn:first-child:hover,
.hero-buttons .btn:first-child:hover {
    background: #357abd !important;
    border-color: #357abd !important;
    box-shadow: 0 15px 35px rgba(74, 144, 226, 0.4) !important;
    transform: translateY(-3px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.cta-buttons .btn:last-child,
.hero-buttons .btn:last-child {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    font-size: 18px !important;
    padding: 16px 40px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease-out !important;
}

.cta-buttons .btn:last-child:hover,
.hero-buttons .btn:last-child:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-3px) !important;
    text-decoration: none !important;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .standardized-buttons,
    .cta-buttons,
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .btn-standardized,
    .cta-buttons .btn,
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        margin: 0 !important;
    }
}

/* Usage Instructions:
 * 
 * Method 1 - New Standardized Classes:
 * <div class="standardized-buttons">
 *     <a href="#" class="btn-standardized btn-standardized-primary">Primary Action</a>
 *     <a href="#" class="btn-standardized btn-standardized-secondary">Secondary Action</a>
 * </div>
 * 
 * Method 2 - Existing Container Classes:
 * <div class="cta-buttons"> or <div class="hero-buttons">
 *     <a href="#" class="btn">First Button (will be blue)</a>
 *     <a href="#" class="btn">Second Button (will be white)</a>
 * </div>
 */
