/* ==========================================
   IMPROVED BUTTONS & TITLES
   Vibrant, Professional, Eye-Catching
   ========================================== */

/* ==========================================
   ENHANCED BUTTON STYLES
   ========================================== */

/* Primary Button - Solid Vibrant Orange */
.btn-primary {
    background: #ff6f00 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.75rem 2rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(255, 111, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: none;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

/* Removed shimmer effect for solid buttons */

.btn-primary:hover {
    background: #e65100 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 111, 0, 0.4) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(255, 111, 0, 0.3) !important;
}

/* Outline Primary Button - Solid on Hover */
.btn-outline-primary {
    border: 2px solid #ff6f00 !important;
    background: #ffffff !important;
    color: #ff6f00 !important;
    font-weight: 700 !important;
    padding: 0.75rem 2rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-transform: none;
    letter-spacing: 0.3px;
}

.btn-outline-primary:hover {
    background: #ff6f00 !important;
    color: #ffffff !important;
    border-color: #ff6f00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 111, 0, 0.3) !important;
}

/* Buttons on dark backgrounds - SOLID */
.bg-dark .btn-primary,
.facility-section .btn-primary,
.distributor-section .btn-primary,
.about-section .btn-primary,
footer .btn-primary {
    background: #ff6f00 !important;
    color: #ffffff !important;
    border: none !important;
}

.bg-dark .btn-primary:hover,
.facility-section .btn-primary:hover,
.distributor-section .btn-primary:hover,
.about-section .btn-primary:hover,
footer .btn-primary:hover {
    background: #e65100 !important;
    color: #ffffff !important;
}

/* Outline buttons on dark backgrounds - SOLID WHITE */
.bg-dark .btn-outline-primary,
.facility-section .btn-outline-primary,
.distributor-section .btn-outline-primary,
.about-section .btn-outline-primary,
footer .btn-outline-primary {
    border: 2px solid #ffffff !important;
    background: #ffffff !important;
    color: #1a237e !important;
}

.bg-dark .btn-outline-primary:hover,
.facility-section .btn-outline-primary:hover,
.distributor-section .btn-outline-primary:hover,
.about-section .btn-outline-primary:hover,
footer .btn-outline-primary:hover {
    background: #ff6f00 !important;
    color: #ffffff !important;
    border-color: #ff6f00 !important;
}

/* Secondary Button - Solid Blue */
.btn-secondary {
    background: #1976d2 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.4) !important;
}

/* Button Sizes - Enhanced */
.btn-lg {
    padding: 1rem 2.5rem !important;
    font-size: 1.125rem !important;
    border-radius: 10px !important;
}

.btn-sm {
    padding: 0.5rem 1.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 6px !important;
}

/* Button Icons */
.btn i {
    transition: transform 0.3s ease;
}

.btn:hover i {
    transform: translateX(5px);
}

/* Ensure ALL buttons are SOLID - No transparency anywhere */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-outline-primary {
    opacity: 1 !important;
}

/* ==========================================
   ENHANCED TITLE STYLES
   ========================================== */

/* Section Titles - Clear & Professional */
.section-title,
h2.section-title {
    font-size: 2.75rem !important;
    font-weight: 900 !important;
    color: #1a237e !important;
    text-align: center;
    margin-bottom: 1rem !important;
    position: relative;
    letter-spacing: -0.01em;
    line-height: 1.3;
    background: none !important;
    -webkit-text-fill-color: #1a237e !important;
    text-shadow: none !important;
}

/* Decorative underline */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background: #ff6f00;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(255, 111, 0, 0.3);
}

