/* ═══════════════════════════════════════════════════════════════
   responsive.css — BharathTesla Power Tech (BTPT)
   Covers: 1200px | 1024px | 991px | 768px | 576px | 480px | 360px
   Targets every custom layout grid in the site.
   Bootstrap 4 handles col-* reflow; this file handles all
   custom grids: hero-grid, ov-flex, mission-flex, footer-flex,
   ps-grid, srv-grid, svc-grid overrides, etc.
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   ≤ 1200px  Large desktop — tighten spacing
───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {

  .ps-prod-img.circle-big {
    width: 130px;
    height: 130px;
  }

  .ps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .ov-cctv {
    padding: 30px 32px;
  }

  .ov-top-left {
    padding: 36px 32px;
  }

}


/* ─────────────────────────────────────────────────────────────
   ≤ 1024px  Tablet landscape — collapse heavy side-by-sides
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* NAVBAR */
  .btpt-navbar {
    height: 80px;
  }

  .nb-logo img {
    width: 100px;
  }

  /* HERO */
  .hero {
    padding-top: 80px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-left {
    min-height: 340px;
  }

  /* OVERVIEW */
  .ov-flex {
    grid-template-columns: 1fr;
  }

  .ov-top-right {
    min-height: 280px;
  }

  /* MISSION BLOCK */
  .mission-flex {
    grid-template-columns: 1fr;
  }

  .ov-cctv {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 30px 28px;
  }

  .ov-mission-city {
    min-height: 260px;
  }

  /* PRODUCTS grid */
  .ps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .ps-prod-img.circle-big {
    width: 110px;
    height: 110px;
  }

  /* FOOTER BAR in hero */
  .footer-flex {
    grid-template-columns: 1fr;
  }

  .footer-left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 0 20px;
  }

}


/* ─────────────────────────────────────────────────────────────
   ≤ 991px  Bootstrap md breakpoint — navbar collapses
───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

  /* Navbar collapse open state styling */
  .btpt-navbar .navbar-collapse {
    background: #fff;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--gold);
    box-shadow: 0 6px 20px rgba(20, 53, 104, .10);
  }

  .btpt-navbar .navbar-nav {
    gap: 0;
  }

  .btpt-navbar .nav-item {
    border-bottom: 1px solid #eef3f8;
  }

  .btpt-navbar .nav-item:last-child {
    border-bottom: none;
  }

  .btpt-link {
    padding: 12px 8px !important;
    display: block;
  }

  .nb-cta {
    display: inline-block;
    margin: 10px 8px 4px;
  }

  /* Hamburger bars — make visible and dark for light navbar */
  .btpt-toggler span {
    background: #143568;
  }

  /* HERO — single column */
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-left {
    min-height: 280px;
  }

  /* Services grid in hero — single column */
  .srv-grid {
    flex-direction: column;
    gap: 12px;
  }

  /* Products grid */
  .ps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Mission section */
  .mission-grid {
    margin-top: 2rem;
  }

  .rocket-card {
    margin-top: 2rem;
    min-height: auto;
    padding: 2rem;
  }

}


/* ─────────────────────────────────────────────────────────────
   ≤ 768px  Tablet portrait
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* NAVBAR */
  .btpt-navbar {
    height: 68px;
    padding: 0 12px;
  }

  .nb-logo img {
    width: 90px;
  }

  /* HERO */
  /* .hero {
    padding-top: 68px;
  } */

  .hero-left {
    min-height: 220px;
  }

  .contractors-band {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 16px;
  }

  .cb-title {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .services-section {
    padding: 12px 16px 20px;
  }

  .srv-main {
    font-size: 18px;
    margin-bottom: 12px;
  }

  /* Services two-column list stays readable at this size */
  .srv-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .srv-col {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }

  .srv-col ul li {
    font-size: 12px;
  }

  /* FOOTER BAR inside hero */
  .footer-flex {
    grid-template-columns: 1fr;
  }

  .footer-left,
  .footer-right {
    padding: 16px 20px;
  }

  .nav-logo img {
    width: 150px;
    height: auto;
}

  /* OVERVIEW */
  .ov-top-left {
    padding: 28px 20px;
    gap: 14px;
  }

  .ov-logo img {
    width: 170px;
  }

  .ov-body-text {
    font-size: 13px;
  }

  .ov-cctv {
    padding: 24px 20px;
  }

  .ov-cctv-title {
    font-size: 16px;
  }

  .ov-cctv-txt {
    font-size: 12.5px;
  }

  /* PRODUCTS & SERVICES */
  .products-page .sec-heading {
    font-size: 26px;
    padding: 0 16px;
  }

  .ps-cols .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ps-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ps-col {
    padding: 24px 18px;
  }

  .ps-prod-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ps-prod-img.circle-big {
    width: 100px;
    height: 100px;
  }

  /* PAGE SECTIONS */
  .page-section {
    padding: 56px 0;
  }

  /* MISSION */
  .mission-grid {
    margin-top: 1.5rem;
  }

  .mission-statement {
    font-size: 20px;
    margin-bottom: 1.5rem;
  }

  /* SERVICES full section */
  .svc-grid {
    margin: 0;
  }

  /* PANELS */
  .pan-card {
    padding: 20px 16px;
  }

  /* PORTFOLIO */
  .portfolio-item {
    height: 220px;
  }

  /* CONTACT */
  .cinfo {
    margin-bottom: 2rem;
  }

  .contact-grid {
    margin-top: 0.5rem;
  }

  /* CFORM full width */
  .col-lg-7.cform {
    margin-top: 0;
  }

  /* FOOTER */
  .footer-main {
    padding: 40px 0 28px;
  }

  .footer-brand p {
    max-width: 100%;
  }

  .footer-col {
    margin-top: 1.5rem;
  }

  /* SITE FOOTER */
  .site-footer {
    padding: 12px 16px;
  }

  .sf-line {
    font-size: 11px;
  }

}


