:root {
    --primary: #fd0057;
    --blue: #0da1b1;
    --red: #df2321;
    --primary-dark: var(--red);
    --green: #338033;

    --xs : 320px;
    --sm : 375px;
    --md : 425px;
    --lg : 768px;
    --xl: 1024px;
    --xxl: 1440px;
}

/* Parallax base styles
--------------------------------------------- */

.parallax {
    height: 500px;
    /* fallback for older browsers */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
}

.parallax__group {
    position: relative;
    height: 500px;
    /* fallback for older browsers */
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-repeat: no-repeat !important;
        background-size: cover !important; */
}

.parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
}

.parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
}

.parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
}

.parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 2;
}

/* Debugger styles - used to show the effect
  --------------------------------------------- */

.debug {
    position: fixed;
    top: 0;
    left: .5em;
    z-index: 999;
    /* background: rgba(0, 0, 0, .85); */
    color: #fff;
    padding: .5em;
    border-radius: 0 0 5px 5px;
}

.debug-on .parallax__group {
    -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
    transform: translate3d(700px, 0, -800px) rotateY(30deg);
}

.debug-on .parallax__layer {
    box-shadow: 0 0 0 2px #000;
    opacity: 0.9;
}

.parallax__group {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}


/* demo styles
  --------------------------------------------- */

body,
html {
    overflow: hidden;
    font-family: 'Lucida Sans',
    'Lucida Sans Regular',
    'Lucida Grande',
    'Lucida Sans Unicode',
    Geneva,
    Verdana,
    sans-serif;
    color: #fff; 
}

button{
    font-family: 'Lucida Sans',
    'Lucida Sans Regular',
    'Lucida Grande',
    'Lucida Sans Unicode',
    Geneva,
    Verdana,
    sans-serif !important;
    font-weight: 500;
}


* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.menu-icon {
    opacity: 0;
    position: fixed;
    z-index: 999;
    top: 15px;
    left: 30px;
    transition: .3s ease-in;
}

.menu-icon:hover {
    cursor: pointer;
}

.menu-icon span {
    display: block;
    height: 2px;
    margin: 6px 0;
    width: 25px;
    background: #fff;
    transform-origin: center;
    transition: 0.4s;
}

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

    .menu-icon:hover span {
        animation: elastic .3s ease-in-out .2s infinite alternate;
    }

    .menu-icon:hover span:first-child {
        animation: elastic .5s ease-in-out .5s infinite alternate;

    }

    .menu-icon:hover span:last-child {
        animation: elastic .2s ease-in-out .3s infinite alternate;
    }
}

/* Rotate first bar */
.menu-active span:first-child {

    -webkit-transform: rotate(-45deg) translate(0px, 11px);
    transform: rotate(-45deg) translate(0px, 11px);
}

/* Fade out the second bar */
.menu-active span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}

/* Rotate last bar */
.menu-active span:last-child {

    -webkit-transform: rotate(45deg) translate(0px, -12px);
    transform: rotate(45deg) translate(0px, -12px);
}

@keyframes elastic {
    from {
        width: 25px;
    }

    to {
        width: 20px;
    }
}

.floating-btn{
    position: absolute;
    z-index: 999;
    bottom: 50px;
    right: 50px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;

    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition: all .3s ease-in-out;
    overflow: hidden;
}
.floating-expandable-btn span{
    position: absolute;
    text-align: center;
    width: 100%;
    top: 50%;
    left: 50%;
    /* opacity: 0; */

    transition: all .3s ease-in-out;
    transform: translate(200%, -50%);
}
.floating-expandable-btn:hover {
    width: 130px;
    border-radius: 100px;
}
.floating-expandable-btn:hover span {
    opacity: 1;
    transform: translate(-50%, -50%);
}
.floating-expandable-btn:hover i {
    transform: translate(-350%, -50%);

}


.floating-btn.remove{
    right: -100px !important;
    opacity: 0 !important;
}

.floating-btn i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px !important;
    transition: .3s ease-in-out;

}

