/* ═══════════════════════════════════════════════════════
   THE WEDPIC FILMS — MOBILE RESPONSIVE FIX
   Bootstrap 5.0.1 Compatible
   Ye file newindex2.css ke BAAD link karein:
   <link rel="stylesheet" href="./assets/css/mobile-responsive-fix.css">
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   DEMO BAR — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .demo-bar {
    padding: 8px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .demo-bar p {
    font-size: 9px;
  }
  .demo-bar .d-flex {
    flex-wrap: wrap;
    gap: 4px !important;
    max-height: 60px;
    overflow-y: auto;
  }
  .dp {
    font-size: 9px;
    padding: 4px 8px;
  }
}

/* Demo bar ki height calculate karke baaki sab adjust karein */
@media (max-width: 768px) {
  #pgbar {
    top: 0; /* demo bar ke saath adjust */
  }
}

/* ══════════════════════════════════════
   NAVBAR — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #nav {
    top: 0;
    padding: 12px 20px !important;
  }
  #nav.sticky {
    padding: 10px 20px !important;
  }
  .nav-logo {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  #nav {
    top: 0;
    padding: 10px 16px !important;
  }
  #nav.sticky {
    padding: 8px 16px !important;
  }
  .nav-logo {
    font-size: 14px;
    letter-spacing: .06em;
  }
  /* Enquire button hide on very small screens */
  .nav-enquire {
    display: none !important;
  }
}

