<style>

html, body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0px;
  padding: 0px;
  font-size: 1.25rem;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
}

* {
margin: 0;
padding: 0;
}


p {
  color: #4a676a;
  font-size: 1.25rem;
  margin:20px 20px 30px 20px;
  line-height: 1.5;
}




a[href^="tel:"] {
  color: black;
  text-decoration: none;
  font-weight: normal;
}

a.class1 {color:white; text-decoration: none;}
a.class1:link  {text-decoration: none; color: white;}
a.class1:visited {text-decoration: none; color: white;}
a.class1:hover {text-decoration: underline; color: white;}
a.class1:active {text-decoration: none; color: white;}


a.class2 {color: #02a89a; text-decoration: none;}
a.class2:link {text-decoration: none; color: #02998c;}
a.class2:visited {text-decoration: none; color: #02998c;}
a.class2:hover {text-decoration: underline; color: #02998c;}
a.class2:active {text-decoration: none; color: #02998c;}




h1 {
color: #5a7d81;
font-size: 2.75rem;
font-weight: normal;
margin-top: 10px;
margin-bottom: 1px;
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}


h2 {
color: #6d6254;
font-size: 2.5rem;
font-weight: normal;
margin-top: 10px;
margin-bottom: 1px;
margin-left: 5px;
margin-right: 5px;
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}


h3 {
font-size: 2.0rem;
font-weight: normal;
font-style: italic;
margin-top: 10px;
margin-bottom: 1px;
margin-left: 5px;
margin-right: 5px;
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}




@media only screen and (max-device-width: 480px){
h1 {font-size: 2.25rem !important;}
h2 {font-size: 2.0rem !important;}
h3 {font-size: 1.75rem !important;}
}



hr {
  height: 20px;
  border: 0;
  margin: 0;
  box-shadow: 0 10px 10px -10px #333 inset;
}



#sectblue {margin:0px; width:100%; background-color: #32c9bc;}
#sectcream {margin:0px; width:100%; background-color: #feeacc;}
#curve2 {width: 100%; margin-top: -4px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;}
#curve1 {width: 100%; margin-bottom: -5px; margin-top: 0px; margin-left: 0px; margin-right: 0px;}


.w3-animate-top{position:relative;animation:animatetop 1.5s}@keyframes animatetop{from{top:-500px;opacity:0} to{top:0;opacity:1}}
	

.button {
  position: relative;
  margin: auto;
  padding: 10px 30px;
  background-color:#000000;
  border: none;
  border-radius:5px;
  font-size: 1.25rem;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.button:hover {
      background-color:#E97451;
	  color: #ffffff;
	  border: none;
      transition: 0.7s;
	  cursor: pointer;
  }
  
.button:active {
    background-color: #E97451;
}




.portbutton {
  position: relative;
  margin: 5px;
  padding: 5px 25px;
  background-color:#000000;
  border: none;
  border-radius:5px;
  font-size: 1.0rem;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.portbutton:hover {
      background-color:#E97451;
	  color: #ffffff;
	  border: none;
      transition: 0.7s;
	  cursor: pointer;
  }
  
.portbutton:active {
    background-color: #E97451;
}



.buybutton {
  position: relative;
  margin: 5px;
  padding: 5px 25px;
  background-color:#000000;
  border: none;
  border-radius:5px;
  font-size: 1.0rem;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.buybutton:hover {
      background-color:#E97451;
	  color: #ffffff;
	  border: none;
      transition: 0.7s;
	  cursor: pointer;
  }
  
.buybutton:active {
    background-color: #E97451;
}






ol li {
  margin-top: 1.15em;
}




.servliwhite-marker::marker {
  content: '\27BA';
  color: #ffffff;
  font-size: 1.0em;
  font-weight: bold;
}

.servliblack-marker::marker {
  content: '\27A5';
  color: #000000;
  font-size: 1.0em;
  font-weight: bold;
}


.servliredx-marker {
  list-style-image: url('images/marker-redX.png');
  list-style-type: square;
}

.servligreencheck-marker {
  list-style-image: url('images/marker-greencheck.png');
  list-style-type: square;
}


/* NAVBAR STYLING STARTS */

 /* mobile nav menu styling */
 
header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
}
#menuspace {
  font-size: inherit;
  margin: 0;
}

#menuToggle {
  display: none;
}

label {
  cursor: pointer; 
  font-size: 1.2rem;
}


nav {
    position: absolute;
    top: -100vh;
    left: 0;
	height: 85vh;
    width: 100vw;
    transition: 0.5s;
	background-color: black;
    color: #ffffff;
    text-align: right;
    z-index: 999;
    border-bottom-right-radius: 50px 50px;
    border-bottom-left-radius: 50px 50px;
}

 /* mobile landscape styling */
@media screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 920px) {
nav {
    position: absolute;
    top: -300vh;
    left: 0;
	height: 175vh;
    width: 100vw;
    transition: 0.5s;
	background-color: black;
    color: #ffffff;
    text-align: right;
    z-index: 999;
  }
  
}




nav label {
  line-height: 3;
  margin-right: 1rem;
  font-size: 1.2rem;
}

ul {
  list-style: none;
  margin: 50px 0px 0px 0px;
  text-align: center;
  font-size: 1.2rem;
}


ul a:link {
  color: white;
  text-decoration: none;
  line-height: 2.5rem;
}

ul a:visited {
  color: white;
  text-decoration: none;
  line-height: 3rem;
}

ul a:hover {
   color: white;
   text-decoration: underline;
 }
  
#mobilelogo {
    position: absolute;
	left: 0px;
	top: 0px;
	height: 115px;
  }
  
#logomobilemenu {
	height: 115px;
	width: 115px;
  }


#mobiletext {
    position: relative;
    margin-top: 50px;	
    margin-left: 15px;	
	text-align: left;
	color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
  }

  
#menuToggle:checked + label + nav {
    top: 0;
}




 /* desktop nav menu styling */
 
