@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the top */
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrollbar due to slider transitions */
}

.slider-container {
    width: 100%; /* Ocupar toda a largura */
    /* max-width: 800px; REMOVIDO */
    min-height: calc(100vh - 200px); /* header ~120px, footer ~80px */
    position: relative;
    overflow: hidden;
    /* background-color: #ffffff; REMOVIDO */
    /* border-radius: 15px; REMOVIDO */
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); REMOVIDO */
    margin-top: 0; /* Remover margem superior */
    margin-bottom: 0; /* Remover margem inferior */
    padding-top: 20px; /* Adicionar algum padding superior para não colar no topo */
    padding-bottom: 20px; /* Adicionar algum padding inferior */
    box-sizing: border-box;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px 5%; /* Usar porcentagem para padding lateral */
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    overflow-y: auto; /* Allow scrolling for long content within a slide */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: left; /* Default text alignment */
}

.slide.active-slide {
    opacity: 1;
    transform: translateX(0);
}

.slide.prev-slide {
    transform: translateX(-100%);
}

.slide h1, .slide h2, .slide h3 {
    font-family: 'Montserrat', sans-serif;
    color: #C2185B; /* Magenta for headings */
    margin-bottom: 15px;
    text-align: center;
}

.slide h1 {
    font-size: 2.2em;
}

.slide h2 {
    font-size: 1.8em;
    margin-top: 0; /* Remove default top margin for h2 if it's the first element */
}

.slide h3 {
    font-size: 1.4em;
    color: #008080; /* Dark Teal for sub-subheadings */
}

.slide p, .slide li {
    line-height: 1.8;
    font-size: 1.05em;
    margin-bottom: 15px;
    max-width: 100%; /* Ensure text wraps */
}

.slide ul {
    padding-left: 20px;
    list-style-type: disc; /* Default to disc, can be customized */
}

.slide strong {
    color: #C2185B; /* Magenta for strong text */
}

.slide a {
    color: #008080; /* Dark Teal for links */
    text-decoration: none;
    font-weight: 600;
}

.slide a:hover {
    text-decoration: underline;
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 800px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.navigation-buttons button {
    background-color: #C2185B; /* Magenta for buttons */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.navigation-buttons button:hover {
    background-color: #AD1457; /* Darker Magenta for hover */
    transform: translateY(-2px);
}

.navigation-buttons button:disabled {
    background-color: #F48FB1; /* Lighter Pink for disabled */
    cursor: not-allowed;
    transform: translateY(0);
}

.progress-indicator span {
    height: 12px;
    width: 12px;
    background-color: #FFC1E0; /* Light Pink for inactive dots */
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}

.progress-indicator span.active-dot {
    background-color: #C2185B; /* Magenta for active dot */
}.3s ease;
}

.progress-indicator span.active-dot {
    background-color: #00796b;
}

/* Quiz Specific Styles */
.quiz-question {
    margin-bottom: 20px;
    width: 100%;
}

.quiz-question p {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.quiz-options label {
    display: block;
    background-color: #e0f2f1;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid #b2dfdb;
}

.quiz-options label:hover {
    background-color: #b2dfdb;
}

.quiz-options input[type="radio"] {
    margin-right: 10px;
    display: none; /* Hide actual radio button */
}

/* Style for selected radio button label */
.quiz-options input[type="radio"]:checked + span {
    font-weight: bold;
    color: #004d40;
}

.quiz-options label.selected {
    background-color: #80cbc4; /* A slightly darker shade for selection */
    border-color: #00796b;
}


.quiz-feedback {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    font-size: 0.95em;
    width: 100%;
    box-sizing: border-box;
}

.quiz-feedback.correct {
    background-color: #c8e6c9; /* Light green */
    color: #2e7d32; /* Dark green */
    border: 1px solid #a5d6a7;
}

.quiz-feedback.incorrect {
    background-color: #ffcdd2; /* Light red */
    color: #c62828; /* Dark red */
    border: 1px solid #ef9a9a;
}

#submitQuizBtn {
    background-color: #ff8f00; /* Orange for quiz submit */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: block; /* Make it a block to center it if needed */
    margin: 20px auto 0 auto; /* Center button */
}

#submitQuizBtn:hover {
    background-color: #e65100;
    transform: translateY(-2px);
}

