*{
  box-sizing: border-box;
  transition: all ease-in-out 250ms;
}

:root{
  --primary-color: #2184C0;
  --secondary-color: #214972;
  --tertiary-color: #7F4426;
  --grey-color: #F7F7F7;
}

body{
margin: 0;
font-family: "Raleway", sans-serif;
text-align: center;
}

img{
max-width: 100%;
height: auto;
}

.container{
width: 95%;
margin: 0 auto;
}

.clearfix::after,
section::after,
footer::after{
  content: '';
  display: block;
  clear: both;
}

.mobile{
  display: flex;
  justify-content: center;
}

.desktop{
  display: none;
}

@media (min-width: 40rem) {
  .mobile{
    display: none;
  }

  .desktop{
    display: inline;
  }
}




a:visited{
  color:inherit;
}

/* Column
=========*/

[class^=col-]{
  width: 100%;
  margin-top: 1em;
}

[class^=col-]:first-child{
  margin-top: 0;
}

.col-1{
  width: 33.33333334%;
  float: left;
}

@media (min-width: 40rem){
  [class^=col-]{
    float: left;
    padding: 0 .5em;
    margin-top: 0;
  }

  [class^=col-]:first-child{
    padding-left: 0;
  }

  [class^=col-]:last-child{
    padding-right: 0;
  }

  .col-3{
    width: 50%;
  }

  .col-1{
    width: 16.6666667%;
  }
}


/* Typography
=============*/

#title{
  font-size: 2.5rem;
}

#title span{
  font-size: .9em;
  font-weight: 300;
  display: block;
}

.title{
  font-size: 1.7rem;
  font-weight: 700;
}

.unstyled-list {
  list-style-type: none;
}

.bold{
  font-weight: 700;
}

/* Button
=========*/

.button{
  display: inline-block;
  font-size: 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid;
  padding: .5rem 1.7rem;
}

.button-accent{
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.button-accent:hover ,
.button-accent:focus{
  background-color: var(--secondary-color);
  color: #fff;
}





/* Header
=========*/

.headerMobile{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 85vw;
  position: fixed;
  border-radius: 10px;
  background-color: var(--grey-color);
  height: 3.5rem;
  top: 1rem;
  z-index: 99;
}

.headerMobile img{
  height: 3rem ; /* 1/4th of width */
  padding-left: 1rem;
}

.headerTextMobile{
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--secondary-color);
}

.bar-holder {
  display: inline-block;
  cursor: pointer;
  padding-right: .6rem;
}

.bar1, .bar2, .bar3 {
  width: 1.8rem;
  height: .17rem;
  background-color: black;
  margin: .4rem 0;
  transition: 0.4s;
  border-radius: 10px;
}

/* The sidepanel menu */
.sidepanel {
height: 100%;
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: var(--grey-color);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
padding: .5rem .5rem .5rem 2rem;
text-decoration: none;
font-size: 1.7rem;
color: var(--primary-color);
display: block;
transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: var(--secondary-color);
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0%;
right: 2rem;
font-size: 5rem;
font-weight: 200;
margin-left: 50px;
color: var(--secondary-color);
}

@media (min-width: 40rem) {
 
  header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .5rem 1rem;
    position: fixed;
    top: 0%;
    z-index: 99;
    background-color: #fff;
  }

  .logoHolderDesktop{
    display: flex;
    align-items: center;
    margin-left: .8rem;
  }

  header img{
    width: 6rem;
  }

  .logoTextDesktop{
    font-size: .9rem;
    font-weight: 900;
    margin-left: .5rem;
  }

  .headerCall{
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--secondary-color);
  }

  nav{
    display: none;
  }

  nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  nav li{
    display: inline-block;
    margin: 0 .5rem;
  }

  nav a{
    font-weight: 900; 
    text-decoration: none;
    text-transform: uppercase;
    font-size: .9rem;
    color: black
  }

  nav a:hover{
    color: var(--primary-color);
  }

  nav a:visited{
    color: black;
  }

  .grey{
    background-color: var(--grey-color);
  }
}

