@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

H1
{
	color:#000;
	font-family: "Nunito", sans-serif;
	font-weight:bold;
	font-size:26px;
}

H2
{
	color:#86e1ff;
	font-family: "Nunito", sans-serif;
	font-weight:bold;
	font-size:20px;
	margin-bottom:3px;
}

H3
{
	color:#000;
	font-family: "Nunito", sans-serif;
	font-weight:bold;
	font-size:26px;
}

p
{
	color:#000;
	font-family: "Nunito", sans-serif;
	font-weight:normal;
	font-size:18px;
}

li
{
	font-family: "Nunito", sans-serif;
	font-weight:normal;
	font-size:18px;
}

a:link
{
	color:#86e1ff;
	text-decoration:none;
}

a:visited
{
	color:#86e1ff;
	text-decoration:none;
}

a:hover
{
	color:#86e1ff;
}

ul
{
	margin:0px;
	padding-left:19px;
}

body
{
	padding:0px;
	margin:0px;
}

img
{
	max-width:100%;
}

#header
{
	height:86px;
	width:100%;
	float:left;
	display:inline;
}

#logo
{
	width:283px;
	height:34px;
	float:left;
	display:inline;
	margin-top:4px;
	margin-left:140px;
}

#hero
{
	width:100%;
	height:440px;
	float:left;
	display:inline;
	background-image:url("images/hero-gradient.jpg");
	background-size:1px 440px;
	background-repeat:repeat-x;
}

#hero2
{
	width:100%;
	height:440px;
	float:left;
	display:inline;
	background-image:url("images/Hero.jpg");
	background-size:1200px 440px;
	background-repeat:no-repeat;
	background-position:top right;
}


#hero2DH
{
	width:100%;
	height:440px;
	float:left;
	display:inline;
	background-image:url("images/HeroDH.jpg");
	background-size:1200px 440px;
	background-repeat:no-repeat;
	background-position:top right;
}

#herotitle
{
	width:800px;
	padding-right: calc(100% - 940px);
	color:#FFF;
	font-family: "Nunito", sans-serif;
	font-size:44px;
	margin-left:140px;
	margin-top:83px;
	float:left;
	display:inline;
}

#herosubtitle
{
	width:700px;
	padding-right: calc(100% - 840px);
	color:#FFF;
	font-family: "Nunito", sans-serif;
	font-size:32px;
	margin-left:140px;
	margin-top:5px;
	float:left;
	display:inline;
}

.highlighted
{
	color:#86e1ff;
}

#getstarted
{
	margin-top:25px;
	padding-right: calc(100% - 421px);
	margin-left:140px;
	width:281px;
	height:52px;
	float:left;
	display:inline;
}

#schedulecall
{
	width:125px;
	height:42px;
	margin-right:30px;
	margin-top:22px;
	float: right;
	display:inline;
}

#schedulecallDH
{
	width:125px;
	height:42px;
	margin-right:30px;
	margin-top:18px;
	float: right;
	display:inline;
}

#TopLeftPane
{
	width:18%;
	margin-top:22px;
	margin-left:12%;
	float:left;
	display:inline;
}

#TopRightPane
{
	width:56%;
	margin-top:22px;
	margin-left:0px;
	margin-bottom:55px;
	float:left;
	display:inline;
}

#CenterPane
{
	width:70%;
	margin-top:22px;
	margin-left:12%;
	float:left;
	display:inline;
}

#subscribeband {
  width: 100%;
  background-color: #d8d8d8;
  margin: 0 auto;
  padding: 40px 0 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible; /* ensures nothing is clipped */
  clear: both;       /* clears any older floats */
}

#grayband
{
	width:100%;
	height:228px;
	background-color:#2d2d2d;
	margin-top:0px;
	float:left;
	display:inline;
}

#graybandleft
{
	width:500px;
	height:200px;
	margin-left:20%;
	margin-top:7px;
	float:left;
	display:inline;
}

.boxtext
{
	color:#fff;
	font-family: "Nunito", sans-serif;
	font-weight:normal;
	font-size:18px;
}

#graybandright
{
	width:500px;
	height:200px;
	margin-top:7px;
	margin-left:12%;
	float:left;
	display:inline;
}

#screenshots1
{	
	max-width:582px;
	max-width:1120px;
	margin-top:50px;
	margin-left: calc(50% - 582px);
	float:left;
	display:inline;
}

#screenshots2
{	
	max-width:582px;
	max-width:1134px;
	margin-left: 0px;
	margin-top:50px;
	float:left;
	display:inline;
}

#lightgrayband1
{
	width:100%;
	height:300px;
	background-color:#d8d8d8;
	margin-top:25px;
	padding-top:15px;
	float:left;
	display:inline;
}


/* ---------------------- */

#lightgrayband2
{
	width:100%;
	height:230px;
	background-color:#d8d8d8;
	margin-top:25px;
	padding-top:15px;
	float:left;
	display:inline;
}

