/* Performance & Core Web Vitals optimizations */

/* Kill preloader immediately — was blocking FCP/LCP for 1.5s+ */
#preloader,
.loading,
.pace,
.pace-progress,
.pace-activity {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Header — fixed logo box prevents CLS (Lighthouse mobile: 0.165) */
.header-area {
    min-height: 72px;
}

.header__main {
    display: flex;
    align-items: center;
    min-height: 72px;
}

.logo {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}

.logo img {
    width: 140px;
    height: 77px;
    max-height: none;
    object-fit: contain;
}

@media (min-width: 992px) {
    .logo img {
        width: 200px;
        height: 110px;
    }
}

.sidebar-area .logo img {
    width: 160px;
    height: 88px;
}

/* Section labels — WCAG contrast */
.section-header h5 {
    color: #0f3d91;
}

.sub-bg .section-header h5,
.about-area .section-header h5,
.service-area .section-header h5,
.case-area .section-header h5,
.process-area .section-header h5,
.blog-area .section-header h5 {
    color: #0f3d91;
}

.offer-area .section-header h5,
.secondary-bg .section-header h5 {
    color: #dbeafe;
}

/* Disable scroll animations on mobile — cuts main-thread work & CLS */
@media (max-width: 991px), (pointer: coarse) {
    .wow,
    .bounceInUp,
    .fadeInUp,
    .fadeInDown,
    .fadeInLeft,
    .fadeInRight,
    .slideInLeft {
        visibility: visible !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Hide decorative shapes on mobile — unsized images cause CLS */
@media (max-width: 991px) {
    .about__shape,
    .offer__shadow,
    .offer__shape-left,
    .offer__shape-right,
    .brand__shape,
    .service-area .service__shape-left,
    .service-area .service__shape-right,
    .counter-area .counter__shape,
    .footer-area .footer__shape,
    img[alt="shape"],
    img[alt="arry-icon"],
    img[alt=""],
    .offer__item .shape-top,
    .offer__item .shape-bottom,
    .process-arry {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

.process__image img {
    width: 156px;
    height: 156px;
    object-fit: contain;
}

.about__left-item .big-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.about__left-item .sm-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Reserve banner height to prevent CLS */
.banner-area {
    height: clamp(520px, 85vh, 900px);
    min-height: clamp(520px, 85vh, 900px);
    position: relative;
    overflow: hidden;
}

.banner-area__decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    contain: layout style paint;
}

/* Decorative shapes cause CLS and slow LCP — hero content is enough */
.banner-area__decorations {
    display: none !important;
}

/* Vanilla hero slider (replaces Swiper for LCP) */
.banner-hero {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    z-index: 2;
}

.banner-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.banner-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.banner-hero__slide .container {
    position: relative;
    z-index: 2;
    height: 100%;
}

/* Keep original banner__content padding from style.css */
.banner-hero__slide .banner__content {
    position: relative;
    z-index: 2;
}

/* Match original dot-light swiper pagination style */
.banner-hero__dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.banner-hero__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
    opacity: 1;
    transition: 0.6s;
}

.banner-hero__dot::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--white);
    transition: 0.6s;
}

.banner-hero__dot.is-active {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.banner-hero__dot.is-active::before {
    background-color: var(--primary-color);
}

@media (prefers-reduced-motion: reduce) {
    .banner-hero__slide {
        transition: none;
    }
}

/* LCP image */
.slide-bg {
    overflow: hidden;
    background-color: var(--secondary-color, #0f0d1d);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slide-bg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transform: scale(1);
    transition: transform 9s ease-out;
}

.banner-hero__slide.is-active .slide-bg__img {
    transform: scale(1.05);
}

/* Prevent WOW CLS in hero only */
.banner-area .wow {
    visibility: visible !important;
    animation: none !important;
}

/* Shadow images — must stay transparent PNG, no box background */
.footer__shadow-shape img,
.offer__shadow img {
    background: transparent !important;
    max-width: none;
    width: auto;
    height: auto;
}

/* Disable custom cursor on touch devices */
@media (pointer: coarse), (max-width: 991px) {
    .mouse-cursor {
        display: none !important;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .slide-bg__img,
    .banner-hero__slide.is-active .slide-bg__img {
        transform: none !important;
        transition: none !important;
    }
}

/* Font fallback while webfont loads */
body {
    font-family: var(--kumbh), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Uploaded service / counter icon images — consistent sizing */
.service__icon img,
.service-two__content .icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.counter__item > img[src*="storage"] {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.brand__image img,
.brand__image img[src*="storage"] {
    width: 150px;
    height: 80px;
    object-fit: contain;
}

.about__info img[src*="storage"] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.blog__item .image img,
.case__item .image img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Font Awesome icon baseline fix */
i[class*="fa-"],
i[class^="fa-"] {
    display: inline-block;
    line-height: 1;
    font-style: normal;
}

/* Star ratings */
.star .fa-star.disable {
    opacity: 0.3;
}