/*font Poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*font Roboto*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*font Prata*/
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
/*font Roboto*/
@import url('https://fonts.googleapis.com/css2?family=Prata&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');



/* fonts */

html {
    font-size: 62, 5%;
}

:root {
    --roboto: 16px;
}

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

/*color*/

:root {
    --laranja: #f2b100;
    --header: #fbf2e5;
    --white: #ffffff;
    --color-button: #e8913c;
    --text-p: #555;
    --serviços: #fdfaf5;
    --footer: #242222;
}

/* FAVICON */

head .favicon {
    width: 100%;
    height: 100%;
}

/* HEADER */

.header {
    position: sticky;
    top: 0;
    padding-inline: 16px;
    border-top: solid 4px var(--laranja);
    border-bottom: solid 2px var(--laranja);
    background-color: #ffffff;
    z-index: 1;
}

.nav-bar {
    max-width: 80%;
    height: 100px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.logo {
    width: 115px;
}

.hamburger {
    display: none;
    border: none;
    background: none;
    border-top: 3px solid var(--laranja);
    cursor: pointer;
}

.hamburger::after,
.hamburger::before {
    content: " ";
    display: block;
    width: 30px;
    height: 3px;
    background: var(--laranja);
    margin-top: 5px;
    position: relative;
    transition: 0.3s;
}

.ul_menu {
    display: flex;
    list-style: none;
    gap: 3rem;
}

.li_menu {
    margin: 0 15px;
}

.a_menu {
    text-decoration: none;
    color: var(--laranja);
    font-weight: 600;
    padding-block: 16px;
}

.a_menu:hover {
    background-color: var(--laranja);
    color: #ffffff;
    padding: 15px;
    border-radius: 25px;
}

.section {
    height: 500px;
}

.header nav ul li a.actived {
    background-color: var(--laranja);
    color: #ffffff;
    padding: 15px;
    border-radius: 25px;
}


.header.rolagem {
    /* SCROLL MENU */
    background-color: var(--header);
    border-top: solid 4px var(--laranja);
    border-bottom: solid 2px var(--laranja);
}

/*Fim header*/


/* Banner */

h1 {
    color: #ffffff;
    font-size: 40px;
    font-family: 'Poppins';
    font-weight: 600;
}

.banner button {
    color: #ffffff;
    background-color: var(--color-button);
    font-family: 'Roboto';
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    border: none;
    padding: 15px 25px;
    border-radius: 25px;
    transition: .3s ease;
}

.banner button:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.banner {
    padding: 0;
    margin: 0;
    height: 70vh;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.content {
    margin: 0;
    margin-top: -20px;
    height: 70vh;
    width: 100%;
    background-image: url(../imagens/images-banner/meditation-1018837_1920.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 5s;

    animation-name: animate;
    animation-direction: alternate-reverse;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
    animation-duration: 40s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes animate {

    0% {
        background-image: url(../imagens/images-banner/sky-3154857_1920-1.jpg);
    }

    25% {
        background-image: url(../imagens/images-banner/sunset-3087288_1920-1.jpg);
    }

    50% {
        background-image: url(../imagens/images-banner/yoga-1996209_1920-2.jpg);
    }

    75% {
        background-image: url(../imagens/images-banner/yoga-2985004_1920.jpg);
    }

    100% {
        background-image: url(../imagens/images-banner/meditation-1018837_1920.jpg);
    }
}

/* Fim Banner */

/* Apresentação */

.image-text-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    background-color: var(--white);
    max-width: 1200px;
    margin: 50px auto 50px;
    border-radius: 8px;
    /* height: 550px; */
    height: auto;
    /* Tornar a altura automática para se ajustar ao conteúdo em telas menores ChatGPT */
    flex-direction: row;
    /* ChatGPT  */
}

.image-container {
    padding-left: 20px;
    opacity: 0.2;
}

.image-container img {
    width: 500px;
    /*width: 100%;  Ajusta a imagem ao container ChatGPT */
    /* right: auto; */
    max-width: 500px;
    /* Limita a largura máxima da imagem ChatGPT  */
    border-radius: 8px;
}

.text-container {
    margin-top: 30px;
    flex: 1;
    /* padding-right: 20px; */
}

.text-container h2 {
    font-size: 2em;
    margin-bottom: 8px;
}

.divisor {
    width: 70px;
    height: 3px;
    background-color: var(--laranja);
    display: inline-block;
    margin-bottom: 8px;
}

.text-container p {
    margin-top: 2px;
    font-family: 'Poppins';
    font-size: 1.1em;
    /* margin-bottom: 20px; */
    line-height: 1.6;
    color: var(--text-p);
}

.text-container p .span-p {
    font-size: 1.3em;
}

/* Fim Apresentação */


/* Nossa_missão */

.nossa-missão {
    background-color: var(--bg-color); /* Ajuste da cor de fundo */
}

.nossa-missão-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 1em;
    max-width: 980px;
}

.nossa-missão-image-container img {
    width: 100%;
    max-width: 500px;
    height: auto;
    opacity: 0.2;
    margin-bottom: 30px;
}

.div-text-nossa-missão {
    text-align: center;
    padding: 0 1em;
}

.div-text-nossa-missão h2 {
    font-size: 1.8em;
    margin-bottom: 8px;
}

.div-text-nossa-missão p {
    font-family: 'Poppins';
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-p);
    margin-bottom: 20px;
}

/* Media Queries para telas maiores */
@media (min-width: 768px) {
    .nossa-missão-container {
        flex-direction: row; /* Alinha imagem e texto lado a lado */
        justify-content: space-between;
    }

    .nossa-missão-image-container {
        flex: 1;
        max-width: 100%; /* A imagem ocupa metade da largura */
    }

    .div-text-nossa-missão {
        flex: 1;
        padding-left: 2em;
        text-align: left; /* Alinha o texto à esquerda */
    }

    .div-text-nossa-missão h2 {
        font-size: 2.5em;
    }

    .div-text-nossa-missão p {
        font-size: 1.2em;
    }
}


/* FIM NOSSA_MISSÃO */

/* CHAMADA DE AÇÃO */

.chamada_de_ação {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 230PX;
    background-color: #faaf40;
    color: black;
    /* text-align: center; */
}

.chamada_de_ação h2 {
    font-family: 'Prata';
    font-weight: 600;
    font-style: normal;
    font-size: 35PX;
    margin-bottom: 20px;
}

.chamada_de_ação button {
    text-transform: uppercase;
    background-color: transparent;
    border: none;
    font-family: 'Roboto';
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    transition: .3s ease;
}

.chamada_de_ação button:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* FIM CHAMADA DE AÇÃO */


/* NOSSOS SERVIÇOS */
#idnossos_serviços {
    padding-top: 50px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-family: 'Prata';
    font-size: 20px;
    background-color: var(--serviços);
}

