/* ============================================
   CEMIF Landing Page - styles.css
   ============================================ */

/* Poppins Font Family */
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--navbar-height, 80px);
  overflow-x: hidden;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  overflow-x: hidden;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}

a { text-decoration: none; transition: all 0.3s ease; }

img { max-width: 100%; height: auto; display: block; }

/* ---- Bootstrap Overrides ---- */
.btn-primary {
  background-color: #0066cc;
  border-color: #0066cc;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #0052a3;
  border-color: #0052a3;
}
.btn-outline-primary {
  color: #0066cc;
  border-color: #0066cc;
}
.btn-outline-primary:hover {
  background-color: #0066cc;
  border-color: #0066cc;
  color: #fff;
}
.text-primary { color: #0066cc !important; }
.bg-primary   { background-color: #0066cc !important; }

/* Touch-friendly on mobile */
@media (max-width: 768px) {
  .btn { min-height: 44px; min-width: 44px; }
}

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

/* ---- Navbar ---- */
.navbar {
  transition: all 0.3s ease;
}
.navbar-brand img {
  max-height: 8rem;
  transition: transform 0.3s ease;
}
.navbar-brand img:hover { transform: scale(1.05); }

.navbar .nav-link {
  font-weight: 500;
  color: #333;
  transition: color 0.3s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #0066cc; }

.navbar .btn-primary {
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
}

/* ---- Hero Section ---- */
.hero-section {
  padding-top: calc(var(--navbar-height, 80px) + 2rem) !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.hero-section h1 {
  color: #0066cc;
  animation: fadeInUp 1s ease-out;
}
.hero-section .lead {
  color: #666;
  animation: fadeInUp 1.2s ease-out;
}
.hero-section img { animation: fadeIn 1.5s ease-out; }

/* ---- Services Section ---- */
.services-section { background-color: #fff; }

.service-card {
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #e0e0e0;
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0,102,204,0.15) !important;
}
.service-card .service-icon {
  filter: drop-shadow(0 4px 8px rgba(0,102,204,0.1));
}
.service-card h4 { color: #0066cc; }

/* ---- About Section ---- */
.about-section h3 { color: #0066cc; }
.about-section p  { font-size: 1.1rem; line-height: 1.8; }

/* ---- Mission & Vision Section ---- */
.mission-vision-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.mission-card,
.vision-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
}
.mission-card:hover,
.vision-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}
.mission-card .icon-wrapper,
.vision-card  .icon-wrapper { display: inline-block; }

.mission-card h3,
.vision-card  h3 { font-size: 1.75rem; }

.mission-card p,
.vision-card  p { font-size: 1.05rem; line-height: 1.7; }

.vision-card {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  color: #fff;
}

/* ---- Values Section ---- */
.value-card {
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.value-card:hover {
  border-color: #0066cc;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,102,204,0.2) !important;
}
.value-card:hover .value-icon svg { transform: scale(1.1); }
.value-card .value-icon svg { transition: transform 0.3s ease; }
.value-card h5 { color: #0066cc; font-size: 1.25rem; }
.value-card p  { line-height: 1.6; }

/* ---- Gallery Section ---- */
.gallery-section img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-section img:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* ---- Contact Section ---- */
.contact-section {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
}
.contact-section .contact-info h5 { margin-bottom: 0.5rem; }
.contact-section .contact-info p  { opacity: 0.9; }

.contact-section .card {
  border-radius: 15px;
  overflow: hidden;
}
.contact-section .form-control,
.contact-section .form-select {
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 0.75rem;
}
.contact-section .form-control:focus,
.contact-section .form-select:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 0.2rem rgba(0,102,204,0.25);
}
.contact-section .card .btn-primary {
  padding: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
}

/* ---- Footer ---- */
.footer .social-links a { transition: opacity 0.3s ease; }
.footer .social-links a:hover { opacity: 0.7; }

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
  .hero-section h1,
  .hero-section .display-3 { font-size: 2.5rem !important; }
  .hero-section .lead       { font-size: 1.1rem; }
  .hero-section .btn-lg     { padding: 0.6rem 1.5rem; font-size: 1rem; }
  .hero-section img         { margin-top: 2rem; }

  .services-section .service-card { margin-bottom: 1.5rem; }

  .about-section .display-5 { font-size: 2rem !important; }
  .about-section img         { margin-bottom: 2rem; }

  .contact-section .display-5 { font-size: 2rem !important; }

  .navbar-brand img { height: 200px !important; }
  .navbar-collapse  {
    background: white;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  .navbar .nav-item       { margin: 0.5rem 0; }
  .navbar .btn-primary    { width: 100%; margin-top: 0.5rem; }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  section { padding: 2rem 0 !important; }

  .hero-section { min-height: auto !important; }
  .hero-section h1,
  .hero-section .display-3  { font-size: 2rem !important; margin-bottom: 1rem !important; }
  .hero-section .lead        { font-size: 1rem; margin-bottom: 1.5rem !important; }
  .hero-section img          { margin-top: 2rem; margin-bottom: 2rem; }
  .hero-section .d-flex      { flex-direction: column; gap: 0.75rem !important; }
  .hero-section .d-flex .btn { width: 100%; }
  .hero-section .btn-lg      { padding: 0.75rem 1.25rem; font-size: 1rem; }

  .services-section           { padding: 3rem 0 !important; }
  .services-section .display-4 { font-size: 1.75rem !important; }
  .services-section .service-card { padding: 1.5rem !important; margin-bottom: 1rem; }
  .services-section .service-card h4 { font-size: 1.25rem; }
  .services-section .service-card .service-icon img { max-height: 60px !important; }

  .about-section              { padding: 3rem 0 !important; }
  .about-section .display-5   { font-size: 1.75rem !important; }
  .about-section p             { font-size: 0.95rem; }
  .about-section img           { margin-bottom: 1.5rem; }

  .gallery-section            { padding: 3rem 0 !important; }
  .gallery-section .display-5 { font-size: 1.75rem !important; }

  .contact-section            { padding: 3rem 0 !important; }
  .contact-section .display-5 { font-size: 1.75rem !important; }
  .contact-section .lead      { font-size: 1rem; margin-bottom: 1.5rem !important; }
  .contact-section .contact-info { margin-bottom: 2rem; }
  .contact-section .card .card-body { padding: 1.5rem !important; }
  .contact-section .form-control,
  .contact-section .form-select { padding: 0.6rem; font-size: 0.95rem; }

  .footer                     { padding: 2rem 0 !important; text-align: center; }
  .footer .col-lg-4            { margin-bottom: 2rem; }
  .footer .social-links        {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .navbar                     { padding: 0.75rem 1rem; }
  .navbar-brand img            { height: 60px !important; }
  .navbar .nav-link            { padding: 0.75rem 1rem; font-size: 1rem; }
  .navbar .btn-primary         { width: 100%; margin-top: 0.5rem; padding: 0.75rem; }
}

/* Small mobile (≤ 575px) */
@media (max-width: 575px) {
  .hero-section h1,
  .hero-section .display-3 { font-size: 1.75rem !important; line-height: 1.3; }

  .services-section .display-4,
  .about-section    .display-5,
  .gallery-section  .display-5,
  .contact-section  .display-5 { font-size: 1.5rem !important; }

  .navbar-brand img                   { height: 50px !important; }
  .service-card .service-icon img     { max-height: 50px !important; }
}

/* Large desktop (≥ 1200px) */
@media (min-width: 1200px) {
  .container    { max-width: 1140px; }
  .display-3    { font-size: 3.5rem !important; }
  .display-4    { font-size: 3rem !important; }
  .display-5    { font-size: 2.5rem !important; }
}

/* Extra large desktop (≥ 1400px) */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}