body{
    margin:0;
    scroll-behavior: smooth;
    font-size:62.5%;
    font-family:'Saira Condensed', sans-serif;
}
html{
    margin:0;
    box-sizing: border-box;
    background-color: rgb(41, 40, 40);
}
#container1{
    background-color:rgb(41, 40, 40);
}
#container1 nav{
    margin:0 0 0 0;
    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
    background-color: white;
    height:3em;
}
ul{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width:100%;
    padding-right: 100px;
    margin-bottom: 2%;
}
#container1 li{
    list-style-type: none;
    margin:0 5% 0 0;
    width:100px;
}
#container1 a{
    text-decoration: none;
    width:80px;
    font-size:1.4rem;
    color:rgb(41, 40, 40);
    text-align: right;
}
#navbar {
    background-color: #333; /* Black background color */
    position: fixed; /* Make it stick/fixed */
    top: -50px; /* Hide the navbar 50 px outside of the top view */
    width: 100%; /* Full width */
    transition: top 0.3s; /* Transition effect when sliding down (and up) */
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  
  /* Style the navbar links */
  #navbar a {
    display: block;
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
  }
  
  #navbar a:hover {
    background-color: #ddd;
    color: black;
  }
.main{
    background: url(mdlog1.jpg) no-repeat right center fixed;
    background-size:65% 100%;
    height:90vh;
    margin:1% 5% 1% 5%;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;

}
h1{
    font:600 6rem 'Saira Condensed', sans-serif;
    width:35%;
    color:white;
    margin-top:15%;
}
#container2{
    background-color: white;
    height:100vh;
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: 5%;
}
#container2 > img{
    width:40%;
    height:400px;
    margin:0 0 0 5%;
    box-shadow: 1px 1px 7px rgba(33,33,33,.7);
}
#about{
    width:35%;
    margin:1% 5% 5% 5%;
    text-align: center;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    font-family:'Saira Condensed', sans-serif;
}
.actionItem{
  font-size: 1.6rem;
  font-weight: bold;
}
.onScroll{
    animation:slide 4s;
}
@keyframes slide{
    0%{margin-right:-1000px;}
    20%{margin-right:-1000px;}
    35%{margin-right:0px;}
  100%{margin-right:0px;}
  }

/* Faint animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    animation-name: fade;
    animation-duration: 1s;
  }
    @-webkit-keyframes fade {
      from {opacity: .5}
      to {opacity: 2}
    }
  
    @keyframes fade {
      from {opacity: .5}
      to {opacity: 2}
    }
strong{
    font-weight: bolder;
}
#container2 h3{
    font-size:1.2rem;
    margin:5% 0 0 0;
}
#about > h2, #testimonials > h3{
    font: 3.5rem 'Saira Condensed', sans-serif;
    margin:0;
    text-transform: uppercase;
}
#container2 p{
    font-size: 1.3rem;
    line-height: 1.5em;
    text-align: center;
    font-weight: bold;
    margin-top: 0;
}
#final{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  background-color: white;
  margin:5% 0;
}
#testimonials{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:2% 5% 0 5%;
  width:60%;
}
#testimonials > h3{
  font: 2rem 'Saira Condensed', sans-serif;
  margin:0;
  text-transform: uppercase;
}
#customerReviewContainer{
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
  align-items: flex-start;
  justify-content: center;
  margin-top: 1%;
}
.customerReviews{
  width:100%;
  text-align: center;
  margin-bottom: 20px;
  background-color: rgba(211,211,211,0.2);
  padding:2% 5%;
}
.customerReviews > p{
  font: 1rem Arial, sans-serif;
  font-style: italic;
  letter-spacing: 0.05em;
  margin-top:3%;
  line-height: 25px;
}
.customerReviews > span{
  font:1rem Arial, sans-serif;
  margin-top:3%;
}
#container3{
    background-color: rgb(41, 40, 40);
    height:fit-content;
    display:flex;
    flex-direction: column;
    justify-content: center;
    margin:5% 0 5% 0;
}
.container3 img{
    height:10%;
    width:30%
}
#container3 h3{
    color:#DCDA3C;
    font:1.5rem Arial, sans-serif;
    margin:1% 0 0 0;
    text-align: center;
}
#container3 h2{
    font: 3.5rem 'Saira Condensed', sans-serif;
    margin:0 0 3% 0;
    text-align: center;
    color:white;
    text-transform: uppercase;
}
#container3 a{
    color:#333;
    font:bold 1.3rem 'Source Sans Pro', sans-serif;
    margin:0;
    text-align: center;
    text-decoration: none;
}
#link a, #link3 a{
    padding:1% 30%;
}
#link2 a{
    padding:1% 40%;
}
#services{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.menuItems > img{
    width:100%;
    margin:0;
    height:224px;
    box-shadow: 8px 8px 5px rgb(30, 30, 30);
}
button{
    width: 100%;
    border-radius: 0;
    height:2em;
    font:bold 1.4rem 'Saira Condensed', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin:0 0 5% 0;
    background-color: #DCDA3C;
    align-items:center;
    cursor: pointer;
    transition: 0.4s ease;
}
button:hover{
  background-color: white;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}
#container3 p{
    font: 1.15rem 'Saira Condensed', sans-serif;
    letter-spacing: 0.05em;
    line-height: 2em;
    text-align: center;
    color:white;
    text-align: center;
    margin-top:1%;
}
.menuItems{
    width:25%;
}
#logo{
    background: url(cover.png) no-repeat top center;
    background-size:cover;
    height:2.5em;
}
#logo img{
    width:100%;
}
#contact{
    padding:1% 5% 5% 5%;
    background-color: white;
    font-family: 'Source Sans Pro', sans-serif;
}
#contactHeading{
  font: 2rem 'Saira Condensed', sans-serif;
  text-transform: uppercase;
  margin: 3% 0;
}
.row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: center;
    justify-content: stretch;
    width:100%;
    /* opacity: 0.9; */
  }
