/* Ghazanfar Group - Common Styles */
/* This file contains shared styles to reduce inline CSS and improve maintainability */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Inter', sans-serif;
}

/* Hero Background Styles - Optimized WebP Images */
.hero-energy {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/Energy.webp') center/cover;
}

.hero-oil-gas {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/Oil and gas.webp') center/cover;
}

.hero-mining {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/Mining.webp') center/cover;
}

.hero-construction {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/Construction.webp') center/cover;
}

.hero-bank {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/Financial.webp') center/cover;
}

.hero-realestate {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/RealEstate.webp') center/cover;
}

.hero-trading {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/Trading.webp') center/cover;
}

.hero-manufacturing {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/manufacturing.webp') center/cover;
}

.hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

.text-gradient {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.animate-fade-in {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-bg {
    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
}

.hero-slide {
    transition: opacity 1s ease-in-out;
}

.hero-slide.fade-out {
    opacity: 0;
}

.hero-slide.fade-in {
    opacity: 1;
}

.slide-indicator {
    transition: all 0.3s ease;
}

.slide-indicator.active {
    background-color: white;
    transform: scale(1.2);
}

/* Accessibility: Focus States */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Skip Navigation Link */
.skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: #3b82f6;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
}

.skip-nav:focus {
    top: 0;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Form Validation States */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown),
select:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

.error-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.success-message {
    color: #10b981;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Loading State */
.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Performance: Will-change for animations */
.card-hover,
.hero-slide,
button {
    will-change: transform;
}

/* Print Styles */
@media print {
    .skip-nav,
    header nav button,
    footer,
    .scroll-to-top {
        display: none;
    }
}