/*HOME - HEALTHEX DESIGN BRIEF*/
:root {
  --deepspacesparkle: rgb(56,95,113);
  --onyx: rgb(50,55,59);
  --green: rgb(112,181,131);
  --sunray: rgb(232,211,51);
  --blue: rgb(84,182,209);
  --red: rgb(196,75,87);
  --mangolia: rgb(245,240,246);
}
/*CLASSES*/
.deepspacesparkle{color: var(--deepspacesparkle);}
.onyx{color: var(--onyx);}
.mangolia{color:var(--mangolia);}
.green{color: var(--green);}
.white{color:white;}
.left-align{text-align:left;}
.smaller-image{
width: 150px;
height: 40px;
margin:auto;
}

html{
  scroll-behavior: smooth;
  font-family: Raleway, Open Sans;
  overflow-x: hidden;
  width:100%;
}
ul {
  list-style: none;
}
a{
  text-decoration: none;
}
h1{
  width:100%;
  height: 50px;
  text-align:center;
  font-size: 3rem;
  padding-top:70px;
  padding-bottom: 25px;
  font-family:sans-serif;
  margin:auto;
}
form{
  text-align: center;
}
textarea{
  border-radius:7px;
  height: 100px;
  width:550px;
  resize: none;
}
input{
  width:550px;
  height:25px;
  border-radius: 10px;
  padding:2px;
}


/*NAVIGATION*/
nav {
  display: flex;
  justify-content: space-around;
  width: 102%;
  background: #ffcd24;
  top:0;
}
h2{
  font-size:30px;
  font-family: sans-serif;
}
.navlist {
  list-style: none;
  text-decoration: none;
}
.navlist a {
  font-size: 25px;
  padding: 15px;
  color: black;
  font-weight: bolder;
}
li{
  display:inline;
}
a:hover{
  background: #135F72;
  border-radius: 5px;
  color:white;
  font-family: sans-serif;
  font-weight:normal;
}

/*WEBSITE IDS*/
#logo2:hover{
  background: none;
}
#intro-main{
  background-image: url("jumpwithjoy.jpeg");
  width:100%;
  background-size:99%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  justify-content: space-evenly;
  padding-right:20px;
}
.stethimg{
  width:400px;
  height:500px;
  padding-left:20%;
  padding-top:1%;
  padding-bottom: 1%;
}
.thumbimg{
  width:80%;
  height:500px;
  padding-top:5%;
  padding-left:15%;
}
.contacts{
  padding:3%;
  background:#8ec4e8;
  margin-left:20%;
  margin-right:20%;
  margin-bottom:1%;
}
#intro{
  padding:220px;
  color:black;
  margin-bottom:auto;
  background: white;
  opacity:0.85;
  width:300px;
  height:200;
}
.whys{
  padding-left:5%;
  padding-right:5%;
}
#covid{
  text-align: center;
  margin-bottom:auto;
  padding:5%;
  background: linear-gradient(to right, #2aabe4,#1ea6e3);
}
#covid2{
  font-size:20px;
  padding-left: 20px;
  padding-right: 20px;
  color:white;
  text-align: left;
}
#covid3{
  color:white;
  text-align: left;
}
#self-assess{
  font-size: 20px;
  padding:5%;
  margin-bottom: auto;
  border: 5px solid #70b583;
  border-radius: 10px;
}
#self-assess:hover{
  background: #70b583;
}
#googletest, #vaccines{
  color:white;
  border-radius: 20px;
  border-color: #135F72;
  width:250px;
  height:50px;
  font-size: 22px;
  padding:10px;
}
#googletest:hover, #vaccines:hover{
  color:white;
  width:250px;
  height:50px;
  border-radius: 10px;
  background: #70b583;
}
#frontline{
  margin-top:auto;
}
#covid3, #docs, #whyhealthex{
  font-size:18px;
  padding-left: 20px;
  padding-right: 25px;
  line-height: 27px;
}
#whyhealthex{
  padding-right:10%;
}
#licensed, #verification{
  font-size:18px;
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
  line-height: 27px;
}
#one_tap, #best{
  padding-left: 10px;
  padding-right: 10px;
  text-align:center;
}
#why_us{
  color:black;
  background:#135f72;
  padding-bottom: 1%;
}
#online_visits{
  text-align: center;
  background: #9dc8e4;
}
#boxes2{
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  justify-content: space-evenly;
  padding:20px;
  padding-bottom:40px;
}
#sign_up, #bookapp, #consult, #planaction, #revisit, #feelbetter{
  background-color: #135F72;
  padding:20px;
  width:300px;
  color:white;
  font-size:20px;
}
#boxes{
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  justify-content: space-evenly;
  padding:20px;
  padding-right:1%;
  margin-top:auto;
  background: #2aabe4;
}
#urgent_care, #men_health, #women_health, #counseling, #child_health, #viewProd{
  background-color: #135F72;
  color: white;
  width:350px;
  text-align: center;
}
#contact{
  text-align: center;
  color:black;
  background:#2aabe4;
  padding-bottom:70px;
  margin-bottom:-50px;
}
#form{
  width:700px;
  background:#ffcd24;
  margin:auto;
  color: #135f72;
  padding: 20px;
  font-weight: bolder;
  font-family: sans-serif;
}
#fname, #lname, #email, #pnumber, #comments{
  padding:5px;
}

