/* styles.css *//* CSS Document */

:root{
  --green:#1f7a4a;
  --dark-green:#0f4f2e;
  --muted:#6b6b6b;
  --max-width:1100px;
}

*{box-sizing:border-box;}

.page {
    max-width: var(--max-width);
    margin: 0 auto;
    /*padding: 0 24px;*/
}

.page-bottom{
  max-width: 95%;
  margin-top: -13px;
  padding:24px;
}

/* =========================
   Top Safety Header
========================= */
.safety-bar{
  display:flex;
  align-items:center;
  gap:12px;
  /* background: linear-gradient(90deg,#f4df82 0%, #f9efc3 60%); */
  border-radius:8px;
  padding:10px 14px;
  width: 1024px;
  /* text-align: center; */
}

.safety-icon{
  width:44px;
  height:44px;
  border-radius:6px;
  background:#ffd966;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#896300;
}

.safety-title{
  font-size:20px;
  font-weight:700;
  color:#34602b;
}

/* =========================
   Title Section
========================= */
header.main{
  margin:18px 0;
  width: 85%;
  margin: 25px auto 0;
}

header.main h1{
  margin:0 0 8px;
  font-size: 32px;
  color: #1e4411;
  border-bottom: 2px solid #c5c5c5;
  font-family: roboto, sans-serif;
}

header.main p{
  margin:0;
  max-width:900px;
  color:#333;
}

.leftSubpage {
    width: 100%; 
}

/* =========================
   Services Section
========================= */
.services{
  margin-top:30px;
  margin: 0 30px;
  width: 95%;
}

.services h2{
    color:#1a5a2e !important;
    font-size:20px;
    background-color: transparent;
    padding: 0;
    border-bottom: none;
    margin-top: 0px !important;
    font-family: Roboto, Arial, sans-serif !important;
}

.services ul {
  /*margin-left:20px;*/
  color: #16320f;
}

/* styles.css */ /* CSS Document */ :root {
  --banner-width: 960px;
  --banner-height: 150px;
  --accent-green: #2e7d32;
  --accent-green-dark: #255e27;
  --text-dark: #1f2f23;
  --white: #ffffff;
}
body {
  margin: 24px 0;
  display: flex;
  justify-content: center;
  background: #f2f2f2;
  font-family: "Roboto", Arial, sans-serif;
}
/* ===== Banner Container ===== */
.banner {
  width: var(--banner-width);
  height: var(--banner-height);
  background: url('/sr/dohs/_catalogs/masterpage/dohs_template/images/sectionBg.jpg') center/cover no-repeat;
  position: relative;
  box-sizing: border-box;
  min-height: 230px;
  max-width: 960px;
}

.banner-inner {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  height: 100%;
  padding: 25px 30px 20px 50px;
  box-sizing: border-box;
}

.subpageBanner {
	margin-top: 15px;
    margin-bottom: 15px;
}
/* ===== LEFT SIDE ===== */
.left {
  width: 52%;
  margin: 0px 0px 0px 0px;
  padding: 0px 30px 0px 0px;
  vertical-align: top;
}
.title {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0;
    color: #16321a !important;
    border-bottom: 2px solid #c6c3a9;
    padding-bottom: 5px;
    font-family: "Roboto", Arial, sans-serif !important;
}
.desc {
  font-size: 15px;
  line-height: 1.5;
  color: #000;
  margin: 12px 0 0 0;
  font-family: "Roboto", Arial, sans-serif;
}
/* ===== RIGHT SIDE (STACKED COLUMN) ===== */
.right {
  width: 48%;
  display: flex;
  border-left: 1px solid #94938b;
  padding: 0px 0px 0px 30px;
  flex-direction: column; /* STACK VERTICALLY */
  align-items: flex-start; /* Align to right edge */
  gap: 8px; /* Space between logo + buttons */
  margin-left: 0px;
}
.logo img {
  height: 62px;
  width: auto;
  margin-bottom: -5PX;
}
/* ===== GREEN BUTTON ===== */
.btn-green {
  display: inline-block;
  background: linear-gradient(to bottom, var(--accent-green), var(--accent-green-dark));
  color: var(--white);
  padding: 10px 8px 10PX;
  border-radius: 8px;
    text-decoration: none !important;
    text-align: center;
    color: #fff !important;  
    min-width: 195px;
    max-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
  transition: all 0.25s ease;
}
.banner .btn-green:hover {
	text-decoration: none !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  filter: brightness(1.05);
  color: #fefce6;
}
.btn-green:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.btn-green .line1 {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1em;
  font-family: "Roboto", Arial, sans-serif;
}
.btn-green .line2 {
  display: block;
  font-size: 11px;
  margin-top: 3px;
  font-family: "Roboto", Arial, sans-serif;
}
/* ===== WHITE BUTTON ===== */
.btn-white {
  display: inline-block;
  background: #ffffff;
  color: #233022 !important;
  padding: 5px 16px 3px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.15);
  min-width: 195px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease;
}
.banner .btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.22);
  background: #f4f1db;
  text-decoration: none !important;
}
.btn-white:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}
/* ===== Responsive ===== */

@media (max-width: 1023px) {	
  .logo {
		width: 162px;
        margin-bottom: 4px;
	}
}

@media (max-width: 980px) {
  .banner {
    width: 100%;
    max-width: 960px;
  }
}

@media (max-width: 767px) {
  .left, .right {
      width: 100%; 
  }
  
  .banner {
    height: auto;
  }
  .banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .right {
    align-items: flex-start;
    padding-left: 0;
    border: 0px;
  }
}

@media (max-width: 420px) {
	.title {
	    padding-bottom: 13px;
	    line-height: 1.1em;
	}
}