Kids Dream Media
Stories that Inspire Confidence & Values
India’s child-safe storytelling and learning media brand trusted by parents and educators.
Leadership Adventure
A story teaching children the importance of taking initiative and leading with kindness.
Confidence Builder
Encouraging children to try new things and believe in their abilities.
Values Quest
Stories that highlight honesty, empathy, and teamwork for young minds.
Child-Safe Content
Educator Reviewed
Parent Approved
Kids Dream Media
Stories that Inspire Confidence & Values
India’s child-safe storytelling and learning media brand trusted by parents and educators.
Leadership Adventure
A story teaching children the importance of taking initiative and leading with kindness.
Confidence Builder
Encouraging children to try new things and believe in their abilities.
Values Quest
Stories that highlight honesty, empathy, and teamwork for young minds.
Child-Safe Content
Educator Reviewed
Parent Approved
/* Base font sizes */
body {
font-family: 'Nunito', sans-serif;
font-size: 16px; /* default for desktop */
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
}
h1 { font-size: 2.5rem; } /* ~40px desktop */
h2 { font-size: 2rem; } /* ~32px desktop */
h3 { font-size: 1.5rem; } /* ~24px desktop */
p { font-size: 1rem; } /* ~16px desktop */
/* ---- Responsive Scaling ---- */
@media (max-width: 1024px) { /* Tablets */
h1 { font-size: 2.2rem; } /* ~35px */
h2 { font-size: 1.8rem; } /* ~29px */
h3 { font-size: 1.3rem; } /* ~21px */
p { font-size: 0.95rem; } /* ~15px */
}
@media (max-width: 768px) { /* Small tablets / large phones */
h1 { font-size: 2rem; } /* ~32px */
h2 { font-size: 1.6rem; } /* ~26px */
h3 { font-size: 1.2rem; } /* ~19px */
p { font-size: 0.9rem; } /* ~14px */
}
@media (max-width: 480px) { /* Mobile phones */
h1 { font-size: 1.6rem; } /* ~25px */
h2 { font-size: 1.3rem; } /* ~21px */
h3 { font-size: 1rem; } /* ~16px */
p { font-size: 0.85rem; } /* ~13-14px */
}
h1 {
font-size: clamp(1.6rem, 4vw, 2.5rem); /* min 25px, max 40px, scales with viewport */
}
h2 {
font-size: clamp(1.3rem, 3.2vw, 2rem);
}
h3 {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
p {
font-size: clamp(0.85rem, 2vw, 1rem);.hero {
padding: clamp(20px, 5vw, 60px); /* Scales padding with screen size */
}
.card {
padding: clamp(12px, 2vw, 20px);
}
}font-size: clamp(MIN, PREFERRED, MAX);
