/* ============================================================
   RevvKraft Solutions — Mobile Responsive Overrides
   Covers: index, about, service, contact, portfolio
   ============================================================ */

/* ── Global overflow guard ─────────────────────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

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

/* ── Floating Call Button — smaller on mobile ──────────────── */
@media (max-width: 576px) {
    .floating-call-btn {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 15px !important;
        font-size: 20px !important;
    }
}

/* ================================================================
   TABLET BREAKPOINT  (max-width: 991px)
   ================================================================ */
@media (max-width: 991px) {

    /* ── Header / Nav ──────────────────────────────────────── */
    .header-area .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .logo-and-location-area {
        gap: 20px !important;
    }
    .company-logo img {
        max-width: 140px !important;
    }
    .nav-right .primary-btn1 {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }

    /* ── Breadcrumb Titles ─────────────────────────────────── */
    .breadcrumb-content h1 {
        font-size: clamp(28px, 6vw, 48px) !important;
    }

    /* ── Section Title .two  (About page banner) ───────────── */
    .about-title-area .section-title.two {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        width: 100% !important;
        overflow: hidden;
    }
    .about-title-area .section-title.two span {
        white-space: normal !important;
        display: inline-block !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }
    .about-title-area .section-title.two h2 {
        font-size: clamp(20px, 5vw, 32px) !important;
        line-height: 1.4 !important;
        width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ── Section Title .five  (Service page capability headings) */
    .section-title.five h2 {
        font-size: clamp(22px, 5vw, 36px) !important;
        line-height: 1.35 !important;
    }

    /* ── About page — banner content ──────────────────────── */
    .about-banner-content .title-area h1 {
        font-size: clamp(26px, 6vw, 42px) !important;
    }
    .about-banner-content .banner-content p {
        font-size: 15px !important;
    }
    .about-banner-content .short-info span {
        font-size: 13px !important;
    }

    /* ── About page — counter & story section ─────────────── */
    .counter-and-content-wrap {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .counter-and-content-wrap .counter-area {
        text-align: center !important;
    }

    /* ── About page — team section ────────────────────────── */
    .about2-team-section .team-card {
        margin-bottom: 30px !important;
    }

    /* ── Index — service section title scaling ─────────────── */
    .home1-services-section .section-title h2 {
        font-size: clamp(26px, 5vw, 36px) !important;
    }
    .home1-services-section .section-title p {
        font-size: 16px !important;
    }
    .home1-services-section .service-card {
        border-radius: 24px !important;
        padding: 25px 20px !important;
    }
    .home1-services-section .service-content h3 {
        font-size: 22px !important;
    }
    .home1-services-section .service-img {
        max-width: 100% !important;
    }

    /* ── Index — contact section scaling ───────────────────── */
    .home1-contact-section .section-title h2 {
        font-size: clamp(26px, 5vw, 36px) !important;
    }
    .home1-contact-section .contact-form-card {
        padding: 30px !important;
        border-radius: 24px !important;
    }

    /* ── Index — banner scaling ────────────────────────────── */
    .home1-banner-section .title-area h1 {
        font-size: clamp(28px, 7vw, 50px) !important;
        line-height: 1.2 !important;
    }
    .home1-banner-section .banner-content p {
        font-size: 15px !important;
    }

    /* ── Portfolio — CTA heading ───────────────────────────── */
    .portfolio-cta-section h2 {
        font-size: clamp(28px, 6vw, 42px) !important;
    }
    .portfolio-process-section h2 {
        font-size: clamp(26px, 5vw, 36px) !important;
    }

    /* ── Portfolio — case study cards ──────────────────────── */
    .case-study-card,
    .case-study-card.reverse {
        flex-direction: column !important;
        padding: 30px !important;
        gap: 30px !important;
        border-radius: 24px !important;
    }
    .cs-title {
        font-size: 28px !important;
    }

    /* ── Service page — inline h2 headings at 40px ────────── */
    .home7-service-section .service-wrapper h2 {
        font-size: clamp(24px, 5vw, 34px) !important;
    }
    .home7-service-section .service-wrapper h4 {
        font-size: 20px !important;
    }
    .home7-service-section .service-wrapper p {
        font-size: 16px !important;
    }
    .home7-service-section .service-wrapper ul li {
        font-size: 15px !important;
    }

    /* ── Service page — process section stacking ──────────── */
    .service-page-process-section .service-page-process-wrapper,
    .service-page-process-section .process-wrap,
    .service-page-process-section .process-and-vector-area,
    .service-page-process-section .process-list {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    .service-page-process-section .single-process {
        width: 100% !important;
        height: auto !important;
        padding: 40px 20px !important;
        flex: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .service-page-process-section .single-process .decoration-lines {
        display: none !important;
    }
    .service-page-process-section .process-progress-container {
        display: none !important;
    }

    /* ── Contact page — map iframe ────────────────────────── */
    .contact-map-section iframe {
        height: 300px !important;
    }

    /* ── Footer — responsive column stacking ──────────────── */
    .footer-main {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .footer-widget {
        width: 100% !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 5px !important;
    }

    /* ── Partner / Marquee text ────────────────────────────── */
    .partner-text {
        font-size: 18px !important;
        margin: 0 20px !important;
    }
}

/* ================================================================
   PROCESS SECTION  (max-width: 1199px — kicks in before tablet)
   ================================================================ */
@media (max-width: 1199px) {
    .service-page-process-section .service-page-process-wrapper,
    .service-page-process-section .process-wrap,
    .service-page-process-section .process-and-vector-area,
    .service-page-process-section .process-list {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    .service-page-process-section .single-process {
        width: 100% !important;
        height: auto !important;
        padding: 50px 20px !important;
        flex: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .service-page-process-section .single-process .decoration-lines {
        display: none !important;
    }
    .service-page-process-section .process-progress-container {
        display: none !important;
    }
}

/* ================================================================
   MOBILE BREAKPOINT  (max-width: 767px)
   ================================================================ */
@media (max-width: 767px) {

    /* ── Global spacing reductions ─────────────────────────── */
    .mb-150 {
        margin-bottom: 80px !important;
    }
    .mb-100 {
        margin-bottom: 50px !important;
    }
    .mb-70 {
        margin-bottom: 40px !important;
    }
    .pb-50 {
        padding-bottom: 30px !important;
    }

    /* ── Header ────────────────────────────────────────────── */
    .company-logo img {
        max-width: 120px !important;
    }
    .nav-right .primary-btn1 {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* ── Breadcrumb ────────────────────────────────────────── */
    .breadcrumb-content h1 {
        font-size: clamp(24px, 7vw, 36px) !important;
    }
    .breadcrumb-image-section .breadcrumb-img {
        height: auto !important;
        max-height: 250px !important;
    }
    .breadcrumb-image-section .breadcrumb-img img {
        height: auto !important;
        max-height: 250px !important;
        object-fit: cover !important;
    }

    /* ── Service page — process image ─────────────────────── */
    .service-page-process-section .service-page-process-img {
        height: 250px !important;
    }
    .service-page-process-section .single-process h2 {
        font-size: clamp(20px, 5vw, 28px) !important;
    }

    /* ── Index — banner ───────────────────────────────────── */
    .home1-banner-section .title-area h1 {
        font-size: clamp(24px, 8vw, 36px) !important;
    }
    .home1-banner-section .banner-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .btn-and-rating-area {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
    }
    .banner-img-wrap {
        margin-top: 30px !important;
    }

    /* ── Index — service cards ─────────────────────────────── */
    .home1-services-section {
        padding: 60px 0 !important;
    }
    .home1-services-section .service-card {
        border-radius: 20px !important;
        padding: 20px 18px !important;
    }
    .home1-services-section .service-content h3 {
        font-size: 20px !important;
    }
    .home1-services-section .service-content p {
        font-size: 14px !important;
        max-width: 100% !important;
    }
    .home1-services-section .service-number {
        font-size: 40px !important;
    }

    /* ── Index — contact section ───────────────────────────── */
    .home1-contact-section {
        padding: 60px 0 !important;
    }
    .home1-contact-section .contact-form-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }
    .home1-contact-section .form-group input,
    .home1-contact-section .form-group textarea {
        padding: 14px 18px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    /* ── About page — banner ──────────────────────────────── */
    .about-banner-content .title-area h1 {
        font-size: clamp(22px, 7vw, 32px) !important;
    }
    .award-area .award-list {
        gap: 15px !important;
    }
    .award-area .award-list li img {
        max-width: 80px !important;
    }

    /* ── About page — values section ──────────────────────── */
    .about2-page-process-section .process-step-card,
    .home3-about-section .about-content h3 {
        font-size: 22px !important;
    }

    /* ── About page — testimonials ────────────────────────── */
    .home2-testimonial-section .testimonial-card,
    .home1-testimonial-section .testimonial-card {
        padding: 20px 16px !important;
    }

    /* ── Portfolio — cards ─────────────────────────────────── */
    .case-study-card {
        padding: 20px !important;
        border-radius: 20px !important;
        margin-bottom: 40px !important;
    }
    .cs-title {
        font-size: 22px !important;
    }
    .cs-description {
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }
    .cs-image-wrapper {
        border-radius: 16px !important;
    }
    .cs-metric h4 {
        font-size: 24px !important;
    }
    .cs-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* ── Portfolio — process section step numbers ──────────── */
    .portfolio-process-section h1 {
        font-size: 40px !important;
    }
    .portfolio-process-section h3 {
        font-size: 20px !important;
    }

    /* ── Portfolio — CTA section ───────────────────────────── */
    .portfolio-cta-section {
        padding: 60px 0 !important;
    }
    .portfolio-cta-section h2 {
        font-size: clamp(24px, 7vw, 36px) !important;
        line-height: 1.3 !important;
    }
    .portfolio-cta-section p {
        font-size: 16px !important;
    }

    /* ── Contact page — form ──────────────────────────────── */
    .contact-form-wrap .section-title h2 {
        font-size: clamp(22px, 6vw, 32px) !important;
    }
    .contact-map-section iframe {
        height: 250px !important;
    }

    /* ── Footer ────────────────────────────────────────────── */
    .footer-section .footer-wrapper {
        padding: 40px 0 !important;
    }
    .footer-widget .widget-title {
        font-size: 18px !important;
    }
}

/* ================================================================
   SMALL MOBILE  (max-width: 576px)
   ================================================================ */
@media (max-width: 576px) {

    /* ── Container padding ─────────────────────────────────── */
    .container,
    .container-fluid,
    .container-fluid.one {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ── About page — bottom area text behind call btn ────── */
    .about2-page-process-section .bottom-area {
        padding-right: 70px !important;
        text-align: left !important;
    }
    .about2-page-process-section .bottom-area span {
        font-size: 14px !important;
        line-height: 1.4 !important;
        display: inline-block;
    }

    /* ── Service page — inline font sizes override ────────── */
    .home7-service-section .service-wrapper h2 {
        font-size: 22px !important;
    }
    .home7-service-section .service-wrapper h4 {
        font-size: 18px !important;
    }
    .home7-service-section .service-wrapper p {
        font-size: 14px !important;
    }
    .home7-service-section .service-wrapper ul li {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* ── Service page — "Who This Is For" box ─────────────── */
    .home7-service-section .service-wrapper div[style*="border-left"] {
        padding: 15px !important;
        font-size: 14px !important;
    }

    /* ── Index — banner rating area ───────────────────────── */
    .rating-area {
        gap: 8px !important;
    }
    .rating-area .content span {
        font-size: 12px !important;
    }

    /* ── Index — testimonial cards ─────────────────────────── */
    .home1-testimonial-section .testimonial-content p {
        font-size: 14px !important;
    }

    /* ── Scroll text ───────────────────────────────────────── */
    .scroll-text-section h2 {
        font-size: clamp(30px, 10vw, 60px) !important;
    }

    /* ── About — section title two h2 further reduction ───── */
    .about-title-area .section-title.two h2 {
        font-size: clamp(18px, 4.5vw, 26px) !important;
    }

    /* ── Portfolio — inline heading scaling ────────────────── */
    .portfolio-cta-section h2 {
        font-size: clamp(22px, 7vw, 30px) !important;
    }

    /* ── Award section ─────────────────────────────────────── */
    .home7-award-section .section-title.five h2 {
        font-size: clamp(18px, 5vw, 26px) !important;
    }

    /* ── General list / paragraph safety ───────────────────── */
    ul, ol {
        padding-left: 0 !important;
    }
}

/* ================================================================
   EXTRA-SMALL  (max-width: 390px — iPhone 14 / SE)
   ================================================================ */
@media (max-width: 390px) {

    .company-logo img {
        max-width: 100px !important;
    }
    .nav-right .primary-btn1 {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    .breadcrumb-content h1 {
        font-size: 22px !important;
    }
    .home1-banner-section .title-area h1 {
        font-size: 22px !important;
    }
    .home1-services-section .section-title h2 {
        font-size: 24px !important;
    }
    .cs-title {
        font-size: 20px !important;
    }
    .about-title-area .section-title.two h2 {
        font-size: 17px !important;
    }
    .home7-service-section .service-wrapper h2 {
        font-size: 20px !important;
    }
    .portfolio-cta-section h2 {
        font-size: 20px !important;
    }
    .contact-form-wrap .section-title h2 {
        font-size: 20px !important;
    }
}