/*Global styles*/
body {
     font-family: 'Segoe UI', sans-serif;
     background-color: #0d1b2a;
     color: #2c3e50;
     margin: 0;
     padding: 0;
 }

 /* Header Section */
 .main-header {
     height: 60px;
     background: linear-gradient(135deg, #003366, #005580);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0px 30px;
     color: white;
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(6px);

 }

 .logo-title {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .logo-title h1 {
     font-size: 1.8rem;
     font-weight: bold;
     letter-spacing: 1px;
    padding-bottom: 5px;
 }

 .logo-title h1 span {
     color: #00bcd4;
 }

 .nav-links a {
     margin-left: 25px;
     text-decoration: none;
     color: white;
     font-weight: 510;
     transition: color 0.3s, border-bottom 0.3s;
     position: relative;
 }

 .nav-links a::after {
     content: "";
     display: block;
     height: 2px;
     width: 0%;
     background: #00bcd4;
     position: absolute;
     bottom: -5px;
     left: 0;
     transition: 0.3s;
 }

 .nav-links a:hover {
     color: #00bcd4;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .main-header {
         flex-direction: column;
         align-items: flex-start;
     }

     .nav-links {
         display: flex;
         flex-wrap: wrap;
         margin-top: 10px;
     }

     .nav-links a {
         margin: 10px 15px 0 0;
     }
 }
 /* CBSE syllabus */
 h2 {
     font-weight: 700;
     color: #00bcd4;
 }

 .class-card {
     background: rgba(0, 51, 102, 0.8);
     color: #fff;
     border-radius: 14px;
     padding: 15px 10px;
     height: 56px;
     width: 130px;
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s;
     cursor: pointer;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }

 .class-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
     background-color: #004080;
 }


 .chapter-box {
     background: white;
     border-radius: 12px;
     padding: 18px;
     border-left: 5px solid #0d6efd;
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
     transition: transform 0.3s ease;
 }

 .chapter-box:hover {
     transform: translateY(-4px);
 }

 .chapter-box h5 {
     font-size: 1.05rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
     color: #003366;
 }

 .chapter-box img {
     width: 24px;
     height: 24px;
 }

 .info-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 10px;
 }

 .info-badge {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #e0f0ff;
     padding: 6px 14px;
     border-radius: 50px;
     font-size: 0.85rem;
     font-weight: 500;
     color: #004080;
     box-shadow: inset 0 0 3px rgba(0, 123, 255, 0.1);
 }

 .info-badge i {
     color: #0d6efd;
 }

 .search-bar {
     max-width: 400px;
     margin: 0 auto 30px;
 }

 .chapter-section {
     display: none;
     margin-top: 35px;
     animation: fadeIn 0.5s ease;
 }

 h3 {
     font-size: large;
     font-weight: bold;
     margin-bottom: 10px;
 }

 /* Footer */
 .footer {
     background-color: #002244;
     color: white;
     padding: 20px 20px 10px;

 }

 .footer-flex {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     text-align: left;
     margin-bottom: 20px;
 }

 .footer-block {
     max-width: 255px;
 }

 .footer-contact-heading,
 .footer-mathverse-heading,
 .footer-nav-heading {
     color: #00bcd4;
 }

 .footer-block a {
     display: block;
     color: white;
     text-decoration: none;
     margin: 5px 0;
 }

 .footer-block a:hover {
     color: #00bcd4;
 }

 .footer-bottom {
     text-align: center;
     font-size: 0.9rem;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     padding-top: 10px;
 }


 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }