@import url(./global.css);

/* ----------------- Header ----------------- */
header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--color-neutral-silver);
    padding: 22px 0;
}

.navHeader>ul {
    display: flex;
    list-style: none;
    gap: 50px;
}

.navHeader>ul>li>a {
    text-decoration: 0;
    color: #18191F;
}

.active {
    font-weight: 600;
}

.buttonHeader {
    display: flex;
    gap: 14px;
}

.buttonLogin {
    background-color: var(--color-neutral-silver);
    padding: 10px 20px;
}

.buttonLogin>a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
}

.buttonSignUp {
    background-color: var(--color-primary);
    border-radius: 6px;
    padding: 10px 20px;
}

.buttonSignUp>a {
    color: var(--color-neutral-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

/* ----------------- Main ----------------- */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 104px;
    padding: 96px 0;
    background-color: var(--color-neutral-silver);
}

.contentLessons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 657px;
}

.contentLessons>h1 {
    font-size: 64px;
    color: var(--color-neutral-grey);
}

.contentLessons>h1>span {
    color: var(--color-primary);
}

.contentLessons>p {
    color: var(--color-neutral-grey);
}

.contentLessons>button {
    width: 128px;
}

/* ----------- Section Our Clients ----------- */
.ourClients {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 40px 0px;
    gap: 16px;
}

.ourClientsContent {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ourClientsContent>h2 {
    font-size: 36px;
    color: var(--color-neutral-dgray);
}

.ourClientsContent>p {
    color: var(--color-neutral-grey);
}

.ourClientsLogo {
    display: flex;
    justify-content: center;
    gap: 136px;
    padding: 25px 0;
}

/* ------------ Section Manage your entire ------------ */
.manageSystem {
    width: 100%;
    height: 416px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.manageSystem>h2 {
    font-size: 36px;
    font-weight: 600px;
    width: 542px;
    text-align: center;
    color: var(--color-neutral-dgray);
}

.manageSystem>p {
    margin-top: 8px;
    font-size: 16px;
    color: var(--color-neutral-grey);
}

.cardsWrapper {
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 127px;
    margin-top: 16px;
}

.cardsWrapper>.card {
    width: 300px;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 32px;
    border-radius: 8px;
    background-color: var(--color-neutral-white);
    box-shadow: 0 2px 4px 0px rgba(171, 190, 209, 0.20);
}

.card>h3 {
    font-size: 28px;
    font-weight: 700px;
    color: var(--color-neutral-dgray);
    text-align: center;
    margin-top: 16px;
}

.card>p {
    font-size: 14px;
    color: var(--color-neutral-grey);
    text-align: center;
    margin-top: 8px;
}

/* ----------------- Section pixelgrade ----------------- */
.pixelGrade {
    width: 100%;
    height: 433px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.pixelGrade>aside {
    width: 661px;
    height: 268px;
}

.pixelGrade>aside>h2 {
    font-size: 36px;
    font-weight: 600px;
    width: 601px;
    margin-right: 60px;
    color: var(--color-neutral-dgray);
}

aside>p {
    font-size: 14px;
    color: var(--color-neutral-grey);
    margin-top: 16px;
}

aside>button {
    margin-top: 32px;
    padding: 14px 32px;
    font-size: 16px;
    background-color: var(--color-primary);
    color: var(--color-neutral-white);
}

/* ----------------- Section Helping a local----------------- */
.business {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-neutral-silver);
    margin-top: 48px;
    gap: 72px;
    padding: 64px 0;
}

.business>aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 8px;
    width: 540px;
}

.business>aside>h2 {
    font-size: 36px;
    font-weight: 600px;
    color: var(--color-neutral-dgray);
    width: 398px;
}

.business>aside>h2>span {
    color: var(--color-primary);
}

.business>aside>p {
    color: #18191F;
    font-size: 16px;
}

.business .benefits {
    width: 540px;
    display: grid;
    grid-template-columns: 255px 255px;
    column-gap: 30px;
    row-gap: 40px;
}

.business>.benefits>.benefit {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 16px;
}

/* ------------ Section DesignYourSite ------------ */
.howToDesign {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 48px;
    gap: 49.47px;
}

.howToDesign>aside {
    display: flex;
    flex-direction: column;
    width: 661px;
    gap: 16px;
}

.howToDesign>aside>h2 {
    width: 601px;
    font-size: 36px;
    font-weight: 600px;
    color: var(--color-neutral-dgray);
}

.howToDesign>aside>p {
    width: 601px;
    font-size: 14px;
    color: var(--color-neutral-grey);
}

.howToDesign>aside>button {
    width: 151px;
    margin-top: 16px;
    padding: 14px 32px;
    color: var(--color-neutral-white);
}

/* -------------Section TimSmith ------------- */
.timSmith {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-neutral-silver);
    padding: 32px 0px;
    gap: 78px;
    margin-top: 48px;
}

