.about-hero {
            background: linear-gradient(135deg, var(--primary-blue), #34495E);
            color: var(--white);
            padding: 6rem 0 4rem;
            text-align: center;
        }
        
        .about-hero h1 {
            color: var(--white);
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        
        .about-hero p {
            color: var(--white);
            opacity: 0.9;
        }
        
        .breadcrumb {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
            opacity: 0.9;
        }
        
        .breadcrumb a {
            color: var(--white);
        }
        
        .mission-section {
            padding: 4rem 0;
            background: var(--white);
        }
        
        .mission-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .mission-card {
            text-align: center;
            padding: 2rem;
            border-radius: var(--radius-lg);
            background: var(--light-gray);
        }
        
        .mission-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        
        .stats-section {
            background: var(--accent-orange);
            color: var(--white);
            padding: 4rem 0;
            text-align: center;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .stat-item {
            padding: 1.5rem;
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--white);
        }
        
        .team-section {
            padding: 4rem 0;
            background: var(--light-gray);
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .team-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform var(--transition-normal);
        }
        
        .team-card:hover {
            transform: translateY(-5px);
        }
        
        .team-image {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-orange));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6rem;
            color: var(--white);
        }
        
        .team-info {
            padding: 1.5rem;
            text-align: center;
        }
        
        .team-name {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
        }
        
        .team-role {
            color: var(--accent-orange);
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .team-social {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .social-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-blue);
            transition: all var(--transition-fast);
        }
        
        .social-icon:hover {
            background: var(--accent-orange);
            color: var(--white);
        }
        
        .values-section {
            padding: 4rem 0;
            background: var(--white);
        }
        
        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .value-card {
            padding: 2rem;
            border-left: 4px solid var(--accent-orange);
            background: var(--light-gray);
            border-radius: var(--radius-md);
        }
        
        .value-card h3 {
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }
        
        @media (max-width: 1024px) {
            .course-hero-content, .course-layout {
                grid-template-columns: 1fr;
            }
            .sidebar-card {
                position: static;
            }
        }
        
        @media (max-width: 768px) {
            .about-hero h1 {
                font-size: 2rem;
            }
        }
    @media (max-width:480px){
        body{font-size:14px}
        .course-hero{padding:1.8rem 0 1.2rem}
        .course-hero-left h1{font-size:1.3rem;line-height:1.3}
        .course-hero-left p{font-size:0.95rem;line-height:1.5}
        .course-hero-content{gap:1.2rem}
        .breadcrumb{gap:0.3rem;font-size:0.85rem}
        .course-meta-inline{gap:1rem;font-size:0.9rem}
        .course-content-section{padding:1.5rem 0}
        .course-layout{gap:1rem}
        .course-tabs{gap:0.3rem;margin-bottom:1.5rem;border-bottom:1px solid #e0e0e0}
        .tab-button{padding:0.7rem 0.9rem;font-size:0.8rem;border-bottom:none}
        .tab-button.active{border-bottom:2px solid var(--accent-orange);background:rgba(230,126,34,0.05)}
        .sidebar-card{padding:1.2rem;margin-bottom:1.5rem}
        .price-main{font-size:2.2rem}
        .price-original{font-size:1.2rem}
        .discount-badge{padding:0.4rem 0.8rem;font-size:0.8rem}
        .sidebar-features li{padding:0.5rem 0;font-size:0.9rem}
        .sidebar-features i{font-size:1rem}
        .card{margin-bottom:1.2rem;padding:1rem}
        .card h2{font-size:1.3rem}
        .card h3{font-size:1.1rem}
        .card p{font-size:0.9rem;line-height:1.5}
        .syllabus-module{margin-bottom:0.8rem}
        .module-header{padding:1rem}
        .module-title{font-size:1rem;white-space:normal}
        .module-duration{font-size:0.85rem}
        .module-content{padding:1rem}
        .module-content li{font-size:0.9rem}
        .faq-item{margin-bottom:0.8rem}
        .faq-question{padding:1rem;font-size:0.95rem}
        .faq-question i{font-size:1rem}
        .faq-answer{padding:0.8rem 1rem;font-size:0.9rem;line-height:1.5}
        .project-card{padding:1rem;margin-bottom:0.8rem}
        .project-card h4{font-size:0.95rem}
        .tech-tag{padding:0.2rem 0.6rem;font-size:0.8rem}
        .takeaway-card{padding:1rem;margin-bottom:0.8rem}
        .takeaway-card h4{font-size:0.95rem}
        .instructor-card{flex-direction:column;text-align:center;gap:1rem;padding:1rem}
        .instructor-image{width:100px;height:100px}
        .team-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
        .team-card{margin-bottom:1rem}
        .team-image{height:200px;font-size:4rem}
        .team-name{font-size:1.2rem}
        .team-role{font-size:0.9rem}
        .stats-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
        .stat-item{padding:1rem}
        .stat-number{font-size:2.5rem}
        .values-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
        .value-card{padding:1.5rem}
        input,select,textarea{font-size:16px;padding:0.8rem;min-height:44px}
    }
    @media (max-width:360px){
        html{font-size:14px}
        body{font-size:13px}
        .course-hero{padding:1.2rem 0 1rem}
        .course-hero-left h1{font-size:1.1rem;line-height:1.2}
        .course-hero-left p{font-size:0.9rem;line-height:1.4}
        .course-hero-content{gap:1rem;flex-direction:column}
        .breadcrumb{gap:0.2rem;font-size:0.8rem}
        .course-meta-inline{gap:0.8rem;font-size:0.85rem;flex-direction:column;align-items:flex-start}
        .course-content-section{padding:1rem 0}
        .course-layout{gap:0.8rem;grid-template-columns:1fr!important}
        .course-tabs{gap:0.2rem;margin-bottom:1rem;border-bottom:1px solid #e0e0e0;overflow-x:auto;-webkit-overflow-scrolling:touch}
        .tab-button{padding:0.5rem 0.7rem;font-size:0.75rem;white-space:nowrap;border:none}
        .tab-button.active{border-bottom:2px solid var(--accent-orange);padding-bottom:0.35rem}
        .sidebar-card{padding:1rem;margin-bottom:1.2rem;grid-column:1;order:1}
        .price-section{padding-bottom:1rem;margin-bottom:1rem}
        .price-main{font-size:2rem}
        .price-original{font-size:1rem}
        .discount-badge{padding:0.3rem 0.6rem;font-size:0.75rem}
        .sidebar-features li{padding:0.35rem 0;font-size:0.85rem;gap:0.5rem}
        .sidebar-features i{font-size:0.9rem}
        .card{margin-bottom:1rem;padding:0.8rem}
        .card h2{font-size:1.15rem}
        .card h3{font-size:1rem}
        .card h4{font-size:0.9rem}
        .card p{font-size:0.85rem;line-height:1.4}
        .syllabus-module{margin-bottom:0.6rem;border-width:1px}
        .module-header{padding:0.8rem;gap:0.3rem}
        .module-title{font-size:0.9rem;white-space:normal;word-break:break-word}
        .module-duration{font-size:0.8rem}
        .module-content{padding:0.8rem}
        .module-content li{font-size:0.85rem;padding:0.2rem 0}
        .faq-item{margin-bottom:0.6rem;border-width:1px}
        .faq-question{padding:0.8rem;font-size:0.9rem}
        .faq-question i{font-size:0.9rem}
        .faq-answer{padding:0.6rem 0.8rem;font-size:0.85rem;line-height:1.4}
        .project-card{padding:0.8rem;margin-bottom:0.6rem;border-width:1px}
        .project-card h4{font-size:0.9rem}
        .tech-tag{padding:0.15rem 0.5rem;font-size:0.75rem}
        .takeaway-card{padding:0.8rem;margin-bottom:0.6rem;border-left-width:2px}
        .takeaway-card h4{font-size:0.9rem;gap:0.25rem}
        .takeaway-card p{font-size:0.85rem}
        .instructor-card{flex-direction:column;text-align:center;gap:0.8rem;padding:0.8rem;border-width:1px}
        .instructor-image{width:80px;height:80px}
        .team-grid{grid-template-columns:1fr;gap:1rem}
        .team-card{margin-bottom:0.8rem}
        .team-image{height:150px;font-size:3rem}
        .team-name{font-size:1rem}
        .team-role{font-size:0.85rem;margin-bottom:0.5rem}
        .team-social{gap:0.6rem}
        .social-icon{width:30px;height:30px;font-size:0.8rem}
        .stats-grid{grid-template-columns:repeat(2,1fr);gap:0.8rem}
        .stat-item{padding:0.8rem}
        .stat-number{font-size:2rem}
        .stat-label{font-size:0.8rem}
        .values-grid{grid-template-columns:1fr;gap:1rem}
        .value-card{padding:1rem;border-left-width:3px}
        .value-card h3{font-size:0.95rem}
        input,select,textarea{font-size:16px;padding:0.8rem;min-height:44px;width:100%}
        .form-row{flex-direction:column}
        .form-group{margin-bottom:1rem}
    }