/*{
  border: 1px solid red;
}*/

/*MUTLIPAGE STYLES*/
/*HEADER STYLES*/


:root {
  --bs-breakpoint-xs: 100% !important;
  --bs-breakpoint-sm:  100% !important;
  --bs-breakpoint-md:  100% !important;
  --bs-breakpoint-lg:  100% !important;
  --bs-breakpoint-xl:  100% !important;
  --bs-breakpoint-xxl:  100% !important;
}

html, body {
  height: 100%;
  margin: 0;
  width: 100% !important;
}

.wrapper {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  transition: margin-bottom 0.3s ease;
}

.logo{
  width:180px;
  display: inline-block;
  margin-left: 10px;
}
/* Style the header with a grey background and some padding */
header{
  overflow: hidden;
  background-color: #B5B5B5;
  padding: 20px 10px; 
}

/* Style the nav position */
nav{
  display: inline-block;
  float: right;
  background-color: #d6d6d6;
  border-radius: 4px;
}

/* Style the header links */
nav a{
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-family: calibri;
  font-size: 20px;
  line-height: 25px;
  border-radius: 4px;
}

/* Change the background color on mouse-over */
nav a:hover{
  background-color: #321D54;
  color: white;
  transition: background-color 1s;
}

/*active nav section styles*/
.active{
  color: #007484;
  font-weight: bold;
}

a{
  text-decoration: none;
}

/*FOOTER STYLES*/
footer{
  overflow: hidden;
  background-color: #321D54;
  padding: 10px 10px; 
}

footer h2{
  font-family: calibri;
  font-weight: bold;
  color: white;
  margin: 0px 10px ;
  display: inline-block;
  vertical-align: top;
}

footer p{
  font-family: calibri;
  color: white;
  margin: 0px 10px;
}

.footerdetails{
  display: inline-block;
  float: right;
  text-align: right;
  margin: 10px;
  margin-bottom: 0px;
}

.copyright{
  font-size: 9pt;
}

.linkedinicon{
  max-width: 35px;
  margin-left: 15px;
}

img{
  border-radius: 4px;
}

/*CALL TO ACTION BUTTONS*/
.ctadiv{
  background-color:#007484;
  padding: 5px 10%;
}

.ctadiv button{
background-color: #B5B5B5;
color: black;
width:200px;
}

.ctadiv button:hover{
 background-color:#321D54;
 color: white;
transition: 1s;
}


.ctatable{
  text-align: center;
  width: 100%;
}

/*HOME PAGE STYLES*/
/*Style banner*/
.banner{
  background-color: #321D54;
  color: white;
  font-family: calibri;
  /*display: flex;
  flex-direction: column;*/
  justify-content: center;
  align-content: center;
  padding: 20px ;
}

.banner h1, .banner h3, .banner p{
  font-family: calibri;
  text-align: center;
  padding: 10px;
}

/*Styling banner links*/
.bannerlink{
  text-decoration:none;
  color: white;
}

/*styling buttons*/
button{
  margin: 5px;
  padding: 12px;
  font-family: calibri;
  font-size: 20px;
  line-height: 25px;
  border-radius: 4px;
  background-color:#007484;
  color: white;
  border: none; 
  max-width:200px;
  align-self: center;
}

button:hover{
  background-color: #321D54;
  transition: background-color 1s;
}

/*special button styles*/
.bannerbutton{
  align-self: center;
  background-color: white;
  color: #321D54;
  margin: 0px 41.5%;
  width: 20%;
  max-width: 200px;
  font-weight:bold;
  display: block;
  }

  @media (max-width:768px){
    .bannerbutton{
      width: 100%;
      margin: 0 auto;
    }
  }

.bannerbutton:hover{
  background-color: #007484;
  color: white;
  transition:1s;
}

/*styling the horizontal rule*/
hr{
  border: 2px solid #321D54;
  opacity: 1;
  width: 75%;
  border-radius: 2px;
  margin: 0px 12.5%;
}

/*styling "tables"*/
div{
  justify-content: center;
}

.servicecallout, #aboutcallout{
  width: 90%;
  margin: 0px 5%;
}

.section{
  padding: 12px;
  display: inline-block;
}

.section2{
  padding: 12px;
  display: inline-block;
  width: 30%;
}

