/* =========================================================
   HUBDEXPAY — Responsive overrides (drop-in)
   Place this at the END of assets/css/responsive.css
   ========================================================= */

/* Fluid type so we don't hard-code at every breakpoint */
h1{font-family:Poppins,Inter,sans-serif;font-weight:700;
    font-size:clamp(32px,3.8vw,56px);line-height:1.05}
h2{font-family:Poppins,Inter,sans-serif;font-weight:700;
    font-size:clamp(26px,3.2vw,48px);line-height:1.1}
h3{font-weight:600;font-size:clamp(20px,2.2vw,28px)}
h4{font-weight:600;font-size:clamp(18px,1.9vw,22px)}
p,.text-size-18{font-size:clamp(15px,1.2vw,18px);line-height:1.5}

/* Navbar – cleaner mobile drawer with brand colors */
.navbar{padding:14px 0}
.navbar-brand img{max-width:132px}
.navbar-toggler{border:0;width:56px;height:42px;
  background:var(--e-global-color-accent, var(--hx-primary));
  color:#fff}
.navbar-light .navbar-toggler-icon{background:#fff;height:2px;width:100%;margin:7px 0}
.navbar-collapse{
  position:absolute; right:0; top:60px; z-index:30;
  width:30%; max-width:360px; min-width:260px;
  background:#fff; border:1px solid var(--hx-border);
  border-radius:12px; box-shadow:var(--hx-shadow); overflow:hidden
}
.navbar-nav .nav-item a{color:var(--e-global-color-primary, var(--hx-text)) !important}
.navbar-nav .nav-item .signup{
  background:transparent; color:var(--e-global-color-primary, var(--hx-text)) !important;
  border-radius:0; display:block
}
.navbar-nav .nav-item .signup:hover,
.navbar-nav .nav-item a:hover,
.navbar-nav .active > a{
  color:#fff !important;
  background:var(--e-global-color-secondary, var(--hx-primary)) !important
}

/* Contact: map + form spacing */
.message-section .map iframe{width:100%; height:520px; border:0}
.message-section .message_content input,
.message-section .message_content textarea{
  border:1px solid var(--hx-border); border-radius:12px; padding:14px
}

/* Hide decorative “elements” on smaller screens */
@media (max-width:1440px){
  .topbar .social-icons{margin-right:5px}
  .member-section .element2,
  .message-section .element2,
  .blog-section .element2{display:none}
}

/* Tablet (≤1199px) */
@media (max-width:1199px){
  .navbar-brand img{max-width:118px}
  .navbar-nav li{margin:0 12px}
  .navbar-nav .nav-item .signup{padding:16px}
  .bannermain{padding:96px 0 0}
  .what-we-do,.service-section,.plan,.need-section,
  .about-section,.blog-section,.faq-section,
  .pricing-faq,.message-section,.member-section,
  .testimonial-section{padding:100px 0}
  .sub-banner{padding:90px 0 0}
  .sub-banner .banner-section .banner_content p{padding:0 100px}
  .message-section .map iframe{height:510px}
  .footer-section .middle-portion{padding-top:90px}
  /* center long headings without huge fixed paddings */
  .what-we-do .subheading h2,
  .benefit-section .subheading h2,
  .plan .content h2{padding:0}
}

/* Mobile nav + tighter layout (≤991px) */
@media (max-width:991px){
  .navbar-toggler{width:60px}
  .navbar-collapse{width:90%; left:5%; right:5%; border-radius:14px}
  .navbar-nav .nav-item a{padding:14px 22px !important}
  .bannermain{padding:72px 0 0}
  .service-section,.plan,.need-section,
  .about-section,.blog-section,.faq-section,
  .pricing-faq,.message-section,.member-section,
  .testimonial-section{padding:70px 0}
  .message-section .map iframe{height:420px}
  .footer-section .partner-section .partner .partner1 img{width:85px}
}

/* Phones (≤767px) */
@media (max-width:767px){
  .navbar{padding:10px 0}
  .navbar-collapse{width:96%; left:2%; right:2%}
  .bannermain{padding:60px 0 0}
  .bannermain .banner{text-align:center}
  .bannermain .banner p{padding:0 40px}
  .what-we-do,.service-section,.plan,.need-section,
  .about-section,.faq-section,.message-section,
  .member-section,.testimonial-section{padding:60px 0}
  .message-section .map{margin-top:20px}
  .message-section .map iframe{height:360px}
  .footer-section .partner-section{padding:40px 0 20px;text-align:center}
}

/* Small phones (≤575px) */
@media (max-width:575px){
  .navbar-brand img{max-width:112px}
  .navbar-collapse{width:100%; left:0; right:0; border-radius:0}
  .bannermain .banner p{padding:0}
  .service-section .service-content h2{padding:0 20px}
  .message-section .map iframe{height:320px}
  .footer-section .middle-portion{text-align:center; padding-top:40px}
}

/* Super small helpers */
@media (max-width:427px){
  #carouselExampleControls{padding:0 40px}
}