@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');

/* RESOLUÇÕES PARA TESTAR 

    PC
    1024 x 768
    1280 x 720
    1366 x 768
    1536 x 864
    1600 x 900
    1920 x 1080

    MOBILE
    360 x 640
    360 x 800
    393 x 873
    412 x 892
    412 x 915
    414 x 896
*/

/* VARIÁVEIS */
:root {
    --main-text-color: #116A63;
    --main-background-color: #ffffff;
    --secondary-background-color: #F8F5F5;
    --hero-background-color: #e2e2e0;
    --highlight-color: #D6FFFF;
    --side-margin: 10px;
    --main-font-family: "Poppins", sans-serif;
}

/* RESET */
html, body { margin: 0; padding: 0; background-color: var(--main-background-color); }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
* { font-family: var(--main-font-family); }

h2 {
    font-size: x-large;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--main-text-color);
}

section { align-content: center; text-align: center; padding: 2.7rem 0; }

/* CABEÇALHO */
header {
    padding: 1vw;
    background-color: var(--hero-background-color);
    border-bottom: solid 3px rgb(17, 106, 99, .5);
    position: sticky;
    top: 0;
    z-index: 100;
    align-items: right;
    align-content: right;
    text-align: right;
}

header nav {
    display: inline-flex;
    list-style-type: none;
    font-size: .95vw;
    font-weight: 500;
    gap: 1.8vw;
    padding: 0;
    margin: 0;
}

header nav a { text-decoration: none; color: #083632; }
header nav a:hover { color: #D4AF37; }
#open-menu-btn, #close-menu-btn { display: none; }

/* HERO */
#hero {
    position: relative;
    background-image: url(images/hero.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 85vh;
    padding: 0;
}

#hero.jp { background-image: url(images/heroJP.png); }
#hero #hero-background { position: relative; padding-top: 41.67%; }

#hero #logo {
    position: absolute;
    top: 10px;
    right: var(--side-margin);
    width: 23vw;
}

#hero h2 {
    position: absolute;
    font-size: xx-large;
    font-weight: 500;
    top: 25vh;
    right: var(--side-margin);
    text-align: right;
    color: var(--main-text-color);
    text-shadow: 0 0 20px var(--hero-background-color), 0 0 20px var(--hero-background-color), 0 0 20px var(--hero-background-color), 0 0 20px var(--hero-background-color);
    overflow: hidden;
    padding: 0 0 0 10px;
    border-radius: 5px;
}

#hero p {
    position: absolute;
    top: 35vh;
    right: var(--side-margin);
    width: 50vw;
    font-size: x-large;
    font-weight: 500;
    text-align: right;
    letter-spacing: -1.2px;
    color: var(--main-text-color);
    text-shadow: 0 0 20px var(--hero-background-color), 0 0 20px var(--hero-background-color), 0 0 20px var(--hero-background-color), 0 0 20px var(--hero-background-color);
    overflow: hidden;
    border-radius: 5px;
}

#hero h2.jp { top: 23vh; }
#hero p.jp { top: 35vh; }
#hero-button.jp { top: 60vh; }

#hero-button {
    cursor: pointer;
    position: absolute;
    display: flex;
    top: 55vh;
    right: var(--side-margin);
    align-items: center;
    padding: 13px 30px;
    gap: 1vw;
    background-image: linear-gradient(to right, #d4af3700 0%, rgba(212, 175, 55, .65) 10%, rgba(212, 175, 55, .65) 90%, #d4af3700 100%);
    transition: transform .3s ease;
}

#hero-button h3 { font-size: x-large; font-weight: 600; margin: 0; color: var(--main-background-color); }
#hero-button:hover {
    background-image: linear-gradient(to right, #d4af3700 0%, rgb(212, 175, 55) 10%, rgb(212, 175, 55) 90%, #d4af3700 100%);
    transform: scale(1.05);
}

