/* --------------------------- Site Wide ------------------------------ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    font-size: clamp(1.125rem, 2vw, 1.20rem);
  }

  h1,h2 {
    font-size: xx-large;
  }

  img {
    border-radius: 6px;
  }

  .call_to_action {
        display: flex;
        text-align: left;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0pxx;
        padding-bottom: 0px;

        display: flex;
        min-height: 220px;
        margin: 0px;
        /*
        border: 8px solid black;
        */
    
        padding: 0px;
        /* background-color: #D3D3D3; */
        background:#8ed973ee;
        justify-content: center;
        align-items: center;
    
  }
  .call_to_action_container {
    text-align: left;
    padding-top: 35px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 35px;
    max-width: 1300px;
    /* background:#8ed973ac; */
    border-radius: 0px;
    /* box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); */
  }

  .connect_button_container {
    display: flex;
    height: 45px;
  }
  .connect_button {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 15px;
    background:#000000;
    text-decoration: none;
    color: #FFFFFF;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    font-size: 16px;
  }

  .connect_button:hover {
    background:#8ed973;
    color: #000000;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    transition: all 0.3s ease;
  }



  a[href^="tel"] {
    text-decoration: none;
    color:inherit;
  }

  /* --------------------------- ANIMATIONS ------------------------------ */

/* ----- just a fade in ----- */
/*  p{
    animation: fade 3s ease forwards; 
    
 }
*/

/* ----- fade in/out when scrolling up ----- */

 .testFade {
    animation: fade linear both;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;;
 }

  @keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
    
 /* --------------------------- END ANIMATIONS ------------------------------ */


  /* --------------------------- End Site Wide ------------------------------ */


   /* ----- Navbar  ------- */

  .navbar {
    background: #FFFFFF;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  }

  .navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    
    max-width: 1300px;

    
    margin-right: auto;
    margin-left: auto;
    padding-right: 35px;
    padding-left: 35px;
  }

.logo {
    width: 120px;
    cursor: pointer;
    


}

#navbar__logo {
    display: flex;
    justify-content: center;  /* <---------why is this not pulling it in the center?*/
    align-items: center;
}

.navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
  }
  
  .navbar__item {
    height: 80px;
  }
  
  .navbar__links {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
  }
  
  .navbar__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
  }
  
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background: #8ed973;
    color: #fff;
  }
  
  .button:hover {
    background: #8ed973;
    transition: all 0.3s ease;
  }
  
  .navbar__links:hover {
    color: #8ed973;
    transition: all 0.3s ease;
  }


/*--------------------------------------------------home--------------------------------------------------*/
  /* ----- Hero Section  ------- */

.hero {
    display: flex;
    /* background-image: url(/images/heroBackground.jpg); */
    /* background-repeat: no-repeat; */
    /* background-attachment: local; */
    background-size: cover;
    width: 100%;
    height: 100%;
    resize: both;
    /* min-height: 600px; */
    margin: 0px;
    justify-content: center;

}

.hero_container {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 35px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 35px;
    justify-content: center;
    align-items: center;
    max-width: 1300px;
    
}

.hero_container_txt {
    padding-top: 35px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 35px;
    /*background-color: rgba(142, 217, 115, 0.838); */
    backdrop-filter: blur(0px); 
    width: 100%;
    height: 100%;
    max-width: 800px;
    border-radius: 0px;

}

.hero_container_img {
    padding-top: 35px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 35px;
    /*background-color: rgba(142, 217, 115, 0.838); */
    backdrop-filter: blur(0px); 
    width: 100%;
    height: 100%;
    max-width: 800px;
    border-radius: 0px;
    

}




/* ----- About Section  ------- */




.about {
    display: flex;
    text-align: left;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0pxx;
    padding-bottom: 0px;

    display: flex;
    min-height: 220px;
    margin: 0px;
    /*
    border: 8px solid black;
    */

    padding: 0px;
    /* background-color: #D3D3D3; */
    background:#FFFFFF;
    justify-content: center;
    align-items: center;

}
.about_container {
text-align: left;
padding-top: 35px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 35px;
max-width: 1300px;
background:#FFFFFF;
border-radius: 0px;
/* box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); */
}










/* ----- Services Section  ------- */

.services_section {
    text-align: center;
    padding-top: 35px;
    padding-bottom: 35px;
}

