/* =====================================================================
   INDEX.PHP – RESPONSIVE / FIT-TO-SCREEN OVERRIDES
   Paste at the VERY END of your main theme CSS (after the existing
   "BANNER MOBILE FIX" block), or load as a separate file after it.
   You can delete the old "BANNER MOBILE FIX" block – this replaces it.
   ===================================================================== */

/* ---------- 0. Global safety: nothing may push the page sideways ---------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}
img,
video,
svg {
  max-width: 100%;
}
img {
  height: auto;
}

/* .space had a stray negative margin that made sections overlap */
.space,
.space-bottom {
  margin-top: 0;
}
:root {
  --section-space: clamp(60px, 8vw, 120px);
  --index-header-h: 90px; /* fixed header height on desktop */
}

/* ---------- 1. HERO (full width, full height of screen) ---------- */
#hero.hero-3 {
  position: relative;
  width: 100%;
  height: auto;
  min-height: calc(100vh - var(--index-header-h));
  min-height: calc(100svh - var(--index-header-h));
  margin-top: var(--index-header-h);
  text-align: center;
  overflow: hidden;
}
#hero .swiper-slide,
#hero .hero-inner.hero-video {
  position: relative;
  width: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hero .hero-video-bg {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: none;
  object-fit: cover;
  z-index: 0;
}
#hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
#hero .container {
  position: relative;
  z-index: 2;
}
#hero .hero-style3 {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(50px, 8vw, 110px) 0;
  text-align: center;
  color: #fff;
}
#hero .hero-heading {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(24px, 4.6vw, 62px);
  line-height: 1.2;
  margin: 0 0 clamp(12px, 2vw, 22px);
  overflow-wrap: anywhere;
}
#hero .hero-desc {
  color: #fff;
  font-size: clamp(14px, 1.6vw, 20px);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto clamp(18px, 3vw, 32px);
}
#hero .btn-group {
  display: flex;
  justify-content: center;
}

/* tablet & phone: header is shorter / not offset the same way */
@media (max-width: 991px) {
  #hero.hero-3 {
    --index-header-h: 80px;
  }
}
@media (max-width: 767px) {
  #hero.hero-3 {
    margin-top: 0;
    min-height: 100vh;
    min-height: 100svh;
  }
  #hero .container {
    padding-top: 90px; /* clears the fixed header */
    padding-bottom: 30px;
  }
  #hero .hero-style3 {
    padding: 20px 0;
  }
  #hero .hero-overlay {
    background: rgba(0, 0, 0, 0.5);
  }
}

/* ---------- 2. ABOUT ---------- */
.about-area .about-container {
  margin: 0 auto;
  padding-bottom: 0;
}
.about-area.space {
  padding-bottom: clamp(50px, 7vw, 100px);
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .about-area .img-box3 {
    margin-left: 0;
  }
}
.about-area .img-box3 img {
  width: 100%;
  height: auto;
}
@media (max-width: 1199px) {
  .about-area .img-box3 {
    max-width: 640px;
    margin: 0 auto 40px;
  }
  .about-area .title-area,
  .about-area .sec-text {
    text-align: left;
  }
}
@media (max-width: 767px) {
  /* absolute overlay image becomes a normal stacked image */
  .about-area .img-box3 .img2 {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 20px;
  }
}
.about-area .about-item {
  max-width: 100%;
  align-items: center;
}
.about-area .about-icon {
  flex: 0 0 auto;
  width: clamp(64px, 8vw, 100px);
  height: auto;
  background: #fff;
}
.about-area .about-item_centent {
  min-width: 0;
}
.about-area .sec-title {
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.25;
}

