:root{

    /*COLORES*/
    
        --color0: #F3F3F3;
        --color1: #00BAD8;
        --color2: #006F9B;
        --color3: #003A5A;
        --color4: #F5B57C;
        --color5: #EEA468;
        --color6: #E39558;
        --color7: #C2C3C9;
        --color8: #7C7C80;
        --color9: #5B5B5F;
        --color10: #E653DE;
        --color11: #A056F0;
        --color12: #5961D9;
        --color13: #1c8878;
        --modal-color: rgba(34,34,34,0.85);
    
    }
    
    html{
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
        font-size: var(--fsize);
        scroll-behavior: smooth;    
    }
    
    *,
    *:before,
    *:after{
        box-sizing: inherit;
    }
/*menu hamburguesa*/
    
.panel{
    position: fixed;
    z-index: 998;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--modal-color);
    transition: transform 0.3s ease;
    transform: translate(0, -100%);
}

.panel.is-active{
    transform: translate(0,0) ;
}



.panel-btn {
    position: fixed;
    z-index: 999;
    bottom: -20%;
    right: 1vw;
    width: 3rem;
    height: 3rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color9);
    
}

.container-wsp{
    height: 4rem;
    position: fixed;
    z-index: 998;
    bottom: 5%;
    right: 0%;
    cursor: pointer;
}

.wsBtn{
    height: 4rem;
}

    
    body{
        margin: 0;
        overflow-x: hidden;
        background-color: var(--color0);
        font-family:  'Poppins', sans-serif;
        background-color: var(--color1);
        display: flex;
        flex-direction: column;
    }

    /*CONTAINER*/
    .container{
        background-color: var(--color0);
        display: flex;
        flex-direction: column;
    }

    /*CABECERA HEADER*/

    .header{
        position: relative;
        top: 0;
        padding: 1rem;
        padding-top: 0.7rem;
        padding-bottom: 0rem;
        background-color: var(--color0);
        color: var(--color3);    
        box-shadow: 0px 0px 20px var(--color8);
        
    }
    
    .header h1{
        margin: 0 auto;
        text-align: center;
    }
    
    .header h1 img{
        height: 115px;
    }

    /*MENU PRINCIPAL*/

    .mainMenu{
        display: flex;
        position: sticky;
        margin-left: 52%;
    }
    
    .mainMenu ul {
        margin: 0; 
        list-style: none;
        display: flex;
        background-color: var(--color0);
        justify-content: right;
    } 
    
    .mainMenu li:hover{
        background-color: var(--color2);        
    }
    
    .mainMenu li a{
        font-family: 'Poppins', arial;
        font-size: 22px;
        display: block;
        padding: 15px 20px;
        color: var(--color3);
        text-decoration: none;        
    }
    
    .mainMenu li a:hover{
        color: var(--color0);
    }

    /*SLIDER*/

    .slider{
        width: 100%;
        margin-top: 0;
        overflow: hidden;
    }
    
    .slider ul{
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        padding: 0;
        width: 500%;
        animation: cambio 30s infinite alternate;
    }
    
    .slider li{
        width: 100%;
        list-style: none;
    }
    
    .slider img{
        width: 100%;
    }
    
    .slider h2{
        font-size: 55px;
        margin-top: -390px;
        margin-bottom: 290px;
        color: var(--color3);
    }
    
    .slider p{
        font-size: 25px;
        margin-top: -240px;
        margin-bottom: 190px;
        margin-left: 25px;
        justify-content: left;
        color: var(--color3);
    }
    
    
    @keyframes cambio{
        0% {margin-left: 0;}
        25% {margin-left: 0;}
    
        35% {margin-left: -100%}
        54% {margin-left: -100%}
    
        65% {margin-left: -200%}
        85% {margin-left: -200%}
    
        90% {margin-left: -300%}
        100% {margin-left: -300%}
    }
    
    /*DESCRIPCION*/

    #description{
        
        height: 250px;
        width: 100%;
        margin-top: -25px;
        margin-bottom: 0px;
        background-color: var(--color0);    
        font-family: 'Poppins', sans-serif;
        justify-content: center;
    }
    
    #description h2{
        margin-left: 8%;
        margin-right: 8%;
        font-family: 'Poppins', sans-serif;
        font-size: 30px;
        color: var(--color13);
    }
    
    #description p{
        color: var(--color11);
        margin-left: 8%;
        margin-right: 8%;
        font-size: 20px;
        font-family: 'Poppins', sans-serif;
    }

    /*UBICACION*/

    #ubication{
        position: relative;
        height: 35rem;
        width: 100%;
        margin-top: 0px;
        background-color: var(--color12);
    }
    
    #ubication h2{
        margin-left: 8%;
        margin-right: 8%;
        font-family: 'Poppins', sans-serif;
        font-size: 30px;
        color: var(--color0);
    }
    
    #ubication #mapa iframe{
        height: 25rem;
        width: 60%;
        border-radius:  10px;
        margin-left: 20%;
        box-shadow: 10px 10px 36px 2px var(--color8);
    }

    /*TRATAMIENTOS*/

    .prevServices{    
        display: flex;
        flex-direction: column;
        background-color: var(--color1);
        width: 100%;
        
    }
    .prevServices .prevTratamientos img{
        display: flex;
        margin-right: auto;
        margin-left: auto;    
        width: 20%;
        height: 20%;
        border-radius:  10px;
        box-shadow: 10px 10px 36px 2px var(--color3);
    }

    .prevServices h2{
        margin-left: 8%;
        margin-right: 8%;
        font-family: 'Poppins', sans-serif;
        font-size: 30px;
        color: var(--color0);
    }

    .prevServices h3{
        margin-left: 36%;
        font-family: 'Poppins', sans-serif;
        font-size: 25px;
        color: var(--color0);
    }

    /*FOOTER*/

    footer{
        text-align: justify;
        height: 200px;
        width: 100%;
        background-color: var(--color3);
        list-style: none;    
    }
    
    footer ul{
        list-style: none;
        color: var(--color0);
        margin-left: auto;
        padding-top: 2%;
        text-align: center;
    }
    
    footer a{
        text-decoration: none;
        color: var(--color10);
        
    }

    /*********SERVICIOS**********/
