:root { /* Tweak this to match your exact blue */ --hitac-blue-header: #20499a; } /* Full-width blue bar */ .hitac-header { background: var(--hitac-blue-header); } /* Inner flex layout */ .hitac-header-inner { max-width: 1100px; margin: 0 auto; padding: 0.5rem 1.5rem; display: flex; align-items: center; } /* Logo */ .hitac-logo-wrap { display: inline-flex; align-items: center; margin-right: 2rem; } .hitac-logo { height: 52px; /* adjust to taste */ width: auto; } /* Navigation links */ .hitac-nav { display: flex; flex: 1; justify-content: space-evenly; /* spreads links across bar */ } .hitac-nav a { color: #ffffff; text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: 0.03em; white-space: nowrap; } .hitac-nav a:hover { text-decoration: underline; } /* === HERO SECTION === */ .hitac-hero { background: #ffffff; } /* top row: video + right image */ .hero-top { display: flex; flex-wrap: nowrap; height: 420px; /* adjust: 380–450px to taste */ } /* Left side: video fills its half */ .hero-video { flex: 2; min-width: 0; /* prevents overflow */ height: 100%; /* <<< FORCE same height as hero-top */ } .video-wrapper { position: relative; width: 100%; height: 100%; /* fill the full 420px height */ padding-top: 0; /* REMOVE the old 56.25% padding */ } .video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Right side: image fills its half */ .hero-side-image { flex: 1; min-width: 0; height: 100%; /* <<< MATCH hero-top height */ } .hero-side-image img { width: 100%; height: 100%; object-fit: cover; /* crop image nicely */ display: block; } /* bottom tiles grid */ .hero-bottom { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 220px; } /* base tile style */ .hero-tile { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-weight: 700; font-size: 1.7rem; color: #fff; padding: 1rem; overflow: hidden; } /* background image layer */ .hero-tile::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } /* color overlay layer */ .hero-tile::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); /* fallback */ mix-blend-mode: multiply; opacity: 0.9; z-index: 1; } /* text on top */ .hero-tile span { position: relative; z-index: 2; line-height: 1.2; } /* individual tiles: set images + overlay colors */ /* End Products – blue */ .tile-end-products::before { background-image: url("assets/home/end-products.jpg"); } .tile-end-products::after { background-color: #00429b; } /* End Users – yellow/orange */ .tile-end-users::before { background-image: url("assets/home/end-users.jpg"); } .tile-end-users::after { background-color: #f2b800; } /* Research & Development – red */ .tile-rnd::before { background-image: url("assets/home/research-dev.jpg"); } .tile-rnd::after { background-color: #c5001a; } /* Production Capabilities – green */ .tile-production::before { background-image: url("assets/home/production.jpg"); } .tile-production::after { background-color: #058a35; } /* responsive tweaks */ @media (max-width: 900px) { .hero-top { flex-direction: column; } } @media (max-width: 720px) { .hero-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .hero-bottom { grid-template-columns: 1fr; } } @media (max-width: 768px) { .hero-top { flex-direction: column; height: auto; /* let it stack naturally on mobile */ } .video-wrapper { height: 240px; /* smaller video on mobile */ } /* === HITAC REINVENTED BAND === */ .hitac-reinvented { background: #ffffff; padding: 3rem 1.5rem; } .reinvented-inner { max-width: 1100px; margin: 0 auto; text-align: center; } /* Red heading */ .reinvented-inner h2 { margin: 0 0 1.5rem; font-size: 2rem; font-weight: 700; letter-spacing: 0.06em; color: #e02424; /* tweak if you want a different red */ } /* Main bullet list */ .reinvented-list { list-style: none; /* we’ll draw our own bullets */ margin: 0; padding: 0; } .reinvented-list li { position: relative; margin: 0.75rem 0; padding: 0 1.5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; color: #20499a; /* same blue as header */ text-transform: uppercase; } /* Blue square bullet on left */ .reinvented-list li::before { content: ""; position: absolute; left: 0; /* pushed to the left side of the band */ top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: #20499a; } /* Make text a bit smaller on small screens */ @media (max-width: 768px) { .reinvented-inner h2 { font-size: 1.6rem; } .reinvented-list li { font-size: 1.2rem; } } .hero-side-image { height: 240px; } } /* === HITAC REINVENTED BAND (MATCHES CURRENT HTML) === */ .hitac-reinvented { background: #ffffff !important; padding: 3rem 1.5rem !important; } .hitac-reinvented .reinvented-inner { max-width: 1100px; margin: 0 auto; text-align: center; } /* Red heading (your plain <h2>) */ .hitac-reinvented h2 { margin: 0 0 1.5rem !important; font-size: 2rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: #e02424 !important; /* red title */ font-family: 'Oswald', Arial, sans-serif !important; } /* Main bullet list */ .hitac-reinvented .reinvented-list { list-style: none !important; /* remove default bullets */ margin: 0 !important; padding: 0 !important; } .hitac-reinvented .reinvented-list li { position: relative; margin: 0.75rem 0 !important; padding: 0 1.5rem !important; font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: #20499a !important; /* same blue as header */ text-transform: uppercase !important; font-family: 'Oswald', Arial, sans-serif !important; } /* Blue square bullet on left edge */ .hitac-reinvented .reinvented-list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: #20499a; } /* Smaller on mobile */ @media (max-width: 768px) { .hitac-reinvented h2 { font-size: 1.6rem !important; } .hitac-reinvented .reinvented-list li { font-size: 1.2rem !important; } } /* === HITAC STORY HERO (FULL-WIDTH IMAGE BAND) === */ .hitac-story-hero { position: relative; min-height: 480px; /* tweak height to taste */ background-image: url("assets/home/story-hero.jpg"); /* your image here */ background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem; color: #ffffff; } /* dark overlay */ .hitac-story-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); /* darken the photo */ } /* inner content sits above overlay */ .story-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; } /* big title */ .story-hero-title { margin: 0 0 1.5rem; font-family: 'Oswald', Arial, sans-serif; font-size: 2.8rem; line-height: 1.1; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* body lines */ .story-hero-text { margin: 0.5rem 0; font-family: 'Oswald', Arial, sans-serif; font-size: 1.6rem; line-height: 1.4; } /* responsive tweaks */ @media (max-width: 992px) { .story-hero-title { font-size: 2.2rem; } .story-hero-text { font-size: 1.3rem; } } @media (max-width: 600px) { .hitac-story-hero { min-height: 380px; padding: 3rem 1rem; } .story-hero-title { font-size: 1.8rem; } .story-hero-text { font-size: 1.1rem; } } /* === HITAC ADHESIVES AND COATINGS === */

/* === HITAC ADHESIVES AND COATINGS === */
.adhesives-coatings {
  background-color: #fff;
  padding: 60px 20px; /* Increased padding around the section */
  text-align: center; /* Center content in the section */
}

.adhesives-coatings .header {
  margin-bottom: 40px; /* Space between the header and cards */
}

.adhesives-coatings h1 {
  font-size: 36px; /* Larger title font size */
  font-weight: bold; /* Bold title */
  color: #20499a; /* Blue color for the title */
  margin-bottom: 20px; /* Space below the title */
}

.adhesives-coatings p {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px; /* Space below the description text */
}

/* Adjusting product cards layout using CSS Grid */
.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates three equal-width columns */
  gap: 30px; /* Space between product cards */
  max-width: 1200px; /* Optional: maximum width for content */
  margin: 0 auto; /* Center the product cards */
}