/* ---------- 3. PRODUCTS SLIDER ---------- */
#service-sec .swiper {
  width: 100%;
  overflow: hidden;
}
#service-sec .swiper-slide {
  height: auto;
  box-sizing: border-box;
}
#service-sec .service-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#service-sec .service-item_img {
  margin-bottom: 0;
  min-width: 0;
}
#service-sec .service-item_img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
#service-sec .service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#service-sec .service-content .th-btn {
  margin-top: auto;
}
@media (max-width: 575px) {
  #service-sec .service-item.style3 .service-content {
    padding: 20px 16px;
  }
}

/* ---------- 4. STOCKIST IMAGES ---------- */
.stockiest-section {
  padding: clamp(40px, 6vw, 70px) 0;
}
.stockiest-section .section-title {
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.stockiest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 25px);
}
.stockiest-grid .service-item {
  margin: 0;
  overflow: hidden;
}
/* theme adds 30px bottom margin / min-width to .global-img under 991px */
.stockiest-grid .global-img {
  margin: 0;
  min-width: 0;
}
.stockiest-grid .global-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 991px) {
  .stockiest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 479px) {
  .stockiest-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 5. QUALITY SLIDER ---------- */
.category-area3 {
  overflow: hidden;
}
.category-area3 .th-container {
  max-width: 100%;
}
.category-area3 .sec-title {
  font-size: clamp(24px, 3.4vw, 40px);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.category-area3 .category-style-3 {
  padding: 0 clamp(12px, 2vw, 24px);
}
.category-area3 .swiper {
  width: 100%;
  overflow: hidden;
}
.category-area3 .swiper-slide {
  height: auto;
  box-sizing: border-box;
}
.category-area3 .category-card {
  height: 100%;
  padding: 0 4px;
}
.category-area3 .category-card .box-img {
  border-radius: 24px;
  overflow: hidden;
}
.category-area3 .category-card .box-img img {
  width: 100%; /* replaces the inline width:375px */
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.category-area3 .category-card .box-title {
  font-size: clamp(17px, 1.6vw, 22px);
}
.category-area3 .category-text {
  display: block;
  padding: 0 6px;
}

/* ---------- 6. INDUSTRIES WE SERVE ---------- */
section.process-area {
  overflow: hidden;
}
.process-area .container {
  max-width: 100%;
}
@media (min-width: 576px) {
  .process-area .container {
    max-width: var(--main-container, 1320px);
  }
}
.process-area .sec-title {
  font-size: clamp(24px, 3.4vw, 40px);
}
.process-area .swiper {
  width: 100%;
  overflow: hidden;
}
.process-area .swiper-slide {
  height: auto;
  box-sizing: border-box;
}
.process-area .process-item {
  height: 100%;
  padding: clamp(16px, 2vw, 24px) clamp(16px, 2.2vw, 30px);
  border-radius: clamp(60px, 10vw, 150px) clamp(60px, 10vw, 150px) clamp(40px, 7vw, 100px) clamp(40px, 7vw, 100px);
}
.process-area .process-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.process-area .process-item .box-title {
  font-size: clamp(17px, 1.6vw, 22px);
}

/* ---------- 7. BLOG ---------- */
/* The later "blog grid" block in your CSS turns EVERY .blog-grid into a
   3-column grid. On index.php .blog-grid is a single card, so reset it. */
.blog-grid.th-ani {
  display: block;
  grid-template-columns: none;
  gap: 0;
  background: var(--white-color, #fff);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
}
.blog-grid.th-ani.style2 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.blog-grid.th-ani .blog-img {
  margin-bottom: 0;
  overflow: hidden;
}
.blog-grid.th-ani .blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-grid.th-ani:not(.style2) .blog-img img {
  aspect-ratio: 16 / 10;
}
.blog-grid.th-ani.style2 .blog-img {
  flex: 0 0 42%;
  min-width: 0;
}
.blog-grid.th-ani .blog-grid_content {
  padding: clamp(18px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}
.blog-grid.th-ani .box-title {
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.4;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}
@media (max-width: 1199px) {
  .blog-grid.th-ani.style2 .blog-img {
    flex-basis: 40%;
  }
}
@media (max-width: 767px) {
  .blog-grid.th-ani.style2 {
    display: block;
  }
  .blog-grid.th-ani.style2 .blog-img img {
    aspect-ratio: 16 / 10;
  }
}
/* the "View All Blogs" button is hidden on <lg in the markup – keep it reachable */
@media (max-width: 991px) {
  .bg-smoke .title-area {
    margin-bottom: 30px;
  }
}

/* ---------- 8. GLOBAL BUTTON / TEXT FIT ON SMALL SCREENS ---------- */
@media (max-width: 575px) {
  .th-btn {
    padding: 14px 24px;
    max-width: 100%;
  }
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .service-3-btn .th-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 360px) {
  #hero .hero-heading {
    font-size: 21px;
  }
}

/* =====================================================================
   FIX ROUND 2 – blank gap under hero + hidden (never-animated) content
   ===================================================================== */

/* 1. Make the hero section the only thing that controls its own height,
      and keep the next section directly under it (no leftover gap). */
#hero.hero-3 {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
#about-sec.about-area {
  margin-top: 0 !important;
  padding-top: clamp(50px, 6vw, 90px) !important;
  padding-bottom: clamp(50px, 6vw, 90px) !important;
  min-height: 0 !important;
  height: auto !important;
}
#about-sec .about-container,
#about-sec .row,
#about-sec .col-xl-7,
#about-sec .col-xl-5 {
  margin-top: 0 !important;
  padding-top: 0;
  height: auto !important;
  min-height: 0 !important;
}
#about-sec .img-box3 {
  margin-top: 0 !important;
}

/* 2. Content that is only revealed by the animation JS (wow / data-ani /
      text-anime / reveal). If that JS errors out, the content stays
      invisible and leaves a blank white gap – force it visible. */
#hero [data-ani],
#hero .btn-group,
.about-area .wow,
.about-area .reveal,
.about-area .text-anime-style-2,
.about-area .text-anime-style-3,
#service-sec .text-anime-style-2,
.category-area3 .text-anime-style-3,
.process-area .wow,
.process-area .text-anime-style-2,
.process-area .text-anime-style-3,
.bg-smoke .wow,
.bg-smoke .text-anime-style-2,
.bg-smoke .text-anime-style-3 {
  visibility: visible !important;
  opacity: 1 !important;
}
.about-area .reveal {
  transform: none !important;
}
.about-area .reveal img {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 3. Hero button must always show */
#hero .btn-group .th-btn {
  display: inline-flex !important;
}

/* =====================================================================
   FIX ROUND 3 – hero inner was only ~130px tall (grey strip) while the
   text sat in the white area below it. Give EVERY hero layer the same
   explicit height instead of relying on "min-height: inherit".
   ===================================================================== */
#hero.hero-3 {
  --hero-min: calc(100vh - 90px);
  --hero-min: calc(100svh - 90px);
}
@media (max-width: 991px) {
  #hero.hero-3 { --hero-min: calc(100vh - 80px); --hero-min: calc(100svh - 80px); }
}
@media (max-width: 767px) {
  #hero.hero-3 { --hero-min: 100vh; --hero-min: 100svh; }
}
#hero.hero-3,
#hero.hero-3 > .swiper-slide,
#hero.hero-3 .hero-inner.hero-video {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--hero-min) !important;
  max-height: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}