#downloadBtn {
    background-color: #4CAF50; /* Green for download */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 20px auto 0 auto;
    text-decoration: none; /* If it's an anchor tag */
}

#downloadBtn:hover {
    background-color: #388E3C;
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .slider-container {
        width: 100%; /* Full width */
        padding-top: 80px; /* For sticky header */
        min-height: 400px; /* Specific min-height for tablet */
        box-sizing: border-box; /* Ensure padding is included correctly */
    }
    .slide {
        padding: 20px;
    }
    .slide h1 {
        font-size: 1.8em;
    }
    .slide h2 {
        font-size: 1.5em;
    }
    .slide h3 {
        font-size: 1.2em;
    }
    .slide p, .slide li {
        font-size: 0.95em;
    }
    .navigation-buttons button {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    .progress-indicator span {
        height: 10px;
        width: 10px;
    }
}

@media (max-width: 480px) {
    .slide h1 {
        font-size: 1.6em;
    }
    .slide h2 {
        font-size: 1.3em;
    }
    .slide p, .slide li {
        font-size: 0.9em;
    }
    .navigation-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 10px;
    }
    .navigation-buttons button {
        width: 80%;
        margin-bottom: 10px;
    }
    .navigation-buttons button:last-child {
        margin-bottom: 0;
    }
    .header-logo img {
        max-height: 40px;
    }
    .slider-container {
        padding-top: 60px; /* Reduced padding for smaller header */
        min-height: 350px;
    }
    .slide {
        padding: 15px 10px; /* Reduced padding */
    }
}





/* Header Logo Styles */
.header-logo {
    width: 100%;
    padding: 15px 0;
    background-color: #f8f9fa; /* Light background for the header, can be adjusted */
    text-align: center;
    position: sticky; /* Make it sticky to the top */
    top: 0;
    z-index: 1000; /* Ensure it's above other content */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-logo img {
    max-height: 90px; /* Increased size */
    width: auto;
}

/* WhatsApp Float Button Styles */
.whatsapp-float {
    position: fixed;
    width: auto; /* Adjust width based on content */
    bottom: 20px;
    right: 20px;
    background-color: #25D366; /* WhatsApp Green */
    color: white;
    border-radius: 50px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95em;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.whatsapp-float img {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}

.whatsapp-float:hover {
    transform: scale(1.05);
}

/* Adjustments for slider container due to sticky header */
.slider-container {
    /* min-height: calc(100vh - 100px - 90px); /* Subtract header height (approx 90px) */
    /* The above might be too aggressive, let's adjust padding on body or slider-container if needed */
    padding-top: 120px; /* Add padding for taller sticky header (90px logo + 30px padding) */
}

/* Ensure quiz and download buttons also use the new palette */
.quiz-options label {
    display: block;
    background-color: #E1F5FE; /* Light Cyan for quiz options */
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid #B3E5FC; /* Lighter Cyan border */
}

.quiz-options label:hover {
    background-color: #B3E5FC; /* Lighter Cyan for hover */
}

.quiz-options label.selected {
    background-color: #4DD0E1; /* Cyan for selected */
    border-color: #00ACC1; /* Darker Cyan border */
    color: white;
}

#submitQuizBtn {
    background-color: #00ACC1; /* Cyan for quiz submit */
    color: white;
}

#submitQuizBtn:hover {
    background-color: #00838F; /* Darker Cyan for hover */
}

#downloadBtn {
    background-color: #008080; /* Dark Teal for download */
    color: white;
}

#downloadBtn:hover {
    background-color: #00695C; /* Darker Teal for hover */
}

/* Responsive adjustments for WhatsApp button and Header */
@media (max-width: 768px) {
    .whatsapp-float span {
        display: none; /* Hide text on smaller screens, show only icon */
    }
    .whatsapp-float {
        width: 50px; /* Fixed width for icon only */
        height: 50px;
        padding: 0;
        justify-content: center;
    }
    .whatsapp-float img {
        margin-right: 0;
    }
    .header-logo img {
        max-height: 50px;
    }
    .slider-container {
        padding-top: 80px; /* Adjust for smaller header */
    }
}

@media (max-width: 480px) {
    .header-logo img {
        max-height: 40px;
    }
    .slider-container {
        padding-top: 70px; /* Adjust for even smaller header */
    }
}