@media (min-width: 1024px) {
  header > label,
  nav label {display: none;}
  
#mobilelogo {display: none;}
  
#mobiletext {display: none;}


 nav {
    background-color: transparent;
    display: flex;
    height: auto;
    left: auto;
    position: relative;
    transform: none;
    transition: none;
    top: auto;
    width: auto;  
	border: 0px solid black;
    border-bottom-right-radius: 1px 1px;
    border-bottom-left-radius: 1px 1px;
  }
  
  ul {
    display: flex;
	margin: 10px;
  }
  
   ul li{
  padding: 5px 14px;
  margin-right: 10px;
  color: black;
  background-color: transparent;
   }
   
 ul li:hover {
  color: white;
  background-color: black;
  border-radius: 5px;
  transition: 0.2s;

}
  
  ul a:link {
  padding: 8px 1px;
  color: black;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
  line-height: 1rem;

}

  ul a:visited {
  color: black;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
}

 ul a:hover {
  color: white;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1);

}


  ul a:active {
  color: black;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
}


}

/* NAVBAR STYLING ENDS */





/* Create two equal columns that float next to each other for Bio section */
.columnBIO {
  float: left;
  width: 45%;
  margin-left: 5px;
  padding: 0px;
  text-align: center;
  white-space: nowrap;
  }

/* Clear floats after the columns */
.rowBIO:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on smaller screens */
@media screen and (max-width: 600px) {
  .columnBIO {
    width: 90%;
	text-align: center;
  }
}



/* Create four equal columns that float next to each other for what does your business need homepage section */
.columnSRV {
  float: left;
  width: 24%;
  padding: 10px;
  border: 0px solid black;
  text-align: center;
  margin-left: 10px;
  }

/* Clear floats after the columns */
.rowSRV:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on smaller screens */
@media only screen and (max-device-width: 700px){
  .columnSRV {
    width: 90%;
	text-align: center;
  }
}  
@media only screen and (min-device-width: 701px) and (max-device-width: 1024px){
  .columnSRV {
    width: 45%;
	text-align: center;
  }
}






