/* Configurações gerais */
:root {
    --laranja: #D98262;
    --laranjinha: #F4A58A;
    --laranjamarelo: #FDD6A0;
    --cinzinha: #FAF5F2;
    --pretinho: #2F2F2F;
    --branco: #FFFFFF;
    --alternativa: #91536a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background-color: var(--laranja);
}

h1,
h2,
h3 {
    font-family: 'Playfair Display', serif;

}

.hidden {
    display: none !important;
    opacity: 0;
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(15px);
    }
}

.active {
    display: flex !important;
}

/* Final das configurações gerais */

/* Estilização do container principal e sections */

#container {
    width: 90%;
    border-radius: 40px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
    margin: 20px 0;
    background-color: var(--cinzinha);
}

section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 60px;
}

/* Final do container principal e sections */

/* Estilização da navbar */
.navbar {
    background-color: var(--laranjinha);
    border-radius: 40px 40px 0 0;
}

.navbar img {
    width: 130px;
    height: 130px;
}


.navbar-nav .nav-link {
    font-size: 1.1rem;
    /* ou o tamanho que desejar */
    color: var(--pretinho);
    /* aplica sua identidade visual */
    transition: all 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover {
    font-weight: 600;
    /* aplica sua identidade visual */
    transform: scale(1.1);
}

.navbar-nav .nav-item {
    padding: 0 20px;
}

.nav-link .active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilização do Header */


header {
    background-color: var(--laranjinha);
    text-align: center;
    padding: 20px 0 80px 0;
}

.header_content {
    padding: 40px 60px;
}

header h1 {
    color: var(--alternativa);
    font-size: 3.2rem;
    letter-spacing: 8px;
    margin-bottom: -7px;
}

header h2 {
    color: var(--pretinho);
    font-size: 2rem;
    margin-bottom: 40px;
}

header p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    color: var(--rosa);
    margin-top: 12px;
    font-weight: 400;
}

header b {
    color: var(--alternativa)
}

/* Estilização da section Sobre mim */

.text_about {
    text-align: center;
    color: var(--pretinho);
}

.text_about h1 {
    font-family: 'Playfair Display', serif;
    color: var(--laranja);
    font-size: 2.5rem;
}

.text_about p {
    font-size: 1rem;
    margin-bottom: 0;
}

.text_about b {
    color: var(--alternativa);
}

.img_about img {
    width: 100%;
}

/* Estilização da section consultoria */

#pricing {
    background-color: var(--laranjinha);
    border-radius: 40px;
}

.pricing_mobile {
    background-color: var(--laranjinha);
    border-radius: 40px;

}

.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;

}

#carouselExample {
    display: none !important;
}

.carousel-inner {
    padding: 60px;
    overflow: hidden;
    min-height: 500px;
    height: auto;
    min-height: 500px;
}

.carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-indicators,
.carousel-control-prev,
.carousel-control-next {
    color: var(--cinzinha);
    padding: 0 !important;
}

.carousel-indicators {
    width: 20%;
    margin: 0 auto !important;
}


.card {
    border-radius: 40px !important;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
    
    max-width: 450px;
    height: 100%;
}

.card b {
    color: var(--laranja);
}

.card .fa-circle-check {
    color: var(--laranja);
}

/* Estilização da section contato */

#contact {
    background-color: var(--cinzinha);
}

.img_contact {
    padding: 0 !important;
}

.img_contact img {
    width: 70%;
    border-radius: 40px;

}

.text_contact h1,
.form_contact h1 {
    font-family: 'Playfair Display', serif;
    color: var(--laranja);
    font-size: 2.5rem;
}

.text_contact p {
    font-size: 1.1rem;
    color: var(--pretinho);
    padding: 0 10px;
}

.form_contact {
    margin-right: 90px !important;
}

.btn_contact button,
.btn_form button {
    background-color: var(--laranjinha);
    color: var(--cinzinha);
    padding: 10px 20px;
    border: none;
    width: 60%;
    border-radius: 40px;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.btn_contact button:hover,
.btn_form button:hover {
    background-color: var(--laranja);
    color: var(--pretinho);
}

input:hover,
textarea:hover {
    outline: none;
    border-color: var(--laranjinha);
    box-shadow: 0 0 0 2px var(--laranjinha);
    transition: all .3s ease-in-out;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--laranja) !important;
    box-shadow: 0 0 0 2px var(--laranja) !important;
    transition: all .5s ease-in-out;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Estilização do Footer */
#footer {
    background-color: var(--laranjinha);
    border-radius: 0 0 40px 40px !important;
    padding: 20px 0;
}


.footer_logo,
.footer_media {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 !important;
}

.footer_logo img {
    width: 130px !important;
    height: 130px;
    margin-bottom: 0;
}

.footer_media {
    margin-right: 50px;
}

#footer h3,
#footer p,
#footer a {
    color: var(--pretinho);
    text-align: center;
}

.social_media_icons .fa-instagram {
    color: #E1306C;
    font-size: 2rem;
    transition: transform 0.3s ease;
}

.social_media_icons .fa-instagram:hover {
    transform: scale(1.1);
    color: #833AB4;
}

.social_media_icons .fa-whatsapp {
    color: #128C7E;
    font-size: 2rem;
    transition: transform 0.3s ease;
}

.social_media_icons .fa-whatsapp:hover {
    transform: scale(1.1);
    color: #25D366;
}

.social_media_icons .fa-envelope{
    color: #D93025;
    font-size: 2rem;
    transition: transform 0.3s ease;
}

.social_media_icons .fa-envelope:hover {
    transform: scale(1.1);
    color: #EA4335;
}

/* Medias queries */
@media (max-width: 1496px) {
    .img_about img {
        width: 60%;
    }
}

@media (max-width: 1232px) {
    .img_about img {
        width: 80%;
    }
}

@media (max-width: 1024px) {
    .img_about img {
        width: 100%;
    }
}


@media (max-width: 1250px) {

    .btn_contact button {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .img_contact {
        display: none;
    }

   
}


@media (max-width: 987px) {

    #container {
        width: 99%;
        margin: 1px 0;
    }
}

@media (max-width: 550px) {

    #carouselExample {
        display: block !important;
    }

    

    #pricing {
        display: none !important;
    }


    .card-container {
        width: 100% !important;
        padding: 0 !important;

    }

    #pricing .card {
        width: 100%;
        margin: 0 auto 2rem auto;
    }

    #contact {
        padding: 40px 15px;
    }

    #inicio {
        padding: 10px 8px !important;
    }

    #about {
        padding: 15px 8px !important;
    }
}

@media (max-width: 420px) {
    #pricing {
        padding: 20px 30px !important;
        ;
    }
}