/* Variáveis para cores (apenas um exemplo, por favor, forneça as cores exatas) */
:root {
    --purple-dark: #5865F2; /* Exemplo de roxo do cabeçalho */
    --gray-dark: #23272A;   /* Exemplo de cor de fundo principal */
    --gray-light: #2C2F33;  /* Exemplo de cor de fundo de seções */
    --white: #FFFFFF;
    --text-color: #F6F6F6;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif; /* Substituir pela fonte real */
    background-color: var(--gray-dark);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.hero-section {
    /* background-color: var(--purple-dark); Cor do cabeçalho */
    background-image: url("./img/Header-Background.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    padding: 100px 0;
    text-align: center;
    position: relative; /* Para as imagens de fundo */
    overflow: hidden; /* Para garantir que as imagens não vazem */
}

.hero-section h1 {
    font-size: 3em;
    margin-bottom: 20px;
    color: var(--white);
}

.hero-section p {
    font-size: 1.2em;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--white);
}

.hero-buttons .btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px;
    transition: background-color 0.3s ease;
}

.btn-download {
    background-color: var(--white);
    color: var(--purple-dark);
}

.btn-download:hover {
    background-color: #e0e0e0;
}

.btn-browser {
    background-color: var(--gray-dark); /* Exemplo de cor de botão secundário */
    color: var(--white);
}

.btn-browser:hover {
    background-color: #40444B;
}

/* Content Sections */
.content-section {
    padding: 80px 0;
    background-color: var(--white); /* Cor de fundo das seções */
}

.content-section:nth-child(even) {
    background-color: var(--white); /* Alternar cor de fundo para contraste */
}

.content-section .container {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* Para responsividade */
}

.content-section .image-wrapper,
.content-section .text-content {
    flex: 1;
    min-width: 300px; /* Garante que os blocos não fiquem muito pequenos */
}

.content-section img {
    max-width: 100%;
    height: auto;
    display: block;
}

.content-section h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: var(--gray-dark);
}

.content-section p {
    font-size: 1.1em;
    color: var(--gray-light);
}

/* Specific section adjustments (e.g., image order) */
.easy-to-find .container {
    flex-direction: row-reverse; /* Inverte a ordem da imagem e texto */
}

.reliable-tech .container {
    flex-direction: column;
    text-align: center;
}

.reliable-tech .image-wrapper.full-width-image {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* Footer */
footer {
    background-color: #1a1a1a; /* Cor de fundo do rodapé */
    padding: 40px 0;
    text-align: center;
}

.footer-logo {
    max-width: 150px; /* Ajuste o tamanho do logo */
    height: auto;
}


/* Responsividade */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5em;
    }

    .hero-section p {
        font-size: 1em;
    }

    .hero-buttons .btn {
        display: block;
        margin: 15px auto;
    }

    .content-section .container {
        flex-direction: column;
        text-align: center;
    }

    .easy-to-find .container {
        flex-direction: column; /* Volta para coluna em telas pequenas */
    }

    .content-section .image-wrapper {
        order: -1; /* Coloca a imagem acima do texto em telas pequenas */
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 60px 0;
    }

    .hero-section h1 {
        font-size: 2em;
    }

    .hero-section p {
        font-size: 0.9em;
    }

    .content-section h2 {
        font-size: 2em;
    }

    .content-section p {
        font-size: 1em;
    }
}