:root {
     --primary: #2a4f6a;
     --secondary: #0e2b6c;
     --accent: #e4353a;
     --light: #f3f4f6;
     --dark: #2a4f6a;
     --success: #10b981;
     --gray: #777;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
     line-height: 1.6;
     color: var(--dark);
     background-color: #f9fafb;
     overflow-x: hidden;
 }

 .container-aboutus {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Header Styles */
 header {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
     color: white;
     padding: 1rem 0;
     position: sticky;
     top: 0;
     z-index: 100;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
 }

 header.scrolled {
     padding: 0.6rem 0;
     background: rgba(14, 43, 108, 0.98);
 }

 .navContainer {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     font-size: 1.8rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     transition: transform 0.3s ease;
 }

 .logo:hover {
     transform: scale(1.05);
 }

 .logo span {
     color: var(--accent);
 }

 .navMenu {
     display: flex;
     list-style: none;
 }

 .navMenu li {
     margin-left: 2rem;
     position: relative;
 }

 .navMenu a {
     color: white;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s;
     padding: 0.5rem 0;
 }

 .navMenu a:hover {
     color: #ffd700;
 }

 .navMenu a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #ffd700;
     transition: width 0.3s ease;
 }

 .navMenu a:hover::after {
     width: 100%;
 }

 .ctaButton {
     background-color: var(--accent);
     color: white;
     padding: 0.6rem 1.5rem;
     border-radius: 30px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s;
     display: inline-block;
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 .ctaButton::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: all 0.4s ease;
     z-index: -1;
 }

 .ctaButton:hover {
     background-color: #e03600;
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     color: white;
 }

 .ctaButton:hover::before {
     left: 100%;
 }

 /* Page Header */
 .pageHeader {
     background: linear-gradient(90deg, var(--primary), var(--secondary)), url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
     color: white;
     padding: 5rem 0;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .pageHeader::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     z-index: 0;
 }

 .pageHeaderContent {
     max-width: 800px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
     animation: fadeInUp 1s ease;
 }

 .pageHeader h1 {
     font-size: 2.8rem;
     margin-bottom: 1rem;
     animation: fadeInUp 1s ease 0.2s both;
 }

.breadcrumb {
    display: flex;
    flex-wrap: wrap; /* wrap on small screens */
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    animation: fadeInUp 1s ease 0.4s both;
}

.breadcrumb li {
    margin: 0.25rem 0.5rem; /* smaller vertical margin for mobile */
}

