@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*
  font-family: "PT Sans", sans-serif;
  font-family: "PT Serif", serif;
*/
:root {
	--red: #BA1229;
	--textColor: #232221;
	--grayBG: #F0F0F0;
	--dkGrayBG: #CCCCCC;	
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}


.mainPageBG {
	background-color:#FFFFFF;
}
.grid {
	max-width:1300px;
	width:100%;
	margin:0 auto;
}
.space-Top { margin-top:40px; }
.space-Bot { margin-bottom:40px;}
.space-TopLg { margin-top:80px; }
.space-BotLg { margin-bottom:80px;}

.video-section {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 700px; /* ✅ max height constraint */
  aspect-ratio: 16 / 9; /* ✅ keeps proportions on resize */
  overflow: hidden;
}

.video-background,
.video-foreground,
.video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none; /* Keep this here for the containers and poster */
}

/* Add a specific rule for the iframe, overriding pointer-events to auto */
.video-foreground iframe {
  /* Remove old position, top, left, width, height, object-fit */
  
  /* Add these new properties for full coverage and centering */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw; /* Make it wider than the viewport */
  height: 56.25vw; /* 16:9 aspect ratio (9 / 16 = 0.5625), based on vw */
  min-width: 100%; /* Ensure it's at least 100% of parent */
  min-height: 100%; /* Ensure it's at least 100% of parent */
  transform: translate(-50%, -50%); /* Center the element */
  
  z-index: 1;
  display: block;
  border: none;
  pointer-events: auto !important; /* Keep this for loading */
}
.video-caption {
  position: absolute;
  z-index: 2;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
  padding: 20px;
}

.video-background {
  position: relative; /* Already exists — just ensure it's here */
  z-index: 1; /* Optional, but helps layering */
}

/* Dark overlay */
.video-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Adjust to desired darkness */
  z-index: 2;
  pointer-events: none; /* So overlay doesn't interfere with clicks */
}

/* Ensure these stay under the overlay */
.video-poster,
.video-foreground {
  z-index: 1;
}

/* Caption stays above overlay */
.video-caption {
  z-index: 3; /* You already had z-index: 2, bumping it to 3 just in case */
}




.vidCaptionSm {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2em;
  margin-bottom: 50px;
  /*text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);*/
}

