/* google font */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* Custom Color */
:root {
    --green:#007a4e;
    --darkgreen:#00452c;
    --white:#fff;
    --lightgrey: #f8f8f8;
    --darkbrown: #735e59;
}

/* Custom CSS */

* {
    font-family: "Unna", serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    /* text-transform: capitalize; */
    transition: all .2s linear;
    background-color: #f8f8f8;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

/* Website All Heading */
.heading {
    margin: 2rem;
    padding-top: 6rem;
    text-decoration: underline;
    display: inline-block;
    font-size: 3.5rem;
    color: var(--green);
    position: relative;
    letter-spacing: .2rem;
}

/* Website All Button */
.btn {
    outline: none;
    border: none;
    border-radius: 5rem;
    background-color: var(--green);
    color: var(--white);
    cursor: pointer;
    height: 3.5rem;
    width: 15rem;
    font-size: 1.7rem;
    box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .3);
}

.btn:hover {
    letter-spacing: .1rem;
    opacity: .8;
}

/* Header section start */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2rem 8rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

/* Logo name */

.header .logo {
    font-size: 2.5rem;
    color: var(--white);
}

.header .logo i {
    padding: 0 .5rem;
}

/* Nabar Link */
.header .navbar ul{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.header .navbar ul li {
    margin: 0 1.5rem;
}

.header .navbar ul li a {
    font-size: 2rem;
    color: var(--white);
}

.header .fa-bars {
    color: var(--white);
    cursor: pointer;
    font-size: 3rem;
    display: none;
}

/* Header Section End */

/* Home-Header section start */
.home-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 8rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

/* Logo name */

.home-header .logo {
    max-height: 90px;
    width: auto;
    margin-right: auto;
}

.home-header .logo:hover {
    opacity: 0.8;
    cursor: pointer;
}

/* Navbar Link */
.home-header .navbar ul{
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-header .navbar ul li {
    margin: 0 3rem;
}

.home-header .navbar ul li a {
    font-size: 2.2rem;
    color: var(--darkgreen);
}

.home-header .navbar ul li a:hover {
    font-size: 2.5rem;
    color: var(--green);
}

.home-header .navbar ul button {
    position: relative;
    height: 5rem;
    width: 20rem;
    border-radius: .5rem;
    background-color: var(--darkgreen);
    color: var(--white);
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 2rem;
    font-weight: 400;
    box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .3);
}

.home-header .navbar ul button .grass {
    position: absolute;
    top: -35px; 
    left: 90%; 
    transform: translateX(-50%); 
    height: 40px; 
    width: auto;
    z-index: 10; 
    background-color: transparent;
}

.home-header .fa-bars {
    color: var(--darkgreen);
    cursor: pointer;
    font-size: 3rem;
    display: none;
}

/* Home-Header Section End */













/* Home Section Start */
.home {
    min-height: 100vh;
    width: 100vw;
    background-image: url(/images/moxie2025_background.png);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 0 1rem;
    position: relative;
    overflow: hidden !important;
}

.home .banner {
    position: absolute;
    justify-content: center;
    bottom: 14rem;
    color: #f8f8f8;
    font-size: 16rem;
    margin-bottom: 1rem;
    background-color: transparent;
    text-shadow:  -3px -3px 0 var(--darkgreen),
    3px -3px 0 var(--darkgreen),
    -3px 3px 0 var(--darkgreen),
    3px 3px 0 var(--darkgreen);
}

.home .slogan {
    text-decoration: none;
    position: absolute;
    justify-content: center;
    bottom: 8rem;
    color: #f8f8f8;
    font-size: 4rem;
    font-weight: 400;
    margin-bottom: 2rem;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--darkgreen);
    animation: typing 3.5s steps(50, end), blink 1s infinite;
    background-color: transparent;
    text-shadow:  -1px -1px 0 var(--darkgreen),
    1px -1px 0 var(--darkgreen),
    -1px 1px 0 var(--darkgreen),
    1px 1px 0 var(--darkgreen);
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 62%;
    }
}