/* ─────────────────────────────────────────────────────────────
   ≤ 576px  Bootstrap sm breakpoint — contact form row stacks
───────────────────────────────────────────────────────────── */
@media (max-width: 576px) {

  /* Contact form row — name & phone stacked */
  .cf-row .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0;
  }

  .cf-btn {
    width: 100%;
    text-align: center;
    padding: 13px 20px;
  }

  /* HERO service cols stack */
  .srv-grid {
    flex-direction: column;
    gap: 8px;
  }

  .srv-col {
    flex: 1 1 100%;
  }

  /* Products header always stacked */
  .ps-prod-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Overview logo smaller */
  .ov-logo img {
    width: 140px;
  }

  /* Section headings */
  .sec-heading {
    font-size: 26px;
  }

  /* Pan cards */
  .pan-num {
    font-size: 42px;
  }

  /* Portfolio */
  .portfolio-item {
    height: 200px;
  }

  /* Mission */
  .rocket-card {
    padding: 1.5rem;
  }

  .rocket-icon {
    font-size: 36px;
    margin-bottom: 1rem;
  }

  /* FOOTER COLUMNS — full width on small phones */
  .col-lg-2.footer-col,
  .col-lg-3.footer-col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-5.footer-brand {
    flex: 0 0 100%;
    max-width: 100%;
  }

}


/* ─────────────────────────────────────────────────────────────
   ≤ 480px  Mobile — further reduce all spacing & font sizes
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* NAVBAR */
  .btpt-navbar {
    height: 60px;
  }

  .nb-logo img {
    width: 85px;
  }

  /* HERO */
  /* .hero {
    padding-top: 60px;
  } */

  .hero-left {
    min-height: 180px;
  }

  .cb-title {
    font-size: 12px;
    letter-spacing: 0.5px;
  }

  .cb-slash {
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 10px;
  }

  .srv-main {
    font-size: 16px;
  }

  .srv-col ul li {
    font-size: 11.5px;
  }

  /* Prevent iOS input zoom */
  .cf-group input,
  .cf-group select,
  .cf-group textarea {
    font-size: 16px;
  }

  /* PAGE SECTIONS */
  .page-section {
    padding: 44px 0;
  }

  /* SECTION HEADINGS */
  .sec-heading {
    font-size: 24px;
  }

  .sec-eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .sec-desc {
    font-size: 13px;
  }

  /* SERVICES CARDS */
  .svc-card {
    padding: 18px 16px;
  }

  .svc-icon {
    font-size: 20px;
  }

  .svc-name {
    font-size: 14px;
  }

  /* PANELS */
  .pan-card {
    padding: 18px 14px;
  }

  .pan-name {
    font-size: 16px;
  }

  .pan-desc {
    font-size: 12px;
  }

  /* PRODUCTS */
  .ps-col {
    padding: 20px 14px;
  }

  .ps-prod-title {
    font-size: 14px;
  }

  .ps-prod-list li {
    font-size: 12px;
  }

  .ps-prod-img.circle-big {
    width: 80px;
    height: 80px;
  }

  /* PORTFOLIO */
  .portfolio-item {
    height: 180px;
  }

  /* MISSION */
  .mission-statement {
    font-size: 18px;
  }

  .mission-item p {
    font-size: 13px;
  }

  /* CONTACT */
  .ci-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .ci-val {
    font-size: 12.5px;
  }

  /* FOOTER */
  .footer-main {
    padding: 32px 0 24px;
  }

  .nav-logo img {
    width: 160px;
  }

  .footer-brand p {
    font-size: 13px;
  }

  .col-lg-2.footer-col,
  .col-lg-3.footer-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .footer-col h4 {
    margin-top: 0.5rem;
  }

  /* SITE FOOTER */
  .site-footer {
    padding: 10px 12px;
  }

}


/* ─────────────────────────────────────────────────────────────
   ≤ 360px  Very small phones
───────────────────────────────────────────────────────────── */
@media (max-width: 360px) {

  .nb-logo img {
    width: 100px;
  }

  .cb-title {
    font-size: 11px;
  }

  .sec-heading {
    font-size: 22px;
  }

  .srv-main {
    font-size: 15px;
  }

  .ov-top-left {
    padding: 20px 14px;
  }

  .ov-cctv {
    padding: 20px 14px;
  }

  .ps-col {
    padding: 16px 12px;
  }

  .services-section {
    padding: 10px 12px 16px;
  }

  .contractors-band {
    padding: 8px 12px;
  }

  .footer-left,
  .footer-right {
    padding: 12px 14px;
  }

  .page-section {
    padding: 36px 0;
  }

  .portfolio-item {
    height: 160px;
  }

  .svc-card {
    padding: 14px 12px;
  }

  .pan-card {
    padding: 14px 12px;
  }

  .cf-btn {
    font-size: 11px;
    padding: 12px 16px;
  }

}


/* ─────────────────────────────────────────────────────────────
   Print — hide nav, interactive elements
───────────────────────────────────────────────────────────── */
@media print {

  .btpt-navbar,
  .btpt-toggler,
  .cf-btn,
  .social-links,
  footer,
  .site-footer {
    display: none !important;
  }

  /* .hero {
    padding-top: 0;
  } */

  .hero-grid,
  .ov-flex,
  .mission-flex,
  .footer-flex {
    grid-template-columns: 1fr;
  }

  body {
    font-size: 11pt;
    color: #000;
  }

}