/* Reset & Fonts */
body, h1, h2, h3, p, ul { margin:0; padding:0; }
body { font-family: 'Open Sans', sans-serif; line-height:1.6; color:#333; background:#fefefe; }
a { color:#007C91; text-decoration:none; }
h1 { font-family:'Montserrat', sans-serif; color:#FFFFFF; }
h2,h3 { font-family:'Montserrat', sans-serif; color:#1E2D49; }

/* Hero Section */
.hero { 
  position: relative; 
  background: url('background.jpg') center/cover no-repeat; 
  height: 500px; 
  display: flex; 
  align-items: center;        
  justify-content: center;    
  text-align: center; 
/* color: #fff; */
  color: #FFFFFF;
  overflow: hidden;
}

.hero-overlay { 
  position: absolute; 
  top: 0; left: 0; width: 100%; height: 100%; 
  background-color: rgba(0,0,0,0.4); 
}

.hero-content { 
  position: relative; 
  z-index: 2; 
  display: flex;
  flex-direction: column;     
  align-items: center;        
  justify-content: center;    
  transform: translateY(50px);
  animation: fadeInHero 1.5s ease-out forwards;
}

/* Hero photo */
.hero-photo { 
  width: 240px; 
  height: 240px; 
  border-radius: 25%; 
  object-fit: cover; 
  border: 3px solid #fff; 
  margin-bottom: 10px; 
  margin-top: 100px;  
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
  animation-delay: 0.3s;
}

/* Headings animation */
.hero-content h1, .hero-content p, .cta-button {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
  animation-delay: 0.6s;
}

/* Buttons */
.cta-button { 
  display: inline-block; 
  margin-top: 10px; 
  padding: 10px 20px; 
  background: #007C91; 
  color: #fff; 
  border-radius: 5px; 
  transition: 0.3s; 
}
.cta-button:hover { background: #005f6b; }

/* Container */
.container { max-width: 900px; margin: 20px auto; padding: 20px; }
.light-bg { background: #f5f5f5; padding: 15px; border-radius: 5px; margin-bottom: 20px; }

/* Columns */
.columns-2, .columns-3 { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.columns-2 div, .columns-3 div { flex: 1; background: #e0f0f5; padding: 10px; border-radius: 5px; }

/* Applications */
.applications { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; margin-top: 10px; }
.application-item { text-align: center; flex: 1 0 120px; }
.application-item i { font-size: 28px; color: #007C91; display: block; margin-bottom: 5px; }

/* CTA Section */
.cta-section { background: #007C91; color: #fff; text-align: center; padding: 25px 10px; border-radius: 8px; margin: 20px 0; }
.cta-section .cta-button { background: #fff; color: #007C91; }
.cta-section .cta-button:hover { background: #e0f0f5; }

/* Footer */
footer { background: #1E2D49; color: #fff; text-align: center; padding: 15px 10px; font-size: 13px; margin-top: 30px; }

/* Animations */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInHero {
  0% { opacity: 0; transform: translateY(60px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .columns-2, .columns-3 { flex-direction: column; }
  .applications { flex-direction: column; gap: 15px; }

  /* Adjust hero section for mobile */
  .hero { height: auto; padding: 40px 10px; }
  .hero-content { transform: none; }
  .hero-photo { 
    margin-top: 20px; 
    width: 180px; 
    height: 180px; 
  }
}