/* header styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}

/* Navigation */
.nav-center {
    background-image: url('images/stainlesssteelimg.jpg');
    background-size: cover;
}

.nav-business-container {
    display: flex;
    justify-content: space-between;
    /* align-items: flex-end; */
    align-items: center;
    /* padding: 1rem; */
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
}

/* .nav-content {
    height: 12vh;
} */

.business-logo {
    display: flex;
    align-items: center;
}

/* appliance-head { */
    /* width: 30%; */
    /* width: 100%; */
    /* width: 80%; */
    /* width: 50%; */
/* } */

.business-name {
    font-family: "Abril Fatface", serif;
    font-weight: 400;
    font-style: normal;
    /* display: flex; */
    flex-direction: column;
    padding: 0 1rem;
    display: none;
}

.name {
    text-align: center;
}

.phone {
    display: flex;
    justify-content: flex-end;
    /* padding: 0 1rem; */
    padding: 5px;
    /* color: rgb(255, 255, 255); */
    color: rgb(63, 161, 168);
    /* font-size: 15px; */
    font-size: 10px;
    /* font-family: fantasy; */
    font-weight: 100;
}

/* Sidebar */
.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: grey; */
    transform: translate(-100%);
    transition: all .5s;
    z-index: 2;
    height: 100vh;
}

.show-sidebar {
    display: block;
    transform: translate(0);
    z-index: 2;
    height: 100vh;
}

/* .sidebar-header {
    background-color: grey;
    display: none;
} */