/* ══════════════════════════════════════
   HERO SECTION — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero {
    min-height: 100svh;
    align-items: flex-end;
  }
  .hero-content {
    padding: 0 20px 80px !important;
    max-width: 100%;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: .18em;
  }
  .hero-h1 {
    font-size: clamp(38px, 9vw, 72px) !important;
    margin-bottom: 16px;
  }
  .hero-sub {
    font-size: 13px !important;
    margin-bottom: 32px;
    max-width: 100%;
  }
  .hero-btns {
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-fill {
    padding: 14px 28px;
    font-size: 10px;
  }
  .play-showreel-btn {
    padding: 10px 16px;
    font-size: 9px;
  }
  .hero-stats {
    display: none !important;
  }
  .hero-scroll {
    right: 20px;
    bottom: 24px;
  }
  .hero-counter {
    left: 20px;
    bottom: 24px;
  }
  .hcn {
    font-size: 48px;
  }
  .hero-dots {
    bottom: 28px;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding: 0 16px 72px !important;
  }
  .hero-h1 {
    font-size: clamp(32px, 11vw, 52px) !important;
    line-height: 1.05;
  }
  .hero-sub {
    font-size: 12px !important;
    line-height: 1.8;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: .14em;
    margin-bottom: 12px;
  }
}

/* ══════════════════════════════════════
   BELT / MARQUEE — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .belt-wrap {
    height: 50px;
  }
  .belt-item {
    font-size: 12px;
    padding: 0 20px;
  }
  .mq-img {
    width: 220px;
    height: 150px;
  }
}

/* ══════════════════════════════════════
   AUTHORITY PROOF — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  #authority-proof {
    padding: 40px 16px !important;
  }
  #authority-proof .row {
    gap: 24px !important;
  }
  #authority-proof h2 {
    font-size: clamp(22px, 6vw, 34px) !important;
    margin-bottom: 8px;
  }
  #authority-proof p {
    font-size: 13px !important;
  }
}

/* ══════════════════════════════════════
   PRESS / RECOGNITION — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .press-card {
    border-left: 1px solid rgba(201,169,110,.2) !important;
    border-top: none;
    margin-top: -1px;
    padding: 24px 20px;
  }
  .brand-strip {
    gap: 0;
  }
  .brand-item {
    padding: 10px 14px;
    font-size: 14px;
  }
  section[style*="padding:72px 60px"] {
    padding: 48px 16px !important;
  }
}

/* ══════════════════════════════════════
   AUTHORITY INTRO — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  #authority {
    padding: 48px 16px !important;
  }
  #authority h2 {
    font-size: clamp(18px, 5vw, 26px) !important;
  }
  #authority p {
    font-size: 13px !important;
  }
  .auth-link-btn {
    font-size: 10px;
    padding: 6px 12px;
  }
}

/* ══════════════════════════════════════
   VENUE STRIP — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .vstrip {
    padding: 16px;
    overflow: hidden;
  }
  .vs-lbl {
    display: none;
  }
  .vs-names {
    overflow-x: auto;
    gap: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .vs-names::-webkit-scrollbar { display: none; }
  .vs-n {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════
   ABOUT SECTION — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #about {
    padding: 60px 16px !important;
  }
  #about .row {
    flex-direction: column;
    gap: 40px !important;
  }
  .avis {
    height: 300px !important;
    width: 100%;
  }
  .av-main {
    inset: 20px 0 0 20px !important;
  }
  .av-border {
    right: 20px !important;
    bottom: 20px !important;
  }
  .av-badge {
    right: 0 !important;
    bottom: -10px;
    padding: 16px 20px;
  }
  .av-badge strong {
    font-size: 28px;
  }
  .mquote {
    font-size: clamp(15px, 3.5vw, 22px) !important;
    padding-left: 20px;
    margin: 24px 0;
  }
  .stit {
    font-size: clamp(28px, 6vw, 52px) !important;
  }
}

/* ══════════════════════════════════════
   PORTFOLIO / FILMS GRID — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #films {
    padding: 60px 0 0 !important;
  }
  .port-head {
    padding: 0 16px 32px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .pgrid {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
  }
  .fc-card {
    min-height: 260px !important;
  }
  .fw7, .fw5, .fw4, .fw8, .fw4b {
    width: 100% !important;
    min-height: 260px !important;
  }
  .fname {
    font-size: 16px;
  }
  .avail-bar {
    margin: 40px 16px 0 !important;
    padding: 20px 20px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .avail-yr {
    font-size: 20px;
  }
}

/* ══════════════════════════════════════
   HORIZONTAL GALLERY — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .hgal {
    padding: 48px 0;
  }
  .hgal-label {
    padding: 0 16px 20px !important;
  }
  .hgal-track {
    padding: 0 16px !important;
    gap: 3px;
  }
  .hg {
    width: 260px !important;
    height: 360px !important;
  }
}

/* ══════════════════════════════════════
   SERVICES — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #services {
    padding: 60px 16px !important;
  }
  .svc-grid {
    grid-template-columns: 1fr !important;
    margin-top: 40px;
  }
  .svc {
    padding: 36px 28px;
  }
  .svc h3 {
    font-size: 20px;
  }
}

/* ══════════════════════════════════════
   CTA BAND — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .cta-band {
    height: 320px;
  }
  .cta-h2 {
    font-size: clamp(24px, 7vw, 40px) !important;
  }
  .cta-over {
    padding: 0 20px;
    gap: 16px;
  }
}

/* ══════════════════════════════════════
   DESTINATIONS — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #destinations {
    padding: 60px 16px !important;
  }
  .dg {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-top: 40px;
  }
  .dc {
    padding: 28px 16px;
  }
  .dc-name {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .dg {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════
   INTERNATIONAL — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #international {
    padding: 60px 16px !important;
  }
  .intl-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    margin-top: 32px;
  }
}

@media (max-width: 600px) {
  .intl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .intl-card {
    padding: 22px 14px;
  }
  .intl-name {
    font-size: 13px;
  }
}

/* ══════════════════════════════════════
   INSTAGRAM SECTION — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #instagram-section {
    padding: 48px 16px !important;
  }
  .insta-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .insta-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════
   NRI WEDDINGS — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  #nri-weddings {
    padding: 48px 16px !important;
  }
  #nri-weddings .row {
    gap: 24px !important;
  }
  #nri-weddings h2 {
    font-size: clamp(22px, 6vw, 34px) !important;
  }
}

/* ══════════════════════════════════════
   WEDDING STORIES — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .story-card {
    border-left: 1px solid var(--border) !important;
    border-top: 1px solid var(--border) !important;
  }
}

@media (max-width: 600px) {
  div[style*="padding:40px 60px"] {
    padding: 36px 16px !important;
  }
}

/* ══════════════════════════════════════
   REVIEW STRIP — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .review-strip {
    padding: 20px 16px !important;
  }
  .rev-badge {
    padding: 12px 16px;
  }
  .rev-badge .rev-n {
    font-size: 26px;
  }
}

/* ══════════════════════════════════════
   TESTIMONIALS — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #testimonials {
    padding: 60px 16px !important;
  }
  .tg {
    grid-template-columns: 1fr !important;
    margin-top: 40px;
  }
  .tc {
    padding: 36px 28px;
  }
  .tc-body {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .tc {
    padding: 28px 20px;
  }
  .tc-body {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════
   FOUNDER SECTION — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #founder {
    padding: 60px 16px !important;
  }
  #founder .row {
    flex-direction: column;
    gap: 40px !important;
  }
  .fvis {
    height: 300px !important;
    width: 100%;
  }
  .fv-main {
    inset: 20px 0 0 20px !important;
  }
  .fv-border {
    right: 20px !important;
    bottom: 20px !important;
  }
  .fv-stamp {
    right: 0 !important;
    padding: 16px 20px;
  }
  .fv-stamp p:first-child {
    font-size: 16px;
  }
  .f-sig {
    font-size: 36px;
    margin-top: 16px;
  }
  .f-creds {
    gap: 6px;
  }
  .f-cred {
    font-size: 9px;
    padding: 5px 10px;
  }
}

/* ══════════════════════════════════════
   COLLECTIONS — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #collections {
    padding: 60px 16px !important;
  }
  .cg {
    grid-template-columns: 1fr !important;
    margin-top: 40px;
  }
  .cc {
    padding: 40px 28px;
  }
  .cc.best::before {
    font-size: 8px;
  }
  .cc h3 {
    font-size: 22px;
  }
  .cc-price strong {
    font-size: 18px;
  }
}

/* ══════════════════════════════════════
   FAQ — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #faq {
    padding: 60px 16px !important;
  }
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 2px;
  }
  .faq-item {
    padding: 24px 20px;
  }
  .faq-q {
    font-size: 14px !important;
  }
}

/* ══════════════════════════════════════
   SCARCITY BAR — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .scarcity-bar {
    padding: 20px 16px;
  }
  .scarcity-bar p {
    font-size: 15px;
  }
}

/* ══════════════════════════════════════
   INQUIRY FORM — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  #inquiry {
    padding: 60px 16px 80px !important;
  }
  .inq-form {
    grid-template-columns: 1fr !important;
  }
  .fi.full {
    grid-column: span 1 !important;
  }
  .inq-btn {
    padding: 16px;
    font-size: 11px;
  }
}

/* ══════════════════════════════════════
   STICKY CTA + WHATSAPP — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  .sticky-cta {
    bottom: 72px;
    right: 16px;
    padding: 10px 14px;
    font-size: 9px;
  }
  .wa {
    bottom: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
  }
  .wa svg {
    width: 22px;
    height: 22px;
  }
}

/* ══════════════════════════════════════
   VIDEO MODAL — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  #vid-modal {
    padding: 12px;
  }
  .vid-close {
    top: -36px;
    font-size: 10px;
  }
  .vid-couple {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════
   FOOTER — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  footer {
    padding: 48px 16px 32px !important;
  }
  footer .row {
    padding-bottom: 36px !important;
  }
  .ft-brand {
    font-size: 20px;
  }
  .ft-tagline {
    font-size: 12px;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  footer .d-flex.align-items-center.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .ft-soc {
    gap: 14px;
  }
  .ft-copy {
    font-size: 10px;
  }
}

/* ══════════════════════════════════════
   SUB-PAGE HERO — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .sub-hero {
    height: 70vh;
    min-height: 440px;
    padding-top: 60px;
  }
  .sub-hero-content {
    padding: 0 16px 60px !important;
  }
  .sub-h1 {
    font-size: clamp(32px, 8vw, 64px) !important;
    margin-bottom: 16px;
  }
  .sub-hero-para {
    font-size: 13px;
    margin-bottom: 28px;
  }
  .sub-section {
    padding: 48px 16px !important;
  }
  .sub-h2 {
    font-size: clamp(24px, 6vw, 44px) !important;
  }
  .sub-p {
    font-size: 13.5px !important;
  }
  .venue-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cluster-wrap {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .sub-hero {
    height: 65vh;
    min-height: 400px;
  }
  .sub-h1 {
    font-size: clamp(28px, 9vw, 48px) !important;
  }
  .venue-grid {
    grid-template-columns: 1fr 1fr;
  }
  .venue-name {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════
   OVERLAY MENU — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 768px) {
  #overlay-close {
    top: 16px;
    right: 20px;
    font-size: 10px;
  }
  .ov-list a {
    font-size: clamp(28px, 9vw, 52px) !important;
  }
  .ov-meta {
    font-size: 9px;
    letter-spacing: .14em;
    margin-top: 24px;
    padding: 0 20px;
  }
}

/* ══════════════════════════════════════
   GENERAL SECTION SPACING — MOBILE
══════════════════════════════════════ */
@media (max-width: 768px) {
  .stag {
    font-size: 9px;
    letter-spacing: .2em;
    margin-bottom: 12px;
  }
  .stit {
    font-size: clamp(26px, 7vw, 44px) !important;
  }
  .sbody {
    font-size: 13px;
    max-width: 100%;
  }
  /* Remove body cursor:none on touch devices */
  body {
    cursor: auto;
  }
  button {
    cursor: pointer !important;
  }
  a {
    cursor: pointer;
  }
  .c-dot,
  .c-ring {
    display: none !important;
  }
}