#hero span {
    position: absolute;
    background-color: var(--highlight-color);
    bottom: 5px;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: small;
    font-weight: 500;
    letter-spacing: -1px;
    color: var(--main-text-color);
}

/* MOTIVACIONAL & SOLUÇÕES */
#motivacional { padding: 2.7rem; }

#solutions { padding: 2.7rem 1.5rem; background-color: var(--highlight-color); }

#sol-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

#sol-table div {
    text-align: justify;
    padding: 10px;
    font-size: small;
    background-color: #C5EED1;
}

#sol-table div:first-child { background-color: var(--main-background-color); }

/* SOBRE MIM */
#about-me { padding: 2.7rem; }

#about-me p {
    font-size: medium;
    text-align: justify;
    letter-spacing: -.2px;
    word-spacing: 2px;
    margin: 0 10rem;
}

#about-me button, #lets-talk button, #socials button {
    margin: 1rem 0 2rem 0;
    border: none;
    font-weight: 500;
    font-size: medium;
    color: var(--main-background-color);
    background-color: var(--main-text-color);
    padding: 7px 15px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

#about-me button:hover, #lets-talk button:hover, #socials button:hover {
    color: var(--main-text-color);
    background-color: var(--main-background-color);
    box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.5);
}

/* EXPERIÊNCIA */
#experience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--highlight-color);
    padding: 2.7rem 10vw;
}

#experience img { display: block; margin: auto; height: 17vw; border-radius: 150px; }
#experience strong { font-size: 3.5vw; font-weight: 600; color: var(--main-text-color); }
#experience p { font-size: 1.2rem; margin: 0; color: #D4AF37; font-weight: 500; }

/* DEPOIMENTOS */
#feedback { padding: 2.7rem; }
#feedback p { margin: 0 0 2rem 0; font-size: small; }
#feedback h2 { margin: 0; }

/* COMO TE AJUDO & DÚVIDAS */
#services, #qa { padding: 2.7rem 10vw; background-color: var(--main-background-color); overflow: hidden; }
#services { background-color: var(--highlight-color); }
#services h2, #qa h2 { text-align: center; margin-bottom: 2rem; }
#qa.jp { background-color: var(--highlight-color); }

.box {
    max-height: 1.6rem;
    overflow: hidden;
    transition: all 1s;
    padding: 0.7rem 15px;
    align-items: center;
    margin: .7rem auto;
    border-radius: 50px;
    border: solid 1px rgb(211, 208, 208);
    background-color: var(--main-background-color);
    text-align: left;
}

.box.open { max-height: 1000px; }

.box .label {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    height: 1.2rem;
}

.box .label img { height: 1rem; }
.box .label h3 { font-size: medium; line-height: 1.2rem; margin: 0; padding: 0; font-weight: 500; }
.box p { text-align: justify; padding-top: 1.6rem; margin: 0; font-size: small; }

/* VAMOS CONVERSAR */
#lets-talk { padding: 0 2.7rem; }
#lets-talk p { text-align: center; }

/* CONSULTÓRIO */
.office { background-color: var(--highlight-color); }

.office div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0 10vw 2.7rem 10vw;
    transition: none;
}

.office img { width: 25vw; }

/* CONTATO */
#contact {
    background-color: var(--secondary-background-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2.7rem 11vw 0 11vw;
}

#contact #links { font-size: small; text-align: justify; }
#links a { color: var(--main-text-color); }

#profile { display: flex; justify-content: center; align-items: center; gap: 2vw; }
#profile img { width: 10vw; height: 10vw; border-radius: 100%; }
#profile p { text-align: left; font-weight: 500; }

#info { display: block; text-align: center; }
#info img { width: 1.2vw; }
#info h3 { font-weight: 700; font-size: medium; }

#info p, #info a {
    display: flex;
    font-size: small;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    gap: .5vw;
    text-decoration: none;
    color: #000000;
}

#info a:first-of-type { margin-bottom: .25vw; }