.floating-btn::before, .fa:after {
    position: absolute;
    opacity: 1;
    content: '';
    width: 0rem;
    height: 0rem;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%);
    border-radius: 50%;
    border: 5px black;
    /* z-index: -3; */
}
.floating-btn::before{
    background-color: var(--primary-dark);
    border-radius: 100px;
    transition: all .5s ease-in-out;
}

/* .floating-btn::after{
    z-index: 3;
    background-color: var(--blue);
    transition-delay: .3s;
} */

@keyframes hover-ripples {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        z-index: -3;

    }
}
/* .floating-btn:hover::before, */

.floating-btn:hover::before, .floating-btn:hover::after {
    /* position: absolute; */
    width: 110%;
    height: 110%;
    bottom: 0px;
    /* opacity: 1; */
    z-index: -3;
    transition: all .3s ease-in-out;
    content: '';
    position: absolute;
    border-radius: 100px;
    /* animation: hover-ripples .6s ease-in-out */
}

.navbar {
    position: absolute;
    /* left: 0; */
    left: -250px;
    top: 0;
    /* width: 0px; */
    width: 250px;
    height: 100%;
    background: var(--primary);
    text-align: center;
    transition: .3s ease-in-out;
}
.btn-rose{
    background: var(--primary);
    color: #fff;
    font-size: 1.25rem;
}

.f-xxl{
    font-size: 1.5rem !important;
}
.t-white{
    color: #fff;
}

.navbar div {
    /* height: 100%; */

}

/* @keyframes translate {
        from {
            opacity: 0;
            transform: translateX(-100%);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    } */
.navbar .nav {
    position: absolute;
    left: 50%;
    top: 10%;
    width: 90%;

    text-align: center;
    transform: translateX(-50%);
    list-style-type: none;
    transition: .3s ease-in-out;
}

.navbar .nav-brand {
    margin-bottom: 80px;
}

.navbar .nav-footer {
    position: absolute;
    width: 100%;
    bottom: 15px;
}

.navbar .nav-item {
    display: block;

}

.navbar .nav-link,
.navbar .nav-link button {
    font-size: 1.5rem !important;
    color: #fff;
    font-weight: bold;
    /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
}

/* .nav-link:hover{

    } */

/* .pop-left{

    } */
.slide-left {
    margin-left: 250px;
}

main {
    transition: .3s ease-in-out;
    /* margin-left: 250px; */
}

.parallax {
    font-size: 150%;
}

/* centre the content in the parallax layers */
.title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.title.top-title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 15%;
    -webkit-transform: translate(-50%, -15%);
    transform: translate(-50%, -15%);
}



/* style the groups
  --------------------------------------------- */

#showcase {
    z-index: 5;
    /* slide over group 2 */
}

#showcase .parallax__layer--base {

    background-image: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('../images/bg.jpg');
}

.scroll-down {
    color: #fff;

    position: absolute;
    bottom: 25px;
    left: 50%;
    width: 40px;
    height: 90px;
    transform: translateX(-50%);
    /* border : 3px solid #fff; */
    border: none;
    border-radius: 35%;
}

.scroll-down:hover {
    cursor: pointer;
}

.scroll-down i {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px !important;
    animation: pulldown 1.2s ease-out 2s infinite forwards;
}

@keyframes pulldown {
    0% {
        opacity: 0;
        bottom: 30px;
    }

    100% {
        opacity: 1;
        top: 50%;
    }
}


#group2 {
    z-index: 3;
    /* slide under groups 1 and 3 */
}

#group2 .parallax__layer--back {
    background: rgb(123, 210, 102);
    background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
        url('../images/bg2.jpg');
}

#services {
    z-index: 4;
    /* slide over group 2 and 4 */
}

#services .parallax__layer--base {
    /* background: rgb(153, 216, 101); */
    background: rgb(153, 216, 101);
    background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .75)),
        url('../images/bg3.jpg');
}

#services .row {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Hover Card */
.container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

.container .box {
    position: relative;
    width: 300px;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
}

/* .container .box:first-child{
        margin-top: 50px;
    }
    .container .box:last-child{
        margin-top: 100px;
    } */