/* Home hero
============*/

.home-hero{
  background-image: url(/assets/Landing.jpg);
  background-size: cover;
  background-position: center;
  padding: 10rem 0;
  color: #fff;
  background-attachment: fixed;
}

.home-hero .button{
  background-color: var(--secondary-color);
  color: white;
}

@media (min-width: 40rem){
  .home-hero .button{
    background-color: transparent;
  }
}


/* Home services
============*/ 

.home-services{
  display: flex;
  position: relative;
  padding: 2rem 0;
  flex-direction: column;
}

.home-services h1{
  color: var(--primary-color);
}

.home-servicesBody{
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.home-servicesImagesHolder{
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 35%;
}

.home-servicesImagesHolder img{
  width: 60%;
  border-radius: .3rem;
  box-shadow: 0 1rem 2rem -.2rem rgba(0 , 0 , 0, .25);
}

.home-servicesImagesHolder img:nth-child(even){
  align-self: end;
  margin: -20% 0;
  box-shadow: 0 1rem 2rem -.2rem rgba(0 , 0 , 0, .25);
}

@media (max-width: 24rem){

  .home-servicesImagesHolder img:nth-child(even){
    margin: -10% 0;
  }

}

.home-servicesList{
  width: 30%;
}

.home-servicesList li{
  padding: .5rem 0;
}

@media (min-width: 40rem) {

  .home-services{
    align-items: end;
  }

  .home-services .title{
    margin-right: 18%;
  }

  .home-servicesImagesHolder{
    flex-direction: initial;
    flex-wrap: wrap;
    align-items: end;
    justify-content: center;
    padding-top: 5rem;
  }

  .home-servicesImagesHolder img:nth-child(even){
    margin: 1%;
  }

  .home-servicesImagesHolder img{
    width: 31%;
    margin: 1%;
  }

}





/* Home mission
===============*/

.home-mission{
  position: absolute;
  top: -5em;
  left: 5%;
  width: 40%;
  background-color: white;
  outline: var(--primary-color) 2px solid;
  outline-offset: -2.5em;
  font-size: .8rem;
  box-shadow: 0 0 3rem 0 rgba(0 , 0 , 0, .25);
  padding: 2rem;
}

.home-mission-title{
  position: absolute;
  font-size: 1.3rem;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
}

.home-mission p{
  margin: 1rem .5em;
}

.home-mission-first{
  margin-top: 1.5rem;
}


@media (min-width: 40rem) {

  nav{
    display: flex;
  }
}

/* Home about
=============*/

.home-about{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  padding: 1rem 0 3rem 0;
  background-color: var(--grey-color);
}

.home-about-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85%;
  margin: 1.5rem 0;
  padding: 1rem 0;
  border: 2px dashed var(--secondary-color);
}

.home-about-box:first-child{
  border: none;
  padding: none;
}

.home-about-box .title{
  color: var(--primary-color);
  width: 100%;
  margin-bottom: 1rem;
}

.home-about-box img{
  width: 85%;
  Box-shadow: 0 0 3rem 0 rgba(0 , 0 , 0, .25);
}

.home-about-box .sub-title{
  margin: 2rem 0 0 0;
  font-size: 1.5rem;
  color: var(--primary-color);
  font-weight: 500;
}

.home-about-box .button{
  font-size: 1rem;
  padding: 1rem;
  width: fit-content;
  border-radius: 5%;
}

@media (min-width: 40rem){
  .home-about{
    flex-direction: row;
    padding: 3rem 0;
  }

  .home-about-box{
    width: 20%;
    margin: 0 5%;
    align-items: baseline;
    text-align: start;
    border: none;
  }

  .home-about-box .title{
    margin-bottom: .5rem;
  }

  .home-about-box img{
    width: 100%;
  }

  .home-about-box .sub-title{
    font-size: 1.2rem;
  }

  .home-about-box .button{
    font-size: .8rem;
    padding: .5rem;
  }
}

