* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto Flex", sans-serif;

}

:root {
    --neutral--0: #fff;
    --neutral--50: #f8f9fa;
    --neutral--100: #f2f3f6;
    --neutral--200: #d8dae0;
    --neutral--300: #6d7081;
    --neutral--400: #3b3d4a;
    --neutral--500: #262831;
    --neutral--600: #1d1e20;
    --neutral--700: #161718;
    --neutral--800: #000;
    --meteorite--100: #eaeaff;
    --meteorite--200: #cbc8ff;
    --meteorite--300: #b6b2ff;
    --meteorite--400: #a19bff;
    --meteorite--500: #8c85ff;
    --light-blue--50: #F0F8FF;
    --light-blue--100: #B9D9EB;
    --light-blue--200: #E1EBEE;
    --light-blue--300: #87CEFA;
    --light-blue--400: #73C2FB;
    --light-blue--500: #318CE7;
    --light-blue--600: #0076CE;
    --blue-yonder: #5072A7;
    --blue-de-france: #318CE7;
    --cornflower-blue: #6495ED;
    --facebook-blue: #1877F2;
    --glaucous: #6082B6;
    --intel-blue: #0071c5;
    --mavericks-blue: #00538C;
    --porto-blue: #00428c;
    --royal-blue: #4169E1;
    --tufts-blue: #3E8EDE;
    --air-superiority-blue: #72A0C1;
    --chelsea-blue: #034694;



    --purple-joyz: #8341C7;
    --light-blue-joyz: #0263E0;
    --dark-blue-joyz: #225082;
    --red-joyz: #EC373F;
    --orange-joyz: #FFB128;
    --green-joyz: #55AA42;

}

/* -------------------------------- */

/* custom: hero */

/* -------------------------------- */


.hero-title {
    font-size: 2em;
    font-weight: 600;
    color: var(--neutral--0);
    margin: 0;
    line-height: 1.5;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 

}

.hero-subtitle {
    color: var(--neutral--0);
    font-size: 1.4em;
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
}

.cta-title {
    font-size: 2em;
    font-weight: 300;
    color: var(--neutral--0);
    margin: 0;
    line-height: 1.5; 
}

.body-title-bold {
    color: var(--neutral--400);
    font-size: 1.8em;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
}

.body-title {
    color: var(--neutral--400);
    font-size: 2.3rem;
    font-weight: 900;
    margin: 0;
    line-height: 1.5;
}


.body-subtitle {
    color: var(--neutral--400);
    font-size: 1.6rem;
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
    margin-bottom: 5px;
}

.body-text {
    color: var(--neutral--300);
    font-size: 1.3rem;
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
}

.body-text-blue-link {
    color: var(--light-blue--500);
    text-decoration: underline; 
    font-size: 1.2rem;
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
    
}

.plain-text-highlight {
    font-weight: 300;
    color: var(--light-blue--500);
    word-wrap: break-word;
}

.custom-link-blue {
    font-weight: 300;
    font-size: 1.1em;
    color: var(--light-blue--500);
    text-decoration: underline; 
}

.custom-link-blue:hover {
    text-decoration: none; 
}

.custom-link-green {
    font-weight: 300;
    font-size: 1.2rem;
    color: var(--green-joyz);
    text-decoration: underline; 
}

.custom-link-green:hover {
    text-decoration: none; 
}

.custom-link-purple {
    font-weight: 300;
    font-size: 1.1em;
    color: var(--meteorite--500);
    
}

.custom-link-purple:hover {
    text-decoration: underline; 
}


/* -------------------------------- */

/* custom: joyz-educacao */

/* -------------------------------- */

.blog-body-title {
    color: var(--light-blue-joyz);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
}


.blog-body-subtitle {
    color: var(--neutral--500);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
    margin-bottom: 15px;
}

.blog-body-text {
    color: var(--neutral--400);
    font-size: 1.3rem;
    font-weight: 300;
    margin: 0;
    line-height: 1.3;
    margin-bottom: 15px;
}

.blog-cta {
    background-color: var(--light-blue--100);
    padding: 15px 30px;
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 1.35rem;
    font-stretch: condensed;
    line-height: 1.5;
    font-weight: 600;
    color: var(--neutral--500); 
    border-radius: 15px;
}

.magic-link {
    font-weight: 600;
    color: var(--light-blue-joyz); 
    text-decoration: none;
}

.magic-link:hover {
    text-decoration: underline;
    color: var(--chelsea-blue);
}