.divisor-serviços {
    width: 110px;
    height: 3px;
    background-color: var(--laranja);
    margin-top: 33px;
    margin-bottom: 50px;
}

.serviços-container {
    background-color: var(--serviços);
}

.container-serviços {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    max-width: 1200px;
    margin: auto;
    flex-direction: row;
}

.serviços-image-container {
    flex: 1;
}

.serviços-image-container img {
    width: 100%;
    max-width: 600px;
}

.serviços-image-container-meditação img,
.serviços-image-container-Holísticas img {
    width: 100%;
    height: auto;
}

.serviços-text-container {
    padding: 40px;
    width: 100%;
    max-width: 600px;
}

.serviços-text-container h3 {
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Prata';
    font-size: 30px;
}

.serviços-text-container p {
    font-family: 'Poppins';
    font-size: 1.1rem;
    line-height: 1.6;
}




/*FIM NOSSOS SERVIÇOS*/


/* A EVOLUÇÃO DA ALMA */


.escuro {
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../imagens/Design\ sem\ nome\ \(40\).png);
    height: 600PX;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


#idevolucao_da_alma h2 {
    text-align: center;
    font-family: 'Prata';
    font-size: 50px;
    color: var(--white);
    z-index: unset;
}

/* MAP */

.map {
    background-color: var(--header);
    display: flex;
    flex-direction: column;
    /* Muda a direção para coluna em telas menores */
    align-items: center;
    /* Centraliza o conteúdo */
}

section.map div img {
    width: 200px;
}

.logo-map {
    padding: 20px;
    text-align: center;
}

.logo-map address {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 19px;
    font-style: normal;
    margin-top: 10px;
    /* Espaçamento entre o logo e o endereço */
}

.google-map {
    padding: 20px;
    width: 100%;
    /* Define a largura como 100% do pai */
}

iframe {
    width: 100%;
    /* Largura responsiva */
    height: 300px;
    /* Altura fixa para iframe */
}

/* FIM MAP */

/*FORM*/

.form_container h2 {
    color: var(--white);
    font-family: 'Prata';
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 30px;
}

