/* responsive.css — overrides and media queries to make CalcuNext layout fully responsive */

/* Base tweaks */
.hero-slide {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Scale headings with clamp for smoother responsiveness */
.display-4 { font-size: clamp(2.0rem, 5.2vw, 3.4rem); }
.display-5 { font-size: clamp(1.6rem, 3.8vw, 2.6rem); }
.display-6 { font-size: clamp(1.4rem, 3.2vw, 2.1rem); }

/* Reduce large paddings on small screens */
.section-padding { padding: clamp(1rem, 2.5vw, 3rem) 0; }
.container { padding-left: 1rem; padding-right: 1rem; }

/* HERO: adaptive heights */
@media (min-width: 1201px) {
  .hero-slide { height: 95vh; }
}
@media (max-width: 1200px) and (min-width: 993px) {
  .hero-slide { height: 85vh; }
}
@media (max-width: 992px) and (min-width: 769px) {
  .hero-slide { height: 75vh; }
}
@media (max-width: 768px) {
  .hero-slide { height: 60vh; }
  .overlay-shape { display: none; }
  .hero-slide .container { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* Make hero text more compact on small screens */
@media (max-width: 768px) {
  .hero-slide .display-4 { font-size: 1.6rem; line-height: 1.15; }
  .hero-slide .lead { font-size: 0.98rem; }
}

/* Services / Swiper cards — stack content vertically on very small screens */
@media (max-width: 576px) {
  .service-content { align-items: flex-end; }
  .gradient-icon { font-size: 28px; }
  .service-img img { height: 160px; }
}

/* About images — ensure overlapping bottom image becomes stacked on small screens (improves accessibility) */
@media (max-width: 768px) {
  .images-wrapper { max-width: 100%; }
  .img-bottom { position: relative; bottom: 0; right: 0; margin-top: 1rem; display:none; }
  .play-btn { left: 50%; transform: translateX(-50%); bottom: 0;  display:none; }
}

/* Stats section — make left gradient and right grid stack vertically on medium/smaller screens */
@media (max-width: 992px) {
  .stats-wrapper .row { display: flex; flex-direction: column; }
  .stats-wrapper .gradient-box { border-radius: 22px 22px 0 0; }
  .stats-wrapper .col-lg-7 { padding-top: 1.25rem; }
  .shape-right { display: none; }
}

/* Portfolio cards and fixed heights */
@media (max-width: 768px) {
  .portfolio-card { height: 320px; }
}
@media (max-width: 576px) {
  .portfolio-card { height: auto; }
}

/* Navigation — ensure mobile menu is comfortably tappable */
@media (max-width: 992px) {
  .navbar-collapse .nav-link { padding: 10px 0; font-size: 0.95rem; }
}

/* Reduce oversized icon/button sizes on very small screens */
@media (max-width: 420px) {
  .play-btn { width: 64px; height: 64px; font-size: 22px; }
  .logo { height: 44px; }
}

/* Small utilities */
/* Make images inside cards behave better when container is narrow */
.service-img img, .portfolio-img, .img-top img, .img-bottom img { width: 100%; height: 100%; }

/* Ensure the modal video is responsive */
.modal .ratio { width: 100%; }

/* Accessibility: slightly increase line-height on narrow viewports for readability */
@media (max-width: 480px) {
  body { line-height: 1.5; }
}

/* Final small tweak: prevent horizontal scroll from any element that might overflow */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}