/* LOCALIZAÇÃO */
#loc-info { display: flex; background-color: var(--secondary-background-color); padding: 0 2.7rem; align-items: center; justify-content: center; }

#location {
    background-color: var(--secondary-background-color);
    display: flex;
    padding: 2rem 4vw;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}

#mobile-div { display: flex; align-items: center; justify-content: center; gap: 2vw; }

#address { display: block; align-items: center; }
#address h3 { margin: 0; font-size: medium; }

#address p {
    display: flex;
    font-weight: 500;
    font-size: small;
    align-items: center;
    text-align: left;
    gap: .5vw;
    margin-bottom: 3vw;
    max-width: 30vw;
}

#address img { width: 1.2vw; }

#socials { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; }
#socials a { text-decoration: none; }
#socials.jp { display: block; }
#socials img { width: 2.3rem; }
#socials.jp button { font-size: small; }

#foto-predio img { height: 30vh; }

#location iframe, #mobile-div.jp div iframe { height: 30vh; width: 30vw; }

/* FOOTER */
footer {
    background-color: var(--secondary-background-color);
    padding: 0 11vw 1rem 11vw;
    text-align: center;
    justify-items: center;
    display: flex;
    flex-direction: column;
}

footer * { margin: 0; }
footer p { font-size: .9vw; }
footer #disclaimer { background-color: #ffffff; padding: 7px 15px; border-radius: 50px; }
footer img { margin: 0 auto; width: 15vw; }
#politica a { color: #c32a2a; text-decoration: none; }
#politica a:hover { color: #184274; }

/* CERTIFICAÇÃO, PRIVACIDADE, USO */
#certification, #privacy, #usage { padding: 0 2.7rem; background-color: var(--secondary-background-color); }

#certification h1, #privacy h1, #usage h1 { font-size: large; font-weight: 600; text-align: center; }
#certification iframe { width: 100%; height: 80vh; }
#certification img { width: auto; height: 80vh; }

/* SOBRE (PÁGINA ABOUT) */
#about { padding: 2rem 2.7rem; display: flex; background-color: var(--secondary-background-color); gap: 20px; }
#about img { width: 40vw; height: fit-content; }

#about p, #privacy p, #privacy li, #usage p, #usage table { font-size: medium; text-align: justify; }

/* PÁGINA DE CONTATO */

#contactpage { padding: 1rem 0; }

#contactpage h1 {
    padding: 0 var(--side-margin);
    font-size: xx-large;
    font-weight: 600;
    margin: 0;
    background-color: #D6FFFF;
    border: 3px double #5CDFD4;
}

#contactpage h2 {
    padding: 1rem 2.7rem 0 2.7rem;
    font-size: large;
    color: #000000;
    text-align: justify;
    margin-top: 0;
}

#contactpage a { text-decoration: none; }

#contactpage button {
    display: flex;
    align-items: center;
    margin: 0 auto;
    gap: 10px;
    border: none;
    color: #ffffff;
    font-weight: 600;
    background-color: #25d366;
    padding: 7px 15px;
    border-radius: 5px;
    cursor: pointer;
}

#contactpage img { width: 20px; filter: invert(100%); }

/* FORMULÁRIO DE CONTATO */
#contactform { padding: 0 2.7rem; display: flex; justify-content: center; margin-bottom: 2.7rem; }

#contactform form { outline: solid 2px var(--main-text-color); outline-offset: 3px; border-radius: 5px; }

#contactform * { margin: 5px; text-align: justify; }

#contactform span { color: #c32a2a; }

#contactform button { 
    margin: 0 auto;
    border: none;
    color: #ffffff;
    font-weight: 600;
    background-color: #2e6cd0;
    padding: 7px 15px;
    border-radius: 5px;
    cursor: pointer;
}

#version-switch a {
    display: flex;
    text-align: left;
    text-decoration: none;
    position: absolute;
}

#version-switch img {
    height: 1.7rem;
}