@keyframes blink {
    from {
        border-color: var(--darkgreen);
    }
    to {
        border-color: transparent; 
    }
}


/* Scroll Down Button */
.home .scroll {
    position: absolute;
    height: 5rem;
    width: auto;
    border-radius: .5rem;
    background-color: transparent;
    top: 65rem;
    color: var(--white);
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 2.5rem;
    font-weight: 400;
}

.home .scroll-down button:hover {
    letter-spacing: .1rem;
    color: var(--white);
    background-color: var(--green);
}
/* Home Section End */

/* About Section Start */

.about {
    background-image: url(/images/vines.png);
    height: auto;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: #f8f8f8;
}

.about-heading {
    margin: 2rem;
    padding-top: 25rem;
    text-decoration: none;
    display: inline-flex;
    font-size: 5rem;
    color: #482c1a;
    position: relative;
    top: 1rem;
    letter-spacing: .2rem;
    background-color: transparent;
}

.about .row {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.about .row .content {
    text-align: left;
    padding: 4rem;
}

.about .row .content h2 {
    /* margin: 20px; */
    font-size: 4rem;
    color: #482c1a;
    text-align: center;
    align-items: center;
}

.about .row .content p {
    font-size: 1.5rem;
    color: var(--darkgreen);
    padding: 1rem 0;
}

/* About Us Images */

.about .row .images {
    padding-bottom: 20px;
    padding-top: 2px;
}

.about .row .images img {
    width: 400px;
    border-radius: 2rem;
}

/* Lightbulb Image Styling */
.lightbulb {
    position: absolute;
    bottom: 7rem;
    left: 3rem;
    height: 65px;
    width: 45px;
    z-index: 10;
    cursor: pointer;
}

/* Popup container */
/* Lightbulb styling */
.lightbulb img {
    position: absolute;
    bottom: 0rem;
    left: 0rem;
    height: 65px;
    width: 45px;
    cursor: pointer;
}

/* Hidden checkbox */
.popup-toggle {
    display: none;
}

/* Popup container */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Popup content */
.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    width: 80%;
    max-width: 400px;
    position: relative;
}

/* Close button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

/* Show popup when checkbox is checked */
.popup-toggle:checked ~ .popup {
    display: flex; /* Make popup visible */
}


/* Shape 1 */
.shape1::after, .shape1::before {
    content: '';
    position: absolute;
    z-index: 1;
    opacity: 1;
    border-radius: 50%;
}

.shape1::after {
    height: 50rem;
    width: 48rem;
    background-color: #acb896;
    bottom: -45rem;
    right: -14rem;
}

.shape1::before {
    height: 50rem;
    width: 48rem;
    background-color: #acb896;
    bottom: -45rem;
    left: 38rem;
}

/* Shape 2 */
.shape2::after, .shape2::before {
    content: '';
    position: absolute;
    z-index: 1;
    opacity: 1;
    border-radius: 50%;
}

.shape2::after {
    height: 50rem;
    width: 48rem;
    background-color: #acb896;
    bottom: -45rem;
    right: 12rem;
}

.shape2::before {
    height: 50rem;
    width: 48rem;
    background-color: #acb896;
    bottom: -45rem;
    left: 65rem;
}

/* Shape 3 */
.shape3::after, .shape3::before {
    content: '';
    position: absolute;
    z-index: 1;
    opacity: 1;
    border-radius: 50%;
}

.shape3::after {
    height: 50rem;
    width: 48rem;
    background-color: #acb896;
    bottom: -45rem;
    left: 10rem;
}

.shape3::before {
    height: 50rem;
    width: 48rem;
    background-color: #acb896;
    bottom: -45rem;
    left: -18rem;
}
/* About Section End */

/* Services Section Start */

.services {
    width: 100vw;
    height: 2500px;
    background-color: #acb896;
    position: relative;
    padding: 2rem;
    padding-bottom: 4rem;
}

