@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
    
    --primary-blue: #007bff; 
    --jagran-orange: #ff7f00;
    --dark-blue: #022b49;
    --background-light: #f4f6f8;
    --text-dark: #333;
    --text-light: #fff;
    --font-primary: "Poppins", sans-serif;
}

* {box-sizing: border-box;margin: 0;padding: 0;}
body { font-family: var(--font-primary); color: var(--text-dark); line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.banner-btn { text-align: center; }
.btn-participate {display: inline-block;padding: 12px 30px;background-color: #fcc621;color: #000;text-decoration: none;font-weight: 700;border-radius: 25px;margin: 20px 0;transition: background-color 0.3s;box-shadow: 9px 8px 9px #fcc62163;}
.btn-participate:hover { background-color: #2781cb; }
h3 {text-align: center;font-size: 2.5em;font-weight: 600;margin-bottom: 50px;color: #000;}
.hero-section { background-image:url('../images/bg_blue_header.png'); background-size: cover; background-position: top center; padding: 40px 0 0px; color: var(--text-light); background-repeat: no-repeat; position: relative; overflow: hidden; }
img.cloud {position: absolute;}
img.cloud.cloud-left { left: 0; width: 120px;}
img.cloud.cloud-right { right: 0; transform: rotate(180deg); overflow: hidden; width: 120px;}
.hero-section .logo { max-width: 150px; margin-bottom: 10px; }
.hero-section h1 { font-size: 3.5em; font-weight: 900; color: var(--jagran-orange); line-height: 1; }
.hero-section h2 { font-size: 4.5em; font-weight: 900; margin-bottom: 5px; line-height: 1; } 
img.banner-text { max-width: 450px; width: 100%; }
.hero-section p { font-size: 1.7em; font-weight: 600; margin-bottom: 20px; text-align: center; padding-top: 30px; color: #000; line-height: 1.2; }
.banner {display: flex;justify-content: space-between;}
.banner-image {position: relative;right: -180px;bottom: -7px;}
.banner-image img {max-width: 700px;width: 100%;}
.special-section { padding: 50px 0; position: relative; top: -19px; background: #fff; }
img.star_icon {position: absolute;left: -10px;top: 20%;width: 40px;}
img.cross_vector_icon {position: absolute;right: 0;bottom: 150px;width: 60px;}
img.dash_vector_line_icon {position: absolute;right: -40px;width: 100px;top: 110px;}
section.special-section .container {position: relative;}
.special-content { display: flex; flex-wrap: wrap; gap: 0px; justify-content: space-around; }
.image-gallery {position: relative;}
.image-gallery img { width: 100%; height: auto; max-width: 420px; }
.image-gallery .side-img { position: absolute; bottom: 0; right: 0; width: 70%; height: 70%; object-fit: cover; z-index: 1; border: 5px solid var(--background-light); }
.rewards-list { list-style: none; padding: 0; }
.reward-item { margin-bottom: 25px; padding-left: 30px; position: relative; }
.reward-item::before {content: '•';color: #2781cb;font-size: 4em;position: absolute;left: -20px;top: -17px;line-height: 1;}
.reward-item h4 { color: #000; font-weight: 700; font-size: 1.4em; margin-bottom: 5px; }
.steps-section { padding: 50px 0 80px; text-align: center; background: #faf5eb; position: relative; } 
.steps-section::before { content: ""; background-image: url(../images/yellow_bg_cloud_icon.png); background-repeat: no-repeat; background-size: cover; position: absolute; top: -90px; left: 0; width: 100%; height: 150px; z-index: 1; }
.steps-container { display: flex; justify-content: center; align-items: center; gap: 20px; }
.step-card { position: relative; display: flex; align-items: center; gap: 20px; }
.step-card .main {max-width: 212px;width: 100%;}
img.arrow { width: 64px; height: 24px;}
.step-card:hover .main { transform: translateY(-5px); }
.step-card .main { transition: transform 0.3s; }
.step-num { display: block; background-color: var(--primary-blue); color: var(--text-light); font-weight: 700; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; margin: 0 auto 15px; font-size: 0.8em; }
.step-num span { font-size: 1.5em; font-weight: 900; margin-left: 2px; }
.step-card p { font-weight: 600; color: var(--dark-blue); }
.categories-section {background-image: url('../images/blue_bg_footer.png');color: var(--text-light);padding: 80px 0 20px;text-align: center;position: relative;}
img.quiz_icon {position: absolute;left: 60px;width: 120px;top: 0;}
.categories-section h3 { color: var(--text-light); margin-bottom: 20px; }
.categories-section .intro-text { max-width: 800px; margin: 0 auto 50px; font-size: 1.1em; }
.categories-grid { display: flex; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding-top: 50px; }
.category-item { width: 220px; background-color: #fff; padding: 20px 20px; border-radius: 20px; transition: background-color 0.3s, transform 0.3s; box-shadow: 10px 5px 5px #000000; }
.category-item:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-5px); }
.category-item h4 { color: #000; margin-bottom: 10px; height: 50px; }
img.icon { width: 70px; height: 70px; }
.category-item p { color: #000; font-size: .8em; }
footer { background-color: #000; color: #888; padding: 15px 0; text-align: center; font-size: 0.9em; }
.categories-grid-container { padding-bottom: 40px; }
.category-item:hover h4, .category-item:hover p { color: #fff; }
.btn-participate:hover { color: #fff; }
@media (max-width: 992px) {
    .special-content { flex-direction: column; gap: 60px; }
    .image-gallery { min-height: 350px; }
    .rewards-list { max-width: 100%; flex-basis: 100%; }
}

@media (max-width: 768px) {
    .hero-section h1 { font-size: 2.5em; }
    .hero-section h2 { font-size: 3em; }
    h3 { font-size: 2em; }
    .steps-container { flex-direction: column; }
    .step-card:not(:last-child)::after { content: none; }
    .categories-grid { display: flex; padding-top: 0; }
    .categories-grid-container { overflow-y: scroll; white-space: nowrap; height: auto;        padding: 20px; margin: 0 -20px; }
    .category-item { width: 80%; }
    .banner {flex-wrap: wrap;}
    .banner-image {position: inherit;}
    img.arrow { display: none;}
    .step-card .main {max-width: 100%;}
    .category-item p { width: 230px; white-space: normal;}
    img.dash_vector_line_icon {right: 12px;top: 44%;}
    img.cross_vector_icon {bottom: 80px;width: 30px;}
    img.quiz_icon { width: 30px;}
    img.cloud.cloud-right {bottom: 190px;}
    img.cloud.cloud-left {top: 34%;}
    .reward-item::before { left: -5px;}
    img.star_icon { top: 13%; }
    .category-item h4 { height: auto; }
}