/* About Banner */
.about-banner {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
   padding: 120px 0 80px;
   position: relative;
   overflow: hidden;
}
.about-banner::before {
   content: '';
   position: absolute;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
   background-size: 50px 50px;
   animation: float 20s linear infinite;
   top: -50%;
   left: -50%;
}
.about-banner-content {
   position: relative;
   z-index: 2;
}
.about-banner-icon {
   font-size: 80px;
   color: #fff;
   margin-bottom: 20px;
   display: inline-block;
}
.about-banner-title {
   font-size: 48px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 15px;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.about-banner-subtitle {
   font-size: 20px;
   color: rgba(255,255,255,0.9);
   margin-bottom: 30px;
}
/* Decorative Shapes */
.shape-decoration {
   position: absolute;
   z-index: 1;
}
.shape-1 {
   top: 10%;
   right: 10%;
   width: 100px;
   height: 100px;
   background: rgba(255,255,255,0.1);
   border-radius: 50%;
}
.shape-2 {
   bottom: 15%;
   left: 5%;
   width: 80px;
   height: 80px;
   background: rgba(255,255,255,0.15);
   transform: rotate(45deg);
}
.shape-3 {
   top: 50%;
   right: 5%;
   width: 60px;
   height: 60px;
   background: rgba(255,255,255,0.1);
   border-radius: 20px;
}

/* Achievement Cards */
.achievement-card {
   background: #fff;
   border-radius: 20px;
   padding: 40px 30px;
   text-align: center;
   box-shadow: 0 10px 30px rgba(0,0,0,0.1);
   transition: all 0.3s;
   position: relative;
   overflow: hidden;
}
.achievement-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(102,126,234,0.1), transparent);
   transition: left 0.5s;
}
.achievement-card:hover::before {
   left: 100%;
}
.achievement-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 40px rgba(102,126,234,0.2);
}
.achievement-icon {
   font-size: 60px;
   color: #667eea;
   margin-bottom: 20px;
}
.achievement-number {
   font-size: 48px;
   font-weight: 700;
   color: #333;
   margin-bottom: 10px;
}
.achievement-label {
   font-size: 18px;
   color: #666;
   font-weight: 600;
}

/* Values Section */
.value-card {
   background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
   border-radius: 20px;
   padding: 40px 30px;
   text-align: center;
   border: 2px solid #e8e8ff;
   transition: all 0.3s;
   height: 100%;
}
.value-card:hover {
   border-color: #667eea;
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(102,126,234,0.15);
}
.value-icon {
   width: 100px;
   height: 100px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 25px;
   font-size: 40px;
   color: #fff;
}
.value-title {
   font-size: 22px;
   font-weight: 700;
   color: #333;
   margin-bottom: 15px;
}
.value-description {
   color: #666;
   line-height: 1.8;
}

/* Timeline Section */
.timeline-item {
   position: relative;
   padding-left: 60px;
   margin-bottom: 40px;
}
.timeline-item::before {
   content: '';
   position: absolute;
   left: 15px;
   top: 0;
   bottom: -40px;
   width: 3px;
   background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.timeline-item:last-child::before {
   display: none;
}
.timeline-icon {
   position: absolute;
   left: 0;
   top: 0;
   width: 35px;
   height: 35px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 16px;
   box-shadow: 0 5px 15px rgba(102,126,234,0.3);
}
.timeline-year {
   font-size: 24px;
   font-weight: 700;
   color: #667eea;
   margin-bottom: 10px;
}
.timeline-title {
   font-size: 20px;
   font-weight: 600;
   color: #333;
   margin-bottom: 10px;
}
.timeline-description {
   color: #666;
   line-height: 1.8;
}

/* Responsive */
@media (max-width: 768px) {
   .about-banner-title {
      font-size: 32px;
   }
   .about-banner-icon {
      font-size: 60px;
   }
   .achievement-number {
      font-size: 36px;
   }
   .value-icon {
      width: 80px;
      height: 80px;
      font-size: 32px;
   }
}