/***************** DESKTOP *****************/
@media only screen and (min-width:600px){
    
    
*{
margin: 0;
padding: 0;
}

/* FROM ABIGAIL for header */

header .webNav{ 
        background-color: #172533;
        display: flex; /*flex allows the text to come up right next to the logo*/
        padding: 15px;
        align-items:center; /*this centers the logo and text along the vertical axis*/
        height: 70px;
    }

    nav{
        width: 100%;
        display: flex;
        justify-content: space-between; /*space-between puts space between restaurants/service provider links and the other subpage links*/
    }

    .logo-noRoopairs{ /*this controls the sizing of the logo that's just the kangaroo head and acts also as a link*/
        height: 50px;
        margin-left: 15px;
        margin-right: 20px;
        margin-top: 3px; /*this specific margin keeps the logo in the exact same place as the initial page... SO if you were to click it to go to index.html the kangaroo head wouldn't shift up or down*/
    }

    ul:first-child{ /*this controls RESTAURANT and SERVICE PROVIDER links*/
        display: flex;
        flex-direction: row;
        justify-content: flex-start; /*this keeps these links at the left of the nav closest to the logo*/
        min-width: 319px;
        font-family: 'nunito-sans',sans-serif;
        font-style: normal;
        font-weight: 400;
    }

    ul:nth-child(2){
        display: flex;
        justify-content: flex-end; /*this keeps these subpage links at the right of the nav farthest from the logo*/
        min-width: 434px;
        font-family: 'nunito-sans', sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 13px;
        margin-right: 10px;
    }

    nav li{
        flex-direction: row;
        list-style-type: none;
        margin: 4px;
    }

    nav a{
        text-decoration: none; /*this takes away the underline on the links*/
        margin: 10px;
        color: white;
    }

    nav .greenHover:hover{
         color: #27CDA3;
     }
    
    nav .yellowHover:hover{
         color: #febd2c;
    }

    nav a:hover{
         color: #27CDA3;
     }
    
    #currentPage{
        color: #febd2c;
        font-weight: 600;
    }


    header .mobileNav{
        display: none;
    }

/* END OF HEADER */


main{
    display: flex;
    min-height: 100vh;
    flex-direction:column;
    width: auto;
    }

#firstscreen { /* part of page you see when you open restaurant site */
    display: flex;
    min-height: 600px;
    height: 100vh;
    width: 100vw;
    flex-direction:row;
    background:linear-gradient(0deg, rgba(31,43,53,0.8), rgba(31,43,53,0.8)), url(images/service-BG.jpg); /* puts overlay over image */
    background-size: cover;
    }

#opening{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    }

#pic{
    display: flex;
    align-items: center;
    justify-content: left;
    }

.pic{
    max-height: 400px;
    margin-left: 10%;
    align-items: left;
    justify-content: center;
    flex-direction:row;
}

#titles{ /* text that goes next to app image */
    display: flex;
    flex-direction: column;
    min-width: 400px;
    max-width: 550px;
    margin: 10%;
    align-items: left;
    justify-content: left;
    flex-direction: column;
    }
    
#yellow{
    color: #febd2c;
    font-weight: 900; 
    }

    #titles h1{
        font-family: nunito-sans, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(2.2vw);
        color: white;
        }

    #titles h2{
        font-family: nunito, serif;
        font-weight: 200;
        font-style: normal;  
        font-size: calc(1.2vw);
        color: white;
        }

.chat{
    max-height: 100px;
    width: auto;
    position: fixed;
    right: 10px;
    bottom: 40px;
    z-index: 10;
    }


/* BEGINNING of "who we are" section */
#weare {
    background-color: #ECF0F1;
    width: 100vw;
    }

#whoweare {
    width: 80vw;
    display: flex;
    margin: auto;
    padding: 80px;
    flex-direction: row;
    align-content: center;
}

#whowe{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80vw;
    }

    h3{
        font-family: nunito, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(2.3vw);
        color: #2E333A;
        opacity: .56;
        padding: 1vw 0vw;
        }
    
    h4{
        color: #2E333A;
        font-family: nunito, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(2.8vw);
        padding: 4vw 0vw 1vw 0vw;
        margin-left: 0;
        }

