:root {
     --primary-color: #00eaff;
     --secondary-color: #ffd700;
     --background-dark: #0b0d17;
     --card-bg: #1b1d2b;
     --text-light: #e0e0e0;
     --text-muted: #a0a0a0;
 }


 body {
     font-family: 'Barlow', sans-serif;
     background-color: var(--background-dark);
     color: var(--text-light);
     line-height: 1.6;
     overflow-x: hidden;
 }

 .about-title {
     font-size: clamp(2rem, 5vw, 3rem);
     text-align: center;
     margin-bottom: 1.5rem;
     color: var(--primary-color);
 }

 .about-intro {
     text-align: center;
     max-width: 800px;
     margin: auto;
     margin-bottom: 3rem;
     font-size: 1.2rem;
     color: var(--text-muted);
 }


 .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     max-width: 1200px;
     margin: auto;
 }

 .about-card {
     background: var(--card-bg);
     padding: 2rem;
     border-radius: 12px;
     text-align: center;
     border: 1px solid rgba(0, 234, 255, 0.2);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .about-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 8px 20px rgba(0, 234, 255, 0.15);
 }

 .card-icon {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 1rem;
 }

 .about-card h3 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
 }

 .info-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     max-width: 1200px;
     margin: auto;
 }

 .info-item,
 .location-card {
     background: var(--card-bg);
     padding: 1.5rem;
     border-radius: 12px;
     border: 1px solid rgba(0, 234, 255, 0.2);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .info-item:hover,
 .location-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 15px rgba(0, 234, 255, 0.15);
 }

 .info-item h3 {
     font-size: 1.3rem;
     margin-bottom: 0.8rem;
     color: var(--primary-color);
 }