/**
 * Performance Optimization CSS
 * Improves page load time and rendering performance
 */

/* Lazy loading placeholder */
img.lazy {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    min-height: 200px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Optimize font loading */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i,700');
}

/* Reduce repaints and reflows */
* {
    box-sizing: border-box;
}

/* Use CSS containment for better performance */
/* .service-col,
.team-single-col,
.filter-item {
    contain: layout style paint;
} */

/* Optimize animations */
.wow {
    will-change: transform, opacity;
}

/* Optimize carousel */
/* .carousel {
    contain: layout style paint;
} */

.carousel-item {
    will-change: transform;
}

/* Optimize buttons */
button,
.btn {
    will-change: transform, background-color;
}

/* Optimize links */
a {
    will-change: color;
}

/* Optimize images */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Optimize background images */
.banner-area,
.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .wow {
        will-change: auto;
    }
    
    .carousel-item {
        will-change: auto;
    }
}

/* Optimize for low bandwidth */
@media (prefers-reduced-data: reduce) {
    img {
        background-image: none !important;
    }
    
    .banner-area,
    .parallax {
        background-attachment: scroll;
    }
}

/* Critical CSS - inline for above-the-fold content */
.banner-area {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-box {
    text-align: center;
    color: white;
}

.banner-box h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.banner-box h3 {
    font-size: 24px;
    font-weight: 400;
}

/* Optimize form rendering */
/* form {
    contain: layout style;
} */

/* input,
textarea,
select {
    contain: layout style;
} */

/* Optimize footer */
/* footer {
    contain: layout style paint;
} */

/* Optimize header */
/* header {
    contain: layout style paint;
} */

/* Optimize navigation */
/* nav {
    contain: layout style paint;
} */

/* Optimize sections */
/* section {
    contain: layout style paint;
} */

/* Optimize containers */
/* .container {
    contain: layout style;
} */

/* .row {
    contain: layout style;
} */

/* .col-lg-3,
.col-lg-4,
.col-lg-6,
.col-md-3,
.col-md-4,
.col-md-6,
.col-sm-6 {
    contain: layout style;
} */

/* Optimize text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Optimize scrolling performance */
/* .main-navbar {
    will-change: transform;
} */

/* Optimize hover states */
a:hover,
button:hover,
.btn:hover {
    will-change: auto;
}

/* Optimize transitions */
a,
button,
.btn {
    transition: all 0.3s ease;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize z-index stacking */
.main-navbar {
    z-index: 1000;
}

.carousel-control-prev,
.carousel-control-next {
    z-index: 100;
}

#scrollUp {
    z-index: 999;
}

/* Optimize media queries for mobile */
@media (max-width: 768px) {
    .banner-box h2 {
        font-size: 32px;
    }
    
    .banner-box h3 {
        font-size: 18px;
    }
    
    /* Disable animations on mobile for better performance */
    .wow {
        animation: none !important;
    }
}

/* Optimize for print */
@media print {
    .no-print {
        display: none;
    }
    
    body {
        background: white;
    }
    
    img {
        max-width: 100%;
    }
}