/* Variables */
:root {
  --blue: #0050C8;
  --red: #FF2E2E;
  --green: #2ECC40;
  --yellow: #FFB900;
  --overlay-dark: rgba(0,0,0,0.35);
  --font-family: 'Poppins', sans-serif;
}

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family:var(--font-family);}
body { background:#f7f9fc; color:#333; line-height:1.6; scroll-behavior: smooth; }
.container { width:90%; max-width:1200px; margin:auto; }

/* Header */
header { background:#fff; padding:20px 0; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,0.05); display:flex; align-items:center; justify-content:space-between;}
.logo { font-size:28px; font-weight:bold; }
.logo .blue { color:var(--blue); text-decoration:underline; text-decoration-color:var(--blue);}
.logo .red { color:var(--red); display:inline-block; text-decoration:underline; text-decoration-color:var(--red); margin-left:2px;}
nav ul { list-style:none; display:flex; gap:25px; }
nav a { text-decoration:none; color:#333; font-weight:500; transition:.3s;}
nav a:hover { color:var(--blue);}
.nav-toggle { display:none; background:none; border:none; font-size:24px; cursor:pointer; }

/* Hero */
.hero { position:relative; min-height:80vh; display:flex; justify-content:center; align-items:center; text-align:center; color:#fff; background: url('images/hero-bg.jpg') center/cover no-repeat; }
.hero .overlay { position:absolute; inset:0; background: rgba(0,0,0,0.5);}
.hero-content { position:relative; z-index:2; animation:fadeIn 1s ease forwards; }
.hero h2 { font-size: clamp(28px, 5vw, 48px); }
.hero p { font-size: clamp(16px, 2vw, 20px); }
.hero-buttons .btn { padding:14px 35px; margin:0 10px; border-radius:30px; font-weight:bold; text-decoration:none; transition:.3s; display:inline-block;}
.btn-blue { background:var(--blue); color:#fff;}
.btn-blue:hover { background:#003c8f; }
.btn-red { background:var(--red); color:#fff;}
.btn-red:hover { background:#cc0000; }

/* Stats */
.stats-grid {
    display: flex;
    justify-content: center;   /* centered */
    text-align: center;
    gap: 60px;                  /* spacing */
    flex-wrap:wrap;
}
.stat-number {
    font-size:48px;            /* 🟦 bigger */
    font-weight:900;           /* 🟦 bold */
    display:flex;
	justify-content:center;
	align-items:center;
	gap:4px;
	color:var(--blue);
}

.stat-number .plus {
    font-size:48px;
    font-weight:900;
    color:var(--red);
}

.stat-box p {
    font-size:18px;
    margin-top:10px;
    color:#444;
}




/* General section spacing */
.section {
    padding:100px 0; /* Increased spacing for all main sections */
}
.section h2 {
    font-size:36px;
    text-align:center;
    margin-bottom:40px;
    position:relative;
}
.section h2::after {
    content:'';
    display:block;
    width:60px;
    height:4px;
    background: var(--blue);
    margin:15px auto 0 auto;
    border-radius:2px;
}

/* About */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:40px; margin-top: 40px; }
.about-card { padding: 25px; background-size: cover; background-position: center; border-radius: 15px; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: 0.3s; color: #E0F7FA; position: relative; overflow: hidden;}
.about-card::before { content: ''; position: absolute; inset: 0; background: var(--overlay-dark); border-radius: 15px; z-index: 0; }
.about-card h3, .about-card p { position: relative; z-index: 1;}
.about-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }

/* Services */
.services-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:40px; margin-top:40px; }
.service-card { padding:30px; border-radius:15px; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.1); transition:transform .3s; }
.service-card:hover { transform:translateY(-10px);}
.service-card i { font-size:px; margin-bottom:20px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);}
.gradient-blue { background:linear-gradient(135deg,#6BC1FF,var(--blue));}
.gradient-red { background:linear-gradient(135deg,#FF8A5C,var(--red));}
.gradient-green { background:linear-gradient(135deg,#9BFF8A,var(--green));}
.gradient-yellow { background:linear-gradient(135deg,#FFD86C,var(--yellow)); }

/* Unique, Use Cases, Pricing Sections */
.unique-cards, .usecases-grid, .pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(500px,1fr)); gap:40px; margin-top:40px; }
.unique-card, .usecase-card, .price-card { background:#fff; border-radius:15px; padding:30px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.1); transition:transform .3s; }
.unique-card:hover, .usecase-card:hover, .price-card:hover { transform:translateY(-10px);}
.unique-card img, .usecase-card img { width:490px; height: auto; margin-bottom:20px; object-fit: contain;}

/* Contact */
.contact-form { display:grid; gap:20px; max-width:600px; margin:auto;}
.contact-form input, .contact-form textarea { padding:14px; border-radius:10px; border:1px solid #ccc; font-size:16px; resize:none;}
.contact-form button { padding:14px; border:none; border-radius:30px; background:var(--blue); color:#fff; font-weight:bold; cursor:pointer; transition:.3s;}
.contact-form button:hover { background:#003c8f; }

/* Footer */
footer { background:#333; color:#fff; padding:60px 0; text-align:center;}
footer .social-icons a { color:#fff; margin:0 12px; font-size:20px; transition:.3s;}
footer .social-icons a:hover { color:var(--red); }
footer address a { color:#fff; text-decoration:none; }
footer address a:hover { text-decoration:underline; }

/* Animations */
@keyframes fadeInDown { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeInUp { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

/* Responsive */
@media(max-width:768px){
  nav ul { display:none; flex-direction:column; gap:15px; }
  .nav-toggle { display:block; }
  .hero h2 { font-size: clamp(28px, 5vw, 48px);}
  .hero p { font-size: clamp(16px, 2vw, 20px);}
  .stats-grid { flex-direction:column; gap:20px;}
  .about-grid, .services-grid, .unique-cards, .usecases-grid, .pricing-grid { grid-template-columns: 1fr; gap:25px; }
  .unique-card img, .usecase-card img {
      width: 100%;
      height: auto;
      display: block;
  }
}
           
/* United and M underline in blue */
.u-blue {
  color: var(--blue) !important;
  border-bottom: 3px solid var(--blue) !important;
  padding-bottom: 2px;
}

/* Override the color of M ONLY */
.m-red {
  color: var(--red) !important;  /* red text */
  border-bottom: 3px solid var(--red) !important;
}

/* edcorp red text + red underline */
.ed-red {
  color: var(--red) !important;
  border-bottom: 3px solid var(--red) !important;
  padding-bottom: 2px;
  margin-left: -2px;
}

.logo {text-decoration: none !important;}

/* Mobile Nav */
@media(max-width:768px){
  .nav-toggle{display:block;}
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    flex-direction:column;
    padding:16px;
  }
  .nav-links.active{display:flex;}
}