/* Home CTA 
=========== */

.home-CTA{
  background-image: url(/assets/Banner-3.jpg);
  background-position: center;
  background-size: cover;
  padding: 4rem 0;
  font-weight: 600;
  color: white;

}

.home-CTA h1{
  font-size: 2rem;
  color: black;
  font-weight: 700;
}

.home-CTA .button{
  font-size: 1.5rem;
  background-color: var(--secondary-color);
}

@media (min-width: 40rem){
  .home-CTA{
    padding: 7rem 0;
    color: white;
  }

  .home-CTA h1{
    text-shadow: 2px 2px grey;
  }

  .home-CTA .button{
    background-color: transparent;
  }

  .home-CTA .button:hover{
    background-color: var(--secondary-color);
  }
}


/* Home Awards 
============== */

.home-awards{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
}

.home-awards-title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0rem;
}

.home-awards-title h1{
  color: var(--primary-color);
}

.home-awards-title img{
  width: 3rem;
}

.home-awards-body{
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 75%;
}

.home-awards-box:first-child{
  width: 70%;
}

.home-awards-box{
  margin: 1rem 0;
}



@media (min-width: 40rem){
  .home-awards-body{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 1rem;
  }

  .home-awards-box{
    width: 25%;
  }

  .home-awards-box:first-child{
    width: 25%;
  }

}

/* Home Contact
===============*/

.home-contact{
  background-color: var(--grey-color);
  padding: 1rem 0;
}

.home-contact-title{
  color: var(--primary-color);
}



/* Banners
==========*/

.Banner{
  height: 9rem;
  width: 100%;
}

@media (min-width: 40rem){
  .Banner{
    height: 16.5rem;
    margin-top: 0rem;
  }
}





/* About
========*/