.container .box .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 1.3s ease-in-out;
    border-radius: 5px;

}

.container .box:hover .imgBx {
    transform: translateY(-100%);
}

.container .box .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px !important;

}

.container .box .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 1.3s ease-in-out;
}

.container .box .layer.layer1 {
    background: #0096ff;
    transform: translateY(100%);
}

.container .box:hover .layer.layer1 {
    transform: translateY(-100%);
}

.container .box .layer.layer2 {
    background: #90ff00;
    height: 170%;
    transform: translateY(200%);
}

.container .box:hover .layer.layer2 {
    transform: translateY(-200%);
}

.container .box .contentBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: #794e33; */
    background: var(--primary);
    color: #fff;
    transition: 1.3s ease-in-out;
    transform: translateY(300%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0px; */
}

.container .box:hover .contentBx {
    transform: translateY(0);
}

.container .box .contentBx div {
    transition: 2s ease-in-out;
    transform: translateY(400%);
    margin: 10px 20px;
    word-wrap: break-word;
}

.container .box .contentBx p {
    margin-top: 10px;
}

.container .box:hover .contentBx div {
    transform: translateY(0%);
}

#shop {
    z-index: 2;
    /* slide under group 3 and 5 */
}

#shop .parallax__layer--base .title {
    top: 20%;
}

#shop .parallax__layer--deep {
    /* background: rgb(184, 223, 101); */
    background: linear-gradient(rgba(253, 0, 87, .3), rgba(253, 0, 87, .3)),
        url('../images/bg3.jpg');
}

#shop .title.top-title{
    top: 10%;
}

#shop .content{
    position: absolute;
    top: 20%;
    width: 100%;
    text-align: center;
    
}

#shop .row {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Hover Card */
#shop .container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

#shop .container .box {
    position: relative;
    width: 320px;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
}

#shop .container .box .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 1.3s ease-in-out;
    border-radius: 5px;

}

#shop .container .box:hover .imgBx,
#shop .container .box.hover .imgBx
{
    transform: translateX(-100%);
}

#shop .container .box .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 5px !important;
}

#shop .container .box img{
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 5px !important;
}

#shop .container .box .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 1.3s ease-in-out;
}

#shop .container .box .layer.layer1 {
    background: #0096ff;
    transform: translateX(100%);
}

#shop .container .box:hover .layer.layer1,
#shop .container .box.hover .layer.layer1{
    transform: translateX(-100%);
}

#shop .container .box .layer.layer2 {
    background: #90ff00;
    height: 170%;
    transform: translateX(200%);
}

#shop .container .box:hover .layer.layer2 ,
#shop .container .box.hover .layer.layer2 {
    transform: translateX(-200%);
}

#shop .container .box .contentBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: #794e33; */
    background: var(--primary);
    color: #fff;
    transition: 1.3s ease-in-out;
    transform: translateX(300%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0px; */
}

#shop .container .box:hover .contentBx,
#shop .container .box.hover .contentBx {
    transform: translateX(0);
}

#shop .container .box .contentBx div {
    transition: 2s ease-in-out;
    transform: translateX(400%);
    margin: 10px 20px;
    word-wrap: break-word;
}

#shop .container .box .contentBx p {
    margin-top: 10px;
}

#shop .container .box:hover .contentBx div,
#shop .container .box.hover .contentBx div {
    transform: translateX(0%);
}


#shop .bottom-row {
    position: absolute;
    bottom: 5%;
    width: 100%;
    text-align: center;
}

#testimonies {
    z-index: 3;
    /* slide over group 4 and 6 */
}

#testimonies .parallax__layer--base {
    background: rgb(214, 229, 100);
}

#reservation {
    z-index: 2;
    /* slide under group 5 and 7 */
}

#reservation .parallax__layer--back {
    background: rgb(245, 235, 100);
}

#reservation .content{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-40%);
    width: 100%;
}

#reservation .wrapper {
    width: 100%;
    display: flex;
}
@media (max-width: 475px){
    #reservation .wrapper {
        flex-wrap: wrap;
    }
    #reservation .content .card {
        width: 100%;
    }
}