/*BUTTONS*/
.getintouch{
  color: #135F72;
  border-radius: 20px;
  border-color: #135F72;
  width:200px;
  height:40px;
  font-size: 20px;
}
.getintouch:hover{
  background: #135f72;
  color:white;
}
.getintouch2{
  color: black;
  border-radius: 10px;
  width:200px;
  height:30px;
  font-size: 22px;
  padding:10px;
  font-weight: bolder;
  margin:auto;
  text-align:center;
  border: 5px solid #135F72;
}
.getintouch2:hover{
  color:white;
  width:200px;
  height:30px;
}
.prod{
  font-size: 15px;
  border-radius: 10px;
  background-color: var(--green);
  border-color: var(--deepspacesparkle);
  color: white;
  width:130px;
  height:24px;
}
.prod:hover{
  background-color: var(--green);
  color: white;
}
/*GRIDS*/
#grid{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  justify-content: space-evenly;
  padding-right:5%;
}
#grid3{
  display: grid;
  grid-template-columns: 300px auto auto auto 300px;
  grid-template-rows: auto;
  justify-content: space-evenly;
}
#grid4{
  display:grid;
  grid-template-columns: 50% auto;
  grid-template-rows: auto;
}
#grid5{
  display:grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
}
/*FOOTER*/
footer{
  text-align: center;
  background:#135f72;
  color:white;
  padding-top:20px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:5px;
  margin-top:auto;
}
/*Media Queries*/
.topnav {
  background-color: #135F72;
  overflow: hidden;
  width:100%;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: var(--mangolia);
  color: black;
}
.topnav a.active {
  background-color: #135F72;
  color: white;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #grid{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    justify-content: space-evenly;
  }
  #docs, #licensed,#verification,#one_tap{
    font-size:18px;
    margin-left:-5%;
  }
  #sec1{
    margin:-5%;
  }
  #boxes2{
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto auto auto;
    justify-content: space-evenly;
    padding:20px;
    padding-bottom:40px;
  }
  #boxes{
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto auto auto;
    justify-content: space-evenly;
    padding:20px;
    margin-top:auto;
  }
  #form{
    width:90%;
    background:#ffcd24;
    margin:auto;
    color: white;
    padding: 1%;
  }
  .contacts{
    margin-left:5%;
    margin-right:5%;
  }
  input{
    width:120%;
    height:25px;
    border-radius: 10px;
    padding:2px;
  }
  textarea{
    border-radius:7px;
    height: 100px;
    width:120%;
    resize: none;
  }
  #intro-main{
    background-image: url("jumpwithjoy.jpeg");
    width:95%;
    background-size:100% 100%;
    display: grid;
    grid-template-columns: 0% auto;
    grid-template-rows: auto auto;
    justify-content: space-evenly;
    padding-right:5%;
    margin-right:5%;
  }
  #grid3{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto auto;
    justify-content: space-evenly;
  }
  #grid5{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto;
    justify-content: space-evenly;
  }
  #grid4{
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
  }
  .whys{
    padding-left:4%;
    padding-right:0%;
  }
  .stethimg{
    padding-left:5%;
    width:100%;
    height:100%;
    padding:1%;
    padding-right:1%;
    margin:1.5%;
  }
  #googletest{
    font-size:18px;
  }
  #intro{
    padding:220px;
    padding-right:6%;
    padding-left:2%;
    color:black;
    margin-bottom:auto;
    background: white;
    opacity:0.85;
    width:97%;
    height:200;
    margin-right:17%;
  }
  .thumbimg{
    width:100%;
    height:100%;
    padding:3%;
    margin-top:2%;
    margin-left:-1%;
  }
  label{
    font-size: 12px;
  }
  h1{
    width:100%;
    height: 100%;
    text-align:center;
    font-size: 3rem;
    font-family:sans-serif;
    margin:auto;
  }
}
@media screen and (min-width:1000px){
  #myTopnav{
    display:none;
  }
}
@media screen and (max-width:1000px){
  nav{
    display:none;
  }
}
/*HOVER*/
/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/*Counter*/
#counter{
  text-align: center;
  margin-bottom:auto;
  padding:3%;
  background: #70b583
}
#counts{
  background:#f4f4f4;
  margin:10%;
  font-family: sans-serif;
}
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}