.timSmith>.costumerContent {
    width: 748px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timSmith>.costumerContent>p:nth-child(1) {
    color: var(--color-neutral-grey);
    font-size: 16px;
    line-height: 24px;
}

.costumerInformation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timSmith>.costumerContent>.costumerInformation>p:nth-child(1) {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 600px;
}

.timSmith>.costumerContent>.costumerInformation>p:nth-child(2) {
    color: var(--color-neutral-lgrey);
    font-size: 16px;
}

.costumerContainer {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-top: 16px;
}

.costumerContainer>.customersItens {
    display: flex;
    gap: 41px;
}

.costumerContainer>.customerNavigation>button {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    background-color: transparent;
    font-weight: 600;
    cursor: pointer;
}

/* ------------ Caring Marketing ------------ */
.caringMarketing {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 0 94.6px 0;
    text-align: center;
}

.caringMarketingText {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.caringMarketingText>p {
    color: var(--color-neutral-grey);
    width: 628px;
}

.caringMarketingConteiner {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.caringCards {
    width: 368px;
    position: relative;
}

.caringCardsContent {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background-color: var(--color-neutral-silver);
    border-radius: 8px;
    box-shadow: 0px 8px 16px rgba(171, 190, 209, 0.40);
    width: 317px;
    position: absolute;
    top: 190px;
    left: 25.5px;
}

.caringCardsContent>p {
    font-size: 20px;
    color: var(--color-neutral-grey);
    font-weight: 600;
}

.caringCardsContent>button {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 8px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
}

/*  ----------- Antes do footer ----------- */
.antesDoFooter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: var(--color-neutral-silver);
}

.antesDoFooter>h2 {
    font-size: 64px;
    width: 887px;
    text-align: center;
    color: var(--neutral-black);
    font-weight: 600;
    padding: 16px;
}

.antesDoFooter>button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    padding: 14px 32px;
    gap: 8px;
    color: var(--color-neutral-white);
}

/* ----------- Footer ----------- */
footer {
    background-color: #263238;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 125px;
    height: 400px;
}

footer>.socialMedias {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 40px;
    height: 190px;
    width: 350px;
}

footer>.socialMedias>.text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-neutral-silver);
    font-weight: 400;
    font-size: 14px;
}

footer>.socialMedias>.footerNav {
    display: flex;
    gap: 16px;
}

footer>.footerContent {
    display: grid;
    grid-template-columns: 160px 160px 255px;
    column-gap: 30px;
}

footer>.footerContent>.information {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

footer>.footerContent>.information>h2 {
    color: var(--color-neutral-white);
    font-size: 20px;
    font-weight: 600;
}

footer>.footerContent>.information>.navCompany {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

footer>.footerContent>.information>.navCompany>a {
    text-decoration: 0;
    color: var(--color-neutral-silver);
    font-size: 14px;
}

/* //////////////////////////////////// */
footer>.footerContent>.stayUp {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
}

footer>.footerContent>.stayUp>h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-neutral-white);
}

footer>.footerContent>.stayUp>.send {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 40px;
    background-color: #515B60;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
}

footer>.footerContent>.stayUp>.send>input {
    background-color: transparent;
    color: var(--color-neutral-white);
}

footer>.footerContent>.stayUp>.send>input::placeholder {
    color: #D9DBE1;
    font-size: 14px;
    font-weight: 700;
}

footer>.footerContent>.stayUp>.send>input:focus {
    outline: 0;
}
footer>.footerContent>.stayUp>.send > button {
    background-color: transparent;
}

/* ================== RESPONSIVIDADE ================== */