/* to get the "FREE" to be teal */    
  #free {
        color: #FEBD2A;
        }

    p{
        color: #2E333A;
        font-family: nunito-sans, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(1.8vw);
        padding: 1vw 0vw;
        }
    
    /* this is the image in the "who we are" section */
    #whoweare img {
        width: auto;
        height: 20vw;
        background: transparent;
        float: right;
        padding: 7vw;
        }
/* END of "who we are" section */


/* BEGINNING of "our services" section */

#ourservices {
    display: flex;
    margin: auto;
    width: 80vw;  
    padding: 80px;
    flex-direction: column;
    align-content: flex-start;
    background-color: white;
    }
    

    #ourservices h5{
        color: #2E333A;
        font-family: nunito, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(2.8vw);
        margin-top: 20px;
        text-align: center;
        }

#sections{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-top: 12vh;
    }

#sections h5{
    font-size: calc(1.7vw);
    }

#sections p{
    font-size: calc(1.1vw);
    }

    .section1, .section2, .section3 {
        width: 12vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #ECF0F1;
        padding: 4vw 4vw 2vw 4vw;
        margin: 6vh auto 0vh auto;
        }

    /* how do we make these aligned horizontally?? */
 #sections img {
        width: auto;
        height: 8vw;
        margin: auto;
        margin-top: -130px;
        margin-bottom: 0px;
    }

/* END of "our services" section */



/* BEGINNING of "how it works" section */
#howitworks{
    width: 100%;
    position: relative;
    background-color: #ECF0F1;
    }

    #howitworks .sliderImg {
        width: auto;
        margin: auto;
        margin-bottom: 10vh;
        margin-top: 1vh;
        margin-left: 12vw;
        }

#subtitle{
    display: flex;
    flex-direction: column;
    align-content: center;
}

    #subtitle h3, #subtitle h4{
        width: 80vw;
        margin: auto;
        margin-left: 22vh;
        }
        
    #subtitle h3{
            margin-top: 14vh;
            }
    #subtitle h4{
            padding: 0;
            }

/* BEGINNING of slider */
/* code adjusted from http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */
.slider{
	width: 40vw; /*Same as width of the large image*/ /*Instead of height we will use padding */
	padding-top: 10vh; /*That helps bring the labels down */
	padding-bottom: 25vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

#step {
    display: flex;
    width: 50vw;
    margin-left: 10vmax;
    }

#step p{
    font-family: nunito-sans, sans-serif;
    font-weight: 300;
    padding: .75vw;
    color: #707070;
    font-size: 2vh;
    }

#step p:first-child{
    color: ;
    font-size: 4.5vw;
    font-family: nunito-sans, sans-serif;
    font-weight: 700;
    font-style: normal;
    float: left;
    margin-top: -2vh;
    }

#second{
    font-size: 2.5vh;
    font-family: nunito-sans, sans-serif;
    font-weight: 600;
    font-style: normal;
    }


/* to add transitions */
.slider>img{
	position: absolute;
    margin-top: 10px;
    left: 0;
    padding-left: 30px;
    transition: all 0.5s;
    height: 50vw;
    max-height: 600px;
    min-height: 250px;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails */
	cursor: pointer;
	transition: all 0.5s;
    margin-left: 0;
    align-content: center;
}

.slider label img{
	display: block;
}

.slider input[name='slide_switch']:checked+ label p{
    color: #5ACB80;
    font-weight: 700;
    font-size: 3.4vh;
    }

.slider input[name='slide_switch']:checked+ label p:first-child{
    text-decoration: underline;
    text-decoration-color: #FEBD2A;
    }


/*Clicking any thumbnail now should change its opacity(style)*/ 

/*Time to work on the main images */
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size. On click the images will be displayed at normal size to complete the effect */

.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}

/*Clicking on any thumbnail now should activate the image related to it*/
/* code adjusted from http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */

/* END of slider */


/* END of "how it works" section */



/* BEGINNING of "our benefits" section */   
/* adjust code to center benefits with space in between and on the sides*/
#ourbenefits {
    display: flex;
    margin: auto;
    width: 100vw;
    height: 85vh;
    background-color: #ECF0F1;
    }
    
    .bottom { /* its actually the top part though */
        display: flex;
        flex-direction: column;
		background-color: white;
        width: 100%;
        height: 42vh;
        margin-bottom: 0px;
        position: relative;
        }

    #ourbenefits h3{
        width: 80vw;
        margin: auto;
        margin-top: 14vh;
        margin-left: 22vh;
        }