.services_boxes_section {
    display: flex;
    min-height: 220px;
    margin: 0px;
    /*
    border: 8px solid black;
    */
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 5px;
    padding-right: 5px;
    /* background-color: #D3D3D3; */
    justify-content: center;
    align-items: center;
    

}

.services_box {
    /*height: 220px; */
    height: 285px;
    width: 400px;
    /* background-color: #8ed973; */
    
    font-size: 12pt;
    margin: 10px;
    padding: 25px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #00000025;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
   


}

.div_link {
    color: #000;
    text-decoration: none;
}

/* ----- Benifit "Why choose us" Section  ------- */

.benifits_1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
.benifits_container_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1265px;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    
}
.benfits_heading_3a {
    max-width: 1265px;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}
.benifits_content_3b{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1265px;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
}
.benifits_benifit_container_4{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    max-width: 1265px;
    width: 100%;
    height: 400px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
}
.benifits_benifit_container_4alt{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    max-width: 1265px;
    width: 100%;
    height: 400px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
}

.benifits_benifit_5a{
    /* background-color: #d72424; */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    min-width: 300px;
    min-height: 300px;
    max-width: 400px;
    padding: 5px;
    

}
.benifits_benifit_5b{
    /* background-color: #3c24d7; */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    min-width: 50px;
    min-height: 50px;
    padding: 15px;

}


/*------------------------------------------------end of home--------------------------------------------------*/

/*--------------------------------------------------about --------------------------------------------------*/
.about_banner {
    padding-top: 35px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 35px;
    background-color: #8ed973;
}


.about_values_list {
    list-style: none;
}

/*--------------------------------------------------end of about--------------------------------------------------*/

/*--------------------------------------------------services--------------------------------------------------*/
.services_intro {
    display: flex;
    text-align: left;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0pxx;
    padding-bottom: 0px;

    display: flex;
    min-height: 220px;
    margin: 0px;
    /*
    border: 8px solid black;
    */

    padding: 0px;
    /* background-color: #D3D3D3; */
    justify-content: center;
    align-items: center;  
}

.services_intro_container{
    text-align: left;
    padding-top: 15px;
    padding-left: 35px;
    padding-right: 15px;
    padding-bottom: 15px;
    max-width: 1300px;
    /*background:#8ed973;*/
    border-radius: 0px;
    
}

.services_content {
    display: flex;
    text-align: left;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0pxx;
    padding-bottom: 0px;
    /* background:#D3D3D3; */

    display: flex;
    min-height: 220px;
    margin: 0px;
    /*
    border: 8px solid black;
    */

    padding: 0px;
    background-color: #FFFFFF; 
    flex-direction: column;
    
    align-items: center;  
    
    
}

.services_content_container{
    text-align: left;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    max-width: 1300px;
    margin: 0px;
    background:#FFFFFF;
    border-radius: 0px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); 
    border-style: solid;
    border-width: 1px;
    border-color: #00000025;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}

/* ----- Complete List of Services Section  ------- */

.complete_list_services_content {
    text-align: center;
    padding-top: 0px;
    padding-bottom: 35px;
    max-width: 1300px;
    min-height: 1000px;
}

.complete_list_services_content_container {
    display: flex;
    min-height: 220px;
    margin: 0px;
    
    /*
    border: 8px solid black;
    */

    padding: 5px;
    /* background-color: #D3D3D3; */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    

}

.services_list_container {
    height: 400px;
    width: 400px;
    /* background-color: #8ed973; */
    
    font-size: 12pt;
    margin: 15px;
    padding: 25px;
    text-align: left;
    background:#FFFFFF;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    border-style: solid;
    border-width: 1px;
    border-color: #00000025;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

}

.services_list {
    padding-left: 15pt;
}
/*--------------------------------------------------end of services--------------------------------------------------*/

/*--------------------------------------------------contact--------------------------------------------------*/
.contact_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin: 25px;
}

.google_form_container {

}


.google_form {
    /* width: 800px; */
    /* height: 800px;  */
    height: 1800px;
    
    
}


.contact_intro {
    display: flex;
    text-align: left;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0pxx;
    padding-bottom: 0px;

    display: flex;
    min-height: 220px;
    margin: 0px;
    /*
    border: 8px solid black;
    */

    padding: 0px;
    /* background-color: #D3D3D3; */
    background:#FFFFFF;
    justify-content: left;
    align-items: left;

}
.contact_intro_container {
text-align: left;
padding-top: 35px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 35px;
max-width: 1300px;
background:#FFFFFF;
border-radius: 0px;
/* box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); */
}