#AboutLeftPane
{
	width:50%;
	margin-left:20%;
	float:left;
	display:inline;
}

#AboutRightPane
{
	width:18%;
	margin-left:6%;
	margin-top:29px;
	float:left;
	display:inline;
}

#charcoalband
{
	width:100%;
	height:185px;
	background-color:#2d2d2d;
	padding-top:15px;
	float:left;
	display:inline;
}

#FooterLeftPane
{
	width:150px;
	margin-left:20%;
	float:left;
	display:inline;
}

#FooterCenterPane
{
	width:150px;
	margin-left:12%;
	float:left;
	display:inline;
}

#FooterRightPane
{
	width:500px;
	margin-left:8%;
	float:left;
	display:inline;
}

.subscribe-btn
{
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-family: "Nunito", sans-serif;
  font-weight:normal;
  font-size:18px;
}

.subscribe-btn:link,
.subscribe-btn:visited,
.subscribe-btn:hover,
.subscribe-btn:active
{
  color: #fff;
  text-decoration: none;
}



@media only screen and (max-width: 1485px)
{
	#AboutLeftPane
	{
		margin-left:14%;
	}
	
	#subscribebandleft
	{
		margin-left:14%;
	}

	#subscribebandright
	{
		margin-left:9%;
	}

	#graybandleft
	{
		margin-left:14%;
	}

	#graybandright
	{
		margin-left:9%;
	}

	#FooterLeftPane
	{
		margin-left:14%;
	}

	#FooterCenterPane
	{
		margin-left:10%;
	}

	#FooterRightPane
	{
		margin-left:7%;
	}

	#AOVTitle
	{
		padding-left:12%;
		width:70%;
	}

	#AOVR1C1
	{
		margin-left:12%;
		width:400px;
		float:left;
		display:inline;
	}

	/* ---------------------- */

	#AOVR2C1
	{
		margin-left:12%;
	}

	/* ---------------------- */

	#BCicon
	{
		width:34px;
		height:34px;
		margin-left:calc(12% - 54px);
		margin-top:4px;
		float:left;
		display:inline;
	}

	#AOVR3C1
	{
		width:400px;
		margin-left:20px;
		float:left;
		display:inline;
	}
}

@media only screen and (max-width: 1313px)
{
	#AboutLeftPane
	{
		margin-left:10%;
	}
	
	#subscribebandleft
	{
		margin-left:10%;
	}
	
	#subscribebandright
	{
		margin-left:4%;
	}
	
	#graybandleft
	{
		margin-left:10%;
	}
	
	#graybandright
	{
		margin-left:4%;
	}
	
	#FooterLeftPane
	{
		margin-left:10%;
	}
}

@media only screen and (max-width: 1177px)
{
	#logo
	{
		margin-left:50px;
	}
	
	#herotitle
	{
		width:600px;
		font-size:34px;
		margin-left:50px;
	}
	
	#herosubtitle
	{
		width:600px;
		font-size:26px;
		margin-left:50px;
	}
	
	#getstarted
	{
		margin-left:50px;
	}

	#AboutLeftPane
	{
		margin-left:6%;
	}
	
	#subscribebandleft
	{
		margin-left:6%;
		width:350px;
	}
	
	#subscribebandright
	{
		margin-left:0%;
		width:400px;
	}
	
	#graybandleft
	{
		margin-left:6%;
		width:430px;
	}
	
	#graybandright
	{
		margin-left:0%;
		width:350px;
	}
	
	#FooterLeftPane
	{
		margin-left:6%;
	}
	
	#FooterRightPane
	{
		width:250px;
	}
	
	#lightgrayband2
	{
		height:280px;
	}
	
	#TopLeftPane
	{
		margin-left:6%;
	}
	
	#starburst
	{
		margin-left:85%
	}
	
	#AOVR1C2
	{
		margin-left:55px;
	}

	#AOVR1C3
	{
		margin-left:55px;
	}

	/* ---------------------- */

	#AOVR2C2
	{
		margin-left:55px;
	}

	#AOVR2C3
	{
		margin-left:55px;
	}

	/* ---------------------- */

	#AOVR3C2
	{
		width:75px;
		margin-left:55px;
		float:left;
		display:inline;
	}

	#AOVR3C3
	{
		margin-left:55px;
	}
	
	#screenshots1
	{
		max-width:900px;
		margin-left:calc(50% - 450px)
	}
	
	#screenshots2
	{
		max-width:900px;
		margin-left:calc(50% - 450px)
	}
}