.sidebar-content {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

/* .svg-arrow {
  margin: 0 20px;
} */

.sidebar-logo {
        display: flex;
        align-items: center;
}

.aside-title {
    font-family: "Abril Fatface", serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    display: none;
}

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

.testimonial-title {
    background: linear-gradient(to right, #3fa1a8, #3fa1a7b3);
    padding: 2rem;
    text-align: center;
    /* margin-bottom: 4rem; */
    color: #ffffff;
}

.title-caption {
    color: #3fa1a8;
}

.social-links-container {
    /* display: grid; */
    display: none;
}

.social-links {
    /* display: flex;
    justify-content: space-evenly; */
    display: grid;
    grid-template-columns: repeat(2, 20px);
    grid-template-rows: 400px;
    grid-gap: 10px;
    place-self: center;
    padding: 0;
    list-style-type: none;
}

ul.links {
    list-style-type: none;
    /* font-family: "Abril Fatface", serif; */
}

/* li.nav-li {
    padding: 1rem;
    text-transform: uppercase;
} */

/* .header-links {
    background-color: rgb(255, 255, 255);
} */

/* .home-link {
    padding-left: 1rem;
} */

.about-link, .services-link, .contact-link, .facebook-link, .linkedin-link {
    text-decoration: none;
    list-style-type: none;
}

li.facebook-link, li.linkedin-link {
    margin: auto;
    cursor: pointer;
    padding: 0px 5px;
}

/* Main content */
/* appliance hero img */
.appliance-hero {
    width: 100%;
    /* opacity: .6; */
    opacity: .4;
}

/* main testimonial styles */
.testimonial-section {
    padding: 0;
    background-image: none;
}

.title {
    text-align: center;
    margin: 2rem;
    /* font-family: 'Abril Fatface'; */
    font-family: fantasy;
    color: rgb(63, 161, 168);
    font-size: 20px;
}

.testimonial-content {
    background-color: rgb(128, 128, 128, 0.4);
    color: rgb(255, 255, 255);
    /* box-shadow: inset 0px 90px 90px 0px; */
    box-shadow: inset 0px -100px 90px 100px;
    padding: 2rem;
    text-align: center;
}

.testimonial-service {
    color: rgb(0, 0, 0);
    padding: 1rem 0;
}

.review-logo {
    display: flex;
    align-items: center;
    color: rgb(0, 0, 0);
}

.logo-review {
    text-align: center;
    /* padding: 1rem; */
    /* padding: 2px; */
    /* padding: 4px; */
    /* border: 1px solid black; */
    margin: 1rem;
    /* width: 20px; */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* background-color: lightblue; */
    background-color: rgb(63, 161, 168);
    color: white;
}

.title_flex {
    display: flex;
    align-items: center;
}

.testimonial-name {
    margin: 0 12px;
    color: #000;
}

.testimonial-review {
    /* padding: 5px 1.5rem; */
    padding: 5px 0;
    line-height: 1.5;
    color: rgb(0, 0, 0);
}

/* .testimonial-star {
  display: flex;
  gap: 2px;
  align-items: center;
} */

/* .backtop {
    margin: 5rem auto;
    display: block;
} */
 .backtop {
    margin: 5rem auto;
    /* margin: auto; */
    display: block;
    /* border: 1px solid black; */
    text-transform: uppercase;
    border-radius: 8px;
    color: #ffffff;
    /* width: 8rem; */
    /* width: 120px; */
    width: 10rem;
    /* box-shadow: 5px 3px 6px #3fa1a8; */
    /* box-shadow: 0 8px 20px #3fa1a8; */
    box-shadow: 0 3px 10px rgba(128, 128, 128, 0.6);
    /* padding: .75px 1.25px; */
    padding: 0.75rem 1.5rem;
    /* background-color: rgb(63, 161, 168); */
    background: linear-gradient(to right, #3fa1a8, #237379);
    /* box-shadow: 0 8px 20px rgba(128, 128, 128, 0.6); */
    transition: all 0.3s ease;
    display: block;
 }

@media screen and (min-width: 768px) {

    /* company name */
    .business-name {
        font-size: 2rem;
    }

    .title_flex {
        margin-top: 2rem;
        justify-content: center;
    }

    .logo-review {
        padding: 0;
    }

    .drop-down {
        display: none;
    }

    .review-logo {
        justify-content: center;
        margin-top: 2rem;
        padding-right: 1rem;
    }

    .testimonial-review {
        padding: 0 5rem;
    }

    /* sidebar */
    /* sidebar {
        position: static;
        background-color: none;
        transform: translate(0);
        transition: none;
        height: 0;
        height: initial;
    } */
    .sidebar {
    /*position: static; */
        position: absolute;
        top: initial;
        left: initial;
        height: 0;
        background: none;
        transform: initial;
        width: 0%;
        z-index: initial;
        transition: none;
    }
    /* side bar content */
    .sidebar-content {
        display: none;
    }

    /* header links */
    /* .header-links {
        display: inline;
    } */

/* services link dropdown */
.services-link {
    position: relative;
}

/* .service-link {
    padding: 5px 15px;
} */

    /* arrow links */
    .svg-arrow {
        /* margin-right: 0px 5px; */
        margin-right: 5px;
    }

    arrow-links {
        margin: 0 1rem;
        /* display: none; */
        /* height: 40px; */
        height: 0;
        overflow: hidden;
        margin:0;
        transition: height 1s;
        font-size: 10px;
        position: absolute;
    }

    /* show arrow links */
    show-arrow-links {
        /* display: block; */
        /* transform: translate(-100px) */
        /* transform: translate(height, 10px) */
        height: 6rem;
        /* transition: height 0.6s ease-in; */
        transition: height 2s;
        margin:0;
        padding:0;
        font-size: 10px;
    }

    .show-links {
        /* display: block; */
        display: flex;
        flex-wrap: wrap;
        /* height: 8rem; */
        /* height: 20rem; */
        /* height: 35rem; */
        height: 38rem;
        width: 30rem;
        /* width: 50rem; */
        /* width: 20rem; */
        padding-top: 1rem;
        /* transform: translateY(-2px); */
    }

    /* social links */
    ul.links {
        display: inline-flex;
    }

    /* .social-links {
        display: block;
        place-self: initial;
        padding: 0 1rem;
    } */
         .social-links {
        display: grid;
        grid-template-columns: repeat(2, 20px);
        grid-gap: 10px;
        place-self: center;
        /* padding: 0; */
        margin: 5px;
        list-style-type: none;
        /* grid-template-rows: 0px; */
        grid-template-rows: initial;
    }

    /* Phone */
    .phone {
        /* font-size: 20px; */
        font-size: 15px;
    }

    /* title */
    .title {
        font-size: 2rem;
    }

}

/* media 1024px */
@media screen and (min-width: 1024px) {
    /* copyright */
    /* .copyright {
        height: initial !important;
    } */

    /* footer-appliance-head */
    /* .footer-appliance-head {
        width: 80% !important;
    } */
}