.btns{
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
  .form{
    width: 100%;
    margin: 0 5% -3% 0;
    display: inline-block;
    background-color: white;
  }
  form {
    width:100%;
    margin:0;
    background-color:white;
  }
  form input{
    width:46.9%;
    margin-bottom: 0.5%;
    height:2.5em;
    font-family:'Handlee', sans-serif;
    border-color:rgb(29, 29, 29);
    border-width: 1px;
    font-size:1.1rem;
    padding-left: 2%;
  }
  #contact-name{
    width:96.8%;
    padding-left: 2%;
  }
  textarea{
    width: 97.3%;
    height:10em;
    font-family:'Handlee', sans-serif;
    color:black;
    border-color:rgb(29, 29, 29);
    border-width: 1px;
    font-size: 1.1rem;
    margin-bottom:0;
    padding-left: 1.5%;
  }
  .form li{
    list-style-type: none;
    display: inline;
    margin:0 0 0 10%;
  }
  .form li input{
    width:100px;
    margin:0;
    background-color:#DCDA3C;
    color:rgb(41, 40, 40);
    font-size:1.05rem;
    border-radius: .5em;
    border:2px double #DCDA3C;
    cursor: pointer;
    opacity:2;
    font-weight: bold;
  }
  .form li input:hover{
    background-color:rgb(41, 40, 40);
    color:white;
    border-color: white;
  }
  .contactInfo{
    width:100%;
    display:inline-block;
    margin: 4% 0 0 0;
    /* animation:slide 6s infinite; */
    overflow: hidden;
  }
  .contactBox{
    margin-bottom:5%;
    height:100%;
    color:#0B5351;
    width: 100%;
  }
  .contactBox h4{
    font:1.5rem 'Saira Condensed', sans-serif;;
    display: inline;
    color: rgb(41, 40, 40);
    margin-bottom: 0;

  }
  .contactBox p{
    font:1.2rem 'Saira Condensed', sans-serif;;
    border-bottom: 2px solid rgb(41, 40, 40);
    padding:3% 0 5% 0;
    color:rgb(41, 40, 40);
    font-weight: bold;
    margin-top: 0;
  }
  .contactBox p > a{
    color:rgb(41, 40, 40);
    font-weight: bold;
  }
  .contactBox p > a:hover{
    color:#778FA9;
  }
footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
    font:1rem 'Source Sans Pro', 'sans-serif';
}
.hidden{
    display:none;
}
#copy{
    font-size: 1rem;
    width:400px;
}
@media screen and (max-width:1220px){
    #container2 h2{
        margin-bottom:1%;
        font-size: 4rem;
    }
    #about{
        width:60%;
        align-items: center;
    }
}
@media screen and (max-width:1200px){
    #about{
        width:80%;
    }
    #container3 a{
        padding:0;
    }
}
@media screen and (max-width:1136px){
    #contact-phone, #contact-email{
        width: 46.8%;
    }
}
@media screen and (max-width:1043px){
    #contact-phone, #contact-email{
        width: 46.6%;
    }
}
@media screen and (max-width:1000px){
    #logo{
        height:7em;
    }
    #container2 > img{
        display: none;
    }
}
@media screen and (max-width:896px){
    #contact-phone, #contact-email{
        width: 46.5%;
    }
}
@media screen and (max-width:860px){
    #services{
        flex-direction: column;
        align-items: center;
    }
    .menuItems{
        width:60%;
    }
    .menuItems > img{
        width:100%;
        margin:0;
    }
    button{
        width: 100%;
        border-radius: 0;
        height:2em;
        font:bold 1.25rem 'Source Sans Pro', sans-serif;
        margin:0 0 5% 0;
    }
    h6{
        font:1rem 'Source Sans Pro', sans-serif;
        padding:4% 0 2% 0;
        margin:2% 1% 0 0;
    }
    span{
        font: 1rem 'Source Sans Pro', sans-serif;
        padding:4% 0 2% 0;
        margin:2% 1% 0 0;
    }
    .onScroll{
        animation:slide 4s;
    }
    @keyframes slide{
        0%{margin-right:-1200px;}
        20%{margin-right:-1200px;}
        35%{margin-right:0px;}
      100%{margin-right:0px;}
      }
      #contact{
        flex-direction: column;
        height:fit-content;
        align-items: center;
        justify-content: center;
    }
    #contact > section{
        width:100%;
    }
    #contact{
        padding:1% 5% 5% 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #contact-phone, #contact-email{
        width: 100%;
    }
    #contactHeading{
        font-size: 1.5rem;
        margin:5% 0 0 0;
    }
    .row {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: center;
        justify-content: stretch;
        width:100%;
        /* opacity: 0.9; */
      }
    .btns{
        width:40%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        margin-left:30%;
    }
      .form{
        width: 60%;
        margin: 5% 5% -3% 5%;
      }
      form {
        width:100%;
        margin:0;
        background-color:white;
      }
      form input{
        width:100%;
        margin-bottom: 0.5%;
        height:2.5em;
        font-family:'Handlee', sans-serif;
        border-color:rgb(29, 29, 29);
        border-width: 1px;
        font-size:1.1rem;
        padding-left: 2%;
      }
      #contact-name{
        width:100%;
        padding-left: 2%;
      }
      textarea{
        width: 100.5%;
        height:10em;
        font-family:'Handlee', sans-serif;
        color:black;
        border-color:rgb(29, 29, 29);
        border-width: 1px;
        font-size: 1.1rem;
        margin-bottom:0;
        padding-left: 1.5%;
      }
      .form li{
        list-style-type: none;
        display: inline;
        margin:0 0 0 10%;
      }
      .actions{
          margin-left:25%;
      }
      .form li input{
        width:100px;
        margin:0;
        background-color:#DCDA3C;
        color:rgb(41, 40, 40);
        font-size:1.05rem;
        border-radius: .5em;
        border:2px double #DCDA3C;
        cursor: pointer;
        opacity:2;
      }
      .form li input:hover{
        background-color:rgb(41, 40, 40);
        color:white;
        border-color: white;
      }
      .contactInfo{
        width:60%;
        display:inline-block;
        margin: 10% 0 0 0;
        overflow: hidden;
      }
      .contactBox{
        margin-bottom:5%;
        height:100%;
        color:#0B5351;
      }
      .contactBox h4{
        font-size:1.5rem;
        display: inline;
        color: rgb(41, 40, 40);
        margin-bottom: 0;
      }
      .contactBox p{
        font-size:1.2rem;
        border-bottom: 2px solid rgb(41, 40, 40);
        padding:3% 0 5% 0;
        color:rgb(41, 40, 40);
        font-weight: bold;
        margin-top: 0;
      }
      .contactBox p > a{
        color:rgb(41, 40, 40);
        font-weight: bold;
      }
      .contactBox p > a:hover{
        color:#778FA9;
      }
    footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:white;
        font:1rem 'Source Sans Pro', 'sans-serif';
        width:100%;
    }
    #copy{
        width:35%;
    }
}
@media screen and (max-width:696px){
    #copy{
        width:40%;
    }
}
@media screen and (max-width:560px){
    a {
      color:#0B5351;
    }
    .main img{
        width:100%;
    }
    #container2  h2{
      margin: 0;
      font-size: 4em;
    }
    #container2 p{
        font:1rem Arial, sans-serif;
        line-height: 1.5em;
    }
    #logo{
        background: url(cover.png) no-repeat top top;
        background-size:cover;
        height:2em;
    }
    #services{
        flex-direction: column;
        justify-content: flex-start;
        margin:0;
    }
    .menuItems{
        width: 80%;
        margin:0;
    }
    #container3 > h3{
        font-size:2em;
    }
    #container3 > h2{
        font-size: 4em;
    }
    .menuItems > img{
        width:100%;
        margin:0;
    }
    button{
        width: 100%;
        height:2em;
        border-radius: 0;
        margin:0 0 10% 0;
    }

    #final{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin:5% 0;
    }