.form_container address {
    color: var(--white);
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 20px;
}

.form_container p {
    color: var(--white);
    font-family: 'Prata';
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 70px;

}

.form_container {
    display: flex;
    height: 850px;
    background-image: url(../imagens/Design\ sem\ nome\ \(46\).png);
    background-size: cover;
    background-position: center;
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.form_container form input {
    width: 500px;
    margin-bottom: 20px;
    padding: 15px;
    border: none;
    border-radius: 25px;
    font-family: "Poppins";
    color: black;
}

.form_container form textarea {
    font-family: "Poppins";
    color: black;
    width: 500px;
    padding: 25px;
    border: none;
    border-radius: 25px;
    margin-bottom: 20px;

}

.form_container form .button_form {
    background-color: var(--laranja);
    text-transform: uppercase;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    color: var(--white);
    width: 500px;
    padding: 15px;
    border: none;
    border-radius: 25px;
    transition: .3s ease;
}

form .button_form:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/*FIM FORM*/


/*FOOTER*/

.footer {
    font-family: 'Poppins';
    text-align: center;
    background-color: var(--footer);
    color: var(--white);
    font-size: 13px;
    padding: 10px;
}

.footer a {
    color: var(--white);
    font-size: 13px;
    text-decoration: none;
}

/*FOOTER*/


/*Responsivo*/

/* menu mobile */

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

    .hamburger {
        display: block;
        z-index: 1;
    }

    .ul_menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 30vh;
        background: var(--header);
        clip-path: circle(100px at 90% -55%);
        transition: 1s ease-out;
        border-bottom: 2px solid var(--laranja);

        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 0;

        pointer-events: none;
    }

    .ul_menu a {
        font-size: 24px;
        opacity: 0;
    }

    .ul_menu li:nth-child(1) a {
        transition: 0.5s 0.2s;
    }

    .ul_menu li:nth-child(2) a {
        transition: 0.5s 0.4s;
    }

    .ul_menu li:nth-child(3) a {
        transition: 0.5s 0.6s;
    }


    /*Estilos ativos*/

    .nav-bar.active .ul_menu {
        clip-path: circle(1500px at 90% -15%);
        pointer-events: all;
    }

    .nav-bar.active .ul_menu a {
        opacity: 1;
    }

    .nav-bar.active .hamburger {
        position: fixed;
        top: 26px;
        right: 16px;
        border-top-color: transparent;
    }

    .nav-bar.active .hamburger::before {
        transform: rotate(135deg);
    }

    .nav-bar.active .hamburger::after {
        transform: rotate(-135deg);
        top: -7px;
    }

}

/*FIM HEADER MENU MOBILE */

/*BANNER*/
@media (max-width: 768px) {
    .content {
        height: 50vh;
        width: 100%;
        background-size: cover;
    }

    H1 {
        font-size: 25px;
    }

    #idbanner div a .button-banner {
        font-size: 12px;
    }

}


/* APRESENTAÇÃO RESPONSIVO */

/* Media queries para tornar o design responsivo */

@media (max-width: 930px) {
    .image-container img {
        max-width: 90%;
        width: auto;
    }

}