.section3{
  padding: 12px;
  display: inline-block;
  width: 25%;
  margin: 0px 2.5%;
}

.section4{
  padding: 12px;
  display: inline-block;
  width: 40%;
  margin: 0px 2.5%;
}

.section5{
  padding: 12px;
  display: inline-block;
  width: 25%;
  margin: 0px 2.5%;
}

@media (max-width:768px){
  .section5{
    margin:0;
    width:auto;
  }
  #mininavtable{
    text-align: center;
  }
}

.section6{
  padding: 12px;
  display: inline-block;
  vertical-align: top;
}

.section7{
  padding: 12px;
  display: inline-block;
  width: 40%;
  margin: 0px 2.5%;
  vertical-align: top;
}

.textblock{
  display: inline-block;
}

 #homeabouttable, #clientstable{
  /*border: 1px solid red;
  border-collapse: collapse;*/
  margin: 5px 10%;
}

#homeservicetable{
  /*border: 1px solid red;
  border-collapse: collapse;*/
  width: 90%;
  margin: 5px 10%;
}

@media (max-width:768px){
  #homeservicetable{
    margin:0;
    width: 100%;
  }
}

#listbutton{
  vertical-align: top;
}

/*#homeservicetable td, #homeabouttable td, #clientstable td{
border: 1px solid red;
}*/

#homeservicetable h1, #homeabouttable h1, #clientstable h1{
color: #321D54;
font-weight:bold;
}

#homeabouttable p, #clientstable p{
  font-family: calibri;
  font-size: 15pt;
}

#homeaboutbutton{
  display: inline-block;
}

#clientstable td{
  padding: 5px;
}

#clientstable{
  width: 80%;
  justify-content: center;
}

.clientlogos{
  width: 85%;
  margin: 5px;
  border-radius: 4px;
}

.needsborder{
  width: 85%;
  margin: 5px;
  border-radius: 4px;
  border: 1px solid black;
}

/*Styling the images*/

#whyimg{
  max-width: 500px;
  width: 80%;
  border-radius: 4px;

}

#serviceimg{
  width:500px;
  display: flex;
  vertical-align: top;
  padding: 0px;
  border-radius: 4px;
}

#serviceimg2{
  max-width: 600px;
  width: 400%;
  display: flex;
  vertical-align: top;
  padding: 0px;
  border-radius: 4px;
  margin: 5px;
}


#serviceimgtd{
  width: 60%;
}
@media (max-width:768px){
  #serviceimgtd{
    width:100%;
  }
}

#whyimg2{
  width: 70%;
  border-radius: 4px;
  margin: 0px 15% 0px 10%;
}

#whyimg{
  margin: 5% 15%;
}


/*CONTACT PAGE STYLES*/
/*styling contact banner*/
.banner2{
  background-color: white;
  color: #321D54;
  display: flex;
  flex-direction: column;
  padding: 20px ;
}

.banner2 h1, .banner2 h4{
  font-family: calibri;
  text-align: center;
  font-weight: bold;}

.banner2 p{
  text-align: center;
  font-family: calibri;
  color: black;
}

#toggleContactForm{
 margin: 10px 45%;
}
@media (max-width:768px){
  #toggleContactForm{
    margin: 0 auto;
    text-align: center;
  }
}

#contacttable{
 /*border: 1px solid red;
 border-collapse: collapse;*/
 align-content: center;
 margin: 5px 10%;
}

/*styling the button*/
#contactdiv{
  text-align: center;
}
#contact{
margin:auto;
}

/*styling contact form*/

#contactform{
  background-color: #007484;
  color: white;
  border-radius: 20px;
  margin:5px auto;
  border-collapse: collapse;
  max-width:750px;
  margin-bottom: 30px; 
  position: relative;
  overflow: hidden;
}

.loading{
  display: none;
  background-color: #000;
  opacity: .8;
  position: absolute;
  color: #fff;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  align-items: center;
}

#submitbutton[disabled] {
  cursor: not-allowed;
  background-color: #ddd; 
}

@media (max-width:768px){
  #contactform{
   width:90%;
  }
}



#contactform td{
 /* border: 1px solid white;*/
padding: 10px 20px;

}
#contactform .col-md-6, #contactform .col-12{
  text-align: left;
}

#submitbutton{
  justify-content: right;
  background-color:white;
  color: #321D54;
  font-weight: bold;
  width: 200px;
  border-radius: 5px;
  border: none;
}

#submitbutton:hover{
  background-color: #B5B5B5;
  transition: 1s;
}

.details{
  border-radius: 4px;
  border: none;
}

#messagebox{
  padding:0 5px;

}



#consent-group {
  display: flex;
  align-items: center;
}


/*STYLING ABOUT PAGE*/
#biotable{
/*  border-collapse: collapse;
  border: 1p soild white;*/
  align-content: center;
  float: center;
  margin: 5px 5%;
  width: 90%;
}

#biotable td{
widht:50%;
/*border: 1px solid white}*/}

#headshot{
width: 100%;
margin: 0px 15%;
border-radius: 4px;
}

.banner3{
  background-color: white;
  color: #321D54;
  justify-content: center;
  align-content: center;
  padding: 20px;
  margin: 5px 10%;
  width: 80%;
}

.banner3 p{
  color: black;
}

@media (max-width:768px){
  .banner3{
    padding:0;
    padding-top:20px;
  }
}

/*STYLING THE SERVICES PAGE*/
/*styling the mininav*/
#mininav{
  background-color:#007484;
  color: white;
  /*display: flex;
  flex-direction: column;*/
  justify-content: center;
  align-content: center;
  display: flex;
}

#mininavtable td{
  align-content: center;
  padding: 12px 20px;
}

#mininavtable button{
  align-self: center;
  background-color: #d6d6d6;
  color: black;
  margin: 0px 40%;
  width: 200px;
  font-weight: bold;
  margin: 0px;
  }

#mininavtable button:hover{
  background-color: #321D54;
  color: white;
  transition:1s;
}

/*Styling the Services div*/
#servicesdiv, #whydiv{
  background-color: white;
  justify-content: center;
  align-content: center;
  padding: 20px;
  margin: 10px 5%;
  width: 90%;}

  @media (max-width:768px){
    #servicesdiv{
        width:100%;
        margin:0;
    }
  }


/*styling the process div*/
#processdiv{
  background-color:#321D54;
  color: white;
  justify-content: center;
  align-content: center;
  padding: 20px 35px;
  width: 100%;
  padding: 20px 10%;
}

@media (max-width:768px){
  #processdiv{
    
  }
}
#processdiv h1{
  font-weight: bold;
}

#processtable td{
width:30%;
}

/*combination styling for the services page*/
#servicesdiv, #whydiv{
margin: 5px 10%;}

@media (max-width:768px){
  #servicesdiv, #whydiv{
    margin:0;
  }
}

#processtable td, #whytable td, #servicetable td{
padding: 0px;
vertical-align: top;
width: 90%;
margin: 5%;
padding: 0px 15px 0px 0px;
align-content: center;
}

#processtable td{
  width: 33.33%;
}

#servicesdiv h1,  #whydiv h1{
  font-weight: bold;
  color:  #321D54;
}

#servicetable h3, #whytable h3{
  color: #321D54;
}

#whytable td{
  width: 33.3%;
}

.honest{
  vertical-align: top;
}

.iconimgs{
  width: 100px;
  display: inline-block;
}

.processtitles{
  display: inline-block;
}

/*STYLES FOR THE PRIVACY PAGE*/
#policy{
  margin: 10px 10%;
}

#policy li {
  margin: 0px 10%;
}

#policy p{
  margin: 4px;
}

#policy h1, #policy h2, #policy h3{
 color: #321D54;
}

.bold{
  font-weight: bold;
  margin: 0px;
}

/*ADDING RESPONSIVE STYLES*/
/* CSS for mobile devices */
@media only screen and (max-width: 768px) {
  /* Adjustments for smaller screens */
    .logo {
    width: 80px;
  }
  .banner {
    padding: 10px; 
  }
   .banner2 h1 {
    font-size: 24px; 
  }
  #biotable {
    display: flex;
    flex-direction: column; 
  }
  h2, h4, p {
    font-size: 16px;
  }

  .section3, .section2, .section4, .section7{
    width: 100%;
  }

  .section7 p{
    text-align: left;
    padding:0;
  }

  #headshot{
  width: 90%;
  margin: 0px 5%;
  }

  #serviceimg2{
    width: 100%;
 }
}