@charset "utf-8";
/* CSS Document */

* { 

	font-family: 'Montserrat', 'sans-serif';
	line-height: normal;
	max-width: 1920px;
	
	 /* For webkit */
	 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

html,
body {
    margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.container {
    width: 1080px;
}

.justify {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.justifyHome {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.adjust {
    margin-left: auto;
    margin-right: auto;
    padding-left: 5%;
    padding-right: 5%;
}

img {
    max-width: 100% !important;
}


.orange {
	background-color: #f36b21;
	height: 10px;
	margin-bottom: 5%;
	max-width:1920px;
}

.statement {
    position: absolute;
    text-align: center;
    color: #f36b21;;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    	font-weight: 800;
	font-size: 3em;
}

.orangeText {
    color: #f36b21;
}

.leftText {
    text-align: left;
}

.rightText {
    text-align: right;
}
.navtop {
	display: grid;
    grid-column: 2;
    grid-row: 1/3;
    grid-template-columns: repeat(7, auto);
    justify-content: space-evenly;
    justify-items: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 2;
}

.navtop li{
	display: inline-block;
	margin-top: 1%;
	margin-bottom: 3%;
	z-index: 2;
}

.navtop a{
	text-decoration: none;
	color: #000;
	font-size: 1.25em
}

.header-img-wrapper {
    width: 100%;
    position: relative;
    margin-bottom: 5%;
}

/*.header-img-wrapper p{*/
/*	color: #F36B21;*/
/*	font-weight: 800;*/
/*	font-size: 3em;*/
/*	position: absolute;*/
/*	text-align: center;*/
/*	top: 35%;*/
/*    left: 35%;*/
/*}*/

.seventy-thirty-grid {
	display: inline-grid;
	grid-template-columns: 2fr 1fr;
	column-gap: 20px;
	justify-items: center;
}

.consultation {
	background-color: #f36b21;
	margin: 0 5%;
	color: white;
	padding: 0;
	max-height: 100%;
	
}

.consultation h2{
	font-weight: 500;
	font-size: 2.5em;
	text-align: center;
	padding: 5% 15% 1%;
	justify-content: center;
}

.consultation p{
	font-size: 2em;
	text-align: center;
	padding: 3% 15%;
	justify-content: center;
}

 details{
  background-color: #fff;
  color: #000;
  font-size: 18px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 15px;
  box-sizing: border-box;
  text-align: center;
}

summary {
  background-color: #f36b21;
  color: #fff;
  font-size: 28px;
  padding: 8px 20px;
  list-style: none;
  display: flex;
  justify-content: space-between;  
  transition: height 1s ease;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 15px;
  box-sizing: border-box;
}

summary::-webkit-details-marker {
  display: none;
}

summary:after{
  content: "\002B";
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

details[open] summary:after{
  content: "\00D7";
}

details[open] div{
  padding: .5em 1em;
}

details ul {
    display: inline-block;
    text-align: left;
}

.verline {
    display: grid;
    justify-items: center;
    margin-right: 5%;
    margin-top: auto;
    margin-bottom: auto;
    
}

/* CSS */
.button-5 {
  align-items: center;
  background-clip: padding-box;
  background-color: #2db2c0;
  border: 1px solid transparent;
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 1em;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin-top: 5%;
  min-height: 3rem;
  padding: 2% 7%;
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}

.button-5:hover,
.button-5:focus {
  background-color: #11818D;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.button-5:hover {
  transform: translateY(-1px);
}

.button-5:active {
  background-color: #c85000;
  box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
  transform: translateY(0);
}

.consultation a{
	padding-top: 2%;
}

h2.blue{
	color:#2DB2C0;
	text-align: center;
	margin: 5%;
	font-size: 2.5em;
	font-weight: 400;
}

.three-column-grid {
	grid-template-columns:  1fr 1fr 1fr;
	column-gap: 20px;
	max-width: 1920px;
	display: inline-grid;
	margin-left: 10px;
	margin-right: 10px;
}

.three-four-grid {
    display: grid;
	grid-template-columns:  3fr 1fr;
}

.three-four-grid p {
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
}

.three-four-grid h2 {
    margin-block-start: 0.7em;
    margin-block-end: 0.3em;
    font-size: 28px;
}

.serviceSubHead {
    font-size: 20px;
    font-weight: 500;
}
	
.orange-box {
	background-color: #f36b21;
	border-radius: 100px;
}

.orange-box h3{
	text-align:center;
	padding: 5%;
	font-size: 2em;
	font-weight: bold;
}

.orange-box p{
	font-size: 1.5em;
	text-align: center;
	padding-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.blue-box {
	background-color: #2DB2C0;
	border-radius: 100px;
}

.blue-box h3{
	text-align:center;
	padding: 5%;
	font-size: 2em;
	font-weight: bold;
}

.blue-box p{
	font-size: 1.5em;
	text-align: center;
	padding-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 10px;
	padding-right: 10px;
	
}

.computer img{
	margin-top: 5%;
	margin-bottom: 5%;
}

.footer-logo {
	margin-left:10%;
	margin: 20px;
	display: grid;
    justify-items: center;
}

.footergrid {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
}

.footer-text {
	display: inline;
	padding-top: 25%;
}

.footer-text a{
	text-decoration: none;
	color: black;
}

.footer-contact {
	padding-top: 15%;
	margin-right: 10%;
	font-size: 1.125em;
	
}

.orange-bottom {
	background-color: #f36b21;
	height: 15px;
	margin-bottom: 0 !important;
	margin-top: 1%;
	max-width:1920px;
}

.navbot {
	display: grid;
    grid-column: 2;
    grid-row: 1/3;
    grid-template-columns: repeat(6, auto);
    justify-content: space-evenly;
    justify-items: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.navbot li{
	display: inline-block;
	margin-top: 1%;
	margin-bottom: 3%;
}

.navbot a{
	text-decoration: none;
	color: #000;
}

.navbot p {
    text-align: center;
    text-decoration: none;
	font-size: 1.25em;
}

.fancyText {
    font-family: 'Kaushan Script', sans-serif;
}


@media only screen and (max-width:1500px){
	.three-column-grid {
		grid-template-columns: 1fr;
		width:550px;
	}
	
	.orange-box {
	    margin-bottom: 10px;
	}
	
	.blue-box {
	    margin-bottom: 10px;
	}
	
	.computer {
	    display: grid;
	    grid-template-columns: 1fr;
	    align-content: space-between;
	    justify-items: center;
	}
}
	

	
	
@media only screen and (max-width:1200px){
	.seventy-thirty-grid {
	    grid-template-columns: 1fr;
	   
}
    .consultation {
        margin-bottom: 15%;
    }

    .verline {
        align-content: space-between;
        width: 75%;
        height: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    
       .navbot{
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .navbot a{
        font-size: 1.125em;
    }
    h2.blue {
        padding-top: 60px;
    }
    
    .statement{
        font-size: 2.5em;
        top: 50%;
    }
}

@media only screen and (max-width:950px){
    .statement{
        font-size: 2.5em;
        top: 50%;
    }
}

@media only screen and (max-width:800px) {
    .consultation h2, h2.blue {
        font-size: 1.5em;
    }
    
    h3 {
        font-size: 1.2em;
    }
    .consultation p, p {
        font-size: 1em !important;
    }
    
    .footergrid {
	grid-template-columns: 1fr;
}
    
    .navbot a{
        font-size: 1em;
    }
    
    .statement {
        font-size: 1.5em !important;

    }
    .computer {
    }
}

@media only screen and (max-width: 650px) {
    .verline img{
        width:100%;
        height: 100%;
    }
    
}

@media only screen and (max-width:600px) {
    .three-column-grid {
        width: 400px;
    }

@media only screen and (max-width:550px) {
    .banner p{
        font-size: 2.5em;
    }
    
     
    .bubbles {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .orange-box {
	    margin-left: 10px;
        margin-right: 10px;
    }

    .blue-box {
	    margin-left: 10px;
        margin-right: 10px;
    }
    
    .three-column-grid {
        grid-template-rows: auto auto auto;
    }
     
}


@media only screen and (max-width:400px) {
    
     .banner p{
        font-size: 1.5em;
     }
     
    .orange-box {
	    width: 90%;
    }

    .blue-box {
	    width: 90%;
    }
    
    .footer-logo img{
        width: 80%;
    }

    .computer img{
        width: 75%;
    }
}