/* ----------------- Telas Grandes (Desktop/Laptop - Max 1200px) ----------------- */
@media (max-width: 1200px) {
    /* Ajustes Gerais para Telas Maiores que o Padrão Mobile/Tablet */
    header {
        justify-content: space-between;
        padding: 22px 5%;
    }

    .navHeader > ul {
        gap: 30px;
    }

    main {
        gap: 50px;
        padding: 96px 5%;
    }

    .contentLessons {
        width: 50%; /* Reduz a largura do conteúdo principal */
    }

    .contentLessons > h1 {
        font-size: 54px;
    }

    .imgLessons > img {
        max-width: 100%;
        height: auto;
    }

    .ourClientsLogo {
        gap: 50px;
        flex-wrap: wrap; /* Permite que os logos quebrem a linha */
        padding: 25px 5%;
    }

    .manageSystem > h2 {
        width: 80%; /* Ajusta a largura para telas um pouco menores */
    }

    .cardsWrapper {
        gap: 50px;
        padding: 0 5%;
    }

    .pixelGrade {
        gap: 30px;
        padding: 48px 5%;
    }

    .pixelGrade > aside {
        width: 50%;
    }
    
    .pixelGrade > aside > h2 {
        width: 100%;
        margin-right: 0;
        font-size: 32px;
    }
    
    .pixelGrade > img {
        max-width: 40%;
        height: auto;
    }

    .business {
        gap: 30px;
        padding: 48px 5%;
    }

    .business > aside {
        width: 40%;
    }
    
    .business > aside > h2 {
        width: 100%;
        font-size: 32px;
    }

    .business .benefits {
        width: 50%;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 30px;
    }
    
    .howToDesign {
        gap: 30px;
        padding: 48px 5%;
    }
    
    .howToDesign > aside {
        width: 50%;
    }

    .howToDesign > aside > h2,
    .howToDesign > aside > p {
        width: 100%;
        font-size: 32px;
    }

    .timSmith {
        gap: 50px;
        padding: 32px 5%;
    }
    
    .timSmith > img {
        max-width: 100px; /* Reduz o tamanho do logo da Tesla */
        height: auto;
    }

    .timSmith > .costumerContent {
        width: 60%;
    }

    .costumerContainer > .customersItens {
        gap: 20px;
        flex-wrap: wrap;
    }

    .caringMarketingText > p {
        width: 80%;
    }

    .caringMarketingConteiner {
        gap: 15px;
        padding: 0 5%;
    }
    
    .caringCards {
        width: 30%; /* Reduz um pouco o tamanho do cartão */
    }
    
    .caringCards > img {
        width: 100%;
        height: auto;
    }
    
    .caringCardsContent {
        width: calc(100% - 30px); /* Ajusta o overlay */
        left: 15px;
    }
    
    .antesDoFooter > h2 {
        font-size: 54px;
        width: 80%;
    }
    
    footer {
        gap: 50px;
        padding: 60px 5%;
        height: auto;
    }
}