.breadcrumb a {
    color: white;
    text-decoration: none;
    white-space: nowrap; /* prevent text break in link */
}




 /* Section Styles */
 section {
     padding: 5rem 0;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.8s ease, transform 0.8s ease;
 }

 section.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .sectionTitle {
     text-align: center;
     margin-bottom: 3rem;
 }

 .sectionTitle h2 {
     font-size: 2.2rem;
     color: var(--secondary) !important;
     margin-bottom: 1rem;
     position: relative;
     display: inline-block;
 }

 .sectionTitle h2::after {
     content: '';
     position: absolute;
     width: 60px;
     height: 3px;
     background-color: var(--accent);
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
 }

 .sectionTitle p {
     color: var(--gray);
     max-width: 700px;
     margin: 1.5rem auto 0;
 }

 /* About Intro */
 .aboutIntro {
     background-color: white;
 }

 .introContent {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 3rem;
 }

 .introText {
     flex: 1;
     min-width: 300px;
 }

 .introText p {
     margin-bottom: 1.5rem;
     font-size: 1.1rem;
 }

 .introImage {
     flex: 1;
     min-width: 300px;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.5s ease;
 }

 .introImage:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }

 .introImage img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.5s ease;
 }

 .introImage:hover img {
     transform: scale(1.05);
 }

 /* Why Choose Us */
 .whyChooseUs {
     background-color: var(--light);
 }

 .featuresGrid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
 }

 .featureCard {
     background: white;
     padding: 2rem;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .featureCard::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, var(--primary), var(--secondary));
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 0.3s ease;
 }

 .featureCard:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .featureCard:hover::after {
     transform: scaleX(1);
     transform-origin: left;
 }

 .featureIcon {
     font-size: 2.5rem;
     color: var(--primary);
     margin-bottom: 1rem;
     transition: all 0.3s ease;
 }

 .featureCard:hover .featureIcon {
     color: var(--accent);
     transform: scale(1.1);
 }

 /* Programs Section */
 .programs {
     background-color: white;
 }

 .pricingGrid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .pricingCard {
     background: white;
     border-radius: 10px;
     padding: 2.5rem 2rem;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     text-align: center;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     border: 1px solid #eee;
 }

 .pricingCard.popular {
     border: 2px solid var(--primary);
     transform: scale(1.05);
 }

 .pricingCard.popular::before {
     content: 'POPULAR';
     position: absolute;
     top: 0;
     right: 0;
     background: var(--primary);
     color: white;
     padding: 0.5rem 1rem;
     font-size: 0.8rem;
     font-weight: bold;
 }

 .pricingCard:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .pricingCard.popular:hover {
     transform: scale(1.05) translateY(-10px);
 }

 .price {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--primary);
     margin: 1rem 0;
 }

 .price span {
     font-size: 1rem;
     font-weight: normal;
     color: var(--gray);
 }

 .pricingFeatures {
     list-style: none;
     margin: 1.5rem 0;
     text-align: left;
 }

 .pricingFeatures li {
     margin-bottom: 0.8rem;
     padding-left: 1.5rem;
     position: relative;
 }

 .pricingFeatures li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--success);
     font-weight: bold;
 }

 /* CTA Section */
 .ctaSection {
     background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
     color: white;
     text-align: center;
     padding: 4rem 0;
     position: relative;
     overflow: hidden;
 }

 .ctaSection::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     transform: rotate(30deg);
     animation: shimmer 8s infinite linear;
 }

 .ctaSection h2 {
     font-size: 2.2rem;
     margin-bottom: 1.5rem;
     position: relative;
 }

 .ctaSection p {
     max-width: 700px;
     margin: 0 auto 2rem;
     font-size: 1.1rem;
     position: relative;
 }

 /* Footer */
 footer {
     background-color: var(--dark);
     color: white;
     padding: 3rem 0 1rem;
 }

 .footerContent {
     display: flex;
     flex-wrap: wrap;
     gap: 3rem;
     margin-bottom: 2rem;
 }

 .footerSection {
     flex: 1;
     min-width: 250px;
 }

 .footerSection h3 {
     font-size: 1.3rem;
     margin-bottom: 1.5rem;
     color: #e7e3cf;
     position: relative;
     padding-bottom: 10px;
 }

 .footerSection h3::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 40px;
     height: 2px;
     background-color: var(--accent);
 }

 .footerSection p,
 .footerSection address {
     margin-bottom: 0.5rem;
     font-style: normal;
     transition: color 0.3s ease;
 }

 .footerSection a {
     color: white;
     text-decoration: none;
     transition: color 0.3s ease;
     display: inline-block;
 }

 .footerSection a:hover {
     color: #ffd700;
     transform: translateX(5px);
 }

 .footerBottom {
     text-align: center;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Animations */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 @keyframes shimmer {
     from {
         transform: translateX(-100%) rotate(30deg);
     }

     to {
         transform: translateX(100%) rotate(30deg);
     }
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .navMenu {
         display: none;
     }

     .pageHeader h1 {
         font-size: 2.2rem;
     }

     .sectionTitle h2 {
         font-size: 1.8rem;
     }

     .introContent,
     .pricingGrid {
         flex-direction: column;
     }

     .pricingCard.popular {
         transform: scale(1);
     }

     .pricingCard.popular:hover {
         transform: translateY(-10px);
     }
 }

 /* Page Header - lighter gradient so image shows more */
 .page-Header {
     background:
         linear-gradient(rgba(14, 43, 108, 0.35),
             rgba(153, 180, 238, 0.35)),
         url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
     color: white;
     padding: 5rem 0;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 /* subtle overlay (reduced) to keep text readable but lighter than before */
 .page-Header::before {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.12);
     /* lighter than 0.3 */
     z-index: 0;
 }

 .page-Header-Content {
     max-width: 800px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
     animation: fadeInUp 1s ease;
 }

 .page-Header h1 {
     font-size: 2.8rem;
     margin-bottom: 1rem;
     animation: fadeInUp 1s ease 0.2s both;
     color: white !important;
 }

 .page-Header p {
     font-size: 1.15rem;
     margin-bottom: 1.2rem;
     animation: fadeInUp 1s ease 0.4s both;
     color: rgba(255, 255, 255, 0.95);
 }