/* ===== Certified page — short, clean image tiles ===== */

/* 0) Safety / inline killers */
img { max-width:100%; height:auto; display:block; }
.ps-gallery-item-image.bg-image{ height:auto !important; max-height:none !important; }

/* 1) Hero: keep it reasonable */
#intro .cc-item.bg-image{
  background-size:cover; background-position:center;
}
@media (min-width:768px){
  #intro .cc-item{ min-height:50vh; display:flex; align-items:center; }
}
@media (max-width:767px){
  #intro .owl-carousel, #intro .owl-stage-outer, #intro .owl-stage,
  #intro .owl-item, #intro .cc-item{ height:auto !important; min-height:0 !important; }
  #intro .cc-item.bg-image{ position:relative; padding-top:56.25%; background-size:contain; }
}

/* 2) Isotope: remove any fixed heights */
.isotope .isotope-item,
.isotope .iso-height-1,
.isotope .iso-height-2{
  height:auto !important; min-height:0 !important; overflow:visible !important;
}
.ps-gallery-item{ display:block; }

/* 3) Make ALL gallery tiles on this page shorter.
      Base = 45% (wide banner look). Tall = 90% if you ever use iso-height-2. */
[id^="portfolio-single-info"] .ps-gallery-item-image.bg-image{
  position:relative; width:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;        /* use contain on phones if you prefer; see media query below */
  background-color:#fff;
}

/* ratio builder */
[id^="portfolio-single-info"] .ps-gallery-item-image.bg-image::before{
  content:""; display:block;
}

/* Base (iso-height-1) – short banners everywhere on this page */
#portfolio-single-info4  .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before,
#portfolio-single-info3  .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before,
#portfolio-single-info2  .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before{
  padding-top:45% !important;    /* shorter than 16:9 */
}

/* Tall option (if used) = exactly 2× base */
#portfolio-single-info4  .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before,
#portfolio-single-info3  .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before,
#portfolio-single-info2  .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before{
  padding-top:90% !important;
}

/* 4) Gutters – tighten a touch so the rows feel compact */
#portfolio-single-info4 .isotope.gutter-1 .isotope-item,
#portfolio-single-info3 .isotope.gutter-1 .isotope-item,
#portfolio-single-info2 .isotope.gutter-1 .isotope-item{
  padding:6px !important; box-sizing:border-box !important;
}
#portfolio-single-info4 .isotope-items-wrap,
#portfolio-single-info3 .isotope-items-wrap,
#portfolio-single-info2 .isotope-items-wrap{
  margin:-6px auto !important;
}

/* 5) Kill inline “height: 25%” / misc inline styles from markup */
#portfolio-single-info4 .ps-gallery-item-image[style*="height"]{ height:auto !important; }

/* 6) Two-up section (portfolio-single-info2): ensure equal columns if needed */
#portfolio-single-info2 .isotope.col-2 .grid-sizer,
#portfolio-single-info2 .isotope.col-2 .isotope-item{
  width:50% !important;
}

/* 7) Phones: avoid cropping in tight spaces */
@media (max-width:767px){
  [id^="portfolio-single-info"] .ps-gallery-item-image.bg-image{
    background-size:contain !important;
  }
}
/* ===== Header Logo ===== */
#logo img {
  width: 200px !important;   /* base size */
  height: auto !important;
  max-width: none !important;
  display: block;
}

@media (max-width: 480px) {
  #logo img { width: 150px !important; }
}
@media (min-width: 1200px) {
  #logo img { width: 220px !important; }
}

/* ===== Footer Logo (center inside pill) ===== */
.footer-logo {
  text-align: center;       /* center the <a> wrapper */
}

.footer-logo img {
  width: 220px !important;  /* adjust size as needed */
  height: auto !important;
  max-width: 100% !important;
  display: inline-block;    /* lets text-align:center work */
  margin: 0 auto;           /* fallback */
}
/* ===== Global blue rule between sections ===== */

/* make every section a positioning context */
#content-container section { position: relative; }

/* draw a centered, thin blue gradient line at the top of each section,
   skipping the hero, the final next/prev nav, and any .no-divider you add */
#content-container section:not(#intro):not(#portfolio-single-nav):not(.no-divider)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 1100px;                 /* keeps the rule a nice readable width */
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(29,79,156,.35) 15%,          /* #1D4F9C at 35% opacity */
    rgba(29,79,156,.35) 85%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* optional: a touch of breathing room above each rule if needed */
#content-container section:not(#intro):not(#portfolio-single-nav):not(.no-divider) {
  padding-top: 50px;                  /* adjust to taste */
}

/* if any section already has its own top padding, reduce duplication on phones */
@media (max-width: 767px){
  #content-container section:not(#intro):not(#portfolio-single-nav):not(.no-divider) {
    padding-top: 36px;
  }
}