@media (max-width: 768px) {
.lead { width: 100%; font-size: 16px; padding: 10px; }
.img-fluid { width: 100%; font-size: 16px; padding: 10px; }
.text-muted { width: 100%; font-size: 16px; padding: 10px; }
.affiliate-container { width: 100%; font-size: 16px; padding: 10px; }
.affiliate-container p { width: 100%; font-size: 16px; padding: 10px; }
.affiliate-container .card { width: 100%; font-size: 16px; padding: 10px; }
.affiliate-container .card:hover { width: 100%; font-size: 16px; padding: 10px; }
.affiliate-container .card .btn { width: 100%; font-size: 16px; padding: 10px; }
.affiliate-container .card i { width: 100%; font-size: 16px; padding: 10px; }
.affiliate-container .alert { width: 100%; font-size: 16px; padding: 10px; }
.ad-section { width: 100%; font-size: 16px; padding: 10px; }
.container { width: 100%; font-size: 16px; padding: 10px; }
.loading-spinner { width: 100%; font-size: 16px; padding: 10px; }
.error-message { width: 100%; font-size: 16px; padding: 10px; }
.report-table { width: 100%; font-size: 16px; padding: 10px; }
.report-table th { width: 100%; font-size: 16px; padding: 10px; }
.report-table td { width: 100%; font-size: 16px; padding: 10px; }
.report-table tr:nth-child(even) { width: 100%; font-size: 16px; padding: 10px; }
.report-table tr:hover { width: 100%; font-size: 16px; padding: 10px; }
.dashboard-container { width: 100%; font-size: 16px; padding: 10px; }
.report-list { width: 100%; font-size: 16px; padding: 10px; }
.report-card { width: 100%; font-size: 16px; padding: 10px; }
.report-card:hover { width: 100%; font-size: 16px; padding: 10px; }
.report-card h3 { width: 100%; font-size: 16px; padding: 10px; }
.report-card p { width: 100%; font-size: 16px; padding: 10px; }
.separator { width: 100%; font-size: 16px; padding: 10px; }
.comparison-container { width: 100%; font-size: 16px; padding: 10px; }
.comparison-table { width: 100%; font-size: 16px; padding: 10px; }
.comparison-table th { width: 100%; font-size: 16px; padding: 10px; }
.comparison-table td { width: 100%; font-size: 16px; padding: 10px; }
.highlight { width: 100%; font-size: 16px; padding: 10px; }
.loader { width: 100%; font-size: 16px; padding: 10px; }
.chart-container { width: 100%; font-size: 16px; padding: 10px; }
.button-container { width: 100%; font-size: 16px; padding: 10px; }
.blog-container { width: 100%; font-size: 16px; padding: 10px; }
.card { width: 100%; font-size: 16px; padding: 10px; }
.card img { width: 100%; font-size: 16px; padding: 10px; }
.card-title { width: 100%; font-size: 16px; padding: 10px; }
.card-text { width: 100%; font-size: 16px; padding: 10px; }
.btn-primary { width: 100%; font-size: 16px; padding: 10px; }
.change-password-form { width: 100%; font-size: 16px; padding: 10px; }
.chatbot { width: 100%; font-size: 16px; padding: 10px; }
.chat-icon { width: 100%; font-size: 16px; padding: 10px; }
.chat-window { width: 100%; font-size: 16px; padding: 10px; }
.chat-content { width: 100%; font-size: 16px; padding: 10px; }
.messages { width: 100%; font-size: 16px; padding: 10px; }
.messages div { width: 100%; font-size: 16px; padding: 10px; }
.chat-input { width: 100%; font-size: 16px; padding: 10px; }
.chat-input input { width: 100%; font-size: 16px; padding: 10px; }
.chat-input button { width: 100%; font-size: 16px; padding: 10px; }
.container img { width: 100%; font-size: 16px; padding: 10px; }
.page-header { width: 100%; font-size: 16px; padding: 10px; }
.page-title { width: 100%; font-size: 16px; padding: 10px; }
.badge { width: 100%; font-size: 16px; padding: 10px; }
.referral-dashboard { width: 100%; font-size: 16px; padding: 10px; }
.referral-dashboard h2 { width: 100%; font-size: 16px; padding: 10px; }
.referral-status { width: 100%; font-size: 16px; padding: 10px; }
.referral-list { width: 100%; font-size: 16px; padding: 10px; }
.referral-dashboard .alert { width: 100%; font-size: 16px; padding: 10px; }
.referral-dashboard .alert-heading { width: 100%; font-size: 16px; padding: 10px; }
.referral-dashboard .referral-summary p { width: 100%; font-size: 16px; padding: 10px; }
.referral-dashboard .referral-list h3 { width: 100%; font-size: 16px; padding: 10px; }
.referral-invitation { width: 100%; font-size: 16px; padding: 10px; }
.referral-link { width: 100%; font-size: 16px; padding: 10px; }
.social-share-buttons button { width: 100%; font-size: 16px; padding: 10px; }
.cookie-notification { width: 100%; font-size: 16px; padding: 10px; }
.cookie-notification p { width: 100%; font-size: 16px; padding: 10px; }
.cookie-notification button { width: 100%; font-size: 16px; padding: 10px; }
.cookie-notification button:hover { width: 100%; font-size: 16px; padding: 10px; }
.delete-account-container { width: 100%; font-size: 16px; padding: 10px; }
.delete-account-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.delete-account-container button { width: 100%; font-size: 16px; padding: 10px; }
.delete-account-container button:disabled { width: 100%; font-size: 16px; padding: 10px; }
.display-1 { width: 100%; font-size: 16px; padding: 10px; }
.accordion-button { width: 100%; font-size: 16px; padding: 10px; }
.accordion-button:focus { width: 100%; font-size: 16px; padding: 10px; }
.accordion-body h5 { width: 100%; font-size: 16px; padding: 10px; }
.btn-lg { width: 100%; font-size: 16px; padding: 10px; }
.spinner-border-sm { width: 100%; font-size: 16px; padding: 10px; }
.alert { width: 100%; font-size: 16px; padding: 10px; }
.footer { width: 100%; font-size: 16px; padding: 10px; }
.footer-title { width: 100%; font-size: 16px; padding: 10px; }
.social-icons { width: 100%; font-size: 16px; padding: 10px; }
.social-icon { width: 100%; font-size: 16px; padding: 10px; }
.footer a { width: 100%; font-size: 16px; padding: 10px; }
.footer a:hover { width: 100%; font-size: 16px; padding: 10px; }
.btn-subscribe { width: 100%; font-size: 16px; padding: 10px; }
.btn-subscribe:hover { width: 100%; font-size: 16px; padding: 10px; }
.footer-content { width: 100%; font-size: 16px; padding: 10px; }
.instagram-icon i { width: 100%; font-size: 16px; padding: 10px; }
.google-ad-container { width: 100%; font-size: 16px; padding: 10px; }
.how-it-works-section { width: 100%; font-size: 16px; padding: 10px; }
.how-it-works-section h2 { width: 100%; font-size: 16px; padding: 10px; }
.carousel-caption h5 { width: 100%; font-size: 16px; padding: 10px; }
.carousel-caption p { width: 100%; font-size: 16px; padding: 10px; }
.carousel-img-small { width: 100%; font-size: 16px; padding: 10px; }
.topper-card { width: 100%; font-size: 16px; padding: 10px; }
.rank-1 { width: 100%; font-size: 16px; padding: 10px; }
.rank-2 { width: 100%; font-size: 16px; padding: 10px; }
.rank-3 { width: 100%; font-size: 16px; padding: 10px; }
.rank-1::before { width: 100%; font-size: 16px; padding: 10px; }
.rank-2::before { width: 100%; font-size: 16px; padding: 10px; }
.rank-3::before { width: 100%; font-size: 16px; padding: 10px; }
.topper-card .card-body { width: 100%; font-size: 16px; padding: 10px; }
.topper-image { width: 100%; font-size: 16px; padding: 10px; }
.ad-card { width: 100%; font-size: 16px; padding: 10px; }
.row { width: 100%; font-size: 16px; padding: 10px; }
.card-body { width: 100%; font-size: 16px; padding: 10px; }
.topper-card:hover { width: 100%; font-size: 16px; padding: 10px; }
.top-performers-container { width: 100%; font-size: 16px; padding: 10px; }
.top-performers-card { width: 100%; font-size: 16px; padding: 10px; }
.top-performers-card:hover { width: 100%; font-size: 16px; padding: 10px; }
.card-img-top { width: 100%; font-size: 16px; padding: 10px; }
.card:hover { width: 100%; font-size: 16px; padding: 10px; }
.card-body i { width: 100%; font-size: 16px; padding: 10px; }
.schedule-section { width: 100%; font-size: 16px; padding: 10px; }
.schedule-section h2 { width: 100%; font-size: 16px; padding: 10px; }
.table { width: 100%; font-size: 16px; padding: 10px; }
.social-proof-section { width: 100%; font-size: 16px; padding: 10px; }
.metric-card { width: 100%; font-size: 16px; padding: 10px; }
.metric-card:hover { width: 100%; font-size: 16px; padding: 10px; }
.metric-card h2 { width: 100%; font-size: 16px; padding: 10px; }
.metric-card p { width: 100%; font-size: 16px; padding: 10px; }
.social-proof-section img { width: 100%; font-size: 16px; padding: 10px; }
.social-proof-section img:hover { width: 100%; font-size: 16px; padding: 10px; }
.features-section { width: 100%; font-size: 16px; padding: 10px; }
.section-title { width: 100%; font-size: 16px; padding: 10px; }
.section-subtitle { width: 100%; font-size: 16px; padding: 10px; }
.feature-card { width: 100%; font-size: 16px; padding: 10px; }
.feature-card:hover { width: 100%; font-size: 16px; padding: 10px; }
.feature-icon { width: 100%; font-size: 16px; padding: 10px; }
.feature-title { width: 100%; font-size: 16px; padding: 10px; }
.feature-description { width: 100%; font-size: 16px; padding: 10px; }
.leaderboard-container { width: 100%; font-size: 16px; padding: 10px; }
.leaderboard-title { width: 100%; font-size: 16px; padding: 10px; }
.leaderboard-summary { width: 100%; font-size: 16px; padding: 10px; }
.leaderboard-table { width: 100%; font-size: 16px; padding: 10px; }
.leaderboard-table th { width: 100%; font-size: 16px; padding: 10px; }
.leaderboard-table td { width: 100%; font-size: 16px; padding: 10px; }
.student-photo { width: 100%; font-size: 16px; padding: 10px; }
.no-data { width: 100%; font-size: 16px; padding: 10px; }
.accessibility-container { width: 100%; font-size: 16px; padding: 10px; }
.accessibility-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.accessibility-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.accessibility-container p { width: 100%; font-size: 16px; padding: 10px; }
.accessibility-container ul { width: 100%; font-size: 16px; padding: 10px; }
.accessibility-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.accessibility-container a { width: 100%; font-size: 16px; padding: 10px; }
.accessibility-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.advertising-policy-container { width: 100%; font-size: 16px; padding: 10px; }
.advertising-policy-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.advertising-policy-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.advertising-policy-container p { width: 100%; font-size: 16px; padding: 10px; }
.advertising-policy-container ul { width: 100%; font-size: 16px; padding: 10px; }
.advertising-policy-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.advertising-policy-container a { width: 100%; font-size: 16px; padding: 10px; }
.advertising-policy-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.child-protection-policy-container { width: 100%; font-size: 16px; padding: 10px; }
.child-protection-policy-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.child-protection-policy-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.child-protection-policy-container p { width: 100%; font-size: 16px; padding: 10px; }
.child-protection-policy-container ul { width: 100%; font-size: 16px; padding: 10px; }
.child-protection-policy-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.child-protection-policy-container a { width: 100%; font-size: 16px; padding: 10px; }
.child-protection-policy-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.code-of-conduct-container { width: 100%; font-size: 16px; padding: 10px; }
.code-of-conduct-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.code-of-conduct-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.code-of-conduct-container p { width: 100%; font-size: 16px; padding: 10px; }
.code-of-conduct-container ul { width: 100%; font-size: 16px; padding: 10px; }
.code-of-conduct-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.code-of-conduct-container a { width: 100%; font-size: 16px; padding: 10px; }
.code-of-conduct-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.cookie-policy-container { width: 100%; font-size: 16px; padding: 10px; }
.cookie-policy-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.cookie-policy-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.cookie-policy-container p { width: 100%; font-size: 16px; padding: 10px; }
.cookie-policy-container ul { width: 100%; font-size: 16px; padding: 10px; }
.cookie-policy-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.cookie-policy-container a { width: 100%; font-size: 16px; padding: 10px; }
.cookie-policy-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.copyright-policy-container { width: 100%; font-size: 16px; padding: 10px; }
.copyright-policy-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.copyright-policy-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.copyright-policy-container p { width: 100%; font-size: 16px; padding: 10px; }
.copyright-policy-container ul { width: 100%; font-size: 16px; padding: 10px; }
.copyright-policy-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.copyright-policy-container a { width: 100%; font-size: 16px; padding: 10px; }
.copyright-policy-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.data-protection-policy-container { width: 100%; font-size: 16px; padding: 10px; }
.data-protection-policy-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.data-protection-policy-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.data-protection-policy-container p { width: 100%; font-size: 16px; padding: 10px; }
.data-protection-policy-container ul { width: 100%; font-size: 16px; padding: 10px; }
.data-protection-policy-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.data-protection-policy-container a { width: 100%; font-size: 16px; padding: 10px; }
.data-protection-policy-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.disclaimer-container { width: 100%; font-size: 16px; padding: 10px; }
.disclaimer-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.disclaimer-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.disclaimer-container p { width: 100%; font-size: 16px; padding: 10px; }
.disclaimer-container ul { width: 100%; font-size: 16px; padding: 10px; }
.disclaimer-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.disclaimer-container a { width: 100%; font-size: 16px; padding: 10px; }
.disclaimer-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.privacy-policy-container { width: 100%; font-size: 16px; padding: 10px; }
.privacy-policy-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.privacy-policy-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.privacy-policy-container p { width: 100%; font-size: 16px; padding: 10px; }
.privacy-policy-container ul { width: 100%; font-size: 16px; padding: 10px; }
.privacy-policy-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.privacy-policy-container a { width: 100%; font-size: 16px; padding: 10px; }
.privacy-policy-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container p { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container ul { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container ol { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container ol li { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container a { width: 100%; font-size: 16px; padding: 10px; }
.refund-policy-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.terms-container { width: 100%; font-size: 16px; padding: 10px; }
.terms-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.terms-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.terms-container p { width: 100%; font-size: 16px; padding: 10px; }
.terms-container ul { width: 100%; font-size: 16px; padding: 10px; }
.terms-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.terms-container a { width: 100%; font-size: 16px; padding: 10px; }
.terms-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.user-agreement-container { width: 100%; font-size: 16px; padding: 10px; }
.user-agreement-container h1 { width: 100%; font-size: 16px; padding: 10px; }
.user-agreement-container h2 { width: 100%; font-size: 16px; padding: 10px; }
.user-agreement-container p { width: 100%; font-size: 16px; padding: 10px; }
.user-agreement-container ul { width: 100%; font-size: 16px; padding: 10px; }
.user-agreement-container ul li { width: 100%; font-size: 16px; padding: 10px; }
.user-agreement-container a { width: 100%; font-size: 16px; padding: 10px; }
.user-agreement-container a:hover { width: 100%; font-size: 16px; padding: 10px; }
.image-container { width: 100%; font-size: 16px; padding: 10px; }
.text-overlay { width: 100%; font-size: 16px; padding: 10px; }
.d-flex { width: 100%; font-size: 16px; padding: 10px; }
.img-stretch { width: 100%; font-size: 16px; padding: 10px; }
.btn-primary:disabled { width: 100%; font-size: 16px; padding: 10px; }
.my-space-dashboard .dashboard-cards { width: 100%; font-size: 16px; padding: 10px; }
.my-space-dashboard .quick-actions { width: 100%; font-size: 16px; padding: 10px; }
.card .card-body { width: 100%; font-size: 16px; padding: 10px; }
.card .card-title { width: 100%; font-size: 16px; padding: 10px; }
.btn { width: 100%; font-size: 16px; padding: 10px; }
.btn-info { width: 100%; font-size: 16px; padding: 10px; }
.btn-success { width: 100%; font-size: 16px; padding: 10px; }
.btn-warning { width: 100%; font-size: 16px; padding: 10px; }
.btn-danger { width: 100%; font-size: 16px; padding: 10px; }
.row > [class*='col-'] { width: 100%; font-size: 16px; padding: 10px; }
.my-space-dashboard { width: 100%; font-size: 16px; padding: 10px; }
.profile-picture { width: 100%; font-size: 16px; padding: 10px; }
.profile-card { width: 100%; font-size: 16px; padding: 10px; }
.container-fluid { width: 100%; font-size: 16px; padding: 10px; }
.banner-ad { width: 100%; font-size: 16px; padding: 10px; }
.banner-ad img { width: 100%; font-size: 16px; padding: 10px; }
.multiplier-window { width: 100%; font-size: 16px; padding: 10px; }
.multiplier-window h3 { width: 100%; font-size: 16px; padding: 10px; }
.multiplier-window p { width: 100%; font-size: 16px; padding: 10px; }
.multiplier-window ul { width: 100%; font-size: 16px; padding: 10px; }
.list-group-item { width: 100%; font-size: 16px; padding: 10px; }
.cta { width: 100%; font-size: 16px; padding: 10px; }
.upcoming-exams { width: 100%; font-size: 16px; padding: 10px; }
.spinner { width: 100%; font-size: 16px; padding: 10px; }
.error { width: 100%; font-size: 16px; padding: 10px; }
.table th { width: 100%; font-size: 16px; padding: 10px; }
.table td { width: 100%; font-size: 16px; padding: 10px; }
.countdown { width: 100%; font-size: 16px; padding: 10px; }
.table thead th { width: 100%; font-size: 16px; padding: 10px; }
.table tbody tr:hover { width: 100%; font-size: 16px; padding: 10px; }
.btn-primary:hover { width: 100%; font-size: 16px; padding: 10px; }
.btn-secondary { width: 100%; font-size: 16px; padding: 10px; }
.countdown-warning { width: 100%; font-size: 16px; padding: 10px; }
.colorful-icon { width: 100%; font-size: 16px; padding: 10px; }
.colorful-icon:hover { width: 100%; font-size: 16px; padding: 10px; }
.full-width { width: 100%; font-size: 16px; padding: 10px; }
.mat-dialog-title { width: 100%; font-size: 16px; padding: 10px; }
.mat-dialog-content { width: 100%; font-size: 16px; padding: 10px; }
.mat-dialog-actions { width: 100%; font-size: 16px; padding: 10px; }
}