@media only screen and (max-width: 907px)
{
	#logo
	{
		margin-left:20px;
	}

  	#hero
	{
		width:100%;
		height:440px;
		float:left;
		display:inline;
		background-image:url("images/hero-gradient.png");
		background-size:1px 220px;
		background-repeat:repeat-x;
	}
	
	#hero
	{
		width:100%;
		height:440px;
		float:left;
		display:inline;
		background-image:url("images/Hero.jpg");
		background-size:600px 220px;
		background-repeat:no-repeat;
		background-position:top 0px right -15px;
	}
	
	#herotitle
	{
		width:260px;
		padding-right: calc(100% - 940px);
		color:#FFF;
		font-family: "Nunito", sans-serif;
		font-size:19px;
		margin-left:20px;
		margin-top:20px;
		float:left;
		display:inline;
	}
	
	#herosubtitle
	{
		width:240px;
		padding-right: calc(100% - 840px);
		color:#FFF;
		font-family: "Nunito", sans-serif;
		font-size:16px;
		font-size:16px;
		margin-left:20px;
		margin-top:5px;
		float:left;
		display:inline;
	}
	
	#hero2
	{
		width:100%;
		height:440px;
		float:left;
		display:inline;
		background-image:url("images/Hero.jpg");
		background-size:600px 220px;
		background-repeat:no-repeat;
		background-position:-190px 0px;
	}
	
	#hero2DH
	{
		width:100%;
		height:440px;
		float:left;
		display:inline;
		background-image:url("images/HeroDH.jpg");
		background-size:600px 220px;
		background-repeat:no-repeat;
		background-position:-170px 0px;
	}
		
	#getstarted
	{
		margin-top:10px;
		padding-right: calc(100% - 421px);
		margin-left:20px;
		width:281px;
		height:52px;
		float:left;
		display:inline;
	}
	
	#getstartedbutton
	{
		max-width:160px;
	}
	
	#bookcall
	{
		max-width:100px;
		margin-top:-34px;
		margin-left:28px;
		float:left;
		display:inline;
	}
	
	#TopLeftPane
	{
		width:247px;
		margin-left:calc(50% - 123px);
		margin-top:-145px;
	}

	#TopRightPane
	{
		width:90%;
		margin-left:0px;
		padding-left:5%;
		padding-right:5%;
	}
	
	#subscribeband {
	  width: 100%;
	  margin-top: 25px;
	  padding-bottom: 40px; /* optional, adds breathing room */
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}

	#subscribebandleft
	{
		height:120px;
		width:calc(100% - 20px);
		margin-left:20px;
	}

	#subscribebandright
	{
		width:calc(100% - 20px);
		margin-left:20px;
	}
	
	#grayband
	{
		width:100%;
		height:475px;
		background-color:#2d2d2d;
		margin-top:0px;
	}
	
	#graybandleft
	{
		padding-top:0px;
		width:calc(100% - 20px);
		margin-left:20px;
	}
	
	#graybandright
	{
		width:calc(100% - 20px);
		margin-left:20px;
	}
	
	
	#screenshots1
	{	
		width:100%;
		margin-left: 0px;
	}
	
	#lightgrayband1
	{
		width:100%;
		height:530px;
		background-color:#d8d8d8;
		margin-top:25px;
		padding-top:15px;
	}
	
	#screenshots2
	{	
		width:100%;
		margin-left:0px;
	}
	
	#lightgrayband2
	{
		width:100%;
		height:530px;
		margin-top:25px;
		padding-top:15px;
	}
	
	#AboutLeftPane
	{
		width:240px;
		margin-left:20px;
		float:left;
		display:inline;
	}

	#AboutRightPane
	{
		width:90px;
		margin-left:15px;
		margin-top:29px;
	}
	
	#FooterLeftPane
	{
		width:calc(100% - 20px);
		margin-left:20px;
	}

	#FooterCenterPane
	{
		width:calc(100% - 20px);
		margin-left:20px;
	}

	#FooterRightPane
	{
		width:calc(100% - 20px);
		margin-left:20px;
	}
	
	#charcoalband
	{
		width:100%;
		height:455px;
	}
	
	#logoresize
	{
		width:180px;
		height:54px;
		margin-top:5px;
	}
}

/* ----------- Subscription Plans ------------- */

.pricing-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  position: relative;  /* ensure proper stacking */
  z-index: 1;          /* keeps plans above background */
}

.plan {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 30px;
  flex: 1 1 300px;
  max-width: 350px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.plan h2 {
  margin-bottom: 10px;
  font-size: 1.8rem;
  color: #333;
}

.subtitle {
  font-size: 0.95rem;
  color: #777;
  margin-bottom: 20px;
}

.features {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
  text-align: left;
}

.features li {
  margin: 10px 0;
  padding-left: 25px;
  position: relative;
  color:#000;
  font-family: "Nunito", sans-serif;
  font-weight:normal;
  font-size:18px;
}

.features li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #0c8db7;
  font-weight: bold;
}

.subscribe-btn {
  background-color: #0c8db7;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.subscribe-btn:hover {
  background-color: #0a7395;
}

@media (max-width: 768px) {
  .pricing-section {
    flex-direction: column;
    align-items: center;
  }

  #subscribeband {
    position: relative;
    z-index: 2;
    margin-bottom: 80px; /* pushes next section down */
  }

  .pricing-section {
    z-index: 3;
  }

  #grayband {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 5px; /* extra breathing room */
    clear: both;
  }
}