.blog-disclaimer {
    margin-bottom: 15px;
    font-size: 1rem;
    font-stretch: condensed;
    line-height: 1.5;
    font-weight: 300;
    color: var(--neutral--800); 
}

 .tag {
    display: inline-block;
    background-color: var(--light-blue-joyz); 
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 400;
    font-stretch: condensed;
    padding: 5px 10px;
    color: var(--neutral--0); 
    margin-bottom: 5px;
    user-select: none;
    pointer-events: none;
}

.article-title {
    color: var(--light-blue-joyz);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2; 
    margin-bottom: 20px;
}

.article-text {
    color: var(--neutral--300);
    font-size: 1.2rem;
    font-weight: 300;
    margin: 0;
    line-height: 1.3;
    margin-bottom: 15px;
    text-align: left;
}

.writte-by {
    color: var(--neutral--500);
    font-size: 1rem;
    font-weight: 300;
    margin: 0;
    line-height: 1.2; 
    margin-bottom: 5px;
}

.name {
    color: var(--neutral--500);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2; 
    margin-bottom: 5px;
}

.role {
    color: var(--light-blue-joyz);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2; 
    margin-bottom: 5px;
}



/* -------------------------------- */

/* custom: at-services */

/* -------------------------------- */

.service-line-text {
    font-size: 1.25rem;
    color: var(--neutral--300);
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tab-title {
    font-size: 1.2rem;
    color: var(--neutral--300);
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

.more-info-link {
    display: block;
    color: var(--light-blue--500);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
    padding: 25px 30px;
    background-color: var(--neutral--0);  
    transition: all 0.3s ease;
    max-width: none; 
    text-decoration: none;
}

.more-info-link:hover {
    color: var(--light-blue--500);
    background-color: var(--light-blue--100);   
}



/* -------------------------------- */

/* custom: therapies-grid */

/* -------------------------------- */

.grid-title {
    color: var(--neutral--400);
    font-size: 2.3rem;
    font-weight: 900;
    margin: 0;
    line-height: 1.5;
}

.grid-title span {
    background-clip: text;
    -webkit-background-clip: text; 
    color: transparent; 
    background-image: linear-gradient(to left, #4385f5 25%, #ac87eb 75%);
}

.card-title {
    position: absolute; 
    left: 20px; 
    bottom: 20px; 
    color: var(--neutral--0); 
    font-size: 1.15rem; 
    font-weight: 600; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    z-index: 2; 
    margin: 0; 

}

.card-description {
    font-size: 1.1rem;
    color: var(--neutral--300);
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* -------------------------------- */

/* custom: cta */

/* -------------------------------- */

.cta-title {
    font-size: 2em;
    font-weight: 700;
    color: var(--neutral--0);
    margin: 0;
    line-height: 1.5;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
}

/* -------------------------------- */

/* custom: faq */

/* -------------------------------- */

.question-accordion {
    color: var(--neutral--400);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    margin-bottom: 1vh;
    line-height: 1.5;
}

.answer-accordion {
    color: var(--neutral--300);
    font-size: 1.2rem;
    font-weight: 300;
    margin: 0;
    margin-bottom: 1vh;
    line-height: 1.5;
}

.blue-link {
    text-decoration: underline;
    color: var(--light-blue-joyz);
}


/* -------------------------------- */

/* RESPONSIVE DESIGN  */

/* -------------------------------- */



@media (max-width: 1200px) {

    /* -------------------------------- */
    
    /* section: aba-hero */
    
    /* -------------------------------- */
    
    
}
    
@media (max-width: 992px) {

/* -------------------------------- */

/* section:  */

/* -------------------------------- */


}

    
@media (max-width: 768px) {

/* -------------------------------- */

/* section:  */

/* -------------------------------- */



}
    
    
@media (max-width: 576px) {

/* -------------------------------- */

/* section:  */

/* -------------------------------- */


/* -------------------------------- */

/* custom: joyz-educacao */

/* -------------------------------- */

    .blog-body-title {
        font-size: 2.2rem;
    }


    .blog-body-subtitle {
        font-size: 1.8rem;
    }

    .blog-body-text {
        font-size: 1.4rem;
    }

    .blog-cta {
        font-size: 1.35rem;
    }

    .blog-disclaimer {
        font-size: 1.2rem;
    }

    .tag {
        font-size: 0.9rem;
    }

    .article-title {
        font-size: 1.6rem;

    }

    .article-text {
        font-size: 1.3rem;
    }

    .name {
        font-size: 1.5rem;
    }

    .role {
        font-size: 1.3rem;
    }

}
    
    

@media (max-width: 450px) {
/* -------------------------------- */

/* section:  */

/* -------------------------------- */




}