.heading-container {
    background-color: #acb896;
    position: relative;
    display: inline-block;
}

.heading-container .heading {
    font-size: 16rem;
    text-decoration: none;
    color: #3f2d1f;
    position: relative;
    z-index: 2; 
    background-color: transparent;
    margin: 0;
    left: 15rem;
    font-weight: 500;
}

.services-description p {
    font-size: 4rem;
    font-family: 'Monterchi Serif', serif;
    text-decoration: none;
    color: #3f2d1f;
    position: absolute;
    text-align: center;
    z-index: 2; 
    background-color: transparent;
    margin: 0;
    left: 15rem;
    top: 35rem;
    max-width: 40%;
}

/* Puddle Image */
.services-puddle {
    position: absolute;
    width: 90rem;
    height: 45rem;
    top: 72%; 
    left: 75%;
    transform: translate(-50%, -50%);
    z-index: 1;  
    pointer-events: none; 
    background-color: transparent;
}

.services .watering-can img{
        position: absolute;
        width: 100rem;
        height: 100rem;
        top: 14%; 
        right: -30%;
        transform: translate(-50%, -50%);
        z-index: 1;  
        background-color: transparent; 
        color: transparent; 
        border: none; 
        pointer-events: none;
        background-image: none;
}

/* Water Droplets */

.services .water-droplets ul{
    background-color: #acb896;
}

.services .water-droplets ul li{
    background-color: #acb896;
}

.services .water-droplets .droplet1 {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 26%; 
    right: 78%;
    border-radius: 0 50% 50% 50%;
    background-color: #f8f8f8;
    transform: rotate(45deg); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}

.services .water-droplets .droplet1 p {
    font-size: 3.5rem;
    color: #3f2d1f;
    text-align: center;
    transform: rotate(-45deg);
    margin: 0; 
}

.services .water-droplets .droplet2 {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 31%; 
    right: 20%;
    border-radius: 0 50% 50% 50%;
    background-color: #f8f8f8;
    transform: rotate(45deg); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}

.services .water-droplets .droplet2 p {
    font-size: 3.5rem;
    color: #3f2d1f;
    text-align: center;
    transform: rotate(-45deg);
    margin: 0; 
}

.services .water-droplets .droplet3 {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 37%; 
    right: 50%;
    border-radius: 0 50% 50% 50%;
    background-color: #f8f8f8;
    transform: rotate(45deg); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}

.services .water-droplets .droplet3 p {
    font-size: 3.5rem;
    color: #3f2d1f;
    text-align: center;
    transform: rotate(-45deg);
    margin: 0; 
}

.services .water-droplets .droplet4 {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 43%; 
    right: 77%;
    border-radius: 0 50% 50% 50%;
    background-color: #f8f8f8;
    transform: rotate(45deg); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}

.services .water-droplets .droplet4 p {
    font-size: 3.5rem;
    color: #3f2d1f;
    text-align: center;
    transform: rotate(-45deg);
    margin: 0; 
}

.services .water-droplets .droplet5 {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 55%; 
    right: 60%;
    border-radius: 0 50% 50% 50%;
    background-color: #f8f8f8;
    transform: rotate(45deg); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}

.services .water-droplets .droplet5 p {
    font-size: 3.5rem;
    color: #3f2d1f;
    text-align: center;
    transform: rotate(-45deg);
    margin: 0; 
}

.services .water-droplets .droplet6 {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 45%; 
    right: 31%;
    border-radius: 0 50% 50% 50%;
    background-color: #f8f8f8;
    transform: rotate(45deg); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}

.services .water-droplets .droplet6 p {
    font-size: 3.5rem;
    color: #3f2d1f;
    text-align: center;
    transform: rotate(-45deg);
    margin: 0; 
}

.services .water-droplets .droplet7 {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 41%; 
    right: 4%;
    border-radius: 0 50% 50% 50%;
    background-color: #f8f8f8;
    transform: rotate(45deg); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}

