/* Reset */
.cs-page * {
	box-sizing: border-box;
	font-family: "Open Sans", sans-serif;
	font-size:16px;
}
.cs-page h2, .cs-page h3 {
	font-size: 36px;
	line-height:100%;
	font-weight: 700;
	color: #00375d;
	margin: 0 0 20px 0;
	font-family: "Lato", sans-serif;
}
.cs-page h4{
	font-size: 20px;
	line-height:26px;
	color: #000000;
	margin: 20px 0 12px 0;
}
.cs-page p{
	margin:0 0 14px 0;
}
/* Responsive */
@media (max-width: 768px) {
	.cs-page h2, .cs-page h3 {
		font-size: 26px;
	}
	.cs-page h4{
		font-size: 18px;
		line-height:22px;
	}
}
.cs-page a{
	text-decoration:underline;
	
}
.cs-page img{
	max-width:100%;
}
.cs-page button{
	
}
.cs-page .cs-center{
	text-align:center;
}
.cs-page .cs-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding:40px 15px;
}
.cs-page .cs-wrapper-md{
	max-width:820px;
	margin:0 auto;
	padding:inheret 15px;
}
.cs-page .cs-wrapper-sm{
	max-width:620px;
	margin:0 auto;
	padding:inheret 15px;
}

/* Left side image */
.cs-page .cs-img-col {
	flex: 1;
	position: relative;
	height: 420px;
}

.cs-page .cs-img-col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translate3d(0, 0, 1px);
}

/* Right side cs-txt-col-content */
.cs-page .cs-txt-col {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #f7f7f7;
	/* change if needed */
}

.cs-page .cs-txt-col-content {
	max-width: 540px;
	padding: 30px 50px;
}

/* Media query: Desktop */
@media (min-width: 768px) {
	.cs-page .txt-left-img-right .cs-txt-col {
		justify-content: end;
	}

	/* Layout */
	.cs-page .cs-banner {
		display: flex;
		width: 100%;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.cs-page .cs-img-col {
		max-height: 200px;
		overflow: hidden;
	}

	.cs-page .txt-left-img-right {
		display: flex;
		flex-direction: column-reverse;
	}
	/* remove visual desktop line-breaks on mobile */
	.cs-page br{
		display:none;
	}
	.cs-page .cs-banner h2 br{
		display:block;
	}
}

.cs-page .cs-boxes{
	margin:40px 0 0 0;
}

.cs-box{
	margin:0 0 30px 0;
}

.cs-page .cs-boxes img{
	width: 100%;         /* Image stretches to full width of container */
	height: 200px;        /* Fixed height or use aspect-ratio */
	object-fit: cover;    /* Ensures image covers area and crops if needed */
	display: block;
	transform: translate3d(0, 0, 1px);
}
@media (max-width: 768px) {
	.cs-page .cs-boxes img{
		height: 120px; 
	}
}
.cs-page .cs-boxes .cs-box-content {
	background: #f7f7f7;
	padding:25px 30px;
}
/* Desktop */
@media (min-width: 768px) {
	.cs-page .cs-boxes .cs-box-content {
		min-height: 285px;
		display: flex;
		flex-wrap: wrap;
		align-content: space-around;
		padding: 30px 45px;
	}
	.cs-page-fr .cs-boxes .cs-box-content {
		min-height: 300px;
	}
}

.cs-page .cs-boxes .cs-box-content h3 {
	margin: 0 0 16px 0;
}

.cs-page .cs-boxes .cs-box-content a {
	color: #0070C5;
	text-decoration: underline;
}
.cs-page .cs-purple-banner{
	background:#3f2a56;
	color:#fff;
}
.cs-page .cs-purple-banner h3,
.cs-page .cs-purple-banner h4{
	color:#fff;
	margin:0 0 30px 0;
}
.cs-page .cs-purple-banner .cs-wrapper{
	padding-top:60px;
	padding-bottom:60px;
}
.cs-page .cs-btn {
	position: relative;
	padding: 8px 24px;
	font-size: 18px;
	line-height: 20px;
	color: white !important;
	font-weight:bold;
	text-decoration:none !important;
	display:inline-block;
	background: #005b9b;
	border: 3px solid #005b9b;
	border-radius: 999px;
	cursor: pointer;
	overflow: hidden;
	transition: color 0.3s ease;
	z-index: 1;
}
.cs-page .cs-btn.cs-btn-white{
	border: 3px solid white;
	background: transparent;
	padding: 10px 30px;
}
.cs-page .cs-btn:hover{
	color:#fff;
}

.cs-page .cs-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.4s ease;
  z-index: -1;
  border-radius: 999px;
}

.cs-page .cs-btn:hover::before {
  left: 0;
}

.cs-page .pt-60{
	padding-top:60px;
}
.cs-page #programs-tools{
	background:#f7f7f7;
}

