/* Head Classes */

body{
    

  }

/* Classes */

.notNav{
  display: grid;
  grid-template-rows: 25rem 25rem 25rem 25rem;
  gap: 0px;
  margin: 0;
}


 /* Style the navigation menu */
 .topnav {
  overflow: hidden;
  background-color: rgb(255, 255, 255);
padding: none;
margin:none;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  font-family: "Nunito Sans";
  font-size: 1.3em;
  color: white;
  padding: 10px 16px;
  float: left;
  text-decoration: none;
  text-align: center;
  
  display: block;

 
}

.photo img{
  border-radius: 0px 25px 0px 25px;
  height: 17rem;
  width: 27rem;
  margin-top: 2.2rem;
  
}

/* Style the hamburger menu */
.topnav .icon {
  background-color: #B6DC76;
  display: none;
  margin-top: 1rem;
  height: 2rem;
  width: 2rem;
 border-radius: 5px;
}

.icon i {
  font-size: 2rem;
}

.topnav .icon:hover {
  background-color: #ddd;
  color: #B6DC76;
}


.textStyle h2{
    font-family: "Farro";
    font-size: 1.5rem;
    margin-top: 5%;
    margin-left: 20%;
   text-align: center;
   line-height: 3rem;
   width:26rem;

}

.textStyle p{
    font-family: "Nunito Sans";
    font-size: 1.3em;
}

.textStyle tr{
    font-family: "Nunito Sans";
    font-size: 1.3em;
    color: white;
}

.textStyle2 h2{
  font-family: "Farro";
  font-size: 1.5rem;
  margin-top: 10%;
 text-align: center;
 line-height: 3rem;
}

.textStyle2 p{
  font-family: "Nunito Sans";
  font-size: 1.3em;
}

.textStyle2 tr{
  font-family: "Nunito Sans";
  font-size: 1.3em;
  color: white;
}

.shadow{
    background-color: #B6DC76;
    box-shadow: inset 0px 0px 3px 5px #88a852;
    
    width: 100%;
    height: 100%;
   
}

.logoSpace{
    margin:auto;

}

.logoSpace img{
    padding-right: 4rem;
    padding-left: 1rem;
}

.navBar{   
    text-decoration: none;
    padding-top: .3rem;

} 

a {
    color: white;
    text-decoration: none; /* no underline */
  }

.topnav a.active {
    background-color: #76abdc;
    color: rgb(255, 255, 255);
}
  
  /* Style the active link (or home/logo) */
.active {
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
} 


.navContact{
    background-color: #c56d6d;
    color: rgb(255, 255, 255);
    padding: 5px 0px;
    text-align: center;
    margin-top: 1rem;
    
    text-decoration: none;
    font-family: "Farro";
    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    height: 1.4rem;
    width: 9rem;
    font-size: 16px;
}

.navStyle{
    text-decoration: none;
box-shadow: 10px 10px;
}

.navLi{
    display: inline;
    text-decoration: none;
}


.buttonStyle{
    display: inline;
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
   
    text-align: center;
    
    text-decoration: none;

    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    margin: 15px 10px;
    

}

.buttonStyle2 {
    display: inline;
    background-color: #dc7676;
    color: #ffffff;
  
    text-align: center;
    
    text-decoration: none;
  
    border-radius: 14px;
    border:2px solid #dc7676;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    margin: 15px 10px;
    
  
  
  }

.heroBox{
    background-color: #fcfcfc;
    
    padding-left: 10rem;
    border-radius: 90px 0px 0px 90px;
    margin-top: 1.25rem;
    margin-left:10%;
    height: 90%;
   
}

.heroBox2{
    background-color: #fcfcfc;
    
    
    margin:auto;
    height: 90%;
    width: 100%;
   
}

.heroBoxg{
    background-color: #B6DC76;
   
    padding-left: 3rem;
    margin:auto;
    height: 90%;
    width: 100%;
   
}

.heroBoxg2{
    background-color: #B6DC76;

    padding-left: 10rem;
    border-radius: 0px 90px 90px 0px;
    margin-top: 1.25rem;
    margin-right:10%;
    height: 90%;
   
}

.heroBox h2{
    font-size: 3em;
    margin-left: 7%;
    width: 30rem;

}


.heroBoxp{

    margin-left: 10%;

}

.highlightBox{
    background-image: url('/images/backgroundCard-1.svg');
    margin: auto;
    margin-left: 4rem;  
    background-repeat: no-repeat;
    width: 95%;
    height: 95%;
   
    
}