/* Subtitle styling */
.section-subtitle,
p.section-subtitle {
    font-size: 1.125rem !important;
    color: #424242 !important;
    text-align: center;
    margin-bottom: 3rem !important;
    font-weight: 500;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Main Headings (h1) - Hero Style */
h1,
.hero-title,
.page-title {
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    color: #1a237e !important;
    background: none !important;
    -webkit-text-fill-color: #1a237e !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-shadow: none !important;
}

/* h1 on dark backgrounds */
.bg-dark h1,
.bg-primary h1,
.facility-section h1,
.distributor-section h1,
.hero-section h1,
.hero-title {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Secondary Headings (h2) */
h2 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #1a237e !important;
    line-height: 1.3;
    margin-bottom: 1.25rem !important;
    background: none !important;
    -webkit-text-fill-color: #1a237e !important;
}

/* h2 on dark backgrounds */
.bg-dark h2,
.bg-primary h2,
.facility-section h2,
.distributor-section h2,
.facility-section .section-title,
.distributor-section .section-title {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* About Page - Ensure all titles are dark blue */
.about-content h1,
.about-content h2,
.about-content h3,
.about-content h4,
.about-content h5,
.about-content h6,
.company-stats .section-title,
.company-stats h1,
.company-stats h2,
.company-stats h3,
.values-section .section-title,
.values-section h1,
.values-section h2,
.values-section h3,
.value-card h3 {
    color: #1a237e !important;
    background: none !important;
    -webkit-text-fill-color: #1a237e !important;
    text-shadow: none !important;
}

/* Tertiary Headings (h3) */
h3 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #283593 !important;
    line-height: 1.4;
    margin-bottom: 1rem !important;
    background: none !important;
    -webkit-text-fill-color: #283593 !important;
}

/* Card Titles */
.category-title,
.product-title,
.feature-card h3,
.value-card h3 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #1a237e !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.3s ease;
    background: none !important;
    -webkit-text-fill-color: #1a237e !important;
}

.category-card:hover .category-title,
.product-card:hover .product-title,
.feature-card:hover h3,
.value-card:hover h3 {
    color: #ff9800 !important;
    transform: translateY(-2px);
}

/* Stat Numbers - Eye-Catching */
.stat-number {
    font-size: 4rem !important;
    font-weight: 900 !important;
    color: #1a237e !important;
    line-height: 1;
    transition: all 0.4s ease;
    background: none !important;
    -webkit-text-fill-color: #1a237e !important;
}

.stat-card:hover .stat-number {
    color: #ff6f00 !important;
    -webkit-text-fill-color: #ff6f00 !important;
    transform: scale(1.15) rotateY(360deg);
}

/* Stat Labels */
.stat-label {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #424242 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

/* Large tablets and below (991px) */
@media (max-width: 991.98px) {
    .section-title,
    h2.section-title {
        font-size: 2.25rem !important;
    }
    
    h1 {
        font-size: 2.75rem !important;
    }
    
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    .stat-number {
        font-size: 3rem !important;
    }
}

/* Tablets and landscape phones (767px) */
@media (max-width: 767.98px) {
    .section-title,
    h2.section-title {
        font-size: 1.875rem !important;
    }
    
    h1 {
        font-size: 2.25rem !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    .btn-primary,
    .btn-outline-primary {
        padding: 0.65rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .hero-overlay .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .stat-number {
        font-size: 2.5rem !important;
    }
}

/* Portrait phones and small devices (575px) */
@media (max-width: 575.98px) {
    .section-title,
    h2.section-title {
        font-size: 1.625rem !important;
    }
    
    h1 {
        font-size: 2rem !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.5 !important;
    }
    
    .hero-overlay .btn-lg {
        padding: 0.6rem 1.25rem !important;
        font-size: 0.9rem !important;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
}

/* Extra small devices (400px and below) */
@media (max-width: 400px) {
    .hero-title {
        font-size: 1.35rem !important;
        margin-bottom: 0.6rem !important;
        line-height: 1.25 !important;
    }
    
    .hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    .hero-overlay .btn-lg {
        padding: 0.55rem 1rem !important;
        font-size: 0.85rem !important;
    }
    
    .section-title,
    h2.section-title {
        font-size: 1.4rem !important;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    .stat-number {
        font-size: 1.75rem !important;
    }
}

/* ==========================================
   PRINT FRIENDLY
   ========================================== */

@media print {
    .section-title,
    h1, h2, h3 {
        color: #000000 !important;
        background: none !important;
        -webkit-text-fill-color: #000000 !important;
    }
    
    .btn {
        border: 2px solid #000000 !important;
        background: none !important;
        color: #000000 !important;
    }
}