.vidCaptionLg {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 5em;
  line-height:1em;
  text-transform: uppercase;
  */text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);*/
}
.smCapHeading {
	font-family: "PT Sans", sans-serif;
	font-weight: 500;
	font-style: normal;
	text-transform:uppercase;
	font-size:1.2em;
	color: var(--red);
	letter-spacing:1px;
	
}
.lgCapHeading {
	font-family: "PT Serif", serif;
	font-weight: 400;
	font-style: normal;
	font-size:3em;
	text-transform:uppercase;	
	color: var(--textColor);
	margin: 20px 0;	
	letter-spacing:1px;		
	line-height:1.15em;	
}
.lgCapHeading2 {
	font-family: "PT Serif", serif;
	font-weight: 500;
	font-style: normal;
	font-size:2.8em;
	text-transform:uppercase;	
	color: var(--textColor);
	margin: 20px 0;	
	letter-spacing:1px;		
	line-height: 1.15em;
}
.lgServCapHeading {
	font-family: "PT Serif", serif;
	font-weight: 500;
	font-style: bold;
	font-size:4em;
	text-transform:uppercase;	
	color: #ffffff;
	margin: 20px 0;	
	letter-spacing:2px;		
	line-height: 1.15em;
}
.lgServCapHeading span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.flex-center-align {
  display: flex;
  align-items: center;
}
.row.v-align {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.row.v-align {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* This aligns col-5 and col-7 with each other vertically */
}
.medHeading {
	font-family: "PT Serif", serif;
	font-weight: 400;
	font-style: normal;
	font-size:1.8em;
	color: var(--red);	
	text-transform:capitalize;
	margin: 20px 0;	
	line-height:1.25em;

}
.sectionSummary {
	font-family: "PT Sans", sans-serif;	
	font-weight: 400;
	font-style: normal;
	font-size:1.2em;
	color: var(--textColor);	
	margin: 0;	
	line-height:1.33em;	
	padding-right:40px;
	
}
.sectionIMGright {
	border-top: 4px var(--red) solid;
	width:85%;
	text-align:right;
	display:block;
	margin-right:0;	
	margin-left:auto;
	
}
.sectionIMGleft {
	border-top: 4px var(--red) solid;
	width:85%;
	display:block;
	margin-left:0;	
	margin-right:auto;
}


.iv-btn.btn-primary.btn-ro {
	background-color:var(--red);
	border-color:var(--red);
	margin-top:30px;
}
.iv-btn.btn-primary.btn-ro:hover {
	background-color:var(--textColor);
}
.iv-btn.btn-primary.btn-ro.white {
	background-color:#ffffff;
	color:var(--red);
	border-color:#fffff;	
}
.iv-btn.btn-primary.btn-ro:hover {
	background-color:var(--red);
	color:#ffffff;	
	border-color:var(--red);	
}

.ctaButtonBox .iv-btn.btn-primary.btn-ro {
	background-color:var(--red);
	border-color:var(--red);
	padding:0.5rem 2rem;
	font-size:1.2em;
	height:auto;
}
.ctaButtonBox .iv-btn.btn-primary.btn-ro:hover {
	background-color:var(--textColor);
}



.hero-section {
  position: relative; /* Needed for ::before overlay */
  height: 600px;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 20px;
}
.hero-serv-section {
  position: relative;
  height: 600px;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: flex-end; /* 👈 Pushes content to the bottom */
  justify-content: center;
  text-align: center;
  color: white;
  padding: 20px 20px 40px 20px;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Adjust for desired darkness */
  z-index: 1;
}
.hero-serv-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Adjust for desired darkness */
  z-index: 1;
}

.hero-caption {
  position: relative; /* To appear above the overlay */
  z-index: 2;
  color: white;
  max-width: 1000px;
}

.hero-caption h2,
.hero-caption h5 {
  margin: 0.5em 0;
}

.hero-caption h2 {
  font-family: "PT Serif", serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 4em;
  text-transform: uppercase;
  line-height: 1em;
}

.hero-caption h5 {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: 1.3em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1em;
}

.grayBar {
	background-color:#f0f0f0;
	padding: 60px 0;
}
.detailBar {
	background-color:#ccc;
	padding: 60px 0;
	height: 4px;
	overflow: hidden;
}
.detailBar.collapsed {
  height: 4px;
  padding: 0;
}
.detailBar.expanded {
  height: auto; /* jQuery will override this inline */
}
.ctaBar {
	background-color:#dddddd;
	padding: 60px 0;
}
.dkGrayBar {
	background-color:#cccccc;
	padding: 60px 0;
}
.ctaButtonBox {
	width:100%;
	text-align: center;
	padding-top:25%;
}

/*--------------FOOTER ---------------------*/

.footLogo {
	max-height:75px;
	margin-bottom:20px;
}
.footAdr {
	font-family: "PT Sans", sans-serif;
	font-size:1.1em;
	line-height:1.3em;
	color:var(--textColor);
}
.footAdr strong {
	font-weight:bold;
}
.footPh {
	font-family: "PT Serif", serif;
	font-size:2.5em;
	color:var(--red);
	font-weight:bold;
	text-align:right;
	margin-top:0.5em;	
	margin-bottom:0.5em;
}
.footEM {
	font-family: "PT Sans", sans-serif;
	font-size:1.2em;
	color:var(--textColor);
	text-align:right;
}
.footSocial {
	font-size:3em;
	color:var(--textColor);
	text-align:center;
	margin-top:0.5em;
}
.footEM a {	color:var(--textColor); }
.footEM a:hover {	color:var(--red); }

.footSocial a {	color:var(--textColor); }
.footSocial a:hover {	color:var(--red); }