#hero.hero-3 .hero-inner.hero-video > .container {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  flex: 0 0 auto;
}
#hero.hero-3 .hero-video-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
  z-index: 0 !important;
}
#hero.hero-3 .hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
#hero.hero-3 .hero-style3 {
  position: relative !important;
  display: block !important;
  z-index: 3 !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
@media (max-width: 767px) {
  #hero.hero-3 .hero-inner.hero-video > .container { padding-top: 90px !important; }
}

/* =====================================================================
   FIX ROUND 4 – hero was pushed ~190px to the right (white strip on the
   left, content cut off on the right). Reset every offset on the hero
   layers and let only the innermost wrapper be a flex box.
   ===================================================================== */
#hero.hero-3 {
  display: block !important;
  left: 0 !important;
  right: auto !important;
  inset-inline: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
#hero.hero-3 > .swiper-slide {
  display: block !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex: none !important;
  transform: none !important;
}
#hero.hero-3 .hero-inner.hero-video {
  display: flex !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#hero.hero-3 .hero-inner.hero-video > .container {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#hero.hero-3 .hero-style3 {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  left: 0 !important;
  transform: none !important;
}
#hero.hero-3 .hero-heading,
#hero.hero-3 .hero-desc {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* =====================================================================
   FIX ROUND 5 – BLOG SECTION
   Images now fill their card completely (no white gaps, no half-height
   pictures); the left card stretches to match the two right cards.
   ===================================================================== */
