/* ============================================================
   NIWAS INTERIOR — RESPONSIVE OVERRIDES
   Loaded AFTER style.css
   ============================================================ */

/* ============================================================
   LARGE DESKTOP → SMALL DESKTOP (≤1200px)
   ============================================================ */
@media (max-width: 1200px) {
  #header .logo img { height: 65px; }
  .navbar a { font-size: 17px; padding-left: 22px; }
  .section-title h1,
  .section-title h2,
  .section-title h3,
  .section-title h4 { font-size: 25px; }
}

/* ============================================================
   TABLET LANDSCAPE (≤991px)
   ============================================================ */
@media (max-width: 991px) {
  /* ---- Header / nav ---- */
  #header { height: auto; padding: 8px 0; }
  #header .logo img { height: 55px; }

  /* ---- Hero carousel ---- */
  .carousel-item img { height: auto; }

  /* ---- About sections ---- */
  .about .content h1 { font-size: 24px; }
  .about .content h3 { font-size: 22px; }
  .about h2,
  .about p { font-size: 16px; line-height: 25px; }

  /* ---- Portfolio ---- */
  .portfolio .portfolio-item { margin-bottom: 20px; }
  .portfolio .portfolio-wrap::before { inset: 20px; }
  .portfolio .portfolio-wrap .portfolio-info::before,
  .portfolio .portfolio-wrap .portfolio-info::after {
    width: 36px;
    height: 36px;
  }
  .portfolio .portfolio-wrap .portfolio-info::before { top: 25px; left: 25px; }
  .portfolio .portfolio-wrap .portfolio-info::after  { bottom: 25px; right: 25px; }
  .portfolio .portfolio-wrap:hover .portfolio-info::before { top: 10px; left: 10px; }
  .portfolio .portfolio-wrap:hover .portfolio-info::after  { bottom: 10px; right: 10px; }

  /* ---- Footer ---- */
  #footer .footer-top .footer-contact p { font-size: 16px; }
}

/* ============================================================
   TABLET PORTRAIT / LARGE MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Top bar ---- */
  #topbar .contact-info { font-size: 13px; }
  #topbar .contact-info i { display: inline-flex; }
  #topbar .social-links a { margin-left: 14px; font-size: 18px; }

  /* ---- Header ---- */
  #header .logo img { height: 48px; }
  .navbar-mobile ul { top: 55px; }

  /* ---- Slider ---- */
  #carouselExampleIndicators .carousel-item img {
    max-height: 320px;
    object-fit: cover;
  }

  /* ---- Sections ---- */
  section { padding: 0 0 50px; }

  /* ---- Portfolio ---- */
  .portfolio .portfolio-item { margin-bottom: 20px; }
  .portfolio .portfolio-wrap::before { inset: 15px; }
  .portfolio .portfolio-wrap .portfolio-info::before,
  .portfolio .portfolio-wrap .portfolio-info::after {
    width: 28px;
    height: 28px;
  }
  .portfolio .portfolio-wrap .portfolio-info::before { top: 18px; left: 18px; }
  .portfolio .portfolio-wrap .portfolio-info::after  { bottom: 18px; right: 18px; }
  .portfolio .portfolio-wrap:hover .portfolio-info::before { top: 8px; left: 8px; }
  .portfolio .portfolio-wrap:hover .portfolio-info::after  { bottom: 8px; right: 8px; }

  /* ---- Footer ---- */
  #footer .footer-top { padding: 40px 0 0; text-align: center; }
  #footer .footer-top .social-links { justify-content: center; }
  #footer .copyright { text-align: center; }

  /* ---- Floating icons: WhatsApp above back-to-top ---- */
  .whatsapp a {
    top: auto;
    bottom: 70px;
    right: 12px;
    width: 55px;
    height: 42px;
  }
  .whatsapp a .bi { font-size: 22px; }

  .back-to-top {
    right: 12px;
    bottom: 15px;
  }
}

/* ============================================================
   MOBILE (≤576px)
   ============================================================ */
@media (max-width: 576px) {
  /* ---- Header ---- */
  #header .logo img { height: 42px; }

  /* ---- Slider ---- */
  #carouselExampleIndicators .carousel-item img {
    max-height: 240px;
  }

  /* ---- Section titles ---- */
  .section-title h1,
  .section-title h2,
  .section-title h3,
  .section-title h4,
  .section-title h5,
  .section-title h6 {
    font-size: 21px;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  /* ---- About text ---- */
  .about h2,
  .about p { font-size: 15px; line-height: 24px; }

  /* ---- Border decorations ---- */
  .border_r_b {
    border-right-width: 6px;
    border-bottom-width: 6px;
  }
  .border_l_t {
    border-left-width: 6px;
    border-top-width: 6px;
  }

  /* ---- FAQ ---- */
  .faq-niwas-interior h4 { font-size: 20px; }
  .accordion-item .accordion-header button { font-size: 15px; }

  /* ---- Portfolio ---- */
  .portfolio .portfolio-item { margin-bottom: 20px; }
  .portfolio .portfolio-wrap .portfolio-links a { font-size: 22px; }
  .portfolio .portfolio-wrap:hover .portfolio-info::before { top: 6px; left: 6px; }
  .portfolio .portfolio-wrap:hover .portfolio-info::after  { bottom: 6px; right: 6px; }

  /* ---- CTA buttons stack ---- */
  .cta-section .btn {
    display: block;
    width: 85%;
    max-width: 260px;
    margin: 8px auto !important;
  }
  .cta-section .btn.me-2 { margin-right: auto !important; }
}

/* ============================================================
   VERY SMALL MOBILE (≤400px)
   ============================================================ */
@media (max-width: 400px) {
  #header .logo img { height: 38px; }
  #topbar .contact-info i { font-size: 12px; }
  .whatsapp a { bottom: 65px; width: 48px; height: 38px; }
  .whatsapp a .bi { font-size: 19px; }
}