#reservation .content .card {
    width: calc(33% -10px);
    border-radius: 10px;
    padding: 10px 20px;
}

#reservation .content .card.contact-card {
    background: #22222F;
    /* background: #858e99; */

}

.contact-calendar{
    background-color: #fff;
    padding-top: 50px;
}
/* @media (max-screen: )

.card.contact-calendar{
    background: #eee;
}
 */



/* Form design */
/* form starting stylings ------------------------------- */
.material-form {}

.group {
    position: relative;
    margin: 30px auto;
}

.material-form input {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 300px;
    border: none;
    border-bottom: 1px solid #757575;
    /* border-bottom: 1px solid #fff; */
    background: transparent;
}

.material-form input:focus {
    outline: none;
}

/* LABEL ======================================= */
.material-form label {
    /* color: #999; */
    color: var(--blue);
    font-size: 18px;
    font-weight: 500;
    position: absolute;
    pointer-events: none;

    left: 5px;
    top: 10px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

/* active state */
.material-form input:focus~label,
.material-form input:valid~label {
    top: -20px;
    font-size: 14px;
    color: var(--primary);
}

/* BOTTOM BARS ================================= */
.bar {
    position: relative;
    display: block;
    width: 300px;
}

.bar:before,
.bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: var(--primary);
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.bar:before {
    left: 50%;
}

.bar:after {
    right: 50%;
}

/* active state */
.material-form input:focus~.bar:before,
.material-form input:focus~.bar:after {
    width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position: absolute;
    height: 60%;
    /* width: 100px; */
    width:70%;

    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* active state */
.material-form input:focus~.highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from {
        background: var(--primary);
    }

    to {
        width: 0;
        background: transparent;
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: var(--primary);
    }

    to {
        width: 0;
        background: transparent;
    }
}

@keyframes inputHighlighter {
    from {
        background: var(--primary);
    }

    to {
        width: 0;
        background: transparent;
    }
}



#footer {
    z-index: 3;
    /* slide over group 7 */
}

#footer .parallax__layer--base {
    /* background: rgb(255, 241, 100); */
    background: var(--primary);
}


/* misc
  --------------------------------------------- */
.demo__info {
    position: absolute;
    z-index: 100;
    bottom: 1vh;
    top: auto;
    font-size: 80%;
    text-align: center;
    width: 100%;
}

/** Postions ******** */

/* preloader
    -------------- */
@keyframes grow-up {
    0% {
        transform: translate(0, 100%);
    }

    33% {
        transform: translate(0, 0);
    }

    67% {
        transform: translate(0, -100%);
    }

    100% {
        transform: translate(0, -100%);
    }
}

@keyframes toast-popup {
    0% {
        transform: translate(0, 100%);
    }

    10% {
        transform: translate(0, 0);
    }

    90% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 100%);
    }
}

/* modifiers */

.big {
    font-weight: 900;
    font-size: 20px;
}

a {
    color: orange;
    font-weight: bold;
    cursor: pointer;
}

/* toast styles */
#toast {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    background: #22222F;
    color: white;
    font-size: 16px;
    transform: translate(0, 100%);
    z-index: 999
}

#toast.popped {
    animation: toast-popup 6s;
}



/* loading div styles. If you're copying this pen for your project, these are the styles you should be interested in!

WARNING: Note it's not prefixed! You might want to check the compiled version! */

/* #loading span {
        position: absolute;
        z-index: 99;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 7vw;
    } */
#loading-icon {
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 7vw;
    overflow: visible;
}

#lips-top {
    /* animation: lipstick-color 1s ease-in-out 2s 5 ; */
    transition: .3s ease-in;
    transform-origin: right center;
    /* fill: var(--red); */
    fill: #fff;
}

#lips-bottom,
.lipstick-color {
    transform-origin: right center;

    transition: .3s ease-in;
    /* fill: var(--primary); */
    fill: #fff;
}