.bg-smoke .row.gx-24 > [class*="col-"] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bg-smoke .row.gx-24 .blog-grid.th-ani {
  margin: 0 !important;
  width: 100%;
}
.bg-smoke .row.gx-24 > [class*="col-"] > .blog-grid.th-ani:only-child,
.bg-smoke .row.gx-24 > .col-xl-4 > .blog-grid.th-ani {
  flex: 1 1 auto;
}
.bg-smoke .row.gx-24 > .col-xl-8 > .blog-grid.th-ani {
  flex: 1 1 0;
}

/* --- vertical card (left) --- */
.blog-grid.th-ani:not(.style2) {
  display: flex !important;
  flex-direction: column;
}
.blog-grid.th-ani:not(.style2) .blog-img {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  width: 100%;
  margin: 0 !important;
}
.blog-grid.th-ani:not(.style2) .blog-img img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto;
  object-fit: cover;
}
.blog-grid.th-ani:not(.style2) .blog-grid_content {
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: flex-start;
}

/* --- horizontal cards (right) --- */
.blog-grid.th-ani.style2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: 230px;
}
.blog-grid.th-ani.style2 .blog-img {
  position: relative;
  flex: 0 0 40% !important;
  min-width: 0 !important;
  width: 40%;
  margin: 0 !important;
}
.blog-grid.th-ani.style2 .blog-img img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  aspect-ratio: auto;
}
.blog-grid.th-ani.style2 .blog-grid_content {
  flex: 1 1 auto;
  justify-content: center;
}

