/* GLOBAL */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial, Helvetica, sans-serif;scroll-behavior:smooth}
body{background:#162740;color:white;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:1200px;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.center{text-align:center}

/* SECTIONS */
section{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:90px 20px;opacity:0;transform:translateY(60px);transition:all 1s ease}
section.visible{opacity:1;transform:translateY(0)}

/* HERO */
.hero-text{font-size:3rem;background:linear-gradient(90deg,#04a8e8,#66cc99);-webkit-background-clip:text;-webkit-text-fill-color:transparent;overflow:hidden;border-right:0.15em solid #04a8e8;display:inline-block;white-space:pre-wrap;word-break:break-word;animation:typing 3s steps(40,end) forwards, blink 0.75s step-end infinite;text-align:center}
@keyframes typing{from{width:0} to{width:100%}}
@keyframes blink{50%{border-color:transparent}}

h2{font-size:2.3rem;margin-bottom:35px;text-align:center;position:relative}
h2::after{content:'';display:block;width:80px;height:4px;background:#04a8e8;margin:10px auto 0;border-radius:2px}
.blue{color:#04a8e8}
.text-block{line-height:1.8;font-size:1.1rem;max-width:650px;margin:auto;animation:fadeInText 1.2s ease forwards;text-align:left}
@keyframes fadeInText{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}

/* ROWS */
.row{display:flex;gap:60px;align-items:center;justify-content:center;flex-wrap:wrap}
.row img{width:100%;max-width:480px;border-radius:14px;box-shadow:0 15px 25px rgba(0,0,0,0.5);transition:transform 0.3s ease}
.row img:hover{transform:scale(1.05)}
.row .text-block{flex:1;min-width:250px}

/* CARDS */
.cards{display:flex;gap:35px;justify-content:center;flex-wrap:wrap}
.card{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:28px;border-radius:16px;text-align:center;transition:transform 0.3s ease, box-shadow 0.3s ease;flex:1;min-width:250px;max-width:350px}
.card:hover{transform:translateY(-10px);box-shadow:0 25px 40px rgba(0,0,0,0.6)}
.card img{width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:20px}

/* PORTAL CTA */
.portal-section{background:linear-gradient(135deg,#0f1f36,#1e3b5f)}
.portal-box{background:rgba(255,255,255,0.05);padding:50px;border-radius:18px;text-align:center;max-width:700px}
.portal-box h3{font-size:2rem;margin-bottom:15px}
.portal-box p{margin-bottom:25px;line-height:1.7}
.portal-btn{display:inline-block;padding:16px 30px;border-radius:10px;background:#04a8e8;font-weight:bold;letter-spacing:0.5px;transition:0.3s}
.portal-btn:hover{transform:scale(1.05);box-shadow:0 10px 30px rgba(4,168,232,0.5)}

/* IMPACT */
.impact-wrapper{display:flex;gap:60px;align-items:center;justify-content:center;flex-wrap:wrap}
.metrics{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.metric-number{font-size:3.5rem;color:#04a8e8;font-weight:bold}
.metric-label{margin-top:8px;font-size:1.1rem;text-align:center}


/* CONTACT */
.contact-info{text-align:center;margin-bottom:35px;line-height:1.9}
form{display:flex;flex-direction:column;gap:15px;max-width:500px;margin:auto}
input,textarea{padding:14px;border-radius:8px;border:none;background:rgba(255,255,255,0.1);color:white}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.7)}
button{padding:15px;background:#04a8e8;color:white;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:0.3s ease;box-shadow:0 5px 15px rgba(4,168,232,0.4)}
button:hover{opacity:.95;transform:scale(1.02)}
.success{margin-top:15px;color:#00e676;display:none;text-align:center}

/* Section Styling */
.contact-section {
  padding: 80px 0;
  background: #162740;
}

/* Layout */
.contact-wrapper {
  display: flex;
  gap: 60px;
  margin-top: 50px;
  flex-wrap: wrap;
}

/* Contact Info */
.contact-info {
  flex: 1;
  font-size: 16px;
  line-height: 1.8;
  color: white;
}

.contact-info h3 {
  margin-bottom: 15px;
  color: #04a8e8;
}

/* Form */
.contact-form {
  flex: 1.3;   /* makes form wider than text */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Inputs */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 15px;
  transition: 0.3s ease;
}

/* Focus Effect */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #04a8e8;
  box-shadow: 0 0 0 3px rgba(4,168,232,0.1);
}

/* Button */
.contact-form button {
  padding: 16px;
  border: none;
  border-radius: 10px;
  background: #04a8e8;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

.contact-form button:hover {
  background: #038bc2;
  transform: translateY(-2px);
}

/* Success message */
.success {
  display: none;
  color: green;
  font-size: 14px;
}


.icon-list {
  list-style: none;
  padding-left: 0;
  margin-top: 15px;
}

.icon-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.icon-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #04a8e8; /* your brand blue */
  font-weight: bold;
}


/* MOBILE */
@media(max-width:900px){
.hero-text{font-size:2.2rem}
h2{font-size:1.9rem}
.row{flex-direction:column;align-items:center;text-align:center}
.row .text-block{text-align:center}
.cards{flex-direction:column;align-items:center}
.card{max-width:90%}
.impact-wrapper{flex-direction:column;align-items:center}
.metrics{flex-direction:column;gap:20px}
.text-block{font-size:1rem;padding:0 10px}
.row img{margin-bottom:20px}
.contact-wrapper {
    flex-direction: column;
  }
}