#star-small,
#star-big {
    opacity: 0;
    fill: yellow;
    /* animation-duration:  1s;
        animation-timing-function: ease;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation: name duration timing-function delay iteration-count direction fill-mode; */
    transition: .3s ease-in-out;
    transform-origin: center !important;
}

#star-small {
    transform: translate(20%, -80%);

}

#star-big {
    /* animation-delay: 1s; */
    transform: translate(25%, -25%);
    left: 25%;
    top: -25%;
}

.lipstick-color {
    /* fill: var(--red); */
    /* animation: lipstick-color ease-out 1.5s 5; */
    animation-delay: 1.4s;
}

@keyframes lipstick-color {
    to {
        fill: var(--primary);
        /* fill: #000; */
    }

    /* to {
            fill: var(--red);
        } */
}

@keyframes colorize-upper {
    from {
        fill: white
    }

    to {
        fill: var(--red);
    }
}

@keyframes twinkle {
    from {
        /* display: none; */
        opacity: 0;
        width: 5px;
        height: 5px;

    }

    to {
        /* display: block;  */
        opacity: 1;
        width: 50px;
        height: 50px;
    }
}

/* animation: glitter 2s linear 0s infinite normal;
    -webkit-animation: glitter 2s linear 0s infinite normal;
    -moz-animation: glitter 2s linear 0s infinite normal;
    -ms-animation: glitter 2s linear 0s infinite normal;
    -o-animation: glitter 2s linear 0s infinite normal; */

@keyframes glitter {
    0% {
        -webkit-transform: scale(1.0);
        opacity: 1;
    }

    25% {
        -webkit-transform: scale(0.5);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1.0);
        opacity: 1;
    }

    75% {
        -webkit-transform: scale(0.5);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1.0);
        opacity: 1;
    }
}

@keyframes shrink {
    from {

        width: 0px;
        height: 0px;

    }

    to {

        width: 50px;
        height: 50px;
    }
}

@keyframes colorize-lower {
    from {
        fill: white
    }

    to {
        fill: var(--primary);
    }
}

@keyframes lipstick-upper {
    0% {
        transform:
            translateY(-20%);
    }

    100% {
        transform:
            translate(50%, -20%);
    }

}

@keyframes lipstick-lower {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform:
            translateX(50%);
    }
}

@keyframes lipstick {
    0% {
        transform:
            translateY(-20%);
    }

    25% {
        transform:
            translate(50%, -20%);
    }

    50% {
        transform:
            translate(0);
    }

    75% {
        transform:
            translate(50%, 0%);
    }

    100% {
        /* transform: rotate(-3deg) */
    }
}

@keyframes swing {
    from {
        transform:
            translate(50%, -30%);
    }

    to {
        transform: rotate(-3deg)
    }
}

/* Animation */

#loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #F44;
    z-index: 10;
    transform: translate(0, 100%);
    transition: transform 1s;
    overflow: hidden;
}

#loading::before {
    content: '';
    position: absolute;
    left: 0%;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgb(255, 121, 68);
    /* background: var(--primary); */
    /* background: var(--primary); */
    z-index: 20;
    transform: translate(0, 100%);
    animation: grow-up 4s infinite;
}

#loading::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0%;
    top: 0;
    bottom: 0;
    background: #44F;
    z-index: 30;
    transform: translate(0, 100%);
    animation: grow-up 4s infinite;
    animation-delay: 1.25s;
}

#loading.animate {
    transform: translate(0, 0);
}

/* 
    Scrollbar
    ------------- */

::-webkit-scrollbar {
    width: 0px;
}

/* 
    Footer
    -------------- */

.foot-credits {
    position: absolute;
    bottom: 0px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.foot-credits div {
    padding: 20px;
    margin: 0 auto;
    text-align: center;
}

/* Ripple Effect
------------- */

span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms linear;
    background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --------- Testimony cards */

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
}

/* ---- Testimonies carousel */

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

::selection {
    /* background: rgba(23, 162, 184, 0.3); */
    background: var(--primary);
}

#testimonies .wrapper {
    position: absolute;
    left: 50%;
    bottom: 35%;
    transform: translate(-50%, 35%);
}