/* DESIGN RESPONSIVO  */

@media (max-width: 600px) {
    header nav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        background-color: var(--main-text-color);
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 50px;
        display: block;
    }

    header nav.active { width: 50vw; }

    #open-menu-btn { display: block; margin: 5px 10px 0 15px; cursor: pointer; }
    #open-menu-btn img { height: 5vw; width: 5vw; filter: invert(25%) sepia(8%) saturate(7374%) hue-rotate(131deg) brightness(91%) contrast(94%); }

    #close-menu-btn { display: flex; position: absolute; top: 15px; right: 15px; cursor: pointer; font-family: var(--main-font-family); }
    #close-menu-btn img { height: 5vw; width: 5vw; filter: invert(100%); }

    header nav a { padding: 15px; text-decoration: none; color: var(--main-background-color); display: block; font-size: 4vw; }

    #hero {
        background-image: linear-gradient(var(--hero-background-color), rgba(226, 226, 224, 0.3), var(--hero-background-color)), url(images/hero.jpg);
        background-position: 6% center;
    }

    #hero.jp {
        background-image: linear-gradient(var(--hero-background-color), rgba(226, 226, 224, 0.3), var(--hero-background-color)), url(images/heroJP.png);
        background-position: 8% center;
    }

    #hero #logo { width: 35vw; }

    #hero h2 {
        top: 15vh;
        text-shadow: 2px 2px 5px var(--hero-background-color), -2px -2px 5px var(--hero-background-color), -2px 2px 5px var(--hero-background-color), 2px -2px 5px var(--hero-background-color),
                     0 0 70px rgba(226, 226, 224, 0.5), 0 0 70px rgba(226, 226, 224, 0.5), 0 0 70px rgba(226, 226, 224, 0.5), 0 0 70px rgba(226, 226, 224, 0.5);
    }

    #hero p {
        top: 40vh;
        font-size: 4vw;
        width: 85vw;
        text-shadow: 2px 2px 5px var(--hero-background-color), -2px -2px 5px var(--hero-background-color), -2px 2px 5px var(--hero-background-color), 2px -2px 5px var(--hero-background-color),
                     0 0 70px rgba(226, 226, 224, 0.5), 0 0 70px rgba(226, 226, 224, 0.5), 0 0 70px rgba(226, 226, 224, 0.5), 0 0 70px rgba(226, 226, 224, 0.5);
    }

    #hero-button h3 { font-size: 4vw; }
    #about-me { padding: 0; }
    #about-me p { margin: 0 15vw; }
    #experience img { height: 40vw; }
    #experience strong { font-size: larger; font-weight: 700; }
    #experience p { font-size: medium; }

    #contact { display: block; padding: 2.7rem 5vw 0 5vw; gap: 0; }
    #contact div { margin: 0; }
    #contact #links { padding: 0 0.5rem; margin: 0 1.5rem; background-color: var(--main-background-color); border-radius: 10px; }

    #profile { gap: 5vw; margin-bottom: 2.7rem; }
    #profile p { font-size: large; }
    #profile img { width: 25vw; height: 25vw; border-radius: 100%; }

    #info img { width: 4vw; }
    #info h3 { margin-bottom: 2vw; }
    #info p, #info a { line-height: 1.5; gap: 1vw; }
    #info a:first-of-type { margin-bottom: 2vw; }

    #location { display: block; padding: 0; }

    #mobile-div { display: grid; grid-template-columns: 2fr 1fr; padding: 1rem 10vw; gap: 3vw; }
    #address { align-content: center; }
    #address h3 { margin: 0; }
    #address p { gap: 2vw; margin-bottom: 5vw; max-width: 100%; }
    #address img { width: 5vw; margin: 0; }

    #socials { justify-content: center; display: flex; gap: 1vw; }
    #socials img { width: 7vw; }
    #foto-predio img { width: 100%; height: auto; }
    #location iframe { height: 15vh; width: 80vw; }

    footer { padding: 1rem 2.5vw 0 2.5vw; }
    footer #disclaimer { padding: 7px 2vw; border-radius: 25px; }
    footer img { width: 30vw; }
    footer p { font-size: 2vw; }

    .office { border-radius: 10px; margin: 0; overflow: hidden; }
    .office div { display: flex; transition: transform 0.5s ease-in-out; width: 80vw; }
    .office img { width: inherit; object-fit: contain; display: block; }

    /* JAPÃO - MOBILE */
    #hero h2.jp { top: 7vh; }
    #hero p.jp { top: 45vh; }
    #hero-button.jp { top: 65vh; }

    #loc-info { display: block; }
    #mobile-div.jp { display: block; gap: 10px; }
    #socials.jp button { margin: 0 0 10px 0; }
    #mobile-div.jp div iframe { height: 15vh; width: 100%; }
    #about { display: block; }

    #certification img { width: 100%; height: auto; }
    
    #contactform { padding: 0 .5rem; }
    #contactpage h2 { padding: 0 var(--side-margin); }

    #version-switch img { height: 1.8rem; }
}