@media (max-width: 768px) {
    .image-text-section {
        flex-direction: column;
        /* Alinha os elementos em coluna para telas menores */
        padding: 20px;
    }

    .image-container {
        padding-left: 0;
        margin-top: 20px;
        opacity: 1;
        /* Aumenta a visibilidade da imagem em dispositivos móveis */
    }

    .image-container img {
        max-width: 100%;
        /* Ajusta a imagem à largura da tela */
        width: auto;
    }

    .text-container h2 {
        font-size: 1.5em;
    }

    .text-container p {
        font-size: 1em;
    }

    .text-container p .span-p {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .image-text-section {
        padding: 10px;
    }

    .text-container h2 {
        /* font-size: 1.2em; */
        font-size: 24px;
        text-align: center;
        padding-bottom: 10px;
    }

    .divisor {
        display: none;
        /* width: 50px;
        text-align: center; */
    }

    .text-container p {
        font-size: 0.9em;
        text-align: center;
    }

    .text-container p .span-p {
        font-size: 1em;
    }
}


/* FIM APRESENTAÇÃO RESPONSIVO */

/* NOSSA MISSÃO RESPONSIVO */

/* Media Queries para telas maiores */
@media (min-width: 768px) {
    .nossa-missão-container {
        flex-direction: row; /* Alinha imagem e texto lado a lado */
        justify-content: space-between;
    }

    .nossa-missão-image-container {
        flex: 1;
        max-width: 100%; /* A imagem ocupa metade da largura */
    }

    .div-text-nossa-missão {
        flex: 1;
        padding-left: 2em;
        text-align: left; /* Alinha o texto à esquerda */
    }

    .div-text-nossa-missão h2 {
        font-size: 2.5em;
    }

    .div-text-nossa-missão p {
        font-size: 1.2em;
    }
}

/* Media Queries para telas muito pequenas */
@media (max-width: 480px) {
    .div-text-nossa-missão h2 {
        font-size: 24px;
        padding: 10px;
        /* text-align: left; */
    }

    .div-text-nossa-missão p {
        font-size: 1em;
        /* text-align: left; */
    }

    .nossa-missão-image-container img {
        max-width: 300px;
        margin-left: 0;
        margin-bottom: 20px;
    }
}


/* FIM NOSSA MISSÃO RESPONSIVO */



/*CHAMADA DE AÇÃO RESPONSIVO*/

/* Media queries para telas menores */
@media (max-width: 768px) {
    .chamada_de_ação {
        height: auto;
        /* Deixa a altura flexível em dispositivos menores */
        padding: 40px 20px;
    }

    .chamada_de_ação h2 {
        font-size: 30px;
        text-align: center;
        /* Ajusta o tamanho da fonte em tablets */
    }

    .chamada_de_ação button {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .chamada_de_ação h2 {
        font-size: 18px;
        /* Reduz o tamanho da fonte em telas pequenas */
    }

    .chamada_de_ação button {
        border: solid 1px black;
        padding: 15px;
        border-radius: 25px;
        font-size: 12px;
    }
}

/*FIM CHAMADA DE AÇÃO RESPONSIVO*/

/*NOSSOS SERVIÇOS*/

/* Responsividade */

@media (max-width: 940px) {
    .container-serviços {
        flex-direction: column;
        /* Muda para coluna em telas menores */
        text-align: center;
    }
    
    .serviços-image-container img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
    .container-serviços {
        flex-direction: column;
        /* Muda para coluna em telas menores */
        text-align: center;
    }

    .serviços-text-container,
    .serviços-image-container {
        max-width: 100%;
        /* Ajusta largura para 100% */
        padding: 20px;
    }

    .serviços-text-container h3 {
        font-size: 26px;
        /* Ajusta o tamanho do título */
    }

    .serviços-text-container p {
        font-size: 1rem;
        /* Ajusta o tamanho do texto */
    }

    .serviços-image-container img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    #idnossos_serviços h2 {
        font-size: 24px;
        text-align: center;
        /* Reduz o tamanho do título principal */
    }

    .serviços-text-container h3 {
        font-size: 22px;
    }

    .serviços-text-container p {
        font-size: 0.9rem;
    }

    .container-serviços {
        padding: 10px;
    }

    .serviços-image-container img {
        max-width: 100%;
        height: auto;
    }
}

/*FIM NOSSOS SERVIÇOS*/

/* A EVOLUÇÃO DA ALMA */

@media (max-width: 768px) {

    .escuro {
        position: sticky;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(../imagens/Design\ sem\ nome\ \(40\).png);
        height: 400PX;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    #idevolucao_da_alma h2 {
        font-size: 30px;
    }

}

/* FIM A EVOLUÇÃO DA ALMA */

/*MAP*/

/* Media Queries para telas maiores */
@media (min-width: 768px) {
    .map {
        flex-direction: row;
        /* Muda a direção para linha em telas maiores */
        justify-content: space-evenly;
        /* Distribui espaço uniformemente */
    }

    .google-map {
        padding: 40px;
        /* Mantém o padding maior para telas grandes */
    }
}

/*FIM MAP*/


/*FORM*/

/* Responsividade */
@media (max-width: 768px) {
    .form_container {
        height: auto;
        padding: 40px 20px;
    }

    .form_container h2 {
        font-size: 32px;
    }

    .form_container p,
    .form_container address {
        font-size: 18px;
    }

    .form_container form input,
    .form_container form textarea,
    .form_container form .button_form {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .form_container h2 {
        font-size: 28px;
    }

    .form_container p,
    .form_container address {
        font-size: 16px;
    }

    .form_container form input,
    .form_container form textarea,
    .form_container form .button_form {
        width: 100%;
        max-width: 100%;
    }

    .form_container form textarea {
        padding: 15px;
    }
}

/*FIM FORM*/




/*** FEITO POR: ANDERSON SOUZA ***/