/*testimonials */
#testimonials > h3{
  font-size: 2rem;
}
.customerReviews{
  width:90%;
}
.customerReviews:first-child, .customerReviews:nth-child(3){
  margin-right: 0;
}
.customerReviews > p{
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  line-height: 20px;
}
.customerReviews > span{
  font:bold 1rem Arial, sans-serif;
  margin-top:1%;
}

/*contact section*/

    #contact{
        flex-direction: column;
        height:fit-content;
        align-items: center;
        justify-content: center;
    }
    #contact > section{
        width:100%;
    }
    #contact{
        padding:1% 5% 5% 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #contactHeading{
        font-size: 1.5rem;
        margin:5% 0 0 0;
    }
    .row {
        display: flex;
        flex-direction: colum;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: center;
        justify-content: stretch;
        width:100%;
        /* opacity: 0.9; */
      }
    .btns{
        width:40%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        margin-left:30%;
    }
      .form{
        width: 80%;
        margin: 5% 5% -3% 5%;
      }
      form {
        width:100%;
        margin:0;
        background-color:white;
      }
      form input{
        width:100%;
        margin-bottom: 0.5%;
        height:2.5em;
        font-family:'Handlee', sans-serif;
        border-color:rgb(29, 29, 29);
        border-width: 1px;
        font-size:1.1rem;
        padding-left: 2%;
      }
      #contact-name{
        width:100%;
        padding-left: 2%;
      }
      textarea{
        width: 100.5%;
        height:10em;
        font-family:'Handlee', sans-serif;
        color:black;
        border-color:rgb(29, 29, 29);
        border-width: 1px;
        font-size: 1.1rem;
        margin-bottom:0;
        padding-left: 1.5%;
      }
      .form li{
        list-style-type: none;
        display: inline;
        margin:0 0 0 10%;
      }
      .actions{
          margin-left:25%;
      }
      .form li input{
        width:100px;
        margin:0;
        background-color:#DCDA3C;
        color:rgb(41, 40, 40);
        font-size:1.05rem;
        border-radius: .5em;
        border:2px double #DCDA3C;
        cursor: pointer;
        opacity:2;
      }
      .form li input:hover{
        background-color:rgb(41, 40, 40);
        color:white;
        border-color: white;
      }
      .contactInfo{
        width:80%;
        display:inline-block;
        margin: 10% 0 0 0;
        overflow: hidden;
      }
      .contactBox{
        margin-bottom:5%;
        height:100%;
        color:#0B5351;
      }
      .contactBox h4{
        font-size:1.5rem;
        display: inline;
        color: rgb(41, 40, 40);
        margin-bottom: 0;
      }
      .contactBox p{
        font-size:1.2rem;
        border-bottom: 2px solid rgb(41, 40, 40);
        padding:3% 0 5% 0;
        color:rgb(41, 40, 40);
        font-weight: bold;
        margin-top: 0;
      }
      .contactBox p > a{
        color:rgb(41, 40, 40);
        font-weight: bold;
      }
      .contactBox p > a:hover{
        color:#778FA9;
      }
    footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:white;
        font:1rem 'Source Sans Pro', 'sans-serif'
    }
    .hidden{
        display:none;
    }
    #copy{
        font-size:0.8rem;
        width:40%;
    }
}