/* Create three equal columns that float next to each other for what does your business need homepage section */
.columnSRVhm {
  float: left;
  width: 32%;
  padding: 0px;
  border: 0px solid black;
  text-align: center;
  margin-left: 10px;
  }

/* Clear floats after the columns */
.rowSRVhm:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on smaller screens */
@media only screen and (max-device-width: 768px){
  .columnSRVhm {
    width: 97%;
	text-align: center;
  }
}  




/* Create two equal columns that float next to each other for order form sections */
.rowORDER {
  display: grid;
  grid-template-columns: 55% 45%;
  margin-left: 0px;
  padding: 0px;
  }
@media only screen and (max-width: 768px) {
    .rowORDER {
    display: grid;
    grid-template-columns: 100%;
	border: 0px solid black;
    }
}






/* Create two equal columns that float next to each other for About sections on each page */
.columnABOUT {
  float: left;
  width: 50%;
  margin-left: 0px;
  padding: 0px;
  }

/* Clear floats after the columns */
.rowABOUT:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on smaller screens (800px wide or less) */
@media screen and (max-width: 800px) {
  .columnABOUT {
    width: 95%;
  }
}




/* Create two columns that float next to each other for the intro sections on each page */
.rowINTRO {
  display: grid;
  grid-template-columns: 60% 40%;
  margin-left: 0px;
  padding: 0px;
  border: 0px solid black;
  }
@media only screen and (max-width: 600px) {
    .rowINTRO {
    display: grid;
    grid-template-columns: 95%;
    }
}





/* Create four equal columns that float next to each other for Client List on bio page */
.columnCLIENTS {
  float: left;
    width: 49%;
	text-align: center;
    white-space: nowrap;
	font-size: 1.25rem;
	padding-bottom: 80px;
  }

/* Clear floats after the columns */
.rowCLIENTS:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on smaller screens (768px wide or less) */

@media screen and (max-width: 768px) {
  .columnCLIENTS {
    width: 95%;
	text-align: center;
    white-space: nowrap;
	font-size: 1.25rem;
	margin-bottom: 15px;
  }
}








/* Create four equal columns that float next to each other for Client List on bio page */
.columnCLIENTS2 {
  float: left;
  width: 22%;
  margin-left: 20px;
  margin-right: 0px;
  padding: 10px;
  border: 0px solid black;
  white-space: nowrap;
  font-size: 1.25rem;
  }

/* Clear floats after the columns */
.rowCLIENTS2:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 1024px) {
  .columnCLIENTS2 {
    width: 40%;
	margin-left: 50px;
    white-space: nowrap;
	font-size: 1.25rem;
  }
}





/* Create three equal columns that float next to each other for solutions section on homepage */
.columnRVW {
  float: left;
  width: 30%;
  padding: 0px;
  background: #ffffff;
  border: 2px solid #02a89a; 
  border-top-right-radius: 25%;
  border-top-left-radius: 5%;
  border-bottom-right-radius: 5%;
  border-bottom-left-radius: 25%;
  text-align: left;
  margin: 0px 10px 20px 10px;
  }
.columnRVW:hover { 
 border: 2px solid #E97451; 
  }	
	
	
/* Clear floats after the columns */
.rowRVW:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media only screen and (max-device-width: 768px){
  .columnRVW {
    width: 95%;
	margin: 0px 0px 20px 0px;
  }
}  
@media only screen and (min-device-width: 769px) and (max-device-width: 1024px){
  .columnRVW {
    height: 330px;
  }
}