.services .water-droplets .droplet7 p {
    font-size: 3.5rem;
    color: #3f2d1f;
    text-align: center;
    transform: rotate(-45deg);
    margin: 0; 
}

.services .water-droplets .droplet8 {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 58%; 
    right: 15%;
    border-radius: 0 50% 50% 50%;
    background-color: #f8f8f8;
    transform: rotate(45deg); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}

.services .water-droplets .droplet8 p {
    font-size: 3.5rem;
    color: #3f2d1f;
    text-align: center;
    transform: rotate(-45deg);
    margin: 0; 
}


/* Popup container */
/* Shelf styling */
.shelf img {
    position: absolute;
    top: 160rem;
    left: -5rem;
    height: 250px;
    width: 300px;
    cursor: pointer;
    background-color: transparent;
}

/* Hidden checkbox */
.popup-toggle {
    display: none;
}

/* Popup container */
.popup-shelf {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Popup content */
.popup-shelf .shelf-popup-content {
    background-color: white;
    color: #00452c;
    font-size: 20px;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    width: 80%;
    max-width: 400px;
    position: relative;
}

/* Close button */
.shelf-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

/* Show popup when checkbox is checked */
.popup-toggle:checked ~ .popup-shelf {
    display: flex;
}

.chatbox {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    background-color: transparent;
}

.chatbox img {
    max-width: 80%;
    height: auto;
    margin-bottom: 15px;
    background-color: transparent;
}

.chatbox p {
    background-color: transparent;
    font-size: 30px;
    color: #3f2d1f;
    padding-bottom: 50px;
}

.chatbox button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #00452c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 200px;
    font-size: 20px;
}

.chatbox button img {
    width: 300px;
    height: auto;
    position: absolute;
    left: 40%;
    z-index: -1;
}

.chatbox button:hover {
    background-color: #f8fffc;
    color: #482c1a;
}

.girl_services_home,
.boy_services_home {
    position: absolute;
    bottom: 0%;
    width: 20%; 
    background-color: transparent;
}

.girl_services_home img {
    width: 60%;
    height: auto;
    background-color: transparent;
}

.boy_services_home img {
    width: 70%;
    height: auto;
    background-color: transparent;
}

.girl_services_home {
    left: 10%; 
}

.boy_services_home {
    right: 5%; 
}














/* Services Row */
.services .row {
    top: 50rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2rem 4rem;
    background-color: transparent;
}

/* Services Content */
.services .content {
    text-align: left;
    border-radius: 1rem;
    background-color: transparent;
}

.services .content h2 {
    font-size: 2.5rem;
    color: var(--green);
}

.services .content p {
    font-size: 1.5rem;
    color: var(--darkgreen);
    padding: 1rem 0;
}

/* Services Images */
.services .row .images img {
    width: 50vw;
    border-radius: 2rem;
    background-color: transparent;
}

/* Services Section End */

/* Team Card Section Start */

.team {
    width: 100vw;
    text-align: center;
    background-color: var(--green);
}

/* Team Card Heading */
.team .heading {
    color: var(--white);
}

/* Team Images */

.team .row .card .images img{
    height: 39rem;
    width: 35rem;
    border-radius: .5rem;
    border: .5rem solid var(--white);
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .3);
    object-fit: cover;
}

.team .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.team .row .card {
    height: 51rem;
    width: 35rem;
    background-color: var(--white);
    text-align: center;
    margin: 7rem 2rem;
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
}

.team .row .card .info h2 {
    font-size: 3.5rem;
    color: var(--green);
}

.team .row .card .info p {
    font-size: 2rem;
    color: var(--darkgreen);
}

.team .row .card .info .icons a {
    font-size: 3rem;
    padding: 0 1rem;
    margin-top: 1rem;
    color: var(--darkgreen);
}

.team .row .card .info .icons a:hover {
    color: var(--green);
}
/* Team Card Section End */

