/* ================================================
   Bessium – Mobile & Responsive Fixes
   Breakpoints: 991px (tablet/nav), 767px (tablet), 480px (phone)
   ================================================ */

/* ── Banner / Hero ─────────────────────────────── */

/* About page video banner – desktop, full video no crop */
.homeslider-video-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 7;
}
.homeslider-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Swiper-based banners – full image no crop on desktop */
.homeslider .swiper-slide img,
.homeslider .swiper-slide video {
  height: auto !important;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* Consistent mobile banner height across ALL pages */
@media (max-width: 991px) {
  .homeslider-video-wrap {
    aspect-ratio: unset !important;
    height: 280px !important;
  }
  .homeslider .swiper-slide img,
  .homeslider .swiper-slide video {
    height: 280px !important;
    aspect-ratio: unset !important;
    object-fit: cover;
  }
}
@media (max-width: 480px) {
  .homeslider-video-wrap {
    height: 220px !important;
  }
  .homeslider .swiper-slide img,
  .homeslider .swiper-slide video {
    height: 220px !important;
  }
}

/* Regular swiper banner images already have height:87vh desktop, 450px mobile in style.min.css */
/* Caption heading inside banner – 60px is too large on mobile */
.homeslider .caption h1 {
  font-size: 60px;
}
@media (max-width: 991px) {
  .homeslider .caption h1 {
    font-size: 32px !important;
    line-height: 1.2;
  }
  .headingbg span {
    font-size: 22px !important;
    padding: 4px 10px !important;
  }
}
@media (max-width: 480px) {
  .homeslider .caption h1 {
    font-size: 26px !important;
  }
}

/* ── Large font-size utilities ─────────────────── */
@media (max-width: 991px) {
  .fs54 { font-size: 32px !important; }
  .fs48 { font-size: 28px !important; }
}

/* ── Product listing cards ─────────────────────── */
/* 540px product card images are too tall on mobile */
@media (max-width: 991px) {
  .product-listing .product-card figure img,
  .product-listing .product-card-small figure img {
    height: 280px !important;
  }
}
@media (max-width: 480px) {
  .product-listing .product-card figure img,
  .product-listing .product-card-small figure img {
    height: 220px !important;
  }
}

/* ── About page – Our Story section ───────────────*/
/* hero-img is a full-width hero below the story text */
@media (max-width: 991px) {
  .our-story .hero-img img {
    height: 250px;
    object-fit: cover;
  }
  .our-story-img img {
    height: 220px;
    object-fit: cover;
  }
}

/* ── Contact form LHS ──────────────────────────── */
@media (max-width: 991px) {
  .contact-form .cf-lhs {
    padding: 2rem 1.2rem;
    border-radius: 20px 20px 0 0;
  }
  .contact-form .contactform {
    padding: 2rem 1.2rem;
  }
}

/* subscription fix moved to team/mobile section below */

/* ── Footer ────────────────────────────────────── */
@media (max-width: 991px) {
  footer .row > [class*="col-"] {
    margin-bottom: 1.5rem;
  }
  footer .copyright ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  footer .pages-link.flex-column {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
}

/* ── General images ────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Whoweare / intro sections ─────────────────── */
@media (max-width: 991px) {
  .whoweare {
    padding: 3rem 0;
  }
  .whoweare figure {
    margin-bottom: 1rem;
  }
}

/* ── About values ──────────────────────────────── */
@media (max-width: 767px) {
  .about-values-header h2 {
    font-size: 22px;
  }
}

/* ── Mission Vision ────────────────────────────── */
@media (max-width: 991px) {
  .mission-vision-desc {
    padding: 1.5rem 1rem;
  }
}

/* ── Product detail card image ─────────────────── */
@media (max-width: 991px) {
  .product-intro .product-detail-card img {
    height: auto !important;
    width: 100% !important;
    max-width: 280px;
    display: block;
    margin: 0 auto;
  }
}

/* ── Product benefits inside container ─────────── */
@media (max-width: 480px) {
  .product-benefits .inside-container {
    padding: 1rem;
  }
}

/* ── Keyfeatures section – remove border on mobile ─*/
@media (max-width: 767px) {
  .keyfeatures-section .row [class*="col"]:not(:last-child) {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(63,146,97,.4);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}

/* ── Team cards – ensure 2 cols on small phones ─── */
@media (max-width: 480px) {
  .team .row.row-cols-1 {
    --bs-gutter-x: 0.75rem;
  }
  .team .team-card figure figcaption h4 {
    font-size: 14px;
  }
}

/* ── Team card member names – bigger on mobile ──── */
@media (max-width: 991px) {
  .team-card figure figcaption h4 {
    font-size: 16px !important;
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .team-card figure figcaption h4 {
    font-size: 15px !important;
  }
}

/* ── Subscription form – mobile layout ──────────── */
@media (max-width: 991px) {
  .subscription .input-group {
    flex-wrap: wrap;
    gap: 0;
  }
  .subscription .input-group .form-control {
    flex: 1 1 100%;
    width: 100%;
    border-right: 1px solid rgba(175,174,164,.7) !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0.75rem !important;
  }
  .subscription .input-group .btn.fill {
    flex: 1 1 100%;
    width: 100%;
    border-radius: 0 !important;
  }
  .subscription #formMessage {
    position: static !important;
    margin-top: 0.5rem;
  }
}
/* ── Prevent horizontal scroll ─────────────────── */
html, body {
  overflow-x: hidden;
}
.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ── Video section on homepage ─────────────────── */
@media (max-width: 991px) {
  .videosection video {
    margin-top: 0 !important;
  }
}

/* ── Copyright / social on small screens ──────── */
@media (max-width: 480px) {
  footer .copyright ul {
    gap: 0.5rem;
  }
  footer .socialicons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ── Our services image ────────────────────────── */
@media (max-width: 991px) {
  .our-services-img img {
    height: 220px;
    object-fit: cover;
  }
}

/* ── Product banner productbanner-img ─────────── */
@media (max-width: 991px) {
  .productbanner .productbanner-img {
    position: static !important;
    max-width: 100% !important;
    margin-top: 1.5rem;
  }
  .productbanner {
    height: auto !important;
    margin-bottom: 2rem !important;
    padding: 3rem 0;
  }
}

/* ── Section3d video ───────────────────────────── */
@media (max-width: 480px) {
  .section3d video {
    height: 260px !important;
  }
}

/* ── Application area ──────────────────────────── */
@media (max-width: 480px) {
  .application-area {
    padding: 3rem 0;
  }
}

/* ── Nav overlay z-index fix – sits above banner caption (z-index:999) ── */
@media (max-width: 991px) {
  .navbar-menu nav.active {
    z-index: 1000 !important;
  }
  /* Hide the banner caption when mobile nav is open so it doesn't bleed through */
  body.nav-open .homeslider .caption,
  body.nav-open .homeslider-video-wrap .caption {
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* ── Navbar logo size ──────────────────────────── */
@media (max-width: 480px) {
  .navbar .navbar-logo img {
    width: 140px !important;
  }
}

/* ── Advisory Committee heading – white text on mobile (green bg) ── */
@media (max-width: 991px) {
  .advisory-heading span {
    -webkit-text-fill-color: #fff !important;
    background-image: none !important;
  }
  .advisory-heading span::after {
    background-image: none !important;
    background-color: rgba(255,255,255,0.5);
  }
}