/* Head Classes */

body{
    

  }

footer{
    background-color: #ffffff;
}

h1{
  font-family: "Farro";
}

h3{
  font-family: "Farro";
  font-size: 2em;
}

/* Classes */
.notNav{
    display: grid;
    grid-template-rows: 15rem 110rem;
    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;

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

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

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


.logoSpace{
    margin:auto;

}

.logoSpace2{
  margin:auto;

}


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

.photo img{
  margin-left: 6em;
  margin-top: 1rem;
  border-radius: 2px 20px 2px 2px;
  width: 25rem;
  height: 12rem;
  
}



.logoSpace2 img{

  height:auto;
  max-width: 80%;
  min-width: 30%;
  padding-left: 2rem;
}

.navBar{   
    
    padding-top: .3rem;

} 

.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{

box-shadow: 10px 10px;
}

.navLi{
    display: inline;
}



.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: 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: 10px 10px;
    
  
  
  }


.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);
  } 

  
  

.pgstyle{
    font-size: 1.2rem;
    line-height: 2rem;
}



.textStyle h2{
    font-family: "Farro";
    font-size: 2rem;
    
}

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

.textStyle 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%;
   
}

.subtitle{
    
    font-size: 1.5rem;
}

.imageSpace img{
   
    background-color: white;
    border-radius: 2px 20px 2px 2px;
    margin-left: 40%;
    height: 50rem;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
}



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

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

} 

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

.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{
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
    padding: 5px 22px;
    text-align: center;
    
    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);
    margin: 10px;
    font-size: 16px;

}

.heroBox{
  
   
}

.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: 2.6%;
    margin-right:10%;
    height: 90%;
   
}

.heroBox h1{
    font-size: 2em;
   margin-bottom: 0;

}


.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;
}


/* gallery start */

* {
  box-sizing: border-box;
  
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  width:50rem;
  margin: auto;

}


/* Hide the images by default */
.mySlides {
  display: none;
  margin: auto;
 
}

.mySlides img{


}


/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row{
  
margin-left: 20%;
}

/* Six columns side by side */
.column {
  float: left;
  width:10rem;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


/* IDs */

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



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

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

#boxes{
   
    background-color: #B6DC76;
   
    
}

#text{
    background-color: #ffffff;
    margin-top: 3rem;
    margin-left: 6rem;
    margin-right: 16rem;

}

.foot{
    background-color: #ffffff;
}

.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 */

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

  
  .heroBoxp{
    margin-left: 10%;
    width: 27rem;
  }
  
  .highlightBox{
    
    margin-left: 1rem;
    width: 350px;  
  }
  
  .highlightBox p{    
  
    width:12em;
    margin-left: 4rem; 
    font-size: 1.1em;
  }
  
  .highlightBox img{
    height: 6em;
    width: 6em;
  
  }
  
  }
  
    
  /* 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;
    }

    .imageSpace{
        display: none;
    }

    .heroBox h1{
        width: 34rem;
        margin-left: 15%;
        margin-top: 3rem;
    }
    
    .subtitle{
        margin-top: 5px;
        margin-left: 20%;
        width:30rem;
    }
    .heroBox h2{
      font-size: 3em;
      margin-left: 5%;
    
    }
      
    .photo{
      display: none;
    }
  
  }
    
    
    
    /** mobile view
    */
    
    @media screen and (max-width: 955px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
      .logoSpace{
    
        margin-left: 25%;
    }
  
    .profTable th {
      padding-top: 1em;
      padding-bottom: .9em;
      font-size: .8em;
    }    
  
    .heroBoxp{
  
      width: 24rem;
  
    }

    #text{
        margin-left: 4rem;
        margin-right: 4rem;
    
    }

    .heroBox h1{
     
      margin-left:2rem;
      font-size: 1.6rem;
    
  }

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


      #hero{
        display: grid;
        background-color: #B6DC76;
        grid-template-columns: 1fr;
        
      }
  
      .heroBox{
        border-radius: 25px 25px 25px 25px;
        width: 80%
      }
      
      .logoSpace{
    
        margin-left: 10%;
    }
  
    .highlightBox{
   
      margin-left: 15%;
      
      
    }
  
    .logoSpace2{
    
      display: none;
    }
  


    .heroBoxp{
      width: 22rem;
      margin-left: 5%;
  
  }
  

  
  .contactButton{
  
    width: 15em;
    margin-left:4rem;
  
    
  }
  
  .heroBox h1{
        
    margin-left: 15%;
    width: 20rem;
}

  .subtitle{
    margin-top: 5px;
    margin-left: 20%;
    width:20rem;
}  
  


}
    /* 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;
      }

      .notNav{
        display: grid;
        grid-template-rows: 15rem 135rem 5rem;
        gap: 0px;
        margin: 0;
    }
    
        .footer li{

  display:inline-table;
  list-style-type: none;
  padding-right: 3rem;
  
  padding-bottom: 1rem;
}
  
    } 
    

      /** THE END*/

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

    .footer li{

  display:inline-table;
  list-style-type: none;
  padding-right: 3rem;
  
  padding-bottom: 1rem;
}


   }