.textarea {
    width: 1000px;
    height: 200px;
}

.contact_instruction {
    padding-top: 35px;
    text-align: center;
}

input[type="radio"] {
    accent-color: #8ed973ee;
}
/*--------------------------------------------------end of contact--------------------------------------------------*/


footer {
    text-align: center;
}

 /* ----- Mobile Friendly Settings  ------- */
@media screen and (max-width: 900px) {
/* -----  Mobile - Navbar  ------- */
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        
        max-width: 1300px;
        padding: 0;
        /* padding-left: 35px;  --- if I do it here, it messes where drop down menu lands */
        

    }

    .navbar__menu {
        display: flex;
        min-height: 350px;
        margin: 0;
        border: 0px solid #FFFFFF;
        padding: 5px;
        /* background-color: gray; */
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: -1000px;
        opacity: 1;
        transition: all 0.5s ease;
        height: 50vh; 
        z-index: -1;
        width: 100%;
    }

    .navbar__menu.active {
        background: #FFFFFF;
        top: 100%;
        opacity: 1;
        transition: all 0.5s ease;
        z-index: 98;
        /* height: 50vh; */
        height: 100%;
        font-size: 1.6rem;
    }

  
  #navbar__logo {
    padding-left: 35px;
  }
    
    /* this is the span which functions as hamberger menu */
    .navbar__toggle .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background: #000000;
    }

    .navbar__item {
        width: 100%;
        
    }

    .navbar__links {
        text-align: center;
        padding: 0px;
        width: 100%;
        display: table;
        background: #FFFFFF;
    }

    .navbar__btn {   /* make it same as navbar__item */
        width: 100%;  
    }
   
    .button {                 /* make it same as navbar__links */
        text-align: center;
        padding: 2rem;
        width: 100%;
        display: table;
        background: #d72424;      
    }

   /* old way ----------------------------------
    .navbar__btn {
        background: #000000;
        padding-bottom: 2rem;
    }

    .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80px;
        margin: 0;
    }
        ---------------------------------------- */

    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);
    }

    .navbar__toggle .bar {
        display: block;
        cursor: pointer;
    }

    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


/* ----- Mobile - Home ---------------------- */

.hero {
    display: flex;
    background-image: url(/images/altHero.png); 
    /* background-repeat: no-repeat; */
    /* background-attachment: local; */
    background-size: cover;
    width: 100%;
    height: 100%;
    resize: both;
    /* min-height: 600px; */
    margin: 0px;
    justify-content: center;

}

.hero_container {
    padding: 0px;
}

.hero_container_txt {
    padding-top: 35px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 35px;
    background-color: rgba(255, 255, 255, 0.829); 
    backdrop-filter: blur(0px); 
    max-width: 800px;
    border-radius: 0px;

}

.hero_container_img {
    display:none;

}

.benifits_benifit_container_4 {
    flex-direction: column;
    align-items: center;
    width: 350px;
    height: 100%;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 60px;
}

.benifits_benifit_container_4alt {
    flex-direction: column;
    align-items: center;
    width: 350px;
    height: 100%;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 60px;
}
 
/* ----- Mobile - Services Section  ------- */
    .services_boxes_section {
        display: flex;
        flex-direction: column;
        
    }

    .services_box {
        width: 350px;
    }

    .services_content_container{
        margin: 5px;
        width: 350px;
    }



/* ----- Mobile - Services Page Complete List of Services Section  ------- */

    .services_list_container {
        width: 350px;
        background:#FFFFFF;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    }

/* ----- Mobile - Contact Page  ------- */
    .contact_form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .google_form {
        width: 390px;
        height: 1830px; 
    }
 
    
    .textarea {
        width: 300px;
        height: 200px;
    }

}
/* ----- My color pallet 

black #000000 and #8ed973 (a shade of green),

White (#FFFFFF)

GrayTones
Light Gray (#D3D3D3)
Dark Gray (#696969)

Complementary Colors
Purple (#8A2BE2)
Magenta (#FF00FF)

Analogous Colors
Light Green (#A2E4B8) blends well with #8ed973
Teal (#40E0D0)

Neutral Colors
 Beige (#F5F5DC)
 Brown (#8B4513)

Accent Colors
 Yellow (#FFFF00)
 Blue (#1E90FF)




-----*/