@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}

body {
     font-family: 'Roboto', sans-serif;
     line-height: 1.4;
}

a {
     text-decoration: none;
}

p {
     margin: 0.75rem 0;
}



/* Utility Classes */
.container {
     max-width: 1100px;
     margin: auto;
     padding: 0 2rem;
     overflow: hidden;
}

.text-center {
     text-align: center;
}

.text-primary {
     color: #93cb52;
}

.bg-light {
     background: #f4f4f4;
     color: #333;
}

.bg-dark {
     background: #333;
     color: #fff;
}

.bg-primary {
     background: #93cb52;
     color: #fff;
}

.m-heading {
     font-size: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.l-heading {
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.lead {
     font-size: 1.3rem;
     margin-bottom: 2rem;
}

.btn {
     display: inline-block;
     color: #fff;
     background: #93cb52;
     padding: 0.5rem 2rem;
     border: none;
     border-radius: 5px;
}

.btn:hover {
     background: #7ab436;
}

.btn-dark {
     background: #333;
     color: #fff;
}

.list {
     margin: 0.5rem;
     list-style: none;
}

.list li {
     padding: 0.5rem 0rem;
     border-bottom: #444 dotted 1px;
}

.py-1 { padding: 1.5rem 0; }
.py-2 { padding: 2rem 0; }
.py-3 { padding: 3rem 0; }

.p-1 { padding: 1.5rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }

/* Navbar */
#navbar {
     display: flex;
     position: sticky;
     top: 0;
     background: #333;
     color: #fff;
     justify-content: space-between;
     /* Z-indez: the higher the number the closer to you */
     z-index: 1;
     padding: 1rem;
}

#navbar ul {
     display: flex;
     align-items: center;
     list-style: none;

}

#navbar ul li a {
     color: #fff;
     padding: 0.75rem;
     margin: 0 0.25rem;
}

#navbar ul li a:hover {
     background: #93cb52;
     border-radius: 5px;
}

/* Showcase */
#showcase {
     position: relative;
     background: #333 url('../img/showcase.jpg') no-repeat center center/cover;
     /* Use VH to cover the whole page */
     height: 100vh;
     color: #fff;
}

#showcase .showcase-content {
     display: flex;
     flex-direction: column;
     text-align: center;
     justify-content: center;
     align-items: center;
     height: 100%;
     padding: 0 2rem;
     /* Overlay */
     position: absolute;
     /* This makes the fade start under the navbar */
     top: 0px;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0,0,0,0.4);
}

/* Section: What We Do */
#what .items {
     display: flex;
     padding: 1rem;


}

#what .items .item {
     flex: 1;
     text-align: center;
     padding: 1rem;
}

#what .items .item i {
     background: #93cb52;
     padding: 1rem;
     /* Make the padding circle use radius 50% */
     border-radius: 50%;
     margin-bottom: 1rem;
}



/* Section: Who We Are */
#who {
     display: flex;
}

#who div {
     flex: 1;
}

#who .who-img {
     background: url('../img/handClap.jpg') no-repeat center center/cover;
}

/* Section: Clients */
#clients .items {
     display: flex;
}

#clients .items img {
     display: block;
     margin: auto;
     width: 60%;
}

/* Section: Contact */
#contact {
     display: flex;
}

#contact .map, #contact .contact-form {
     flex: 1;
}

#contact .contact-form .form-group {
     margin: 0.75rem;
}

#contact .contact-form label {
     display: block;
}

#contact .contact-form input,
#contact .contact-form textarea {
     width: 100%;
     padding: 0.5rem;
}