.product-card {
  background-color: #3a6cb6; /* Lighter blue background for cards */
  color: #fff; /* White text color for the entire card */
  padding: 25px;
  border-radius: 8px; /* Rounded corners for the product cards */
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.product-card h2 {
  font-size: 24px; /* Larger font size for product titles */
  margin-bottom: 15px;
}

.product-card p {
  font-size: 16px;
  margin-bottom: 20px; /* Space below the description */
    color: #fff; /* Ensure the text is white */
}

.read-more {
  color: #fff; /* White color for text inside the button */
  font-size: 14px;
  text-decoration: none;
  padding: 12px 20px; /* Larger padding for the button */
  background-color: #e60000; /* Red background */
  border-radius: 5px;
  display: inline-block;
  transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.read-more:hover {
  background-color: #cc0000; /* Darker red on hover */
}

/* Mobile compatibility */
@media (max-width: 768px) {
  .product-cards {
    grid-template-columns: repeat(2, 1fr); /* For smaller screens, display 2 items per row */
    gap: 20px; /* Smaller gap between the cards on mobile */
  }
}

@media (max-width: 480px) {
  .product-cards {
    grid-template-columns: 1fr; /* For very small screens, display 1 item per row */
    gap: 10px; /* Even smaller gap on very small screens */
  }
}
/* FOOTER BASE */
.site-footer {
  background-color: #1e4595;      /* blue background */
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 20px 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* LEFT SIDE */
.footer-left {
  line-height: 1.4;
}

.footer-company {
  font-weight: bold;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.footer-copy {
  margin-top: 10px;
  font-size: 11px;
}

/* RIGHT SIDE NAV */
.footer-right {
  text-align: right;
  flex: 1;
}

.footer-menu,
.footer-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 8px;
}

.footer-submenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* LINKS */
.footer-menu a,
.footer-submenu a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;       /* big text like screenshot */
  letter-spacing: 0.02em;
}

.footer-submenu a {
  font-size: 22px;       /* slightly larger for the center line */
}

/* Hover effect (optional) */
.footer-menu a:hover,
.footer-submenu a:hover {
  text-decoration: underline;
}

/* SIMPLE RESPONSIVE ADJUSTMENT */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-right {
    text-align: left;
  }

  .footer-menu,
  .footer-submenu {
    justify-content: flex-start;
  }
}


/* ==========================================================================
   SOLUTIONS PAGE
   ========================================================================== */

.solutions-page {
  background-color: #ffffff;
  font-family: 'Oswald', Arial, sans-serif;
  color: #111;
  padding: 40px 0 60px;
}

.solutions-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.solutions-title {
  font-size: 46px;
  font-weight: 400;
  margin: 10px 0 40px;
}

/* ---------------------------------------
   MAIN FLEX LAYOUT
   --------------------------------------- */

.solutions-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* extra vertical spacing between rows */
.solutions-row-2 {
  margin-top: 40px;
}

.solutions-row-3 {
  margin-top: 40px;
}

/* ---------------------------------------
   TEXT COLUMNS
   --------------------------------------- */

.solution-col {
  flex: 1;
  min-width: 0; /* avoid overflow on narrow screens */
}

.solution-name {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 6px;
}

.solution-patent {
  color: #e63323; /* red accent */
  font-size: 16px;
  margin-bottom: 15px;
}

/* bullet lists */
.solution-list {
  list-style: disc;
  padding-left: 22px;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* paragraph style body text (used for RA-23S description) */
.solution-body {
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ---------------------------------------
   IMAGE PANEL (RIGHT COLUMN)
   --------------------------------------- */

.solution-image-wrap {
  flex: 1;
  text-align: center;
  font-family: 'Raleway', Arial, sans-serif;
}

.solution-image-frame {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 15px;
  background: #fdfdfd;
}

.solution-image-frame img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* caption under image */
.solution-image-caption {
  color: #e63323;
  font-size: 20px;
  line-height: 1.4;
}

.solution-image-caption p {
  margin: 4px 0;
}

.caption-heading {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}

.caption-subheading {
  font-size: 20px;
  font-weight: 700;
}

/* ---------------------------------------
   RESPONSIVE
   --------------------------------------- */

@media (max-width: 992px) {
  .solutions-layout {
    flex-direction: column;
  }

  .solution-image-wrap {
    margin-top: 30px;
  }

  .solutions-title {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  .solutions-title {
    font-size: 32px;
  }

  .solution-name {
    font-size: 26px;
  }

  .solution-image-caption {
    font-size: 18px;
  }
}

/* ==========================================================================
   ABOUT PAGE (3-IMAGE LAYOUT)
   ========================================================================== */

.about-page {
  background-color: #ffffff;
  font-family: 'Oswald', Arial, sans-serif;
  color: #111;
  padding: 40px 0 60px;
}

.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.about-us-title {
  font-size: 46px;
  font-weight: 400;
  margin: 10px 0 20px;
}

/* Gallery wrapper */
.about-gallery {
  margin-bottom: 40px;
}

.about-gallery-inner {
  display: flex;
  gap: 30px;
  align-items: stretch;      /* make all cards same height */
}

/* Each photo frame */
.about-photo {
  flex: 1;
  border: 1px solid #d3d3d3; /* thin gray border like screenshot */
  background: #ffffff;
  overflow: hidden;          /* crop image edges cleanly */
  height: 360px;             /* desktop height so all 3 line up */
}

.about-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;         /* fills frame, keeps images aligned */
}

/* Responsive */
@media (max-width: 992px) {
  .about-gallery-inner {
    flex-direction: column;
  }

  .about-photo {
    height: auto;            /* let height grow naturally on smaller screens */
  }

  .about-photo img {
    height: auto;
    object-fit: contain;
  }

  .about-us-title {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  .about-us-title {
    font-size: 32px;
  }
}

/* ==========================================================================
   BROCHURES PAGE
   ========================================================================== */

.brochures-page {
  background-color: #ffffff;
  font-family: 'Oswald', Arial, sans-serif;
  color: #111;
  padding: 40px 0 60px;
}

.brochures-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

/* Title */
.brochures-header-row {
  margin-bottom: 10px;
}

.brochures-title {
  font-size: 46px;
  font-weight: 400;
  margin: 10px 0 20px;
}

/* Centered download link */
.brochures-link-row {
  text-align: center;
  margin-bottom: 30px;
}

.brochures-download {
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 22px;
  text-decoration: none;
  color: #1e4595; /* same blue as header */
}

.brochures-download:hover {
  text-decoration: underline;
}

/* Gallery */
.brochures-gallery {
  margin-bottom: 40px;
}

.brochures-gallery-inner {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* Each photo card */
.brochures-photo {
  flex: 1;
  border: 1px solid #d3d3d3;
  background: #ffffff;
  overflow: hidden;
  height: 360px;            /* fixed height so all align like screenshot */
}

.brochures-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* fill card and keep alignment */
}

/* Responsive */
@media (max-width: 992px) {
  .brochures-gallery-inner {
    flex-direction: column;
  }

  .brochures-photo {
    height: auto;
  }

  .brochures-photo img {
    height: auto;
    object-fit: contain;
  }

  .brochures-title {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  .brochures-title {
    font-size: 32px;
  }

  .brochures-download {
    font-size: 18px;
  }
}

/* ==========================================================================
   TECH DATASHEETS PAGE
   ========================================================================== */

.tech-page {
  background-color: #ffffff;
  font-family: 'Oswald', Arial, sans-serif;
  color: #111;
  padding: 40px 0 60px;
}

.tech-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.tech-title {
  font-size: 46px;
  font-weight: 400;
  margin: 10px 0 30px;
}

/* 3-column grid */
.tech-grid {
  display: flex;
  gap: 60px;
}

.tech-col {
  flex: 1;
}

/* links */
.tech-link {
  display: block;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 18px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #1e4595; /* blue like your other links */
}

.tech-link:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 992px) {
  .tech-grid {
    flex-direction: column;
    gap: 20px;
  }

  .tech-title {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  .tech-title {
    font-size: 32px;
  }

  .tech-link {
    font-size: 16px;
  }
}

/* ==========================================================================
   END USERS PAGE (3-IMAGE LAYOUT)
   ========================================================================== */

.endusers-page {
  background-color: #ffffff;
  font-family: 'Oswald', Arial, sans-serif;
  color: #111;
  padding: 40px 0 60px;
}

.endusers-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.endusers-title {
  font-size: 46px;
  font-weight: 400;
  margin: 10px 0 20px;
}

/* Gallery wrapper */
.endusers-gallery {
  margin-bottom: 40px;
}

.endusers-gallery-inner {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* Each photo frame */
.endusers-photo {
  flex: 1;
  border: 1px solid #d3d3d3;
  background: #ffffff;
  overflow: hidden;
  height: 360px;          /* keeps all 3 aligned like the screenshot */
}

.endusers-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 992px) {
  .endusers-gallery-inner {
    flex-direction: column;
  }

  .endusers-photo {
    height: auto;
  }

  .endusers-photo img {
    height: auto;
    object-fit: contain;
  }

  .endusers-title {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  .endusers-title {
    font-size: 32px;
  }
}

/* ==========================================================================
   END PRODUCTS PAGE (3-IMAGE LAYOUT)
   ========================================================================== */

.endproducts-page {
  background-color: #ffffff;
  font-family: 'Oswald', Arial, sans-serif;
  color: #111;
  padding: 40px 0 60px;
}

.endproducts-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.endproducts-title {
  font-size: 46px;
  font-weight: 400;
  margin: 10px 0 20px;
}

/* Gallery wrapper */
.endproducts-gallery {
  margin-bottom: 40px;
}

.endproducts-gallery-inner {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* Each photo frame */
.endproducts-photo {
  flex: 1;
  border: 1px solid #d3d3d3;
  background: #ffffff;
  overflow: hidden;
  height: 360px;          /* keeps all 3 aligned like your screenshot */
}

.endproducts-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 992px) {
  .endproducts-gallery-inner {
    flex-direction: column;
  }

  .endproducts-photo {
    height: auto;
  }

  .endproducts-photo img {
    height: auto;
    object-fit: contain;
  }

  .endproducts-title {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  .endproducts-title {
    font-size: 32px;
  }
}


/* ==========================================================================
   RESEARCH & DEVELOPMENT PAGE (3-IMAGE LAYOUT)
   ========================================================================== */

.rnd-page {
  background-color: #ffffff;
  font-family: 'Oswald', Arial, sans-serif;
  color: #111;
  padding: 40px 0 60px;
}

.rnd-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.rnd-title {
  font-size: 46px;
  font-weight: 400;
  margin: 10px 0 20px;
}

/* Gallery wrapper */
.rnd-gallery {
  margin-bottom: 40px;
}

.rnd-gallery-inner {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* Each photo frame */
.rnd-photo {
  flex: 1;
  border: 1px solid #d3d3d3;
  background: #ffffff;
  overflow: hidden;
  height: 360px;          /* aligns all three like your screenshot */
}

.rnd-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 992px) {
  .rnd-gallery-inner {
    flex-direction: column;
  }

  .rnd-photo {
    height: auto;
  }

  .rnd-photo img {
    height: auto;
    object-fit: contain;
  }

  .rnd-title {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  .rnd-title {
    font-size: 32px;
  }
}


/* ==========================================================================
   PRODUCTION CAPABILITIES PAGE (3-IMAGE LAYOUT)
   ========================================================================== */

.prodcap-page {
  background-color: #ffffff;
  font-family: 'Oswald', Arial, sans-serif;
  color: #111;
  padding: 40px 0 60px;
}

.prodcap-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.prodcap-title {
  font-size: 46px;
  font-weight: 400;
  margin: 10px 0 20px;
}

/* Gallery wrapper */
.prodcap-gallery {
  margin-bottom: 40px;
}

.prodcap-gallery-inner {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* Each photo frame */
.prodcap-photo {
  flex: 1;
  border: 1px solid #d3d3d3;
  background: #ffffff;
  overflow: hidden;
  height: 360px;          /* keeps all three aligned like your screenshot */
}

.prodcap-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 992px) {
  .prodcap-gallery-inner {
    flex-direction: column;
  }

  .prodcap-photo {
    height: auto;
  }

  .prodcap-photo img {
    height: auto;
    object-fit: contain;
  }

  .prodcap-title {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  .prodcap-title {
    font-size: 32px;
  }
}