@media (min-width: 768px) {
	.cs-page #programs-tools .cs-boxes{
		 display: flex; 
	}
	.cs-page #programs-tools .cs-box-content{
		align-content: center;		
		padding: 30px 30px;
		height:100%;
	}
}

.cs-page #programs-tools .cs-box-content{
	background:linear-gradient(0deg, rgb(0 0 0 / 80%), rgb(0 0 0 / 40%)), url(https://hydroottawa.com/sites/default/files/2025-06/ExpandedEnergy.png) center;
	color:#fff;
}
/* Custom images for each program box */
.cs-page #programs-tools .cs-box-ora{
	background:linear-gradient(0deg, rgb(0 0 0 / 90%), rgb(0 0 0 / 50%)), url(https://static.hydroottawa.com/pages/ora-2025/images/apply-retro-img1.jpg) center;
}
.cs-page #programs-tools .cs-box-dri{
	background:linear-gradient(0deg, rgb(0 0 0 / 90%), rgb(0 0 0 / 50%)), url(https://hydroottawa.com/sites/default/files/2023-06/RetrofitProgram2.jpg) center;
}
.cs-page #programs-tools .cs-box-dbi{
	background:linear-gradient(0deg, rgb(0 0 0 / 90%), rgb(0 0 0 / 50%)), url(https://hydroottawa.com/sites/default/files/2023-09/Ottawa_buildings.jpg) center;
}

.cs-page #programs-tools .cs-box-content h3{
	color:#fff;
}

.cs-page .cs-postal-title{ margin-top:30px; }

.cs-page #five-steps{
	background:#f7f7f7;
}

.cs-page #five-steps .five-steps-diagram{
	margin:40px 0px;
}

/* ========= FORM CSS ========== */
#new-program-inquiry{
display:flex;
justify-items:center;
flex-direction:column;
font-family: "Montserrat", sans-serif;
border: 1px solid #34657f;
border-radius: 0.2rem;
background-color: #fff;
padding:0px;
max-width:720px;
margin:30px auto 0 auto;
}
#new-program-inquiry h3{
text-align:center;
font-family: "Open Sans", sans-serif;
padding: 20px 60px !important;
margin: 0;
font-size: 23.04px;
background-color: #005b9b;
color: #fff;
margin-bottom:20px;
}
#new-program-inquiry ul,
#new-program-inquiry ol{
	margin:5px 0 15px 30px;
}
#form-new-program-inquiry{
text-align: center;
font-family: "Montserrat", sans-serif;
color: #343b3e;
padding-bottom:10px;
}
#form-new-program-inquiry input{
border: 1px solid #bbc7d6;
border-radius: 2px;
color: #343b3e;
}
#form-new-program-inquiry label{
color: #000;
font-size:16px;
margin:0 0 0 10px;
}
.hidden-content{
position:absolute;
visibility: hidden;
height:0px;
}
.visible-content{
position:relative;
visibility: visible;
height:auto;
}
.info-box{
padding: 14px;
border: 0px solid #bbc7d6;
background: #005b9b;
font-size: 16px;
color: #fff;
font-weight: 600;
letter-spacing: 0.333px;
}
.frm-content{
max-width:500px;
margin-top:20px;
padding:10px 0px 20px 0px;
}
.radio_group{
border: 1px solid #bbc7d6;
padding:10px;
border-radius:2px;
max-width:300px;
margin:0px auto 20px auto;
}
.form-btn{
border:none !important;
font-size: 12.96px;
font-weight: 700;
font-family: "Montserrat", sans-serif;
margin-top:10px;
padding:9.72px 16.2px;
border:none;
font-weight:bold;
background:#005b9b;
color:#fff !important;
cursor:pointer;
}
.form-btn:hover{
background:#f7941d;
}
#postal-code{
padding:8px;
font-size:25px;
font-weight:bold;
text-transform: uppercase;
text-align:center;
width:160px;
margin-top:10px;
}
.special-label{
color:#000;
padding:0px;
margin:0px;
margin-bottom:6x;
font-size:20px;
}
.divider-green{
border-top:10px solid #00998b;
width:100%;
margin: 10px auto 30px auto;
}
#content-area{
margin:0px auto;
font-weight: 400;
font-family: "Montserrat", sans-serif;
color: #000;
font-size:14px;
}
#new-program-inquiry a{
color: #005694;
text-decoration: underline;
}
/* Error messages */
.form-group-wrapper{
position:relative;
max-width:300px;
margin:0 auto
}
.form-item--error-message{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom:-33px;
}
.form-item--error-message:after{
content: " ";
display: block;
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f7941d;
}
.form-item--error-message strong {
border: 2px solid #f7941d;
padding: 2px 8px;
background: rgb(255, 255, 255, 0.7);
font-size: 12px;
display: block;
width: max-content;
}
/* ========= END FORM CSS ========== */