#benefits {
    height: 50vh;
    width: auto;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-top: 28vh;
    padding-bottom: 30vh;
    min-height: 100px;
    overflow: visible;
    margin-bottom: 20px;
    }

 #benefits h5{
        color: #2E333A;
        font-family: nunito, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(1.6vw);
        text-align: center;
        width: 15vw;
        }

#benefits p{
    font-size: calc(1.1vw);
    }

    .benefit1, .benefit2, .benefit3 {
        width: 14vw;
        min-width: 150px;
        display: flex;
        flex-direction: column;
        padding: 4vw 5vw 1vw 5vw;
        margin: 1vh auto 2vh auto;
        }
    



 #benefits img {
        width: auto;
        height: 8vw;
        margin: auto;
        margin-top: -80%;
        margin-bottom: 10px;
        }
/* END of "our benefits" section */


/* BEGINNING of "connect with us" section */

#connectwithus {
    display: flex;
    margin: auto;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right, #5FCA83, #21CFA6);
    }

#connect{
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: none;
    text-align: center;
    margin-bottom: 10vh;
    margin-top: 10vh;
    }

    h1{
        font-family: nunito, serif;
        font-weight: 700;
        font-style: normal;
        font-size: calc(2.2vw);
        color: white;
        padding-bottom: 10px;
        }

#connect p{
    font-size: calc(1.1vw);
    padding: 0;
    color: white;
    }

#form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30vw;
    height: auto;
    margin: auto;
    border: none;
    border-radius: 5px;
    margin-top: 30px;
    margin-left: 0px;
    margin-bottom: 60px;
    padding: 0px;    
    color: white;
    box-sizing: content-box;
    }  

fieldset { /* styles boxes */
    border: none;
    padding-bottom: 10px;
    padding-top: 5px;
    border-radius: 5px;
    }

/* how do we make the text white?? */
 .name, .phone, .email {
    width: 100%;
    padding: 0px;
    margin-top: 10px;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    font-family: nunito-sans, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;
    }
    
   ::placeholder {
        color: white;
        font-family: nunito-sans, sans-serif;
        font-weight: 300px;
        }

input[type=submit] {
    width: 10vw;
    height: 50px;
    margin: auto;
    margin-bottom: 50px;
    padding: 20px 1px;
    color: teal;
    }

/* END of "connect with us" section */



/* BEGINNING of "Reviews" section */

    .goodCompany{
        padding: 5% 8% 8% 8%;
    }
    
.goodCompany h3{
        padding-top: 40px;
    }