.highlightBox h2{
    color: white;
    margin-left: 4rem;
    margin-top: .3em; 
    margin-bottom: 0;
    font-size: 2em; 

}

.highlightBox p{    
    color: white;
    margin-top: 0.5em;
    width:14em;
    margin-left: 4rem; 
     
}

.highlightBox img{
    height: 8em;
    width: 8em;
    margin: 3em 3em 0;
}

.contactButton{

    background-color: #c56d6d;
    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    margin-left:30%;
    margin-top: 3rem;
    
    height: 3em;
    width: 20em;

}

.contactButton2{

  background-color: #c56d6d;
  border-radius: 14px;
  border:2px solid white;
  box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
  margin-left:30%;
  margin-top: 3rem;
  
  height: 3em;
  width: 20em;

}

.contactButton p{
    text-align: center;
    margin: 3%;
    font-family: "Farro";
    
    color: rgb(255, 255, 255);
    
}

.contactButton2 p{
  text-align: center;
  margin: 3%;
  font-family: "Farro";
  
  color: rgb(255, 255, 255);
  
}



/* IDs */

#nav{
    display: grid;
    box-shadow: 10px 10px;
    background-color: rgb(255, 255, 255);
    
  }


#section1{
    display: grid;
    background-color: #B6DC76;
    grid-template-columns: 1fr 1fr;
    
}

#section2{
    display: grid;
    background-color: #ffffff;
    grid-template-columns: 1fr 1fr;
    
}

#highlights{
    display: grid;
    background-color: rgb(255, 255, 255);
    grid-template-columns: 1fr 1fr 1fr;
}

#boxes{
   
    background-color: #B6DC76;
   
    
}

.footer{



}

.footer li{

  display: inline;
  list-style-type: none;
  padding-right: 2rem;
}

.footerStyle{
  font-family: "Nunito Sans";
  color: #88a852;
  font-size: 1rem;
}

.footerActive{
  text-decoration: underline;

}



/* Media Query */


  
/* shrink buttons before mobile view */
@media screen and (max-width: 1135px) {

    .topnav a {
      font-family: "Nunito Sans";
      font-size: .8em;
      color: white;
      padding: 10px 16px;
      float: left;
      text-decoration: none;
      text-align: center;
      
      display: block;
  
     
    }
  
    .buttonStyle{
  
      margin: 20px 10px;
      
  
  }
  
  .buttonStyle2{
  
    margin: 20px 10px;
    
  
  
  }

  body{
    
   
    grid-template-rows: 4rem 20rem 20rem 20rem 20rem;
 
  }

  #section1{

    grid-template-columns: 1fr;
    
}

#section2{
  background-color: #ffffff;
    grid-template-columns: 1fr;
    
}

.heroBox{
 display: none;
}

.heroBoxg2{
display: none;

}

.heroBox2{
margin:auto;

}

.heroBox2 h2{

margin-left: 2rem;
}

.heroBoxg{
background-color: #ffffff;
}

.contactButton{

margin:  auto;

}

.contactButton p{
text-align: center;
margin: 3%;
font-family: "Farro";

color: rgb(255, 255, 255);

}

.contactButton2 p{
text-align: center;
margin: 3%;
font-family: "Farro";

color: rgb(255, 255, 255);

}


.textStyle h2{
margin-top: 5rem;
margin-left: 20%;
font-size: 1.5rem;
width: 40rem;
}

.textStyle2 h2{
margin-top: 5rem;
margin-left: 20%;
font-size: 1.5rem;
width: 40rem;
}
  
  }

  @media screen and (max-width: 1025px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }



  
}
  
  
  /** mobile view
  */
  
  @media screen and (max-width: 955px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }

    .textStyle h2{
      margin-top: 3rem;
      margin-left: 12%;
      font-size: 1.3rem;
      width: 20rem;
    }


    .textStyle2 h2{
      margin-top: 3rem;
      margin-left: 1%;
      font-size: 1.3rem;
      width: 20rem;
    }
  
    .contactButton {
  
      width: 13rem;
      margin-left: 25%;
    
      
    }

    .contactButton2 {
  
      width: 13rem;
      margin-left: 15%;
    
      
    }


}
  /** smallest mobile view
  */
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .logoSpace{
  
      
  }
  }


  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 975px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }


    
  } 
  
       /** THE END*/

   @media screen and (max-width: 441px){

    .footer li{

  display:inline-table;
  list-style-type: none;
  padding-right: 3.5rem;
  
  padding-bottom: .6rem;
}


   }