/* Contact Form Section Start */

.contact {
    width: auto;
    padding-top: 50px;
    text-align: center;
}

.contact h1 {
    text-decoration: none;
}

.contact h2 {
    font-size: 3rem;
    color: #3f2d1f;
}

.contact .details ul li {
    font-size: 2rem;
    color: #3f2d1f;
}

.contact .row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 2rem;
    padding: 0 2rem;
}

/* Form Images */
.contact .row .images img {
    height: 50rem;
    width: 50vw;
    border-radius: 1rem;
}

.contact .row .form-container {
    width: 50%;
    text-align: left;
    padding: 0 2rem;
}

.contact .row .form-container input, textarea {
    outline: none;
    border: none;
    width: 49rem;
    height: 4rem;
    background: none;
    border-radius: .5rem;
    box-shadow: .2rem .2rem .5rem rgba(0, 0, 0, .3);
    padding: 0 1rem;
    margin: 1rem 0;
    font-size: 1.6rem;
}

.contact .row .form-container .inputbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.contact .row .form-container .inputbox input[type="text"] {
    width: 49%;
}

.contact .row .form-container input[type="email"] {
    width: 100%;
}

.contact .row .form-container textarea {
    width: 100%;
    height: 20rem;
    padding: 1rem;
    resize: none;
}

.contact .row .form-container input[type="submit"] {
    background-color: var(--green);
    color: var(--white);
    cursor: pointer;
    height: 4rem;
    width: 10rem;
}

.contact .row .form-container input[type="submit"]:hover {
    opacity: .8;
}

/* Contact Form Section End */

/* FAQ Section Start */

.faq {
    min-height: 100vh;
    width: 100vw;
    text-align: center;
    padding: 0 2rem;
}

.faq .heading {
    margin: 0;
}

.faq .row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}

/* FAQ Images */

.faq .row .images img {
    height: 70vh;
    width: 50vw;
    border-radius: 1rem;
}

.faq .row .subject-container {
    width: 50%;
    text-align: left;
}

.faq .row .subject-container .subject .subject-header {
    background-color: var(--green);
    margin: 1rem 0;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .3);
    cursor: pointer;
}

.faq .row .subject-container .subject .subject-header span {
    display: inline-block;
    text-align: center;
    height: 4rem;
    width: 5rem;
    line-height: 4rem;
    font-size: 2rem;
    background-color: var(--white);
    color: var(--darkgreen);
    clip-path: polygon(0% 0% , 75% 0% , 100% 50% , 75% 100% , 0% 100%);
}

.faq .row .subject-container .subject .subject-header h2 {
    display: inline;
    color: var(--white);
    font-weight: 400;
    font-size: 1.5rem;
    padding: 1.5rem;
}

.faq .row .subject-container .subject .subject-body {
    padding: 1rem;
    color: var(--darkgreen);
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .3);
    font-size: 1.3rem;
    display: none;
}
/* FAQ Section End */

/*  QUOTE FOR SPACING AT FOOTER */

.quoteSpaceHolder {
    height: 400px;
    display: flex;
    justify-content: center; /* Center the text block horizontally */
    align-items: center;
}

.quoteSpaceHolder > h1 {
    color: #735e59;
    font-size: 7rem;
    font-family: "DynaPuff", serif;
    text-align: center;
    margin: auto;
}

/* Footer Section Start */

/* body {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 100vh;
    background-color: #333;
} */