.wrapper {
    /* min-width: 900px; */
    /* max-width: 1200px; */
    width: 100%;
    margin: auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media screen and (min-width:780px) {
    .wrapper {
        width: 80%;
    }

    #testimonies .wrapper .box:nth-child(2) {
        z-index: 3;
        transform: scale(1.18);
    }
}

.wrapper .box {
    background: #fff;
    width: calc(33% - 10px);
    /* width: 320px !important; */
    /* width: calc(33% - 10px); */
    padding: 25px;
    border-radius: 3px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    transition: transform .4s ease-in-out;
    /* overflow: hidden; */
}

.wrapper .box p {
    color: #282828;
    font-weight: 500;
}

.wrapper .box i.quote {
    /* font-size: 20px; */
    /* color: #17a2b8; */
    font-size: 2rem;
    color: var(--primary);
}

.wrapper .box .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
}

.box-hover {
    cursor: pointer;
    /* z-index: 5; */
    transform: scale(1.2);
}

.box-hover,
#testimonies .box:nth-child(2):hover {
    transform: scale(1.2);
    /* z-index: 10; */
}

.box .info .name {
    font-weight: 700;
    color: var(--primary);
    /* font-size: 17px; */
    font-size: 1.5rem;
}

.box .info .job {
    font-size: 16px;
    font-weight: 500;
    /* color: #17a2b8; */
    color: var(--blue);
    /* color: var(--green); */
}

.box .info .stars {
    margin-top: 2px;
}

.box .info .stars i {
    /* color: #17a2b8; */
    color: var(--primary);
}

.box .content .image {
    position: relative;
    height: 75px;
    width: 75px;
    padding: 3px;
    background: #17a2b8;
    border-radius: 50%;
}

.content .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
}

.box:hover .content .image img {
    border-color: #fff;
}

@media (max-width: 1045px) {
    .wrapper .box {
        width: calc(50% - 10px);
        margin: 10px 0;
    }
}

@media (max-width: 702px) {
    .wrapper .box {
        width: 100%;
    }
}

.wrapper .box {
    overflow: hidden;
}

.bubble.bubble1:before {
    background-image: url('../images/bg_bubble1_after.jpg') !important;
}

.bubble.bubble2:before {
    background-image: url('../images/bg_bubble2_after.jpg') !important;
}

.bubble.bubble3:before {
    background-image: url('../images/bg_bubble3_after.jpg') !important;
}

.bubble:before {
    position: absolute;
    background-color: #fff;
    background-image: url('https://adjemin.com/img/smartlivraison.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    content: '';
    width: 0rem;
    height: 0rem;
    /* width: 75px;
    height: 75px; 
    transform: translate(-50%, 50%); */
    left: 50%;
    bottom: 50%;
    transform: translate(-50%);
    border-radius: 500%;
    transition: all .5s ease-in-out;
    /* z-index: -3; */
}


/* .bubble:hover::before, */

.bubble-mouseenter::before {
    /* position: absolute; */
    width: 950px;
    height: 950px;
    bottom: -227.5px;
    /* z-index: 3; */
    transition: all .3s ease-in-out;

}

/* .bubble-mouseenter::before{
    width: 500px !important;
    height: 300px !important;
    bottom: -50px !important;
    left: -90px !important;
} */
.bubble-resize::before {
    width: 500px;
    height: 300px;
    bottom: -50px;
    left: -90px;
    border-radius: 0;
    /* animation: resize 10s ease-out .3s 3 alternate; */
    /* zoom 10s ease-out 10s 3 alternate; */
    transition: all .3s ease-in;
}

@keyframes resize {
    0% {
        background-position: center;
    }

    25% {
        background-position: bottom center;
    }

    50% {
        background-position: top center;
    }

    100% {
        background-position: top bottom;
    }
}

@keyframes zoom {
    0% {
        /* background-position: center; */
        width: 500px;
        height: 300px;
    }

    100% {
        width: 600px;
        height: 400px;
        /* background-position: top bottom; */
    }
}