body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(140deg, rgba(231,200,188,1) 0%, rgba(246,227,220,1) 100%);
    
}

@font-face {
    font-family: "Roustel";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    unicode-range: U+000-5FF;
    src: url("../font/Roustel.ttf");
}

@font-face {
    font-family: "Rantera";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    unicode-range: U+000-5FF;
    src: url("../font/Rantera.otf");
}

@font-face {
    font-family: "Renogare";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    unicode-range: U+000-5FF;
    src: url("../font/RenogareSoft-Regular.ttf");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    unicode-range: U+000-5FF;
    src: url("../font/Montserrat-Regular.ttf");
}

@font-face {
    font-family: "Made";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    unicode-range: U+000-5FF;
    src: url("../font/MADE\ Sunflower\ PERSONAL\ USE.otf");
}

@font-face {
    font-family: "Welbut";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    unicode-range: U+000-5FF;
    src: url("../font/Welbut_.ttf");
}

@font-face {
    font-family: "MeaCulpa";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    unicode-range: U+000-5FF;
    src: url("../font/MeaCulpa-Regular.ttf");
}

.navbar {
    /****background-color: #73B925;****/
    background-color: #8F6553;
    font-family: "Renogare";
    font-size: 0.85em;
    color: white;
    letter-spacing: 1.5px;
}

h1 {
    font-family: "Rantera";
    font-size: 4em;
    font-weight: bold;
    color: white;
    line-height: normal;
    text-shadow: 4px 3px 9px rgba(0,0,0,0.6);
}

h2 {
    font-family: "Rantera";
    color: #fffad7;
    font-size: 2.65em;
    letter-spacing: 1.25px;
    line-height: normal;
    text-shadow: 4px 3px 9px rgba(0,0,0,0.6);
}

.ale {
    font-family: "Roustel";
    color: white;
    font-size: 1.75em;
    letter-spacing: 1.25px;
    line-height: normal;
}

h3 {
    font-family: "Montserrat";
    color: white;
    font-size: 0.9em;
    word-spacing: 0.1em;
}

h4 {
    font-family: "Made";
    font-size: 1.75em;
    font-style: bold;
}

h5 {
    font-family: "Made";
    font-size: 2em;
    word-spacing: 0.1em;

}

h6 {
    font-family: "Montserrat";
    color: black;
    font-size: 0.6em;
    letter-spacing: 1.05px;
    font-weight: bold;
}

a {
    text-decoration: none;
}

.titulo-color {
    color: #8F6553;
}

.nav-link {
    color: #fffad7;
}

.nav-link:hover {
    color: white;
}


.up {
    position: relative;
    z-index: -1;
}

.up-contact {
    position: relative;
    z-index: -1;
    transform: scaleX(-1);
}

.bottom {
    position: relative;
    z-index: -1;
    transform: rotate(180deg);
}


.bg-contacto {
    background-color: #8F6553;
}

.bg-separador {
    /*****background: #73B925;*/
    background-color: #8F6553;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
}



.bg-quien {
    


    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: #dd9f88;
    border-radius: 35px 0;
    border: 1px solid rgba(255,255,255,0.18);
    border: 1px solid rgba(209, 213, 219, 0.3);
}



.bg-certificaciones {
    background-image: linear-gradient(to right top, #4d4d1c, #757620, #a0a11f, #cece19, #fffd00);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 35px;
    border-radius: 0 35px;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 4px 12px 0 rgba(255, 250, 250, 0.164);
}

.bg-promos {
    background: linear-gradient(135deg, rgba(60, 7, 7, 0.312), rgba(255, 65, 65, 0.453));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 4px 12px 0 rgba(255, 250, 250, 0.164);
}

.bg-testi {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.139), rgba(255, 255, 255, 0.453));
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    -webkit-border-bottom-right-radius: 35px;
    -webkit-border-bottom-left-radius: 35px;
    -moz-border-radius-bottomright: 35px;
    -moz-border-radius-bottomleft: 35px;
    border-bottom-right-radius: 35px;
    border-bottom-left-radius: 35px;
}

.blockquote {
    font-family: "Roustel";
    color: #fffad7;
    font-size: 1.75em;
}

.card-text,
.testimonio {
    font-family: "Montserrat", Sans-serif;
    font-size: 0.95em;
}

.card-subtitle {
    color: white;
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 0.85em;
}

.card-titlepromo {
    font-size: 1.5em;
    color: rgb(255, 213, 0);
}

.card-footer {
    font-family: "Made";
    color: rgb(255, 213, 0);
}

.tittle-cert {
    font-family: "Renogare";
    color: white;
    font-size: 1.5em;
    font-weight: 330;
}

.certificacion {
    font-family: "Renogare";
    font-size: 0.7em;
    font-weight: 330;
}

.escuela {
    font-family: "Rantera";
    word-spacing: 1.5px;
}

.msj-contact {
    font-family: "Montserrat";
    font-size: .75em;
    color: white;
    line-height: normal;
}

.politicas {
    font-family: "Montserrat";
    color: white;
    font-size: 1em;
    line-height: 2;

}

.reserva {
    font-family: "Made";
    font-size: .9em;
    color: #fffad7;
    letter-spacing: 1.15px;
}

.phone {
    font-family: "Montserrat";
    font-size: 1em;
    color: white;
    font-weight: bold;
}

.pago {
    font-family: "Montserrat";
    font-size: 0.85em;
    color: white;
}

.location {
    font-family: "Rantera";
    font-size: 1.25em;
    color: #fffad7;
}

.map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.reveal {
    transform: translateY(50px);
    opacity: 0;
    transition: all 2s ease;

}

