/* ==========================================================================
   CREWNITED BY AARTI — LAYOUT & IMAGE FIXES
   Overrides the Orixo template defaults that mis-align content and distort
   images when used with portrait/landscape Crewnited media in stretched
   grid columns (percentage-height chains resolve to viewport height).
   Load AFTER main.css.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. VIDEO / HERO BANNERS — fix stretched full-viewport images
   (template sets  img { width:100%; height:100% }  with no fixed parent
   height on desktop -> image expands to viewport height)
   ------------------------------------------------------------------------- */
.about-wrapper-2 .about-video-banner,
.about-video-banner-about-page,
.video-banner,
.faq-image-1 {
  height: 620px;
}
.about-wrapper-2 .about-video-banner img,
.about-video-banner-about-page img,
.video-banner img,
.faq-image-1 img {
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* -------------------------------------------------------------------------
   2. ABOUT PAGE IMAGE (home) — image inside a col that stretches to match
   the text column (660px tall text col) -> portrait-stretch fix
   ------------------------------------------------------------------------- */
.about-wrapper .about-image img {
  width: 100%;
  height: auto !important;
  max-height: 620px;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   3. TEAM / CHOOSE CARDS (about page) — template expects TWO <img> children
   for a hover swap; our content supplies ONE, so the single image inherits
   .team-image-items-5 img:first-child { position:absolute; transform: scaleX(2);
   opacity:0; blur } -> make the lone image render statically.
   ------------------------------------------------------------------------- */
.team-image-items-5 {
  height: 520px;
}
.team-image-items-5 img,
.team-image-items-5 img:first-child {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.team-image-items-5 .team-content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.team-image-items-5:hover img:nth-child(2) {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* -------------------------------------------------------------------------
   4. PROJECT CARDS (home) — .project-box-items .thumb img height:100%
   stretches to the taller sibling column -> contain with object-fit
   ------------------------------------------------------------------------- */
.project-box-items .thumb {
  height: auto;
  min-height: 260px;
}
.project-box-items .thumb img,
.project-box-items-5 .thumb img,
.project-box-items-5 .thumb img:first-child {
  width: 100% !important;
  height: 380px !important;
  object-fit: cover !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  display: block;
}

/* -------------------------------------------------------------------------
   5. SERVICE THUMBS (service page) — same single-image hover-swap issue;
   .service-thumb has a fixed 626px height but the lone child inherits the
   :first-child absolute/blur/opacity rules.
   ------------------------------------------------------------------------- */
.why-choose-us-wrapper-5 .thumb {
  height: 420px;
}
.why-choose-us-wrapper-5 .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.service-box-items-2 .service-thumb img,
.service-box-items-2 .service-thumb img:first-child {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* -------------------------------------------------------------------------
   6. BRAND MARCQS / LOGOS — client SVGs have wildly different intrinsic
   sizes (amazon 603px, pizza-hut 1000px); constrain inside the fixed boxes.
   ------------------------------------------------------------------------- */
.brand-box-1 .brand-img-1 img {
  max-width: 140px !important;
  max-height: 70px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.marquee .marquee-group .icon-box img,
.marquee-group .span img {
  max-width: 150px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* -------------------------------------------------------------------------
   6b. CONTACT CARDS (contact page) — .contact-image img height:100% with
   auto parent -> stretched to match the tall text card. Give fixed height.
   ------------------------------------------------------------------------- */
.contact-us-card-item .contact-image img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block;
}

/* -------------------------------------------------------------------------
   6c. 404 PAGE image — natural 1023x380 landscape stretched to portrait
   ------------------------------------------------------------------------- */
.error-items .error-image img {
  width: auto !important;
  max-width: 100% !important;
  max-height: 340px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   7. GENERIC SAFETY — never let any content image blow past 100%
   ------------------------------------------------------------------------- */
.section-padding img,
.about-content img,
.team-content img,
.choose-us-content img {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   8. NAV / HEADER alignment guards
   ------------------------------------------------------------------------- */
.header-main {
  width: 100%;
}

.header-main .navbar-brand {
  display: flex;
  align-items: center;
}

.header-main .navbar-brand img {
  height: 42px;
  width: auto;
  object-fit: contain;
}

/* -------------------------------------------------------------------------
   9. Mobile refinements for the above fixed heights
   ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .about-wrapper-2 .about-video-banner,
  .about-video-banner-about-page,
  .video-banner,
  .faq-image-1 {
    height: 480px;
  }
  .about-wrapper .about-image img {
    max-height: 520px;
  }
  .team-image-items-5 {
    height: 460px;
  }
}
@media (max-width: 767px) {
  .about-wrapper-2 .about-video-banner,
  .about-video-banner-about-page,
  .video-banner,
  .faq-image-1 {
    height: 340px;
  }
  .project-box-items .thumb img,
  .project-box-items-5 .thumb img {
    height: 300px !important;
  }
  .team-image-items-5 {
    height: 380px;
  }
  .brand-box-1 .brand-img-1 img {
    max-width: 110px !important;
    max-height: 55px !important;
  }
}