/* Button Style Updates - Consistent colors and sizes across sections */

/* ============================================
   HERO SECTION - "Enroll Now" button
   ============================================ */

/* Hero "Enroll Now" button - Orange gradient */
.hero .cta-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 100% !important;
}

.hero .cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* On mobile, both hero and demo buttons should match */
@media (max-width: 767px) {
    .hero .cta-button {
        width: auto !important;
        min-width: 200px !important;
        max-width: 280px !important;
    }
}

/* ============================================
   DEMO SECTION - Two buttons
   ============================================ */

/* Demo "Try Live Demo" button - RED gradient */
.btn-demo-primary {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 100% !important;
}

.btn-demo-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4) !important;
}

/* Demo "Enroll Now" button - Orange gradient */
.btn-demo-secondary {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 100% !important;
}

.btn-demo-secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* Demo section buttons container - Consistent width */
.demo-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    align-items: center !important;
}

@media (min-width: 768px) {
    .demo-buttons {
        flex-direction: row !important;
        gap: 16px !important;
        width: auto !important;
        align-items: center !important;
    }
}

/* On mobile, match hero button width */
@media (max-width: 767px) {
    .btn-demo-primary,
    .btn-demo-secondary {
        width: auto !important;
        min-width: 200px !important;
        max-width: 280px !important;
    }
}

/* ============================================
   COURSE CARDS - Stay within boundaries
   ============================================ */

/* Course card buttons - Orange gradient, stay within card */
.course-card .cta-button,
.course-card button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.course-card .cta-button:hover,
.course-card button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* ============================================
   CONTINUE BUTTON - Multi-step form
   ============================================ */

/* Continue button in enrollment form */
.btn-next,
button.btn-next {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 150px !important;
}

.btn-next:hover,
button.btn-next:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* ============================================
   SEND MESSAGE BUTTON - Contact form
   ============================================ */

/* Send Message button on contact page */
.submit-button,
button.submit-button,
button[type="submit"].submit-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 180px !important;
}

.submit-button:hover,
button.submit-button:hover,
button[type="submit"].submit-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* ============================================
   GENERIC BUTTONS - Orange gradient
   ============================================ */

.btn-primary,
button[type="submit"]:not(.nav-button):not(.submit-button) {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    max-width: 100% !important;
}

.btn-primary:hover,
button[type="submit"]:not(.nav-button):not(.submit-button):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* ============================================
   DEMO SECTION BADGES - Horizontal on desktop
   ============================================ */

@media (min-width: 768px) {
    .demo-features {
        display: flex !important;
        flex-direction: row !important;
        gap: 24px !important;
        flex-wrap: wrap !important;
    }
    
    .feature-badge {
        flex: 0 0 auto !important;
    }
}

/* Keep vertical on mobile */
@media (max-width: 767px) {
    .demo-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
}


/* ============================================
   NAVIGATION BAR BUTTONS - Orange gradient, preserve sizes
   ============================================ */

/* Desktop navigation "Enroll Now" button - Orange gradient, keep original size */
header nav ul li a.cta-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    /* DO NOT override padding or font-size - preserve mobile navigation logic */
}

header nav ul li a.cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* Mobile portrait navigation "Enroll Now" button - Orange gradient, keep original size */
.mobile-cta-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    /* DO NOT override padding or font-size - preserve mobile navigation logic */
}

.mobile-cta-button:hover {
    background: linear-gradient(135deg, #e65100 0%, #f7931e 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}


/* ============================================
   TEAM PAGE - View Open Positions button
   ============================================ */

/* View Open Positions button on team page */
.join-team .cta-button,
section.join-team .cta-button,
a[href="careers.html"].cta-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 180px !important;
}

.join-team .cta-button:hover,
section.join-team .cta-button:hover,
a[href="careers.html"].cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* ============================================
   CAREERS PAGE - Apply Now button
   ============================================ */

/* Apply Now button on careers page */
.job-apply .cta-button,
.job-listing .cta-button,
a[href^="mailto:careers"].cta-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 150px !important;
}

.job-apply .cta-button:hover,
.job-listing .cta-button:hover,
a[href^="mailto:careers"].cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* ============================================
   GENERIC CTA BUTTONS - Catch-all for any remaining buttons
   ============================================ */

/* Generic .cta-button class (not in navigation) */
section .cta-button:not(header .cta-button):not(nav .cta-button),
.content .cta-button,
main .cta-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 150px !important;
}

section .cta-button:not(header .cta-button):not(nav .cta-button):hover,
.content .cta-button:hover,
main .cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}


/* ============================================
   JOIN OUR TEAM SECTION - Reduce spacing and apply gradient
   ============================================ */

/* Override the default cta-section spacing */
.cta-section {
    padding: 40px 0 !important;
}

.cta-section .container {
    text-align: center !important;
}

.cta-section h2 {
    margin-bottom: 15px !important;
}

.cta-section p {
    margin-bottom: 20px !important; /* Reduced from default 30px */
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* View Open Positions button - Orange gradient with reduced top margin */
.cta-section .cta-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 200px !important;
    margin-top: 5px !important; /* Reduced from 30px to bring it closer */
}

.cta-section .cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}