@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&display=swap');

#webHomePage
{
    width: 100%;
    height: fit-content;
    --border-radius: 14px;
    /* --primary: orange; */
    background-color: var(--whiteBg);
}
#webHomePage .maxContentWidth
{
    /* display: flex; */
    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 50px;
    padding: 20px;
}


#webHomePage h2,
#mobileHomePage h2
{
    font-size: 1.2em;
    font-weight: 500;
}

#mobileHomePage
{
    width: 100%;
    height: fit-content;
    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 50px;
    padding: 20px;
    --border-radius: 14px;
    /* --primary: orange; */
    background-color: var(--whiteBg);
}




/* PROMOTION */
    #mobileHomePage #sales
    {
        width: 100%;
        border-radius: var(--border-radius);
        padding: 20px 16px;
        padding-bottom: 14px;
        position: relative; 
        background: #7DD8FF;
        background: radial-gradient(circle, rgb(84, 181, 223) 0%, var(--primary) 100%);
    }
    #mobileHomePage #sales #text
    {
        width: 55%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 20px;
        color: var(--white);
    }
    #mobileHomePage #sales #text #title
    {
        font-size: 1.1em;
        font-weight: 500;
    }
    #mobileHomePage #sales #text #actions
    {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 3px;
    }
    #mobileHomePage #sales #text #actions p#bookingBtn
    {
        padding: 0px 20px;
        border-radius: 10px;
        background-color: var(--white);
        color: var(--blackText);
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #mobileHomePage #sales #text #actions p#outsideBtn
    {
        flex: 1 1 0px;
        background-color: var(--white);
        color: var(--blackText);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10000px;
        width: 34px;
        height: 34px;
    }
    #mobileHomePage #sales #text #actions p#outsideBtn ion-icon
    {
        transform: rotate(-45deg);
        font-size: 1.4em;
    }
    #mobileHomePage #sales #salesImg
    {
        position: absolute;
        right: 10px;
        bottom: 0;
        height: calc(100% + 5px);
        width: auto;
    }
/* PROMOTION */

/* SERVICES */
    #mobileHomePage #services
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 20px;
    }
    #mobileHomePage #services #servicesList
    {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 14px;
        list-style: none;
    }
    #mobileHomePage #services #servicesList li
    {
        width: 100%;
        /* padding: 14px; */
        border-radius: 12px;
        background-color: var(--white);
        box-shadow: 5px 5px 25px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        overflow: hidden;
    }
    #mobileHomePage #services #servicesList li .headerImg
    {
        width: 100%;
        height: 90px;
        position: relative;
        display: flex;
        justify-content: start;
        align-items: end;
        padding: 10px;
    }
    #mobileHomePage #services #servicesList li .headerImg h3
    {
        z-index: 2;
        font-weight: 400;
        color: var(--white);
        /* mix-blend-mode: difference; */
        text-shadow: 0px 0px 10px rgba(0,0,0,0.9),
                    1px 1px 0px rgb(95, 95, 95),
                    1px -1px 0px rgb(95, 95, 95),
                    -1px 1px 0px rgb(95, 95, 95),
                    -1px -1px 0px rgb(95, 95, 95);
    }
    #mobileHomePage #services #servicesList li .headerImg img
    {
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #mobileHomePage #services #servicesList li .text
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 10px;
        padding: 10px;
    }
    #mobileHomePage #services #servicesList li .text .infos
    {
        width: 100%;
        display: flex;
        /* flex-direction: row-reverse; */
        justify-content: space-between;
        align-items: center;
    }
    #mobileHomePage #services #servicesList li .text .infos .duration
    {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 4px;
    }
    #mobileHomePage #services #servicesList li .text .infos .duration ion-icon
    {
        font-size: 1.3em;
        color: var(--primary);
    }
/* SERVICES */

/* TESTIMONIALS */

    #mobileHomePage #testimonials
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 20px;
    }
    #mobileHomePage #testimonials #stats
    {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        width: 100%;
    }
    #mobileHomePage #testimonials #stats li
    {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-color: var(--white);
        padding: 10px;
        box-shadow: 4px 4px 20px rgba(0,0,0,0.05);
        border-radius: 14px;
        text-align: center;
    }
    #mobileHomePage #testimonials #stats li p:nth-child(1),
    #mobileHomePage #testimonials #stats li p:nth-child(3)
    {
        font-size: 0.9em;
        font-weight: 600;
    }
    #mobileHomePage #testimonials #stats li p:nth-child(2)
    {
        font-family: "BBH Hegarty", sans-serif;
        font-size: 2em;
    }
    #mobileHomePage #testimonialsList
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        transform: scale(95%);
    }
    #mobileHomePage #testimonialsList li
    {
        width: 100%;
        background-color: var(--white);
        box-shadow: 0px 0px 10px rgba(0,0,0,0.05),
                    4px 4px 20px rgba(0,0,0,0.07);
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        border-radius: 10px;
        padding: 10px 0px;
        gap: 10px;
    }
    #mobileHomePage #testimonialsList li .meta
    {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
    }
    #mobileHomePage #testimonialsList li .meta .profile
    {
        font-size: 1.1em;
        font-weight: 500;
    }
    #mobileHomePage #testimonialsList li .meta .rating
    {
        display: flex;
        justify-items: center;
        align-items: center;
        gap: 2px;
        color: var(--primary);
    }
    #mobileHomePage #testimonialsList li .meta .rating ion-icon
    {
        font-size: 1.3em;
    }
    #mobileHomePage #testimonialsList li .comment
    {
        padding: 0 10px;
    }
    #mobileHomePage #testimonialsList li:nth-child(1)
    {
        transform: rotate(+0.5deg);
    }
    #mobileHomePage #testimonialsList li:nth-child(2)
    {
        transform: rotate(-1deg);
    }
    #mobileHomePage #testimonialsList li:nth-child(3)
    {
        transform: rotate(+0.2deg);
    }
/* TESTIMONIALS */

/* ACTION BTN */
    #mobileHomePage #homeFooterActionBtn
    {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #7DD8FF;
        background: radial-gradient(circle, rgb(84, 181, 223) 0%, var(--primary) 100%);
        color: var(--white);
        border-radius: 14px;
        margin-bottom: 20px;
        font-size: 1.2em;
        font-weight: 600;
    }
/* ACTION BTN */







@media (max-width: 850px)
{
    #mobileHomePage
    {
        display: flex;
    }
    #webHomePage
    {
        display: none;
    }
}