html {
    scroll-behavior: smooth;
}

.navbar {
    box-shadow: 0px 7px 30px 4px rgba(0, 0, 0, 0.15);
}

.navbar_detail {
    padding: 1vh 5vh !important;
    justify-content: space-between !important;
}

.navbar-right {
    justify-content: flex-end !important;
}

.navbar-header {
    justify-content: flex-start !important;
}

.navbar-brand {
    height: auto;
    width: 45%;
}

.nav-link {
    font-weight: bold;
}

body {
    overflow-x: hidden;
    background-color: #444243 !important;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.CleanPic {
    height: 85%;
    width: 100%;
    background-image: url(Image/About_Us.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.CleanOverlay {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.25);
    z-index: 2;
}

.AbText {
    padding: 0 2%;
    width: 50%;
    z-index: 3;
}

.AbTitle {
    font-weight: bold;
}

.Benefits {
    width: 100%;
    height: auto !important;
}

.BenIcon {
    justify-content: center;
    background-color: white;
    padding-bottom: 3vh;
}

.Profile {
/*    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);*/
    width: 20%;
    display: flex;
    padding: 2vh;
    flex-direction: column;
    justify-content: center;
    background-color: white;
    align-items: center;
}

/*
.Profile:hover > div {
    filter: opacity(0%);
    transition: .2s ease-in;
}
*/

.Profile:hover {
    cursor: pointer;
}

.IconList {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 8vh;
    filter: opacity(100%);
}

.ExpIcon {
    background-image: url(Image/Maid.png);
}

.SoapIcon {
    background-image: url(Image/star.png);
}

.ThroughIcon {
    background-image: url(Image/Soap.png);
}

.CommitIcon {
    background-image: url(Image/Commit.png);
}

.CompleteIcon {
    background-image: url(Image/Complete.png);
}

.Desc {
    filter: opacity(100%);
    display: flex;
    font-weight: bold;
    padding: 1vh 0;
    justify-content: center;
}

.PicDesc {
    font-size: 2.05vh !important;
}

.TablePayment, .LittleTitle, .btn-link, .card-body, .ClientComment,.ExtraDetail,.DetailSect,.LocationSect {
    font-size: 2vh !important;
}

.SubFAQsTitle,.SubPricingTitle,.SubTestiTitle,.AbTitle{
    font-size: 3vh !important;
}

.FAQsTitle, .PricingTitle, .TestiTitle {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 4vh;
    padding: 10vh 3vh;
    color: white;
}

.Services {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    height: 70%;
    background: transparent;
/*
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(221,220,218,1) 50%, rgba(194,194,196,1) 100%);
*/

}

.swiper {
    width: 100%;
    padding-top: 50px;
    height: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-bottom: 50px;
}

.swiper-slide {
    display: flex !important;
    width: 35% !important;
    height: 55% !important;
}

.PicHolder {
    display: flex !important;
    position: relative;
    width: 60% !important;
    height: 100% !important;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

.OriginPic {
    position: absolute;
    z-index: 2;
    background-position: center;
    background-size: cover;
    width: 100% !important;
    height: 100% !important;
}

.PicOverlay {
    background-color: black;
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center;
    width: 100%;
    filter: blur(20px);
}

.PicDesc {
    background-color: white;
    padding: 2vw;
    width: 60%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.ContWeekly {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.ContWeekly, .ContMoveOut {
    height: 35%;
    width: 100%;
}

.ContMoveOut {
    display: flex;
    justify-content: center;
    align-items: center;
}

.AlignRight {
    text-align: right;
}

.OneTime{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 30%;
}

.tableHeader {
    text-align: center;
}

.WeekTime {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 100%;
}

.MoveOutDesc, .WeeklyDesc, .OneTimeDesc {
    width: 75%;
}
.WeeklyDesc {
    text-align: center
}

.TablePayment {
    width: 100%;
}

.BenIcon {
    box-shadow: 0px 7px 30px 4px rgba(0, 0, 0, 0) !important;
}

.BenIcon,.Pricing,.TestCont,.FAQs {
    border-radius: 2vh !important;
    background-color: white !important;
    box-shadow: 0px 7px 30px 4px rgba(0, 0, 0, 0.45);
}

.container{
    padding: 0 !important;
}

.PricingTitle,.FAQsTitle, .TestiTitle {
    text-align: center;
    font-weight: bold;
    display: flex;
    border-radius: 2vh 2vh 0 0;
    flex-direction: column;
}

.SubPricingTitle, .SubFAQsTitle, .SubTestiTitle {
    font-weight: 300;
}

.FAQs {
    width: 70% !important;
    display: flex;
    flex-direction: column;
    margin: 5vh auto 5vh auto;
}

.CollapseBtn {
    text-decoration-line: none;
}

button.btn-link {
    font-weight: bold !important;
    text-decoration: none !important;
}

#accordion {
    margin-top: 1vh;
}

.card {
    margin: 2vh !important;
}

.Testimonial {
    display: flex;
    justify-content: center;
    margin: 4vh;
}

.TestCont {
    margin-top: 2vh;
    text-align: center;
}

.FeedbackReview, .BeforeAfter {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 100%;
}

.FeedbackReview {
    margin: 2vh 3vh;
}

.LittleTitle {
    text-align: center;
}

.B4_1, .B4_2, .B4_3, .B4_4, .B4_5, .B4_6 {
    width: 50%;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.BeforeAfter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100%;
}

.B4_1 {
    background-image: url(Image/B4_1.png);
}

.B4_2 {
    background-image: url(Image/B4_2.jpeg);
}

.B4_3 {
    background-image: url(Image/B4_3.jpeg);
}

.B4_4 {
    background-image: url(Image/B4_4.png);
}

.B4_5 {
    background-image: url(Image/B4_5.jpeg);
}

.B4_6 {
    background-image: url(Image/B4_6.jpg);
}

.Foot {
    height: auto;
    background-color: #f8f9fa;
    box-shadow: 0px 7px 30px 4px rgba(0, 0, 0, 0.15);
}

.FooterBrand {
    height: 100%;
    width: 100%;
    background-image: url(Image/Logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.ClientSVG {
    height: auto;
    fill:blue;
    filter: none;
}

.LogonContact {
    display: flex;
    width: 15%;
    flex-direction: column;
    justify-content: center;
}

.contact {
    display: flex;
    justify-content: space-around;
    align-content: center;
    margin-top: 1vh;
}

.FootDetails {
    padding: 2vw;
    display: flex;
    justify-content: center;
}

.DetailSect {
    padding: 0 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.btn-Whatsapp , .btn-Facebook , .btn-Email {
    padding: 0.85vw 2.5vh !important;
    border-radius: 2vw !important;
}

.btn-Whatsapp:hover {
    box-shadow: 0px 0px 10px 2px rgb(94,196,58,0.45) !important;
    transition: .2s ease-in;
}

.btn-Facebook:hover {
    box-shadow: 0px 0px 10px 2px rgb(60,106,255,0.45) !important;
    transition: .2s ease-in;
}

.btn-Email:hover {
    box-shadow: 0px 0px 10px 2px rgb(231,71,56,0.45) !important;
    transition: .2s ease-in;
}
    
svg {
    filter: invert();
    height: 100%;
}

.btn-Whatsapp {
    background-color: #5ec43a !important;
}

.btn-Facebook {
    background-color: #3c6aff !important;
}

.ContainerReview {
    display: flex;
    width: 100%;
    margin: 2vh 0;
    padding: 3vh 5vh; 
    border-radius: 5vh;
    box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.10);
    height: 100%;
}

.Pict1 {
    background-image: url(https://scontent.fkul16-1.fna.fbcdn.net/v/t39.30808-1/312547631_10162583005718298_6772965298303176762_n.jpg?stp=dst-jpg_s200x200&_nc_cat=101&ccb=1-7&_nc_sid=11e7ab&_nc_eui2=AeG_VQ4gb0LmvpdXZ67WijvNGB0xnXfMOxAYHTGdd8w7EESITiGFZMtQnA_vUuGarmFbk3B2fEcO8GDycrPLwTQ1&_nc_ohc=J6UKYJNh3lEAX-9rRjl&_nc_ht=scontent.fkul16-1.fna&oh=00_AfBdlQ1a3Nld0vFFhPaULXOFROkVzkLDyqD302gjC3cKNA&oe=65E7197B);
}

.Pict2 {
    background-image: url(https://scontent.fkul16-2.fna.fbcdn.net/v/t1.6435-1/187114450_10208911763348696_2194355204489858810_n.jpg?stp=dst-jpg_p200x200&_nc_cat=108&ccb=1-7&_nc_sid=2b6aad&_nc_eui2=AeGG_vAFWLTs7tHunhIX1V3j6uPfGTda6Trq498ZN1rpOgbHXkTbng1Sx3KgICxAU5IT9TVILgmGkGOtvsMivPal&_nc_ohc=peNmU_3XL-sAX_9VakQ&_nc_ht=scontent.fkul16-2.fna&oh=00_AfA_lJBW9OySNEgBsAIpNPoviosVhp3qY4JBkVyPqjwaKQ&oe=66095430);
}

.Pict3 {
    background-image: url(https://scontent.fkul16-2.fna.fbcdn.net/v/t1.18169-9/17308697_388831971492921_4819508368214000053_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=300f58&_nc_eui2=AeFlWo1YDSL18h82fF6qNi-FI8fMIEgEnSkjx8wgSASdKc84i0yEa6KP3fentjmgZ6n8LzqKQ6qtLPbQLCJApjdy&_nc_ohc=BkrZoqn6iWoAX8WO5Gn&_nc_ht=scontent.fkul16-2.fna&oh=00_AfAnjj3Ta0Z6Rgm29fxniXe3LjtlDLJXvwo6Jf8LmcY9BA&oe=66092F85)
}

.ProfilePict {
    width: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 15vh;
}

.DescTitle {
    font-weight: bold;
}

.ClientComment {
    margin: 2vh 0 !important;
}

.PricingTitle {
    background-image: url(https://images.pexels.com/photos/6195111/pexels-photo-6195111.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
}

.FAQsTitle {
    background-image: url(https://images.pexels.com/photos/4099467/pexels-photo-4099467.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    background-position: center !important;
}

.TestiTitle {
    background-image: url(https://images.pexels.com/photos/6195275/pexels-photo-6195275.jpeg);
}

.PricingTitle,.FAQsTitle, .TestiTitle {
    background-size: cover;
    background-position: bottom;
}

.DescClient {
    padding: 0 3vh;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.SvgFaq {
    fill:blue;
    filter: none
}

.ContactButton {
    padding: 3vh !important;
    background-color: #e62e2d;
    border: 0px !important;
    font-weight: bold;
    color:white;
    border-radius: 4vh;
    width: 40%;
    margin-left: auto;
}

.ContactButton svg {
    width: 10%;
    filter: invert(0);
}

.ListContact {
    display: flex;
    flex-direction: column;
}

.ListContact button {
    filter: opacity(0);
    width: 15%;
    padding: 3vh !important;
    margin: 1vh 0;
    margin-left: auto !important;
}

.ListContact button svg {
    height: 10%;
    width: 60%;
}

.ButtonList {
    position: fixed;
    bottom: 3vh;
    right: 3vh;
    display: flex;
    flex-direction: column-reverse;
    z-index: 10;
}

.btn-Email {
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
}

.BusinessHourTitle {
    font-weight: bold;
    margin-bottom: 1vh;
    padding-bottom: 1vh;
    width: 60%;
    border-bottom: 1px solid rgb(0,0,0,0.25);
}

.LocationSect {
    padding: 0 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
}

/* Animation */
.Pricing,.OneTime,.WeekTime,.Profile,.ContMoveOut,.FAQs,.animateCard,.TestCont,.ContainerReview,.BeforeAfterChild,.BenIcon {
    filter: opacity(0);
}

@media only screen and (max-width: 768px) {
    /* Animation */
    .Pricing,.OneTime,.WeekTime,.Profile,.ContMoveOut,.FAQs,.animateCard,.TestCont,.ContainerReview,.BeforeAfterChild,.BenIcon {
        filter: opacity(1);
    }
    
    .CompressTd {
        display: block;
    }
    
    body {
        background-color: white !important;
    }
    
    .PricingTitle,.FAQsTitle, .TestiTitle {
        margin: 0;
    }
    
    .container {
        margin: 0 !important;
        padding: 0 !important;
    }
    
  /* For mobile phones: */
    .AbText {
        width: 97%;
    }
    
    .FeedbackReview {
        margin: 0;
    }
    
    .TablePayment tr {
        margin-bottom: 2vh;
    }
    
    .LittleTitle {
        width: 70%;
        padding: 1vh 2vh;
    }
    
    .CleanPic {
        justify-content: center;
        text-align: left;
    }
    
    .swiper-slide {
        flex-direction: column;
        width: 65% !important;
        height: 65% !important;
    }
    
    .ExtraDetail {
        text-align: left !important;     
    }
    
    .PicHolder, .PicDesc {
        width: 100% !important;
    }
    
    .PicDesc {
        padding: 3vw;
    }
    
    .PicDesc b {
        display: flex;
        justify-content: center;
    }
    
    
    .headerService {
        text-align: left;
    }
    
    .headerPricing {
        text-align: right;
    }
    
    .Pricing {
        display: flex;
        flex-direction: column;
    }
    
    .OneTime, .WeekTime, .ContMoveOut {
        width: 100%;
        margin-top: 5vh;
    }
    
    .PicDesc,.AbTitle {
        font-size: 1.75vh !important;
    }

    .AbText, .TablePayment, .LittleTitle, .btn-link, .card-body, .ClientComment, .DetailSect, .LocationSect {
        font-size: 1.5vh !important;
    }

    .SubFAQsTitle,.SubPricingTitle,.SubTestiTitle{
        font-size: 1.75vh !important;
    }

    .FAQsTitle, .PricingTitle, .TestiTitle {
        font-size: 2.25vh;
        border-radius: 0;
    }

    .SvgFaq {
        width: 7% !important;
    }
    
    .Benefits {
        display: flex;
        flex-wrap: wrap;
        width: 100% !important;
        margin: 3vh 0;
        justify-content: center;
    }
    
    .BenIcon {
        flex-direction: column;
        height: 50%;
    }
    
    .Profile:nth-child(odd){
        flex-direction: row-reverse
    }
    
    .Profile {
        width: 100%;
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 2vh 0;
    }
    
    .ContainerReview {
        padding: 2vh;
    }
    
    .ProfilePict {
        display: none;
    }
    
    .ClientLink a svg{
        width: 3vh;
    }
    
    .Testimonial {
        flex-direction: column;
        margin: 0;
    }
    
    .FootDetails {
        flex-direction: column;
    }
    
    .LocationSect {
        text-align: left;
    }
    
    .DetailSect {
        margin: 2vh 0;
    }
    
    .FooterBrand {
        width: 50%;
        height: 80px;
    }
    
    .btn-Whatsapp , .btn-Facebook , .btn-Email {
        height: 6vh;
    }
    
    .LogonContact {
        width: 100%;
    }
    
    svg {
        height: 45%;
        width: 100%;
    }
    
    .Contact {
        justify-content:flex-start;
    }
    
    .Contact button {
        margin-right: 2vh;
    }
    
    .FootDetails {
        margin-top: 3vh;
    }
    
    .card {
        margin: 2vh 0;
    }
    
    .FAQs {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    button.btn-link,.card-body {
        text-align: left !important;
    }
    
    .navbar-brand {
        width: 70%;
    }
    
    .navbar-header {
        width: 70%;
    }
    
    .navbar {
        padding: 1vh 2vh !important;
    }
    
    .CleanOverlay {
        width: 100%;
        background-position: center;
        background-size: cover;
        display: block;    
        filter: opacity(0.25);
        background-image: url(https://images.pexels.com/photos/4099469/pexels-photo-4099469.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    }
    
    .ContactButtonText {
        display: none;
    }
    
    .ContactButton svg, .ListContact button svg{
        width: 85%;
        height: 50%;
    }
    
    .ListContact button {
        padding: 0 !important;
        width: 20% !important;
    }
    
    .ContactButton {
        width: 20%;
        padding: 2vh !important;
    }
    
    .CleanPic {
        color: black;
        background-image: none;
    }
    
    .CleanPic,.CleanOverlay {
        height: 75%;
    }
}