.reveal.active {
    transform: translateY(0px);
    opacity: 1;
}

.btn-whatsapp {
    font-family: "Rantera";
    font-size: 1.5em;
    background-color: #00d757;
    border: none;
    padding: 5px;
}

.btn {
    transition:  transform 0.2s ease-in-out;
}

.btn:hover  {
    background-color: #00d757;
    transform: scale(1.1);
    
}


#myBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */

    color: black;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    background-color: transparent;
    font-size: 50px;
    /* Increase font size */
}



#myBtn:hover {
    color: #00d757;
    /* Add a dark-grey background on hover */
}

.list-group-item {
    background-color: #FFF5F3;
    border-color: #8F6553;
    color: #8F6553;
    font-family: "Montserrat", Sans-serif;
    font-size: .9em;
}

.list-group-item span {
    font-weight: bold;
    font-size: 1.25em;
}

.titulo-masaje{
    font-family: "MeaCulpa";
    font-size: 1.8em;
}

.tm-people {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    max-width: none;
}

a {
    text-decoration: none;
}

@media only screen and (max-width:990px) {
    .pricingTable6 {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width:767px) {
    .pricingTable6 .title:before {
        height: 400px;
        top: 100px;
        left: 55px;
    }

    .pricingTable .title:after {
        width: 550px;
        height: 550px;
        top: 150px;
        right: -100px;
        transform: rotate(-20deg);
    }
}

@media only screen and (max-width:480px) {

    .pricingTable .title:after,
    .pricingTable .title:before {
        width: 280px;
        height: 200px;
        top: 220px;
        left: -46px;
    }

    .pricingTable .title:after {
        top: 150px;
        left: auto;
        right: -70px;
    }
}

footer {
    background-color: black;
    font-family: "Welbut";
    font-size: 0.9em;
    color: white;
}

footer span {
    font-size: 1em;
}

.logo {
    text-shadow: 
    2px 2px 5px rgba(255, 255, 255, 0.5),
    3px 3px 10px rgba(255, 255, 255, 0.5),
    5px 5px 70px rgba(255, 255, 255, 0.5);
  }
  
/* GLITCH EFFECT EÓLIVO*/

.hero {

    display: inline-block;
    color: #fff;
    z-index: 2;

    /* Bright things in dark environments usually cast that light, giving off a glow */
    filter: drop-shadow(0 1px 3px);
}

.demo {
    height: 100px;
    background: #fff;
}

.layers {
    position: relative;
}

.layers::after,
.layers::before {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
}

.layers::before {
    top: 10px;
    left: 15px;
    color: #e0287d;
}

.layers::after {
    top: 5px;
    left: -10px;
    color: #1bc7fb;
}

.single-path {
    clip-path: polygon(0% 12%, 53% 12%, 53% 26%, 25% 26%, 25% 86%, 31% 86%, 31% 0%, 53% 0%, 53% 84%, 92% 84%, 92% 82%, 70% 82%, 70% 29%, 78% 29%, 78% 65%, 69% 65%, 69% 66%, 77% 66%, 77% 45%, 85% 45%, 85% 26%, 97% 26%, 97% 28%, 84% 28%, 84% 34%, 54% 34%, 54% 89%, 30% 89%, 30% 58%, 83% 58%, 83% 5%, 68% 5%, 68% 36%, 62% 36%, 62% 1%, 12% 1%, 12% 34%, 60% 34%, 60% 57%, 98% 57%, 98% 83%, 1% 83%, 1% 53%, 91% 53%, 91% 84%, 8% 84%, 8% 83%, 4% 83%);
}

.paths {
    animation: paths 5s step-end infinite;
}

@keyframes paths {
    0% {
        clip-path: polygon(0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%);
    }

    5% {
        clip-path: polygon(0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%);
    }

    30% {
        clip-path: polygon(0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%);
    }

    45% {
        clip-path: polygon(0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%);
    }

    76% {
        clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
    }

    90% {
        clip-path: polygon(0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%);
    }

    1%,
    33%,
    47%,
    7%,
    78%,
    93% {
        clip-path: none;
    }
}

.movement {
    /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
    position: relative;
    animation: movement 8s step-end infinite;
}

@keyframes movement {
    0% {
        top: 0;
        left: -20px;
    }

    15% {
        top: 10px;
        left: 10px;
    }

    60% {
        top: 5px;
        left: -10px;
    }

    75% {
        top: -5px;
        left: 20px;
    }

    100% {
        top: 10px;
        left: 5px;
    }
}

.opacity {
    animation: opacity 5s step-end infinite;
}

@keyframes opacity {
    0% {
        opacity: 0.1;
    }

    5% {
        opacity: 0.7;
    }

    30% {
        opacity: 0.4;
    }

    45% {
        opacity: 0.6;
    }

    76% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.8;
    }

    1%,
    33%,
    47%,
    7%,
    78%,
    93% {
        opacity: 0;
    }
}

.font {
    animation: font 7s step-end infinite;
}

@keyframes font {
    0% {
        font-weight: 100;
        color: #e0287d;
        filter: blur(3px);
    }

    20% {
        font-weight: 500;
        color: #fff;
        filter: blur(0);
    }

    50% {
        font-weight: 300;
        color: #1bc7fb;
        filter: blur(2px);
    }

    60% {
        font-weight: 700;
        color: #fff;
        filter: blur(0);
    }

    90% {
        font-weight: 500;
        color: #e0287d;
        filter: blur(6px);
    }
}

.glitch span {
    animation: paths 5s step-end infinite;
}

.glitch::before {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 7s step-end infinite, movement 8s step-end infinite;
}
/**************************/