.containerServices{
    background-color: var(--color0);
}    
.ServiceContainer{
    background-color: var(--color0);
}    
.ServiceContainer h2{
    margin-left: 8%;
        font-size: 30px;
        color: var(--color3);
    }
.accordian{
    max-width: 600px;
    display: block;
    margin: 20px auto;
    font-family: 'Poppins', sans-serif;
    
}

.accordian .card{
    background-color: var(--color7);
    box-shadow: 10px 10px 25px 1px var(--color8);;
    margin-bottom: 20px;
    align-items: justify; 
    margin-left: auto;   
    margin-right: auto;
    width: 90%;
    
}

.accordian .card .card-header h3{
    cursor: pointer;
    color: var(--color3);
    position: relative;
    background-color: var(--color1);
    margin: 0;
    padding:10px 15px;
    font-family:  'Poppins', sans-serif;
    font-size: 25px;
    border-radius: 5px;
}
.accordian .card .card-header{
    position: relative;
    border-radius: 5px;
}

.accordian .card .card-header span{
    position: absolute;
    right: 20px;
    top: 12px;
    height: 25px;
    width: 25px;
    color: var(--color2);
    background-color: var(--color0);
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    font-size: 16px;
    border-radius: 5px;
}

.accordian .card .card-body{
    padding: 20px; 
    border-radius: 5px;
}

.accordian .card .card-body{
    display: none; 
}

.accordian .card:nth-child(1) .card-body{
    display: block; 
    
}
.accordian .card .card-body p{    
    font-size: 20px;
    line-height: 24px;
    color: var(--color12);
    margin: 0px;
    font-family: 'Poppins', sans-serif;
}



#footerServices{
    margin-top: 5%;
}

/*ACERCA DE*/

.containerAbout{
    background-color: var(--color0);
}

.containerAbout #descriptionAb h2{
    color: var(--color3);
}

.mision{
    height: 400px;
    width: 600px;
    border: 1px solid var(--color3);
    background: var(--color7);
    color: var(--color12);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding-left: 35px;
    padding-right: 35px;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 10px  3px var(--color9);
    text-align: justify;
}

.mision h3{
    font-size: 30px;
    color: var(--color13);
}
.vision{
    height: 300px;
    width: 600px;
    border: 1px solid var(--color3);
    background: var(--color7);
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    color: var(--color12);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding-left: 35px;
    padding-right: 35px;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 10px  3px var(--color9);
    text-align: justify;
}
.vision h3{
    font-size: 30px;
    color: var(--color13);
}
.containerAbout h2{
    margin-left: 8%;
    margin-right: 8%;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    color: var(--color0);
}

/*CONTACTUS*/
/*ICONOS DE TARJETAS*/

#socialCards{
    height: 600px;
    width: 100%;
    margin-bottom: -70px;
    background-color: var(--color0);
}
#socialCards h2{
    margin-left: 8%;
    margin-right: 8%;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    color: var(--color13);
}
#socialCards .cards{
    justify-content: center;
    margin-left: 6%;
}
#socialCards img{
    width: 10%;
    margin-top: -8%;
    margin-left: 4%;
}
.cards{
    display: inline-block;
    width: 205px;
    height: 305px;
    background-color: var(--color3);
    border:  1px solid var(--color2);
    box-shadow: 10px 10px 36px 2px var(--color8);
    overflow: hidden;
    margin: 35px;
    margin-top: 40px;
    cursor: pointer;
    border-radius:  10px;
}



.cards:hover .fab{
    font-size: 70px;
    color: var(--color3);
    background-color: var(--color1);
}



.cards .fab{
    display: block;
    width: 100%;
    height: 130px;
    font-size: 50px;
    line-height: 130px;
    text-align: center;
    margin: 0px auto;
    color: var(--color1);
    transition: all 300ms;
}
.cards:hover .fab{
    font-size: 70px;
    color: var(--color3);
    background-color: var(--color1);
    animation: showIcon 300ms linear;
}

@keyframes showIcon{
    from{
        transform: translateY(-300%);
    }
    to{
        transform: translateY(0%);
    }
}

.cards .fas{
    display: block;
    width: 100%;
    height: 130px;
    font-size: 50px;
    line-height: 130px;
    text-align: center;
    margin: 0px auto;
    color: var(--color1);
}

.cards:hover .fas{
    font-size: 70px;
    color: var(--color3);
    background-color: var(--color1);
    animation: showIcon 300ms linear;
}

@keyframes showIcon{
    from{
        transform: translateY(-300%);
    }
    to{
        transform: translateY(0%);
    }
}
.cards .category{
    width: 100%;
    height: 50px;
    font-family:  'Poppins', sans-serif;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    color: var(--color0);
}

.cards .description{
    font-family:  'Poppins', Arial,sans-serif;
    text-align: center;
    margin-top: 20%;
    color: var(--color0)
}