/* BASE STYLES */
/* Reset default browser styles */
body {
    margin: 0;
    padding: 0;
}

/* HERO SECTION */
/* Main hero section with background */
.hero-section {
    background-color: #E6F3FF;  
    padding: 80px 0;  
    text-align: center;
    width: 100%;    
    margin: 0;       
}

/* Hero section title */
.hero-section .hero-title {
    font-size: 3.5rem;
    color: #1E1E1E;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Hero section subtitle */
.hero-section .hero-subtitle {
    font-size: 1.2rem;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    padding: 0 20px;
    text-align: center;
}

/* CONTENT SECTION */
/* Main content area */
.content-section {
    padding: 60px 20px;
    margin: 0;
}

/* Content container */
.section-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Quiz information box */
.quiz-info {
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    margin-top: 30px;
    text-align: center;
}

/* Quiz link button */
.quiz-link {
    display: inline-block;
    background-color: #0066cc;
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    font-size: 1.2rem;
}

/* Quiz link hover state */
.quiz-link:hover {
    background-color: #0052a3;
}

/* WHY SECTION */
/* Why choose us section */
.why-section {
    padding: 60px 20px;
    background-color: #ffffff;
}

/* Why section content layout */
.why-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Why section image container */
.why-image {
    flex: 1;
    max-width: 500px;
}

/* Why section image styling */
.why-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top: 10px;
}

/* Why section text content */
.why-text {
    flex: 1;
    padding-top: 0;
    margin-top: 0;
    text-align: justify;
}

/* Why section heading */
.why-text h2 {
    font-size: 2.5rem;
    color: #1E1E1E;
    margin-top: 0;
    margin-bottom: 35px;
}

/* Why section paragraph */
.why-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
}

/* DID YOU KNOW SECTION */
/* Did you know section container */
.did-you-know-section {
    padding: 60px 20px;
    background-color: #E6F3FF;  
    margin: 60px 0;  
}

/* Did you know content layout */
.did-you-know-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Did you know text content */
.did-you-know-text {
    flex: 1;
    text-align: justify;
}

/* Did you know heading */
.did-you-know-text h2 {
    font-size: 2.5rem;
    color: #1E1E1E;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Did you know paragraph */
.did-you-know-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
}

/* Did you know image container */
.did-you-know-image {
    flex: 1;
    max-width: 500px;
}

/* Did you know image styling */
.did-you-know-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* QUIZ SECTION */
/* Quiz section container */
.quiz-section {
    padding: 60px 20px;
    background-color: #ffffff;
    text-align: center;
}

/* Quiz content container */
.quiz-content {
    max-width: 800px;
    margin: 0 auto;
}

/* Quiz section heading */
.quiz-text h2 {
    font-size: 2.5rem;
    color: #1E1E1E;
    margin-bottom: 20px;
}

/* Quiz section paragraph */
.quiz-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

/* ACCESSIBILITY STYLES */
/* Large text support for better readability */
.large-text .hero-title {
    font-size: 4rem;
}

.large-text .hero-subtitle {
    font-size: 1.4rem;
}

.large-text h2 {
    font-size: 3rem;
}

.large-text p {
    font-size: 1.4rem;
}

.large-text .quiz-link {
    font-size: 1.4rem;
    padding: 18px 45px;
}