@media (min-width: 601px) and (max-width: 1000px) {
    #hero h2 { top: 20vh; }
    #hero p { width: 75vw; }
    #hero-button h3 { font-size: 3vw; }
    #about-me { margin: 0; }
    #experience img { height: 25vw; }

    #contact { padding: 2.7rem 5vw 0 5vw; }
    #info h3 { margin-bottom: 2vw; }
    #info p, #info a { font-size: medium; line-height: 2vw; gap: .5vw; }
    #info a:first-of-type { margin-bottom: 2.5vw; }

    #location { padding: 2rem 4vw; gap: 1vw; }
    #address p { font-size: medium; }
    #address img { width: 1.2vw; }
    #socials { gap: .25vw; }
    #socials img { width: 5vw; }
    #foto-predio img { height: 20vh; }
    #location iframe { height: 20vh; width: 100%; }

    footer { padding: 0 5vw 1rem 5vw; }
    footer p { font-size: x-small; }
    footer img { width: 25vw; }

    /* JAPÃO - TABLET */
    #hero h2.jp { top: 25vh; }
    #hero p.jp { top: 40vh; }
    #hero-button.jp { top: 60vh; }
    #socials.jp img { width: 3vw; }
    #mobile-div.jp div iframe { height: 100%; width: 20vw; }
    #about img { width: 30vw; }
}

@media (min-width: 1001px) and (max-width: 1300px) {
    header a { font-size: 1.20vw; }
    #hero p { width: 75vw; }
    footer { padding: 0 5vw 1rem 5vw; }
    footer p { font-size: 1vw; }
    #about img { width: 20vw; }
}

@media (min-width: 1301px) {
    #hero h2 { font-size: 2.2vw; }
    #hero p { font-size: 1.3vw; }
    #hero p.jp { top: 40vh; }
    #hero span { font-size: 1.5vw; }
    #hero-button h3 { font-size: 1.2vw; }

    h2 { font-size: 2vw; }
    h3 { font-size: 1.5vw; }

    #motivacional p, #solutions p, #about-me p, #feedback p, #lets-talk p, #sol-table div, .box p { font-size: .8vw; }
    #about-me button, #lets-talk button, #socials.jp button { font-size: .75vw; }
    .box .label h3 { font-size: .9vw; }
    #profile p { font-size: 1vw; }
    #links p { font-size: .7vw; }

    #loc-info { padding: 0 10rem; }
    #loc-info h3 { font-size: 1vw; }
    #loc-info a, #loc-info p, #mobile-div a, #mobile-div p, #contact a, #contact p { font-size: .7vw; }

    footer p { font-size: .6vw; }
    #certification h1 { font-size: x-large; font-weight: 600; text-align: center; }
    #about img { width: 15vw; }
}