/* ----------------- Tablet (Max 768px) ----------------- */
@media (max-width: 768px) {
    /* Header (Nav e Botões) */
    .navHeader {
        display: none; /* Esconde a navegação principal para telas pequenas */
    }

    header {
        justify-content: space-between;
        padding: 22px 20px;
    }
    
    .buttonHeader {
        gap: 5px;
    }

    .buttonLogin, .buttonSignUp {
        padding: 8px 15px;
    }

    /* Main Section (Hero) */
    main {
        flex-direction: column-reverse; /* Conteúdo em cima da imagem */
        text-align: center;
        gap: 40px;
        padding: 48px 20px;
    }
    
    .contentLessons {
        width: 100%;
        align-items: center;
    }
    
    .contentLessons > h1 {
        font-size: 44px;
        line-height: 50px;
    }
    
    .imgLessons > img {
        max-width: 80%;
        height: auto;
    }

    /* Our Clients */
    .ourClients {
        margin: 40px 20px;
    }

    .ourClientsLogo {
        gap: 30px;
        justify-content: center;
        padding: 25px 0;
    }
    
    .ourClientsLogo img {
        max-width: 10%; /* Ajusta o tamanho dos logos */
        height: auto;
    }

    /* Manage System */
    .manageSystem {
        height: auto;
        padding: 40px 20px;
    }

    .manageSystem > h2 {
        font-size: 28px;
        width: 100%;
    }

    .cardsWrapper {
        flex-direction: column; /* Cartões em coluna */
        height: auto;
        gap: 20px;
        margin-top: 30px;
    }

    .cardsWrapper > .card {
        width: 80%;
        height: auto;
        padding: 30px;
    }

    /* Pixelgrade */
    .pixelGrade {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
    
    .pixelGrade > aside {
        width: 100%;
    }
    
    .pixelGrade > aside > h2 {
        width: 100%;
        font-size: 28px;
    }
    
    .pixelGrade > img {
        max-width: 80%;
    }
    
    .pixelGrade > aside > button {
        width: 100%;
    }

    /* Business */
    .business {
        flex-direction: column;
        padding: 40px 20px;
    }
    
    .business > aside {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    
    .business > aside > h2 {
        width: 100%;
        font-size: 28px;
    }
    
    .business .benefits {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        padding: 20px 0;
    }
    
    .business > .benefits > .benefit {
        justify-content: center;
    }

    /* How to Design */
    .howToDesign {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
    
    .howToDesign > aside {
        width: 100%;
        align-items: center;
    }
    
    .howToDesign > aside > h2,
    .howToDesign > aside > p {
        width: 100%;
        font-size: 28px;
    }
    
    .howToDesign > img {
        max-width: 80%;
    }
    
    .howToDesign > aside > button {
        width: 100%;
    }

    /* Tim Smith */
    .timSmith {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }
    
    .timSmith > .costumerContent {
        width: 100%;
    }
    
    .timSmith > .costumerContent > p:nth-child(1) {
        font-size: 14px;
    }

    .costumerInformation {
        align-items: center;
    }

    .costumerContainer {
        flex-direction: column;
        gap: 20px;
    }
    
    .costumerContainer > .customersItens {
        justify-content: center;
    }
    
    /* Caring Marketing */
    .caringMarketing {
        padding: 40px 20px 80px 20px;
    }

    .caringMarketingText > h2 {
        font-size: 32px;
    }
    
    .caringMarketingText > p {
        width: 100%;
        font-size: 14px;
    }

    .caringMarketingConteiner {
        flex-direction: column; /* Cartões em coluna */
        align-items: center;
        gap: 40px;
    }
    
    .caringCards {
        width: 100%;
        max-width: 368px; /* Limita a largura para não esticar demais */
    }

    .caringCardsContent {
        width: calc(100% - 50px);
        left: 25px;
    }
    
    .caringCards > img {
        width: 100%;
    }
    
    /* Antes do Footer */
    .antesDoFooter {
        height: auto;
        padding: 40px 20px;
    }
    
    .antesDoFooter > h2 {
        font-size: 40px;
        width: 100%;
    }
    
    .antesDoFooter > button {
        width: 100%;
    }

    /* Footer */
    footer {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px;
        height: auto;
        align-items: flex-start;
    }
    
    footer > .socialMedias {
        width: 100%;
        align-items: center;
        height: auto;
        gap: 20px;
    }
    
    footer > .socialMedias > .text {
        text-align: center;
    }

    footer > .footerContent {
        grid-template-columns: 1fr; /* Itens em coluna */
        gap: 30px;
        width: 100%;
    }
    
    footer > .footerContent > .information > .navCompany {
        align-items: flex-start;
    }
    
    footer > .footerContent > .stayUp {
        width: 100%;
    }
    
    footer > .footerContent > .stayUp > .send {
        width: 100%;
    }
}

/* ----------------- Celular (Max 480px) ----------------- */
@media (max-width: 480px) {
    /* Header */
    .buttonHeader {
        display: none; /* Esconde os botões para priorizar o logo em telas muito pequenas */
    }

    header {
        justify-content: center;
    }
    
    .contentLessons > h1 {
        font-size: 36px;
        line-height: 40px;
    }

    /* Our Clients */
    .ourClientsLogo {
        grid-template-columns: repeat(3, 1fr); /* Tenta organizar em 3 colunas */
    }
    
    .ourClientsLogo img {
        max-width: 100%;
        height: auto;
    }

    /* Manage System */
    .cardsWrapper > .card {
        width: 100%;
    }

    /* Business */
    .business .benefits {
        grid-template-columns: 1fr; /* Uma coluna para benefícios */
    }
    
    .business > .benefits > .benefit {
        justify-content: flex-start;
    }

    /* Tim Smith */
    .costumerContainer > .customersItens {
        gap: 10px;
        justify-content: space-around;
        width: 100%;
    }
    
    .costumerContainer > .customersItens img {
        max-width: 10%;
        height: auto;
    }
    
    .costumerContainer > .customerNavigation > button {
        font-size: 14px;
        padding: 10px 0;
    }

    /* Caring Marketing */
    .caringCardsContent {
        top: 150px; /* Ajusta a posição do conteúdo do cartão */
        width: calc(100% - 40px);
        left: 20px;
    }
    
    .caringCardsContent > p {
        font-size: 16px;
    }
    
    .caringCardsContent > button {
        font-size: 16px;
    }
    
    /* Antes do Footer */
    .antesDoFooter > h2 {
        font-size: 30px;
    }
}