/* Fade In On Scroll for Bio Photo */
@keyframes fadeInLeft {
  from {
    transform: translateY(200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.fade-in-left {
  animation: 1.5s both fadeInLeft;
}



/* Fade In On Scroll fades image in from top */
@keyframes fadeInUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
.fade-in-up {
  animation: 1.5s both fadeInUp;
}



/* Fade In On Scroll fades image down */
@keyframes fadeInDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.fade-in-down {
  animation: 1.5s both fadeInDown;
}




/* Fade In On Scroll for Static Bio Photos */
.fade {
  opacity: 0;
}






footer {
  position:relative;
  bottom:0;
  left:0;
  width:100%;
  text-align: center;
  padding: 0px;
  background-color: #fff5e9;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
}

footer a {color: #000000; text-decoration: none;}
footer a:hover {color: #000000; text-decoration: underline;}
footer a:visited {color: #000000; text-decoration: none;}



#biophoto {
	height: auto; 
	max-width: 90%; 
	border: 1px solid #000000; 
	border-top-right-radius: 25%;
	border-top-left-radius: 5%;
	border-bottom-right-radius: 5%;
	border-bottom-left-radius: 25%;
}

#readyphoto {
	height: auto; 
	max-width: 90%; 
}


#servicesteps {width: 95%; height: auto;}



/* Aligning Main Content And Fading Image Gallery*/

 /* Media Query for Small Screen Mobile Devices Iphone Portrait mode */
@media only screen and (max-device-width: 480px){
#logo  {position: absolute; width: 175px; height: 152px; top: 10px; left: 15px; z-index: 15; border: 0px;}
#title {margin-top:200px; width: 100%; text-align: center; position: absolute;}
#birdflying {width: 200px; height: 188px; margin-left: 10px;}
#socialIcon {width: 30px; height: px; margin: 20px; border-radius: 25%;}
}

/* Media Query for low resolution  Tablets, Ipads , iphones landscape, caw ipad*/
@media only screen and (min-device-width: 481px) and (max-device-width: 768px){
#logo  {position: absolute; width: 200px; height: 173px; top: 10px; left: 15px; z-index: 15; border: 0px;}
#title {margin-top:210px; width: 100%; text-align: center; position: absolute;}
#birdflying {width: 200px; height: 188px; margin-left: 70px;}
#socialIcon {width: 30px; height: px; margin: 20px; border-radius: 25%;}
}

/* Media Query for Tablets Ipads  mode */
@media only screen and (min-device-width: 769px) and (max-device-width: 1024px){
#logo  {position: absolute; width: 200px; height: 173px; top: 30px; left: 20px; z-index: 15; border: 0px;}
#title {margin-top:100px; width: 100%; text-align: center; position: absolute;}
#birdflying {width: 226px;height: 213px;  margin-left: 50px;}
#socialIcon {width: 35px; height: px; margin: 20px; border-radius: 25%;}
}

/* Media Query for Laptops and Desktops */
 @media only screen  and (min-device-width: 1025px) and (max-device-width: 1200px){
#logo  {position: absolute; width: 220px; height: 191px; top: 30px; left: 20px; z-index: 15; border: 0px;}
#title {margin-top:120px; width: 100%; text-align: center; position: absolute;}
#birdflying {width: 226px; height: 213px; margin-left: 150px;}
#socialIcon {width: 35px; height: px; margin: 20px; border-radius: 25%;}
}

/* Media Query for Large screens caw screens */
 @media only screen and (min-device-width: 1201px){
#logo  {position: absolute; width: 300px; height: 260px; top: 30px; left: 30px; z-index: 15; border: 0px;}
#title {margin-top:120px; width: 100%; text-align: center; position: absolute;}
#birdflying {width: 226px; height: 213px; margin-left: 200px;} 
#socialIcon {width: 40px; height: px; margin: 20px; border-radius: 25%;}
}




/* Fade and Slide In On scroll for flying bird */

.containerHS {
  width: 100%;
  margin: 0px;
  border: 0px solid black;

}

.item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
   justify-content: center;
}

/* animation */
.appear {
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  opacity: 0;
  -webkit-transform: translateX(-300px);
          transform: translateX(-300px);
}

.appear.inview {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}







</style>