/* ============================================================ NEW VISA DETAIL PAGE — MOBILE RESPONSIVE STYLESHEET Include in like this (loads ONLY on mobile/tablet): ============================================================ */ /* ============================================================ 1. GLOBAL OVERFLOW CONTAINMENT — must come first ============================================================ */ @media (max-width: 960px) { html, body { overflow-x: hidden; width: 100%; max-width: 100%; } .new-visa-page { width: 100%; max-width: 100%; overflow-x: hidden; } .new-visa-page *, .new-visa-page *::before, .new-visa-page *::after { box-sizing: border-box; } .nv-container { width: 100%; max-width: 100%; padding: 0 16px; box-sizing: border-box; } } @media (max-width: 480px) { .nv-container { padding: 0 12px; } } /* ============================================================ 2. HERO SECTION ============================================================ */ @media (max-width: 960px) { .nv-hero { min-height: 500px !important; background-attachment: scroll; /* fixed bg breaks on mobile */ } .nv-hero-content { margin-top: 40px; padding: 40px 16px; } .nv-hero-title { font-size: clamp(20px, 5.5vw, 32px); margin-bottom: 12px; } .nv-hero-subtitle { font-size: clamp(15px, 3.5vw, 22px); margin-bottom: 18px; } .nv-google-badge { font-size: 13px; padding: 8px 16px; gap: 6px; } .nv-stars { letter-spacing: 1px; } } @media (max-width: 480px) { .nv-hero { min-height: 320px; } .nv-hero-content { margin-top: 30px; padding: 30px 12px; } .nv-hero-title { font-size: clamp(18px, 6vw, 26px); margin-bottom: 10px; } .nv-hero-subtitle { font-size: clamp(14px, 4vw, 18px); margin-bottom: 14px; } .nv-google-badge { font-size: 12px; padding: 7px 14px; } } /* ============================================================ 3. OVERVIEW SECTION ============================================================ */ @media (max-width: 960px) { .nv-overview { padding: 36px 0; } /* Stack left + card vertically */ .nv-overview-grid { display: flex !important; flex-direction: column; gap: 28px; grid-template-columns: unset !important; width: 100%; } .nv-overview-left { width: 100%; } /* Disable sticky on mobile — causes layout bugs */ .nv-overview-right, .nv-sticky-card { position: relative !important; top: auto !important; width: 100%; } .nv-section-title { font-size: clamp(18px, 4.5vw, 26px); margin-bottom: 14px; } .nv-overview-intro { font-size: 14px; margin-bottom: 14px; } .nv-purpose-list li { font-size: 14px; padding: 6px 0; } .nv-check { font-size: 16px; } .nv-service-tags { gap: 10px; } .nv-tag { font-size: 13px; padding: 10px 14px; } } @media (max-width: 480px) { .nv-overview { padding: 28px 0; } .nv-section-title { font-size: clamp(16px, 5vw, 22px); margin-bottom: 12px; } .nv-purpose-list li { font-size: 13.5px; } } /* ============================================================ 4. ASSISTANCE CARD (Sidebar) KEY FIX: fee amounts were overflowing ============================================================ */ @media (max-width: 960px) { .nv-assistance-card { width: 100%; max-width: 100%; padding: 14px; border-radius: 18px; box-sizing: border-box; } .nv-assistance-card h3 { font-size: 18px; margin-bottom: 6px; } .nv-support-badge { font-size: 12px; padding: 6px 12px; margin-bottom: 12px; } .nv-inner-card { padding: 16px; border-radius: 12px; } .nv-fee-header { font-size: 13px; margin-bottom: 5px; } .nv-flag-group img { width: 22px; height: 16px; margin-left: 4px; } /* Fluid font so amounts don't overflow */ .nv-fee-amount.usd .nv-amount { font-size: clamp(22px, 6vw, 30px); } .nv-fee-amount.inr .nv-amount { font-size: clamp(20px, 5.5vw, 28px); } .nv-currency { font-size: 14px; } .nv-fee-note { font-size: 12px; } .nv-divider-dark { margin: 12px 0; } .nv-fee-label { font-size: 13px; margin-bottom: 4px; } .nv-btn-main { padding: 13px; font-size: 15px; border-radius: 9px; margin-top: 10px; } } @media (max-width: 480px) { .nv-assistance-card { padding: 12px; border-radius: 16px; } .nv-inner-card { padding: 14px; } .nv-fee-amount.usd .nv-amount { font-size: clamp(20px, 7vw, 26px); } .nv-fee-amount.inr .nv-amount { font-size: clamp(18px, 6.5vw, 24px); } .nv-btn-main { padding: 12px; font-size: 14px; } } /* ============================================================ 5. NOTE SECTION ============================================================ */ @media (max-width: 960px) { .nv-note-section { padding: 24px 0; } .nv-note-box { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; border-radius: 14px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .nv-note-left { flex-direction: column; align-items: center; gap: 12px; } .nv-note-badge { font-size: 11px; padding: 5px 14px; } .nv-note-list { text-align: left; font-size: 13.5px; } .nv-note-list li { margin-bottom: 5px; } .nv-note-right { text-align: center; } .nv-confused-text { font-size: 15px; margin-bottom: 3px; } .nv-confused-sub { font-size: 12.5px; margin-bottom: 10px; } .nv-phone-link { font-size: 18px; justify-content: center; } .nv-phone-icon { font-size: 18px; } } @media (max-width: 480px) { .nv-note-box { padding: 18px 14px; border-radius: 12px; } .nv-phone-link { font-size: 16px; } .nv-note-list { font-size: 13px; } } /* ============================================================ 6. STEP-BY-STEP PROCESS ============================================================ */ @media (max-width: 960px) { .nv-process-section { padding: 40px 0; } /* Stack steps vertically with connecting arrow below */ .nv-process-grid { flex-direction: column; align-items: center; gap: 0; } .nv-step-card { width: 100%; max-width: 320px; margin: 0 0 0 0; padding: 18px 16px; border-radius: 14px; } .nv-step-num { width: 32px; height: 32px; font-size: 14px; margin-bottom: 10px; } .nv-step-title { font-size: 13.5px; } /* Rotate arrow to point downward */ .nv-step-arrow { transform: rotate(90deg); font-size: 20px; padding: 6px 0; } } @media (max-width: 480px) { .nv-step-card { max-width: 100%; padding: 14px; } .nv-step-title { font-size: 13px; } } /* ============================================================ 7. WHAT'S INCLUDED / CALENDAR SECTION ============================================================ */ @media (max-width: 960px) { .nv-included-section { padding: 40px 0; } /* Stack left + calendar vertically */ .nv-included-grid { display: flex !important; flex-direction: column; gap: 28px; grid-template-columns: unset !important; width: 100%; } .nv-included-left { width: 100%; } .nv-included-subtitle { font-size: 20px; margin-bottom: 12px; } .nv-included-text { font-size: 14px; margin-bottom: 14px; } .nv-cities-text { font-size: 13.5px; margin-bottom: 18px; } .nv-btn-secondary { padding: 12px 22px; font-size: 14px; width: 100%; justify-content: center; } /* Calendar card full width */ .nv-included-right { width: 100%; } .nv-calendar-card { width: 100%; padding: 18px; border-radius: 18px; box-sizing: border-box; } .nv-calendar-month { font-size: 17px; margin-bottom: 14px; } .nv-calendar-grid { gap: 6px; } .nv-cal-day-header { font-size: 10px; padding: 6px 0; } .nv-cal-day { font-size: 12px; border-radius: 7px; } } @media (max-width: 480px) { .nv-included-section { padding: 28px 0; } .nv-calendar-card { padding: 14px; border-radius: 14px; } .nv-calendar-grid { gap: 4px; } .nv-cal-day { font-size: 11px; border-radius: 6px; } .nv-cal-day-header { font-size: 9px; } .nv-included-subtitle { font-size: 18px; } } /* ============================================================ 8. LOCK PRICE BANNER ============================================================ */ @media (max-width: 960px) { .nv-lock-banner { padding: 30px 0; } .nv-lock-content { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; grid-template-columns: unset !important; } .nv-lock-left { width: 100%; } .nv-lock-title { font-size: clamp(22px, 5vw, 30px); margin-bottom: 6px; } .nv-lock-subtitle { font-size: 15px; } .nv-lock-right { width: 100%; flex-direction: column; justify-content: center; align-items: center; gap: 16px; } .nv-price-display { gap: 12px; justify-content: center; } .nv-old-price { font-size: 20px; } .nv-new-price { font-size: clamp(24px, 6vw, 34px); } .nv-btn-white { width: 100%; max-width: 320px; justify-content: center; padding: 13px 24px; font-size: 14px; } } @media (max-width: 480px) { .nv-lock-title { font-size: clamp(20px, 6vw, 26px); } .nv-lock-subtitle { font-size: 14px; } .nv-new-price { font-size: clamp(22px, 7vw, 30px); } .nv-btn-white { max-width: 100%; padding: 13px 20px; } } /* ============================================================ 9. CONFIDENCE SECTION ============================================================ */ @media (max-width: 960px) { .nv-confidence-section { padding: 48px 0; } .nv-confidence-grid { display: flex !important; flex-direction: column; gap: 28px; align-items: center; text-align: center; grid-template-columns: unset !important; } .nv-confidence-left { width: 100%; display: flex; justify-content: center; } .nv-statue-img { max-width: 240px; margin: 0 auto; display: block; } .nv-confidence-right { width: 100%; } .nv-section-title { text-align: center; } .nv-confidence-text { font-size: 14.5px; margin-bottom: 20px; text-align: left; } .nv-btn-primary { width: 100%; max-width: 320px; padding: 13px 20px; font-size: 15px; margin: 0 auto; } } @media (max-width: 480px) { .nv-confidence-section { padding: 36px 0; } .nv-statue-img { max-width: 180px; } .nv-confidence-text { font-size: 14px; } .nv-btn-primary { max-width: 100%; } } /* ============================================================ 10. PREMIUM SERVICES SECTION ============================================================ */ @media (max-width: 960px) { .nv-services-section { padding: 40px 0; } /* 2-col on tablet */ .nv-services-grid { grid-template-columns: 1fr 1fr; gap: 14px; } /* Highlight card full width, no row span */ .nv-service-card.highlight { grid-column: 1 / -1; grid-row: span 1; } .nv-service-card { padding: 22px 18px; border-radius: 14px; } .nv-service-icon { width: 30px; height: 30px; font-size: 14px; margin-bottom: 12px; } .nv-service-card h4 { font-size: 15px; margin-bottom: 8px; } .nv-service-card.highlight h4 { font-size: 18px; margin-bottom: 14px; } .nv-service-card p { font-size: 13.5px; } .nv-service-card.highlight li { font-size: 13.5px; padding: 8px 0 8px 22px; } } @media (max-width: 520px) { /* 1-col on phones */ .nv-services-grid { grid-template-columns: 1fr; gap: 12px; } .nv-service-card.highlight { grid-column: span 1; } .nv-service-card { padding: 18px 16px; } .nv-service-card h4 { font-size: 14.5px; } .nv-service-card.highlight h4 { font-size: 17px; } } /* ============================================================ 11. APPLY MODAL (multi-step) ============================================================ */ @media (max-width: 960px) { .visa-apply-modal .modal-dialog { margin: 16px auto; width: calc(100% - 32px); max-width: 540px; } .visa-apply-modal .modal-content { border-radius: 20px !important; width: 100%; } .mf-shell { display: block !important; width: 100%; grid-template-columns: unset !important; min-height: unset !important; } .mf-left { display: none !important; } .mf-right { width: 100%; } .mf-right-header { padding: 18px 20px 0; } .mf-body { padding: 18px 20px 14px; width: 100%; box-sizing: border-box; } .mf-panel-title { font-size: 17px; } .mf-panel-sub { font-size: 12.5px; margin-bottom: 16px; } .mf-group { margin-bottom: 12px; } .mf-group label { font-size: 10.5px; } .mf-group input, .mf-group textarea, .mf-group select { font-size: 16px; /* prevent iOS zoom */ padding: 11px 13px; border-radius: 9px; width: 100%; } .mf-row { grid-template-columns: 1fr 1fr; gap: 10px; } .mf-phone-wrap { width: 100%; } .mf-phone-prefix { padding: 11px 11px; font-size: 13.5px; flex-shrink: 0; } .mf-phone-input { font-size: 16px !important; padding: 11px 11px !important; min-width: 0; width: 100%; } .mf-dropzone { padding: 22px 14px; border-radius: 12px; width: 100%; box-sizing: border-box; } .mf-dz-icon { width: 44px; height: 44px; margin-bottom: 10px; } .mf-dz-title { font-size: 14px; } .mf-dz-sub { font-size: 11.5px; } .mf-footer { padding: 12px 20px 20px; gap: 10px; } .mf-btn-back { padding: 11px 15px; font-size: 13px; } .mf-btn-next, .mf-btn-submit { padding: 12px 20px; font-size: 13.5px; } .mf-success { padding: 44px 24px; } .mf-success__anim { width: 64px; height: 64px; margin-bottom: 18px; } .mf-success h3 { font-size: 20px; } .mf-success p { font-size: 13px; } } @media (max-width: 480px) { .visa-apply-modal .modal-dialog { margin: 0; width: 100%; max-width: 100%; display: flex; align-items: flex-end; min-height: 100vh; } .visa-apply-modal .modal-dialog-centered { align-items: flex-end; min-height: 100vh; } /* Bottom-sheet style on small phones */ .visa-apply-modal .modal-content { border-radius: 22px 22px 0 0 !important; width: 100%; } .mf-body { padding: 14px 16px 12px; } .mf-row { grid-template-columns: 1fr; gap: 0; } .mf-group textarea { height: 68px; } .mf-footer { padding: 10px 16px 20px; } .mf-btn-back { padding: 10px 13px; font-size: 12.5px; } .mf-btn-next, .mf-btn-submit { padding: 12px 16px; font-size: 13px; } } /* ============================================================ 12. ELIGIBILITY MODAL ============================================================ */ @media (max-width: 960px) { #eligibilityModal .modal-dialog { margin: 16px auto; width: calc(100% - 32px); max-width: 480px; } #eligibilityModal .modal-content { border-radius: 20px; width: 100%; overflow: hidden; } .em-header { padding: 18px 20px 0; } .em-title { font-size: 16px; } .em-body { padding: 20px; min-height: 200px; width: 100%; box-sizing: border-box; } .em-q { font-size: 18px; margin-bottom: 4px; } .em-q-sub { font-size: 12.5px; margin-bottom: 16px; } .em-options { grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } .em-option { padding: 12px 12px; font-size: 13px; border-radius: 10px; width: 100%; box-sizing: border-box; } .em-opt-icon { font-size: 15px; } .em-phone-field { border-radius: 10px; margin-bottom: 8px; width: 100%; overflow: hidden; } .em-phone-prefix { padding: 12px 13px; font-size: 14px; flex-shrink: 0; } .em-phone-input { font-size: 16px; /* prevent iOS zoom */ padding: 12px 13px; min-width: 0; width: 100%; } .em-footer { padding: 12px 20px 20px; gap: 8px; } .em-btn-back { padding: 12px 15px; font-size: 13px; } .em-btn-next { padding: 13px 18px; font-size: 14px; } .em-btn-apply { padding: 13px 18px; font-size: 14px; } .em-result-title { font-size: 17px; margin-bottom: 8px; } .em-summary-box { font-size: 12.5px; padding: 13px 14px; margin-bottom: 12px; width: 100%; box-sizing: border-box; } .em-summary-box p { flex-wrap: wrap; gap: 4px; } .em-warnings { font-size: 11.5px; } .em-charts-row { gap: 8px; width: 100%; justify-content: space-between; } .em-donut-wrap { flex: 1; min-width: 0; } .em-donut-wrap canvas { max-width: 80px; } .em-donut-label span { font-size: 15px; } .em-donut-label p { font-size: 10px; } } @media (max-width: 480px) { #eligibilityModal .modal-dialog { margin: 0; width: 100%; max-width: 100%; display: flex; align-items: flex-end; min-height: 100vh; } #eligibilityModal .modal-dialog.modal-dialog-centered { align-items: flex-end; min-height: 100vh; } #eligibilityModal .modal-content { border-radius: 22px 22px 0 0; width: 100%; } .em-body { padding: 16px; } .em-q { font-size: 16px; } .em-options { gap: 7px; } .em-option { padding: 10px 10px; font-size: 12.5px; } .em-footer { padding: 10px 16px 20px; } } /* ============================================================ 13. SLOT BOOKING POPUP ============================================================ */ @media (max-width: 960px) { .slot-popup-overlay { padding: 16px; align-items: center; } .slot-popup { width: 100%; max-width: 420px; border-radius: 16px; } .slot-popup-header { padding: 16px 18px; } .slot-popup-header h3 { font-size: 16px; } .slot-popup-body { padding: 18px; gap: 12px; } .slot-popup-body input { font-size: 16px; /* prevent iOS zoom */ padding: 12px 13px; width: 100%; } .slot-popup-body button { font-size: 14px; padding: 13px; width: 100%; } .slot-time { font-size: 14px; padding: 10px; } } @media (max-width: 480px) { .slot-popup-overlay { padding: 0; align-items: flex-end; } .slot-popup { max-width: 100%; width: 100%; border-radius: 20px 20px 0 0; } } /* ============================================================ 14. TOUCH UX & GLOBAL FIXES ============================================================ */ @media (max-width: 960px) { /* Remove tap flash */ .nv-btn-primary, .nv-btn-secondary, .nv-btn-main, .nv-btn-white, .nv-cal-day, .em-option, .mf-btn-next, .mf-btn-back, .mf-btn-submit, .em-btn-next, .em-btn-back, .em-btn-apply { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Normalise iOS inputs */ input, select, textarea, button { -webkit-appearance: none; appearance: none; } /* Modals never wider than screen */ .modal-dialog { max-width: 100%; } /* Hide decorative bubbles on mobile */ .nv-bubble, .bubble-1, .bubble-2, .bubble-3, .bubble-4, .bubble-5 { display: none !important; } /* Section title alignment */ .nv-section-title.center { text-align: center; } } /* ============================================================ 15. LANDSCAPE PHONES ============================================================ */ @media (max-width: 812px) and (orientation: landscape) { .nv-hero { min-height: 260px; } .nv-hero-content { margin-top: 20px; padding: 24px 16px; } .nv-hero-title { font-size: clamp(16px, 4vw, 26px); margin-bottom: 8px; } .nv-hero-subtitle { font-size: clamp(13px, 3vw, 18px); margin-bottom: 10px; } /* Side by side for wider landscape screens */ .nv-included-grid { flex-direction: row !important; gap: 20px; } .nv-included-left, .nv-included-right { flex: 1; } }