/*
Theme Name: Eduspace
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: Eduspace - Online Course, Education & University Html Template
Version: 1.1.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer

Main Style file-> assets/css/main.css 
*/

.mission-vision-section {
  padding: 100px 0;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.section-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.card {
  background: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-header {
  margin-bottom: 25px;
}

.card-title {
  color: #2b044d;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.divider {
  width: 80px;
  height: 4px;
  background: #ff1949;
  border-radius: 2px;
}

.card-content {
  color: #677294;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 15px;
}

.icon-circle {
  width: 50px;
  height: 50px;
  background: #eef2f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle svg {
  width: 24px;
  height: 24px;
  color: #2b044d;
}

.card-tag {
  color: #2b044d;
  font-weight: 600;
  font-size: 16px;
}

/* Animation classes */
.wow {
  visibility: hidden;
}

.fadeInUp {
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 991px) {
  .section-cards {
    grid-template-columns: 1fr;
  }

  .mission-vision-section {
    padding: 60px 0;
  }

  .card {
    padding: 30px;
  }

  .card-title {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .card-title {
    font-size: 24px;
  }

  .card {
    padding: 20px;
  }
}

/* About Section */
.about-section {
  padding: 80px 0;
  background: #caadf6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.card {
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f0f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.icon-circle svg {
  width: 24px;
  height: 24px;
  color: #4361ee;
}

.card-title {
  font-size: 24px;
  color: #1a1a1a;
  margin: 0;
}

.divider {
  width: 60px;
  height: 3px;
  background: #4361ee;
  margin: 15px 0;
}

.card-content {
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.card-tag {
  display: inline-block;
  padding: 8px 16px;
  background: #e8ecff;
  color: #4361ee;
  border-radius: 20px;
  font-size: 14px;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: 36px;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.section-title p {
  color: #555;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}