.goodCompany .review{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goodCompany .review img{
    max-width: 60px;
    padding-bottom: 40px;
    
}

.goodCompany h3{
    font-family: 'Nunito', sans-serif;
    color: rgba(46, 51, 58, .59);
    font-size: 35px;
    padding-bottom: 75px;
    letter-spacing: 3px;
    padding-left: 
}

.goodCompany p{
    font-family: 'Nunito Sans', sans-serif;
    font-size: 22px; 
    padding-bottom: 20px;
    width: 800px;
}

.goodCompany .reviewer{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #707070;
    font-style: italic;
}

/* END of "Reviews" section */

/* FOOTER SECTION */

footer .footerMobile{
    display: none;
}

footer .footerWeb{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 210px;
    background-color: #172533;
}

.contact-info > p,a{ /*this only controls the contact information listed in the footer along with the links.. but right now it just makes sure any link after the .contact-info div has no text decoration*/
    color: white;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    line-height: 1px;
    text-decoration: none;
    font-size: 20px;
    }

.logo-footer{ /*this is the logo/roopairs/catchphrase in footer*/
    height: 67px;
}

.additional-links{ /*this div wraps around the fb/insta logo and meet the team link*/
    width: 135px;
    text-align: center; /*centers "Meet the Team" link along horizontal axis*/
}

.fb-insta{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fb-insta-link{ /*this class handles the sizing of the facebook and instagram logo*/
    height: 55px;
}

.meetTeam{
    color: #5ACB80; /*hex code = lime green color*/
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
}
    
}/* END OF DESKTOP MEDIA QUERY */





/***************** MOBILE *****************/
@media only screen and (max-width:600px){
    *{
        margin: 0;
        padding: 0;
    }

    header .mainHomeNav{ 
    background-color: #172533;
    display: flex;
    padding: 16px 30px;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    display: none;
}
    
header .mobileNav{
    background-color: #172533;
    display: flex;
    padding: 16px 30px;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
    
header .hiddenNav{
    display: none;
}

header .webNav{
    display: none;
}
    
.logo{ 
    display: none;
}
    
.mobileLogo{
    display: flex;
    width: 60px;
    align-content: flex-end 
}
    
.menu{
    display: block;
}

.dropdownMenu {
    background-color: #172533;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: flex;
    padding: 0px;
}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: #172533;
    min-width: 90%;
    margin-top: 20px;
    z-index: 1;
    right: 0;
    height: 525px;
    padding: 20px;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
    
.dropdown-content .ddRest{
    color: white;
    padding: 10px 16px;
    font-size: 27px;
    text-decoration: none;
    display: block;
}
    
.dropdown-content .ddSPro{
    color: white;
    padding: 10px 16px 50px 16px;
    font-size: 27px;
    text-decoration: none;
    display: block;
}
    
.dropdown-content .menuItems{
    color: white;
    padding: 5px 16px;
    font-size: 20px;
    text-decoration: none;
    display: block;
}
    
.dropdown-content .ddSocialMedia{
    color: white;
    display: flex;
    padding: 0px;
    padding-top: 75px;
}

.dropdown-content a:hover {
    color: #27CDA3
}

.dropdown:hover .dropdown-content {
    display: block;
}

/***********START OF ACTUAL WEBSITE***********/
    
main{
        display: flex;
        min-height: 100vh;
        flex-direction:column;
        width: auto;
        }

/* part of page you see when you open restaurant site */
    
    #firstscreen { 
        display: flex;
        height: 78vh;
        flex-direction:column;
        background:linear-gradient(0deg,rgba(31,43,53,0.8),rgba(31,43,53,0.8)),url(images/service-BG.jpg); /* puts overlay over image */
        background-size:cover;
        }

    #opening{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        flex-direction: column;
        }

    .pic{
        max-height: 400px;
        width: 80vw;
        justify-content: center;
    }

    #titles{ /* text that goes next to app image */
        display: flex;
        flex-direction: column;
        min-width: 300px;
        max-width: 550px;
        margin: 10%;
        align-items: left;
        justify-content: left;
        flex-direction: column;
        }

    #yellow{
        color: #febd2c;
        font-weight: 900; 
    }
    
        #titles h1{
            font-family: nunito-sans, sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: calc(6vw);
            color: white;
            }
    

        #titles h2{
            font-family: nunito, serif;
            font-weight: 200;
            font-style: normal;  
            font-size: calc(3vw);
            color: white;
            }

    .chat{
        display: none;

    }
    
    /* BEGINNING of "who we are" section */
#weare {
    background-color: #ECF0F1;
    width: auto;
    
    }

#whoweare {
/*    background-color: pink;*/
    display: flex;
    margin: auto;
    padding: 25vw 10vw 25vw 10vw;
    flex-direction: column;
    justify-content: center;
}

#whowe{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80vw;
    }

    h3{
        font-family: nunito, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(6vw);
        color: #2E333A;
        opacity: .56;
        padding: 1vw 0vw;
        margin-bottom: 2vh;
        line-height: 5vh;
        }
    
    h4{
        color: #2E333A;
        font-family: nunito-sans, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(5vw);
        padding: 1vw 0vw;
        }

/* to get the "FREE" to be teal */    
  #free {
        color: #27CDA3;
        }

    p{
        color: #2E333A;
        font-family: nunito-sans, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 17.2px;
/*        font-size: calc(4.3vw);*/
        padding-top: 1vw;
        padding-bottom: 4vw;
        }
    
    /* this is the image in the "who we are" section */
    #whoweare img {
        width: 45vw;
        background: transparent;
        margin: 6vw auto 0vw auto;
        }
/* END of "who we are" section */


/* BEGINNING of "our services" section */