.footLine {
	width:100%;
	color:#ffffff;
	margin: 25px 0;
	border-style:none;
	border-top-style: solid;
	border-top-width:1px;
}
.footServing {
	font-family: "PT Sans", sans-serif;
	font-size:1em;
	font-weight:normal;
	text-align:center;
	color: var(--textColor);
	margin-bottom:20px;	
	letter-spacing:4px;
	text-transform:uppercase;
}
.footSHead, .footSHeadT {
	font-family: "PT Sans", sans-serif;
	font-size:1em;
	font-weight:bold;
	text-align:left;
	color: var(--textColor);
	margin-bottom:15px;	
}
.footServ, .footServT {
	font-family: "PT Sans", sans-serif;
	font-size:1em;
	font-weight:normal;
	text-align:left;
	color: var(--textColor);
	margin-bottom:10px;	
}
.servBox {
	padding:0 20px 20px 20px;
	border-radius: 7px;
}
.servABox {
	padding:20px;
	border-radius: 7px;
	background:#F6F6F6;
}
/*-end----------FOOTER ---------------------*/


ul.multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
	font-family: "PT Sans", sans-serif;
}
ul.icon-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.icon-checklist li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}
ul.icon-checklist li::before {
  content: "\f14a"; /* fa-square-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 400; /* 400 = regular, 900 = solid */
  position: absolute;
  left: 0;
  top: 0.05em;
  line-height:1em;
  font-size:1em;
  color: #333;
	color: var(--red);  
	vertical-align:middle;
}
.detailsHeader {
	font-family: "PT Sans", sans-serif;
	font-size:1.1em;
	font-weight:bold;
	text-align:center;
	color: var(--red);
	margin-bottom:20px;
	
}
.darkFoot {
	background-color:#232221;
	color:#ffffff;
	padding:10px;
	font-family: "PT Sans", sans-serif;
	font-size:0.9em;	
}
.dkFootRight a ,
.dkFootRight {
	text-align:right;
	color:#ffffff;
}
.dkFootRight a:hover {
	color: var(--red);
}

.portfolioIMGcaption {
	font-family: "PT Sans", sans-serif;	
	font-weight: 400;
	font-style: normal;
	font-size:1.2em;
	color: var(--red);	
	margin: 0;	
	line-height:1.33em;	
	text-align:center;
	
}
.portItem {
  display: inline-block;
}

.portfolioIMG {
  transition: filter 0.3s ease;
  display: block;
  width: 100%;
  height: auto;
  border:1px #ccc solid;
  border-top:4px transparent solid;
}

.portfolioIMG::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.portItem:hover .portfolioIMG {
  filter: brightness(70%);
  border-top:4px var(--red) solid;  
}

.sliderContainerBar {
	width: 100%;
	padding: 20px 60px 0 60px;
	box-sizing: border-box;
	overflow:hidden;
}

.sliderContainerBar .bx-wrapper {
	padding: 0 60px;
}

.bx-wrapper {
	width: 100% !important;
	max-width: none !important;
	position: relative;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

.img-pair {
	display: flex;
	gap: 20px;
}

.img-pair > div {
	flex: 1;
	text-align: center;
}

.img-pair img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.bx-caption {
	font-size: 0.9rem;
	color: #555;
	margin-top: 6px;
	display: none;
}

/* Arrows */
.bx-prev,
.bx-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 30px;
	height: 30px;
	background: none !important;
	border: none;
	text-indent: -9999px;
	overflow: hidden;
	color: var(--textColor);
	font-size: 26px;
	cursor: pointer;
	opacity: 0.9;
	transition: color 0.2s ease, opacity 0.2s ease;
	line-height: 1;
}

.bx-prev:hover,
.bx-next:hover {
	color: var(--red);
	opacity: 1;
}

/* Font Awesome Icons */
.bx-prev::before,
.bx-next::before {
	content: "\f104"; /* default left */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-indent: 0;
	display: inline-block;
	font-size: 26px;
}

