/* =============================================
   Mobile Responsive Fixes
   ============================================= */

/* --- Buttons --- */
@media (max-width: 767px) {
    .theme-btn {
        font-size: 18px !important;
        padding: 11px 22px 10px;
        gap: 4px !important;
    }
    .theme-btn i { font-size: 11px !important; }
    /* Full-width buttons stay full-width */
    .theme-btn.w-100 { padding: 11px 22px 10px !important; }
}

@media (max-width: 480px) {
    .theme-btn {
        font-size: 16px !important;
        padding: 10px 18px 9px;
    }
}

img { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* --- Header / Navigation --- */
@media (max-width: 1199px) {
    .header__hamburger { display: flex !important; }
    .mean__menu-wrapper { display: none; }
    .header-main .header-right { gap: 15px; }
    .header-main .header-right .header-btn h6 { display: none; }
    .header-main .header-right .header-btn .header-button { display: none; }
}

@media (max-width: 575px) {
    .header-1 .container-fluid { padding: 0 15px; }
    .logo img { max-width: 140px; }
}

/* --- Hero Section --- */
@media (max-width: 991px) {
    .hero-1 { padding-top: 120px; padding-bottom: 60px; }
    .hero-1 .hero-content { margin-bottom: 30px; }
    .hero-1 .hero-image { margin-left: 0; max-width: 100%; }
    .hero-1 .hero-image .box { display: none; }
    .hero-1 .hero-image .video-circle { display: none; }
}

@media (max-width: 767px) {
    .hero-1 { padding-top: 100px; }
    .hero-1 .hero-content h1 { font-size: 38px; }
    .hero-1 .hero-content p { font-size: 15px; }
    .hero-1 .hero-btn { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 480px) {
    .hero-1 .hero-content h1 { font-size: 30px; }
}

/* --- About Section --- */
@media (max-width: 991px) {
    .about-wrapper .about-content { margin-left: 0; }
    .about-wrapper .about-content .about-item { flex-wrap: wrap; gap: 20px; }
    .about-wrapper .about-content .about-item .count-item { min-width: unset; }
    .about-wrapper .about-content .about-item .count-item h2 { font-size: 60px; }
}

/* --- About Section: Animation Bug Fixes on Mobile --- */

/* 1. Fix .reveal image animation overflow on mobile
      The GSAP animation slides the container from xPercent:-100 which causes
      horizontal overflow. We disable the clip and just show the image. */
@media (max-width: 991px) {
    .about-image.reveal,
    .about-image .reveal {
        overflow: visible !important;
        clip-path: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .about-image img.reveal {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        clip-path: none !important;
    }
}

/* Animation fixes handled entirely in mobile-anim-fix.js */

/* --- Service Section --- */
@media (max-width: 767px) {
    .service-section .service-slider { margin-left: 0; margin-right: 0; }
    .section-title-area { flex-wrap: wrap; gap: 20px; }
    .section-title-area .array-button { display: none; }
}

/* --- Project Section --- */
@media (max-width: 991px) {
    .project-box-wrapper .project-card-items {
        padding: 20px;
        flex-wrap: wrap;
        gap: 20px;
    }
    .project-box-wrapper .project-card-items h4 { display: none; }
    .project-box-wrapper .project-card-items .project-thumb { flex-basis: 100%; }
    .project-box-wrapper .project-card-items .project-thumb img {
        width: 100%;
        height: auto;
    }
    .project-box-wrapper .project-card-items .project-content h3 { font-size: 28px; }
    .project-box-wrapper .project-card-items .project-content .list { margin-top: 20px; }
}

@media (max-width: 575px) {
    .project-box-wrapper .project-card-items .project-content h3 { font-size: 22px; }
}
.footer-logo img { max-width: 280px; height: auto; }

/* --- Team Section --- */
@media (max-width: 767px) {
    .team-section { margin: 0; }
    .team-wrapper .team-left-content { margin-bottom: 20px; }
    .footer-logo img { width: 100%; }
}

/* Fix: tp_fade_anim elements stay invisible on mobile when
   ScrollTriggers are killed by mobile-anim-fix.js */
@media (max-width: 991px) {
    .tp_fade_anim {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* --- Testimonial Section --- */
@media (max-width: 767px) {
    .testimonial-section .array-button { display: none; }
    .testimonial-box-item { padding: 25px; }
    .testimonial-box-item p { font-size: 15px; }
    .testimonial-box-item .client-info-item { flex-wrap: wrap; gap: 15px; }
}

/* --- Contact Info Section --- */
@media (max-width: 767px) {
    .contact-info-box { gap: 15px; }
    .contact-info-box .icon { max-width: 60px; height: 60px; line-height: 60px; font-size: 20px; }
    
}

/* --- Contact Map & Form --- */
@media (max-width: 991px) {
    .contact-wrapper-inner .contact-map iframe { height: 350px; }
}

@media (max-width: 575px) {
    .contact-wrapper-inner .contact-map iframe { height: 250px; }
    .contact-wrapper-inner .contact-box-items { padding: 20px; }
}

/* --- Breadcrumb --- */
@media (max-width: 575px) {
    .breadcrumb-wrapper .page-heading { padding: 120px 0 80px; }
    .breadcrumb-wrapper .page-heading h1 { font-size: 36px; }
}

/* --- Footer --- */
@media (max-width: 767px) {
    .footer-widget-wrapper { padding: 0px 0 60px; }
    .footer-bottom-wrapper { flex-wrap: wrap; gap: 15px; justify-content: center; text-align: center; }
    .footer-bottom-wrapper .footer-list { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 575px) {
    .footer-newsletter-box { padding: 25px; }
    .footer-newsletter-box .newsletter-content form input { width: 100%; }
}

/* --- Section Padding --- */
@media (max-width: 767px) {
    .section-padding { padding: 60px 0; }
}

@media (max-width: 575px) {
    .section-padding { padding: 50px 0; }
}

/* --- Offcanvas Mobile Menu --- */
@media (max-width: 575px) {
    .offcanvas__info { width: 290px; }
    .offcanvas__wrapper { padding: 20px; }
}

/* --- Back to top --- */
@media (max-width: 575px) {
    .back-to-top { right: 15px; bottom: 15px; width: 40px; height: 40px; line-height: 30px; }
}

/* --- Swiper dots on mobile --- */
@media (max-width: 767px) {
    .swiper-dot { margin-top: 20px; }
}

/* --- Prevent horizontal overflow --- */
body { overflow-x: hidden; }