/* Custom CSS for ITSolution Template - Zoom and Background Image Fixes */

/* ========================================
   ZOOM CONTROL - Ensure 100% zoom always
   ======================================== */
html {
    zoom: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

body {
    zoom: 1 !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}

/* Prevent iOS Safari from zooming on input focus */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select,
    textarea,
    input {
        font-size: 16px !important;
    }
}

/* ========================================
   BACKGROUND IMAGE RENDERING - Universal Fix
   ======================================== */
[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
}

/* ========================================
   HERO SECTION - Main Banner Background
   ======================================== */
.hero-wrap {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important; /* Changed from fixed for better mobile support */
    min-height: 100vh;
    position: relative;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
}

/* Mobile optimization for hero */
@media (max-width: 768px) {
    .hero-wrap {
        background-attachment: scroll !important;
    }
}

/* ========================================
   APPOINTMENT/CONTACT SECTION BACKGROUND
   ======================================== */
.ftco-appointment.img {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    min-height: 500px;
    position: relative;
}

/* ========================================
   TESTIMONY SECTION BACKGROUND
   ======================================== */
.testimony-section {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    position: relative;
}

.testimony-wrap {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 400px;
}

/* ========================================
   FAQ SECTION - Image Backgrounds
   ======================================== */
.img-video {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 400px;
    width: 100%;
}

.img-2 {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 250px;
}

/* ========================================
   COUNTER SECTION - About Image
   ======================================== */
#section-counter .img {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 100%;
}

/* ========================================
   PROJECT/WORK IMAGES
   ======================================== */
.project .img {
    overflow: hidden;
    position: relative;
}

.project .img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project:hover .img img {
    transform: scale(1.05);
}

/* ========================================
   BLOG SECTION - Image Blocks
   ======================================== */
.block-20 {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 250px;
    width: 100%;
    display: block;
    position: relative;
}

/* ========================================
   OVERLAY FIXES - Ensure proper rendering
   ======================================== */
.overlay,
.overlay-1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* Ensure content is above overlay */
.hero-wrap .container,
.ftco-appointment .container,
.testimony-section .container-fluid {
    position: relative;
    z-index: 1;
}

/* ========================================
   IMAGE OPTIMIZATION - Prevent Layout Shift
   ======================================== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* ========================================
   FULLHEIGHT SECTIONS
   ======================================== */
.js-fullheight {
    min-height: 100vh;
}

@media (max-width: 768px) {
    .js-fullheight {
        min-height: 600px;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATION
   ======================================== */
/* Use GPU acceleration for better image rendering */
.hero-wrap,
.testimony-wrap,
.ftco-appointment.img {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Smooth rendering for background images */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}