.bx-next::before {
	content: "\f105"; /* right chevron */
}

/* Arrow placement */
.bx-prev {
	left: 0;
}

.bx-next {
	right: 0;
}

/* Active dot color */
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #BA1229 !important;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto
 {
    position: relative;
    bottom: -30px;
}

.sliderWrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: auto;
padding: 0 60px; /* make room for outside arrows */  
}

.imageTrack {
  display: flex;
  transition: transform 0.6s ease;
  gap: 15px;
}

.imageTrack img {
  flex: 0 0 auto;
  width: calc((100% - 30px) / 3);
  height: auto;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 900px) {
  .imageTrack img {
    width: calc((100% - 15px) / 2);
  }
}

@media (max-width: 600px) {
  .imageTrack img {
    width: 100%;
  }
}

.navBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #333;
  font-size: 36px;
  z-index: 10;
  cursor: pointer;
  padding: 10px;
  opacity: 0.8;
}

.navBtn.left {
  left: 10px;  /* or use: -45px if placing outside track */
}

.navBtn.right {
  right: 10px;
}

.navBtn:hover {
  color: black;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.imgModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.imgModal.active {
  display: flex;
}

.modalImage {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
}

.closeBtn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

.modalNavBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

.modalNavBtn.prev {
  left: 30px;
}

.modalNavBtn.next {
  right: 30px;
}

.trackWrapper {
  overflow: hidden;
  width: 100%;
}

.responsiveGrid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	padding: 20px;
}

.responsiveGrid img {
	width: 100%;
	aspect-ratio: 4 / 3; /* or 1 / 1 for square, or 3 / 4 for portrait-style blocks */
	object-fit: cover;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
/* Modal */
.imgModal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.85);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.imgModal.active {
	display: flex;
}

.img-overlay-wrapper {
  position: relative;
  display: inline-block;
}

.img-overlay-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.img-overlay-caption {
  position: absolute;
  font-family: "PT Sans", sans-serif;
  font-size:1.1em;
  font-weight:bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1rem;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* subtle contrast shadow */
  pointer-events: none; /* so it doesn't block clicks */
}
.img-overlay-caption::before {
  content: '';
  position: absolute;
  top: -0.5em;
  left: -1em;
  right: -1em;
  bottom: -0.5em;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
  border-radius: 4px;
}

.modalText {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.modalSlider {
  position: relative;
  width: auto;
  height: auto;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modalImage {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

.modalSlider .modalText {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.modalTitle {
  text-align: center;
  margin-top: 30px;
  font-size: 2em;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
  font-family: "PT Sans", sans-serif;
  font-weight: bold;
}

.modalDescription {
  text-align: center;
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 1.1em;
  font-family: "PT Sans", sans-serif;
  font-weight: bold;
}

.modalNavBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  z-index: 10;
  padding: 0;
  opacity: 0.8;
}

.modalNavBtn::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 2.5rem;
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 50px;
}

.modalNavBtn.prev::before {
  content: "\f104"; /* fa-chevron-left */
}

.modalNavBtn.next::before {
  content: "\f105"; /* fa-chevron-right */
}

.modalNavBtn:hover {
  color: var(--red); /* or any hover color you want */
  opacity: 1;
}
.closeBtn {
  position: absolute;
  top: 20px;
  right: 30px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2.2rem;
  color: white;
  z-index: 11;
  padding: 0;
  opacity: 0.85;
}

.closeBtn::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid style */
  content: "\f057"; /* fa-circle-xmark */
  display: inline-block;
  pointer-events: none;
}

.closeBtn:hover {
  color: var(--red);
  opacity: 1;
}

.b4afterHead {

	  font-family: "PT Serif", serif;
	  font-size:2em;
	  text-align:center;
	  text-transform:uppercase;
	  color: var(--red);
	  letter-spacing:1px;
}
.footMember {
	text-align:center;
}
.memLogo {
	margin-top:15px;
	max-height: 70px;
}