/* ══════════════════════════════════════
   COOKIE BANNER — MOBILE FIX
══════════════════════════════════════ */
@media (max-width: 600px) {
  #cookie-banner {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #cookie-banner p {
    font-size: 11px;
  }
  .cbtn {
    padding: 7px 16px;
    font-size: 10px;
  }
}

/* ══════════════════════════════════════
   TOUCH DEVICE — CURSOR FIX
══════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  body {
    cursor: auto !important;
  }
  button, a, .fc-card, .dc, .hg, .intl-card {
    cursor: pointer !important;
  }
  .c-dot,
  .c-ring {
    display: none !important;
  }
}

/* ══════════════════════════════════════
   SAFE AREA (iPhone notch) FIX
══════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .wa,
  .sticky-cta {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
  }
}

/* ══════════════════════════════════════
   SMALL PHONES (360px aur chhote)
══════════════════════════════════════ */
@media (max-width: 360px) {
  .hero-h1 {
    font-size: 30px !important;
  }
  .sub-h1 {
    font-size: 26px !important;
  }
  .btn-fill {
    padding: 12px 20px;
    font-size: 9px;
  }
  .nav-logo {
    font-size: 12px;
  }
  .dg {
    grid-template-columns: 1fr 1fr !important;
  }
  .dc {
    padding: 20px 10px;
  }
  .dc-name {
    font-size: 12px;
  }
  .intl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}