/* --- tablet / phone: stack everything, normal flowing images --- */
@media (max-width: 767px) {
  .bg-smoke .row.gx-24 > [class*="col-"] {
    gap: 20px;
  }
  .bg-smoke .row.gx-24 > .col-xl-4,
  .bg-smoke .row.gx-24 > .col-xl-8 {
    margin-bottom: 0;
  }
  .blog-grid.th-ani.style2 {
    display: block !important;
    min-height: 0;
  }
  .blog-grid.th-ani .blog-img,
  .blog-grid.th-ani.style2 .blog-img,
  .blog-grid.th-ani:not(.style2) .blog-img {
    position: static;
    flex: none !important;
    width: 100%;
    min-height: 0;
  }
  .blog-grid.th-ani .blog-img img,
  .blog-grid.th-ani.style2 .blog-img img,
  .blog-grid.th-ani:not(.style2) .blog-img img {
    position: static !important;
    inset: auto;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* below xl the columns stack: keep the vertical card as a nice wide card */
  .blog-grid.th-ani:not(.style2) {
    flex-direction: row;
  }
  .blog-grid.th-ani:not(.style2) .blog-img {
    flex: 0 0 40%;
    width: 40%;
  }
  .blog-grid.th-ani:not(.style2) .blog-grid_content {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* columns stack below 1200px: cards must size to their content,
   otherwise flex-basis:0 collapses them to nothing */
@media (max-width: 1199px) {
  .bg-smoke .row.gx-24 > .col-xl-4 > .blog-grid.th-ani,
  .bg-smoke .row.gx-24 > .col-xl-8 > .blog-grid.th-ani {
    flex: 0 0 auto;
  }
  .bg-smoke .row.gx-24 > .col-xl-4 {
    margin-bottom: 24px;
  }
}
@media (max-width: 1199px) {
  .bg-smoke .row.gx-24 .blog-grid.th-ani {
    height: auto !important;
    flex: 0 0 auto !important;
  }
}

/* tablet (768-1199): first card becomes a horizontal card like the others */
@media (min-width: 768px) and (max-width: 1199px) {
  .bg-smoke .row.gx-24 .blog-grid.th-ani:not(.style2) {
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 230px;
  }
  .bg-smoke .row.gx-24 .blog-grid.th-ani:not(.style2) .blog-img {
    flex: 0 0 40% !important;
    width: 40% !important;
    min-height: 0 !important;
  }
  .bg-smoke .row.gx-24 .blog-grid.th-ani:not(.style2) .blog-grid_content {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
}

/* theme's .global-img forces min-width:100% below 992px, which squashed the
   text column of the horizontal cards – cancel it for blog images */
.blog-grid.th-ani .blog-img,
.blog-grid.th-ani .blog-img.global-img {
  min-width: 0 !important;
}
@media (max-width: 767px) {
  .blog-grid.th-ani .blog-img,
  .blog-grid.th-ani .blog-img.global-img {
    min-width: 100% !important;
  }
}

/* image should touch the bottom edge of the card (was 10px short) */
@media (min-width: 768px) {
  .blog-grid.th-ani.style2,
  .bg-smoke .row.gx-24 .blog-grid.th-ani:not(.style2) {
    min-height: 0 !important;
  }
  .blog-grid.th-ani.style2 .blog-img,
  .bg-smoke .row.gx-24 .blog-grid.th-ani:not(.style2) .blog-img {
    min-height: 220px !important;
    align-self: stretch;
  }
}

/* =====================================================================
   FIX ROUND 6 – ABOUT IMAGE COLLAGE
   One big image on the left, two images stacked on the right. Same height
   as the text column, no overlapping white boxes, no empty white bands.
   ===================================================================== */
#about-sec .img-box3 {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: clamp(420px, 44vw, 640px);
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}
#about-sec .img-box3 .img1,
#about-sec .img-box3 .img2,
#about-sec .img-box3 .img3 {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  transform: none !important;
}
#about-sec .img-box3 .img1 { grid-column: 1; grid-row: 1 / 3; }
#about-sec .img-box3 .img2 { grid-column: 2; grid-row: 1; }
#about-sec .img-box3 .img3 { grid-column: 2; grid-row: 2; }
#about-sec .img-box3 .img1 img,
#about-sec .img-box3 .img2 img,
#about-sec .img-box3 .img3 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  border: 0 !important;
  border-radius: 24px;
  display: block;
}
@media (max-width: 1199px) {
  #about-sec .img-box3 {
    max-width: 760px;
    margin: 0 auto 40px !important;
    height: clamp(360px, 60vw, 520px);
  }
}
@media (max-width: 575px) {
  #about-sec .img-box3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 210px 140px;
    height: auto;
    gap: 12px;
  }
  #about-sec .img-box3 .img1 { grid-column: 1 / 3; grid-row: 1; }
  #about-sec .img-box3 .img2 { grid-column: 1; grid-row: 2; }
  #about-sec .img-box3 .img3 { grid-column: 2; grid-row: 2; }
}
/* text column: use the full column width */
#about-sec .col-xl-5 > div { padding-left: 0; }
@media (min-width: 1200px) {
  #about-sec .col-xl-5 > div { padding-left: 12px; }
}
#about-sec .about-item { max-width: 100%; }