*, header, main, footer {
    font-family: "Roboto", serif;
}

.roboto {
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

:root {
    --bg-light: #f8f9fa;
    --bg-withe: #fff;
    --bg-blue: #0d6efd;
    --bg-dark: #212529;
    
    --color-purple: #665fd4;
    --color-purple-active: #493df3;
    --color-light-blue: #5bc0de;
    --color-light-green: #5cb85c;
    --color-light-yellow: #f0ad4e;
    --color-light-red: #d9534f;
    --color-light-pink: #ff69b4;
    --color-light-orange: #ffa500;
    
    --border-radius-min: 15px;
    --border-radius-maxmin: 4px;
    
    --padding-default: 10px;
    --padding-medium: 20px;
    --padding-big: 40px;
    
    --brand:#6f42c1;
    --bg: #ffffff;
    --muted: rgba(0,0,0,.65);
    --glass: rgba(255,255,255,.88);
    --touch: 48px;
}

/* Base navbar */
.site-header .navbar{
    background: linear-gradient(180deg, var(--glass), var(--bg));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,.04);
    padding: .4rem 1rem;
}
.navbar-brand .brand-text { font-weight: 700; color: var(--brand); }
.navbar .nav-link { color: var(--muted); transition: color .12s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #000; }

/* Buttons */
.btn-primary { background: var(--brand); border: none; color: #fff; padding: .45rem .9rem; }
.btn-outline { border: 1px solid rgba(0,0,0,.08); padding: .45rem .9rem; }

/* Hamburger (accessible + animated) */
.navbar-toggler { border: none; padding: .25rem; width: calc(var(--touch)); height: calc(var(--touch)); display: inline-grid; place-items: center; }
.hamburger { width: 26px; height: 18px; position: relative; display: inline-block; }
.hamburger span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s; border-radius: 2px; }
.hamburger span:nth-child(1){ top: 0; }
.hamburger span:nth-child(2){ top: 8px; }
.hamburger span:nth-child(3){ top: 16px; }

/* when open - transform into X */
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(2){ opacity: 0; transform: scaleX(.2); }
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile: full-screen slide down panel for collapse */
@media (max-width: 991.98px){
    .navbar-collapse {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--bg);
        z-index: 1060;
        padding: 1rem;
        border-top: 1px solid rgba(0,0,0,.04);
        transform-origin: top center;
        transform: translateY(-6px) scaleY(.99);
        opacity: 0;
        visibility: hidden;
        transition: transform .22s ease, opacity .22s ease, visibility .22s;
        max-height: calc(100vh - 64px);
        overflow:auto;
    }
    .navbar-collapse.show { transform: translateY(0) scaleY(1); opacity: 1; visibility: visible; }
    
    .navbar-nav { flex-direction: column; gap: .25rem; }
    .navbar-nav .nav-link { padding: .75rem; font-size: 1rem; border-radius: 6px; }
    .nav-actions { flex-direction: column; width: 100%; margin-top: .6rem; gap: .5rem; }
    .nav-actions .btn { width: 100%; justify-content: center; }
}

/* Desktop tweaks */
@media (min-width: 992px){
    .nav-actions .btn { min-width: 110px; }
    .navbar-nav { align-items:center; }
}

/* focus visible for keyboard users */
:focus { outline: none; }
.nav-link:focus, .btn:focus, .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(111,66,193,.12); border-radius: 6px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .hamburger span, .navbar-collapse { transition: none !important; }
}


body {
    background-color: var(--bg-withe)
}

main {
    background-color: var(--bg-white);
}


.credit-text-image {
    opacity: 30%;
    padding: 4px;
    font-size: 0.7em;
    border-radius: var(--border-radius-maxmin);
}

.text-justify {
    text-align: justify;
}

/* 
+------------------------------------------------------------------+
|                                                                  |
|  ____            _   _               _____       _               |
| / ___|  ___  ___| |_(_) ___  _ __   | ____|_ __ | |_ _ __ _   _  |
| \___ \ / _ \/ __| __| |/ _ \| '_ \  |  _| | '_ \| __| '__| | | | |
|  ___) |  __/ (__| |_| | (_) | | | | | |___| | | | |_| |  | |_| | |
| |____/ \___|\___|\__|_|\___/|_| |_| |_____|_| |_|\__|_|   \__, | |
|                                                           |___/  |
|                                                                  |
+------------------------------------------------------------------+ 
*/

.main-entry {
    padding: var(--padding-default);
    display: flex;
    justify-content: space-between;
    background-color: var(--bg-blue);
    
    height: 80vh;
    width: 100%;
}
.main-entry-title {
    font-size: 4.75rem;
    font-weight: 700;
    text-align: end;
    
    width: 65%;
    
    padding: 108px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    
    background: rgb(236,236,236);
    background: linear-gradient(90deg, rgba(236,236,236,1) 0%, rgba(255,255,255,1) 100%);
    
    /* background-color: var(--bg-withe); */
    border-radius: var(--border-radius-min);
}
.text-gradient {
    background: rgb(0,80,255);
    background: linear-gradient(90deg, rgba(0,80,255,1) 0%, rgba(255,57,0,1) 100%);
    -webkit-background-clip: text; 
    color: transparent;
}

.main-entry-action, .main-entry-action-about {
    background-image: url("../img/pexels/pexels-tima-miroshnichenko-6169151.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius-min);
    
    width: 34%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    
}
.main-entry-action {
    background-image: url("../img/pexels/pexels-flodahm-699459.jpg");
}

.action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
    .btn {
        margin-left: 4px;
    }
}