#ourservices {
    display: flex;
    width: auto;  
    padding: 12vw 10vw 14vw 10vw;
    flex-direction: column;
    
    }
    
    #ourservices h3{
        margin-bottom: 5vh;
    }
    

    #ourservices h5{
        color: #2E333A;
        font-family: nunito, serif;
        font-weight: 600;
        font-style: normal;
        padding: 1vw 0vw;
        text-align: center;
        width: 170px;
        margin: 14px auto 9px auto;
        }


#sections{
    display: flex;
    flex-direction: column;
    text-align: center;
    
    }

#sections h5{
    font-size: calc(5.7vw);
    text-align: center;
    }

#sections p{
/*    font-size: calc(4.3vw);*/

    margin-top: -1vw;


    }
    
    .section1{
        width: 53vw;
        display: flex;
        flex-direction: column;
        background-color: #ECF0F1;
        padding: 4vw 4vw 8vw 4vw;
        margin: 12vh auto 8vh auto;
    }
    .section2{
        width: 53vw;
        display: flex;
        flex-direction: column;
        background-color: #ECF0F1;
        padding: 4vw 4vw 8vw 4vw;
        margin: 12vh auto 8vh auto;
    }
    .section3{
        width: 53vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #ECF0F1;
        padding: 4vw 4vw 8vw 4vw;
        margin: 12vh auto 8vh auto;
    }

    /* how do we make these aligned horizontally?? */
.our-service-icons {
        height: 31vw;
        margin: auto;
        
        margin-top: -80px;
        margin-bottom: 0px;
        }

/* END of "our services" section */



/* BEGINNING of "how it works" section */
#howitworks{
    width: 100%;
    position: relative;
    background-color: #ECF0F1;
    }

#subtitle{
    display: flex;
    flex-direction: column;
    align-content: center;
}

    #subtitle h3, #subtitle h4{
        width: 80vw;
        margin: auto;
        }
        
    #subtitle h3{
            margin-top: 14vh;
            }
    #subtitle h4{
            padding: 0;
            }

/* BEGINNING of slider */
/* code adjusted from http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */
.slider{
	width: 100%; /*Same as width of the large image*/ /*Instead of height we will use padding */
	padding-top: 18vh; /*That helps bring the labels down */
	padding-bottom: 30vh;
    margin: 270px auto 0 auto;
    display: flex;
    flex-direction: column;
    }

#step {
    display: flex;
    width: 80vw;
/*    margin-left: 10vmax;*/
    margin: 0 auto 0 auto;
    }

#step p{
    font-family: "nunito-sans", sans-serif;
    font-weight: 300;
    padding: 1vw;
    color: #707070;
    }

#step p:first-child{
    color: #707070;
    font-size: 5.5vw;
    font-family: "nunito-sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    float: left;
    }

#second{
    font-size: 2.5vh;
    font-family: "nunito-sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    }


/* to add transitions */
.slider>img{
	position: absolute;
    margin-top: 20px;
/*    left: 0;*/
    top: 250px;
    padding-left: 16%;
    transition: all 0.5s;
/*    height: 50vw;*/
    max-height: 400px;
    min-height: 150px;
}
    
#howitworks .sliderImg {
        width: auto;
        margin: auto;
        margin-top: 8vh;
        margin-left: 12vw;
        }


.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails */
	cursor: pointer;
	transition: all 0.5s;
    margin-left: 0;
    align-content: center;
    font-size: 2px;
    padding-top: 10px;
}

.slider label .step1{
    padding-top: 90px;
}
    
.slider label img{
	display: block;
}

.slider input[name='slide_switch']:checked+ label p{
    color: #5ACB80;
    font-weight: 700;
    font-size: 3vh;
    }

.slider input[name='slide_switch']:checked+ label p:first-child{
    text-decoration: underline;
    text-decoration-color: #27CDA3;
    }


/*Clicking any thumbnail now should change its opacity(style)*/ 

/*Time to work on the main images */
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size. On click the images will be displayed at normal size to complete the effect */

.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}

/*Clicking on any thumbnail now should activate the image related to it*/
/* code adjusted from http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */

/* END of slider */

    
    .white-box{
        height: 250px;
        background-color: white;
        margin-bottom: -31.7vh;
        margin-top: -13vh;
    }

/* END of "how it works" section */