footer {
    position: relative;
    width: 100%;
    background-color: #735e59;
    min-height: 100px;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

footer .social_icon,
footer .menu {
    /* color: #fff; */
    background-color: transparent;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
}

footer .social_icon , 
footer .menu li {
    list-style: none;
}

footer .social_icon a {
    font-size: 3em;
    color: #f8f8f8; /* Makes the icon color white */
    background-color: #735e59; /* Sets the brown background */
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
    border-radius: 50%; /* Optional: Makes the background circular */
    padding: 10px; /* Adds space inside the background for a circular look */
    text-align: center;
}

/* ??? footer .social_icon:hover {
    transform: translateY(-10px);
    cursor: pointer;
} */

footer .menu li a {
    font-size: 1.2em;
    color: red;
    background-color: transparent;
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
    text-decoration: none;
    opacity: 0.75;
}

footer .menu li a:hover {
    opacity: 1;
}

footer p {
    color: #fff;
    background-color: transparent;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 2em;
}

footer h2 {
    color: #fff;
    background-color: transparent;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 4em;
}

footer .wave {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(/images/wave.png);
    background-size: 1000px 100px;
}

footer .wave#wave1 {
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWave 4s linear infinite;
}

footer .wave#wave2 {
    z-index: 999;
    opacity: 0.5;
    bottom: 10px;
    animation: animateWave_02 4s linear infinite;
}

footer .wave#wave3 {
    z-index: 1000;
    opacity: 0.2;
    bottom: 15px;
    animation: animateWave 3s linear infinite;
}

footer .wave#wave4 {
    z-index: 999;
    opacity: 0.7;
    bottom: 20px;
    animation: animateWave_02 2.5s linear infinite;
}

@keyframes animateWave {
    0%
    {
        background-position-x: 1000px;
    }
    100%
    {
        background-position-x: 0px;
    }
}

@keyframes animateWave_02 {
    0%
    {
        background-position-x: 0px;
    }
    100%
    {
        background-position-x: 1000px;
    }
}

/* Footer Section End */

/* Media Query Start */

@media (max-width: 768px) {

    html {
        font-size: 50%;
    }

    .header .fa-bars{
        display: block;
    }

    .header .navbar {
        position: fixed;
        top: -120%;
        left: 0;
        height: auto;
        width: 100%;
        background-color: var(--white);
        z-index: 1000;
        border-top: .1rem solid rgba(0, 0, 0, .3);
    }

    .header .navbar ul {
        height: 100%;
        width: 100%;
        flex-flow: column;
    }

    .header .navbar ul li {
        margin: 1rem 0;
    }

    .header .navbar ul li a {
        font-size: 2.5rem;
        color: var(--darkgreen);
    }
    
    .header .fa-time {
        transform: rotate(180deg);
    }

    .header .nav-toggle {
        top: 5.8rem;
    }

    /* Home Media Query */
    
    .home .banner {
        font-size: 4rem;
    }

    .home .slogan {
        font-size: 1.7rem;
    }

    /* About Media Query */

    .about .row {
        flex-flow: column-reverse;
        padding: 0 2rem;
    }

    .about .row .images img {
        width: 100vw;
        padding: 4rem;
    }

    /* Services Media Query */

    .services .row {
        flex-flow: column-reverse;
        padding: 0 2rem;
    }

    .services .row:nth-child(even){
        flex-flow: column;
    }

    .services .row .content {
        flex-flow: column-reverse;
        padding: 4rem;
    }

    .services .row .images img {
        width: 75vw;
        padding: 4rem;
    }

    /* Contact Form Media Query */

    .contact .row {
        flex-flow: column;
    }

    .contact .row .images img {
        border-radius: 2.5rem;
        width: 100vw;
        padding: 1rem;
    }

    .contact .row .form-container {
        width: 100%;
        padding: 0 1.5rem;
    }

    /* FAQ Media Query */

    .faq {
        padding: 0;
    }

    .faq .row {
        padding: 0 1rem;
        flex-flow: column;
    }

    .faq .row .images img {
        width: 100vw;
        border-radius: 1rem;
        padding: 1rem;
    }

    .faq .row .subject-container {
        width: 100vw;
    }
}

/* Footer Query Start */

@media (max-width: 550px) {
    .footer {
        flex-flow: column;
    }

    .footer h1 {
        text-align: center;
    }

    .footer .icons {
        padding: 2rem 0;
    }
}