.about-banner{
  background-image: url(/assets/Banner-2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.about-header{ 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.about-header h5{
  color: var(--primary-color);
}

.about-header h2{
  margin-top: 0;
}

.about-body{
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.about-panel{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin: .5rem 0;
}

.about-panel-odd{
  flex-wrap: wrap-reverse;
}

.about-panel div{
  width: 75%;
}

.about-panel img{
  width: 60%;
  margin: .5rem;
}

@media (min-width: 40rem){

  .about-panel{
    flex-direction: row;
  }

  .about-panel div{
    width: 40%;
  }

  .about-panel img{
    width: 20%;
  }

  .about-panel p{
    line-height: 2rem;
    font-weight: 500;
  }
}

/* Services
===========*/ 

.services-banner{
  background-image: url(/assets/Banner-5.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.service-header{ 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.service-header h5{
  color: var(--primary-color);
}

.service-header h2{
  margin-top: 0;
}

.service-body{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 2rem;

}

.service-card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 17rem;
  margin: 3rem 5%;
  height: 15rem;
  padding: 0 2rem;
  border-radius: 5%;
  box-shadow: 0 1rem 2rem -.2rem rgba(0 , 0 , 0, .25);
}

.service-icon{
  position: absolute;
  top: -10%;
  width: 5rem;
  border-radius: 50%;
  background-color: white;
}

.service-card h3{
  margin-top: 2rem;
  margin-bottom: 0;
  color: var(--secondary-color);
}

.service-arrow{
  width: 15%;
}

.service-arrow:hover{
  transform: scale(1.5);
}




/* Reviews
==========*/

.reviews-banner{
  background-image: url(/assets/Banner-4.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.review-header{ 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.review-header h5{
  color: var(--primary-color);
}

.review-header h2{
  margin-top: 0;
}

.review-body{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 2rem;
}

.review-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20rem;
  margin: 3rem 3%;
  height: fit-content;
  padding: 1rem 2rem;
  border-radius: 5%;
  box-shadow: 0 1rem 2rem -.2rem rgba(0 , 0 , 0, .25);
}

.review-card h3{
  margin: 1rem 0;

  color: var(--secondary-color);
}

.review-logo{
  width: 2rem;
  margin: 1rem 0;
}




.review-stars{
  width: 70%;
  margin-bottom: 1rem;
}






/* Contact Page
===============*/

.contact-banner{
  background-image: url(/assets/Banner-7.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.contact-header{ 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.contact-header h5{
  color: var(--primary-color);
}

.contact-header h2{
  margin-top: 0;
}

.contact-page{
  display: flex;
  flex-wrap: wrap-reverse;
  padding: 2rem 0;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}

.contact-form-left{
  display: flex;
  flex-direction: column;
  background-color: var(--primary-color);
  width: fit-content;
  margin: 2rem 0;
  color: white;
  border-radius: .5rem;
}

.contact-form-left h2{
  margin: 1rem;
}

.contact-info-box{
  display: flex;
  width: 80%;
  align-items: center;
  padding-right: .5rem;
}

.contact-info-box a{
  color: white;
}

.contact-info-box a:hover{
  color: #214972;
}



.contact-info-box img{
  width: 2rem;
  margin: 2rem .5rem;
}









.contact-form{
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  width: fit-content;
  margin: 0;
}

.contact-title{
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: fit-content;
 color: var(--primary-color);

}

.contact-title hr{
  color: var(--primary-color);
}

.contact-title img{
  width: 4rem;
  margin-left: 1rem;
}


.contact-inputs,
.submit,
select{
  width: 90%;
  margin: .5rem 0;
  height: 2rem;
  border: .125rem solid var(--secondary-color);
  border-radius: .5rem;
  background: transparent;
}



.contact-inputs::placeholder{
  padding-left: .5rem;
}

.custom-select{
  display: flex;
  justify-content: baseline;
}

.contact-message{
  height: 4rem;
}

.submit{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: fit-content;
  background-color: #2184C0;
  color: white;
}

.submit-img{
  width: 1rem;
  margin-left: .5rem;
}

@media (min-width: 40rem){
  .contact-page{
    align-items: center;
    justify-content: center;
    box-shadow: 0 .5rem 2rem -.2rem rgba(0 , 0 , 0, .25);
    border-radius: .75rem;
    margin: 3rem auto;
    width: fit-content;
    height: 27rem;
    padding: 0;
  }

  .contact-form-left{
    justify-content: space-evenly;
    padding: 1rem 4rem 1rem 2rem;
    margin: 0rem 1rem 0 .5rem;
    height: 26rem;
    border-radius: .75rem;

  }

  .contact-form{
    padding: 0 3rem;
    margin: 1rem 0;
    height: 25rem;
    border-radius: .75rem;
  }

}


















/* Footer
=========*/

footer{
  display: flex;
  flex-direction: column;
  background: var(--secondary-color);
  text-align: left;
  padding: 1rem 0;
  color: white;
}

.footer-logo-box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

}

.footer-logo{
  width: 10%;
}

.foot-icon-box{
  width: 100%;
}

.foot-icon-box ul{
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  padding-left: 0;
}

.foot-icon{
  width: 3rem;
}

@media (min-width: 40rem){
  .foot-top{
    display: flex;
    justify-content: space-evenly;
  }

  .footer-logo-box{
    width: 30%;
  }

  .footer-logo{
    width: 20%;
  }

  .foot-info{
    display: flex;
    align-items: center;
    width: 70%;
  }

  .foot-info-body{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 8rem;
  }

  .foot-info-body ul{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .foot-info-body img{
    width: 2rem;
  }

  .foot-info-body li{
    display: flex;
    align-items: center;
  }
}














.Koi-tag{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

.Koi-logo{
  width: 2.8rem;
  padding-left: .2rem;
}