/* StTART OF OUR BENEFITS*/
#ourbenefits {
    display: flex;
    width: auto;  
    padding: 30vw 10vw 14vw 10vw;
    flex-direction: column;
    }
    
    #ourbenefits h3{ 
    padding-bottom: 40px;
    }

    #ourbenefits h5{
        color: #2E333A;
        font-family: "Nunito", serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(2.8vw);
        text-align: center;
        margin: -60px auto 9px auto;
        }


#benefits{
    display: flex;
    flex-direction: column;
    align-content: center;
    }

#benefits h5{
    font-size: calc(5.7vw);
    padding-top: 80px
    }

#benefits p{
    width: 33vh;
    text-align: center;
    width: 260px;
    }
    
    .benefit1, .benefit2, .benefit3{
        display: flex;
        flex-direction: column;
        padding: 0vw 4vw 8vw 4vw;
        margin: 0px auto 0px auto;
        align-items: center;
    }
    
    #benefits img{
        width: 140px; 
    }


/* END of "our benefits" section */


/* BEGINNING of "connect with us" section */

#connectwithus {
    display: flex;
    margin: auto;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right, #5FCA83, #21CFA6);
    }

#connect{
    margin: auto;
    display: flex;
    flex-direction: column;
    background-color: none;
    text-align: center;
    padding: 120px 10px 70px 10px;
    }

    h1{
        font-family: nunito, serif;
        font-weight: 700;
        font-style: normal;
        font-size: calc(7.2vw);
        color: white;
        padding-bottom: 10px;
        }

#connect p{
    font-size: calc(3.6vw);
    padding: 0;
    color: white;
    }

#form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30vw;
    height: auto;
    margin: auto;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0px;    
    color: white;
    box-sizing: content-box;
    }  

fieldset { /* styles boxes */
    border: none;
    padding-bottom: 10px;
    padding-top: 5px;
    border-radius: 5px;
    }

/* how do we make the text white?? */
 .name, .phone, .email {
    width: 240px;
    margin-top: 10px;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    font-family: nunito-sans, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;
    }
    
   ::placeholder {
        color: white;
        font-family: nunito-sans, sans-serif;
        font-weight: 300px;
        }

input[type=submit] {
    width:20vw;
    height: 50px;
    margin: auto;
    margin-bottom: 50px;
    padding: 50px 0px;
    color: teal;
    }

/* END of "connect with us" section */



/* BEGINNING of "Reviews" section */

.goodCompany{
        padding: 13% 12% 30% 12%;
    }
    
.goodCompany h3{
        padding-top: 40px;
    }

.goodCompany .review{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goodCompany .review img{
    max-width: 60px;
    padding-bottom: 40px;
    
}

.goodCompany h3{
    font-family: 'Nunito', sans-serif;
    color: rgba(46, 51, 58, .59);
    font-size: 35px;
    padding-bottom: 75px;
    letter-spacing: 3px;
    padding-left: 
}

.goodCompany p{
    font-family: 'Nunito Sans', sans-serif;
    font-size: 22px; 
    padding-bottom: 20px;
}

.goodCompany .reviewer{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #707070;
    font-style: italic;
}

/* END of "Reviews" section */


/* FOOTER SECTION */


footer .footerWeb{
        display: none;
    }
    
footer .footerMobile{
    display: flex;
    flex-direction: column;
    min-height: 40px;
    background-color: #172533;
    padding: 50px 55px
}

.contact-info > p,a{ /*this only controls the contact information listed in the footer along with the links.. but right now it just makes sure any link after the .contact-info div has no text decoration*/
    color: white;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 200;
    font-size: 4vw; 
    line-height: 4vw;
    text-decoration: none;
}

.contact-info{
      padding-bottom: 30vw;
/*    padding-bottom: 110px;    */
}
    
.logo-footer{ /*this is the logo/roopairs/catchphrase in footer*/
    height: 10vw;
}

a.meetTeam{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 25px;
    padding-bottom: 60px
}

.fb-insta{
    margin-bottom: 10px;
}

.fb-insta-link{ /*this class handles the sizing of the facebook and instagram logo*/
    height: 55px;
}

.meetTeam{
    color: #5ACB80; /*hex code = lime green color*/
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;    
    
}




} /*END OF MOBILE QUERY*/