.action-buttons div {
    display: flex;
    align-items: center;
    justify-content: end;
}




.btn-purple {
    background-color: var(--color-purple);
    color: var(--bg-withe);
}
.btn-purple:hover {
    background-color: var(--color-purple-active);
    color: var(--bg-withe);
}





/* 
+----------------------------------------------------------------------+
|                                                                      |
|  ____            _   _               ____  _                         |
| / ___|  ___  ___| |_(_) ___  _ __   |  _ \| |__  _ __ __ _ ___  ___  |
| \___ \ / _ \/ __| __| |/ _ \| '_ \  | |_) | '_ \| '__/ _` / __|/ _ \ |
|  ___) |  __/ (__| |_| | (_) | | | | |  __/| | | | | | (_| \__ \  __/ |
| |____/ \___|\___|\__|_|\___/|_| |_| |_|   |_| |_|_|  \__,_|___/\___| |
|                                                                      |
+----------------------------------------------------------------------+ 
*/
.container-phrase {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    
    display: flex;
    align-items: center;
    justify-content: space-around;
    
    background-color: var(--bg-dark);
}
/* Text Animation */
.container-phrase p {
    margin-bottom: 0;
}

.text-animation {
    font-size: 2em;
    
    color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.word-text_animation {
    margin-left: 6px;
    width: 15%;
    text-align: start;
    animation: text-animation 1s ease infinite alternate;
}

@keyframes text-animation {
    0%, 25% { 
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); 
    }
    50% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 
    }
}

.text-animation .wisteria {
    color: #8e44ad;
}

.text-animation .belize {
    color: #2980b9;
}

.text-animation .pomegranate {
    color: #c0392b;
}

.text-animation .green {
    color: #16a085;
}

.text-animation .midnight {
    color: #b5b5b5;
}






/* People Cite */
.people-cite {
    background-color: #212529;
    border-radius: var(--border-radius-min);
    color: white;
    width: 80%;
    display: flex;
    overflow: hidden; /* Evita vazamentos de elementos internos */
}

.people-cite figure,
.people-cite blockquote,
.people-cite .blockquote {
    margin: 0 !important;
}

.people-text {
    padding: var(--padding-big);
    display: flex;
    align-items: center;
    flex: 1; /* Garante que ocupe o espaço restante */
}

.people-card {
    width: 30%;
    background-color: #3b3e41;
    border-radius: var(--border-radius-min);
    padding: var(--padding-big);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.people-card .people-image {
    background-color: white;
    border-radius: 50%;
    border: 4px solid #3c3c3c;
    width: 150px;
    height: 150px;
    object-fit: cover; /* Evita distorções em imagens */
}












.business-potential-container, .about-content, .about-content-about {
    padding: var(--padding-default);
    display: flex;
    height: 90vh;
    background-color: var(--bg-dark);
}
.about-content-about {
    display: block;
}

.about-content-white {
    background-color: var(--bg-light);
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.business-potential-card {
    padding: var(--padding-big);
    background-color: var(--bg-light);
    border-radius: var(--border-radius-min);
}

.business-potential-card-first {
    width: 34%;
    padding: 0;
    
    background-image: url("../img/pexels/pexels-fauxels-3182755.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    div {
        height: 95%;
    }
}
.business-potential-card-second {
    width: 65%;
    margin-left: 10px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    p {
        width: 80%;
        /* text-align: justify; */
        font-size: 1.5em;
    }
}










.question-thenorian-container {
    background-color: var(--bg-dark);
    padding: var(--padding-default);
    
    height: 90vh;
    
    display: flex;
}

.question-thenorian-content {
    width: 65%;
    padding: var(--padding-big);
    
    /* background-color: var(--bg-light); */
    
    /* background: rgb(199,199,199);
    background: linear-gradient(122deg, rgba(199,199,199,1) 0%, rgba(235,235,235,1) 32%, rgba(191,191,191,1) 64%, rgba(199,199,199,1) 100%); */
    
    border-radius: var(--border-radius-min);
}


.question-thenorian-image {
    width: 34%;
    padding: 0;
    
    margin-left: 10px;
    
    background-image: url("../img/pexels/pexels-karolina-grabowska-7680154.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 75%;
    
    background-color: var(--bg-light);
    border-radius: var(--border-radius-min);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    div {
        height: 95%;
    }
}














/* 
+--------------------------------+
|                                |
|  _____           _             |
| |  ___|__   ___ | |_ ___ _ __  |
| | |_ / _ \ / _ \| __/ _ \ '__| |
| |  _| (_) | (_) | ||  __/ |    |
| |_|  \___/ \___/ \__\___|_|    |
|                                |
+--------------------------------+
*/
footer {
    background-color: var(--bg-dark);
    padding: 8px;
    
}

footer section {
    background-color: var(--bg-light);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    border-radius: var(--border-radius-min);
}

.copyright {
    font-weight: 200;
}



















/*
+--------------------------+
|                          |
|     _         _   _      |
|    / \  _   _| |_| |__   |
|   / _ \| | | | __| '_ \  |
|  / ___ \ |_| | |_| | | | |
| /_/   \_\__,_|\__|_| |_| |
|                          |
+--------------------------+
*/
.auth-body {
    height: 100vh;
    background-color: #21D4FD;
    background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.auth-body header {
    width: 40%;
}

.auth-main {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.auth-main section {
    width: 40%;
    height: 70vh;
}

.auth-main section .card {
    height: 100%;
}

.form-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.form-auth form {
    width: 90%;
}