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

html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: #FFFFFF;
  color: #111;
  line-height: 1.5;
}

/* ---------- NAVBAR ---------- */
.navbar{
  position: sticky; top: 0; z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: #fcfcfc;
  border-bottom: 1px solid #e2e2e2;
}
.nav-left{ display:flex; align-items:center; gap:12px; }
.nav-logo img{ height: 64px; width:auto; display:block; }

/* Links (center) */
.nav-menu{
  justify-self: center;
  display: flex; align-items: center; gap: 28px;
}
.nav-link{
  color:#555; text-decoration:none; font-weight:600;
  padding:8px 14px; border-radius:10px; transition:.2s;
  font-size: 1.05rem; white-space: nowrap;
}
.nav-link:hover,
.nav-link.active{ background: linear-gradient(180deg, #033178, #12386B); color:#fff; }

.nav-download .download-btn{
  display:inline-block;
  padding:10px 22px;
  background:linear-gradient(180deg, #0c2461, #283e6a);
  color:#fff; text-decoration:none; font-weight:600; border-radius:12px;
  box-shadow:0 6px 14px rgba(44,62,80,.12);
}

/* Hamburger */
.hamburger{
  display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  position: relative;
}
.hamburger span{
  position:absolute; left:9px; right:9px; height:3px; background:#333; border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger span:nth-child(1){ top:12px; }
.hamburger span:nth-child(2){ top:20px; }
.hamburger span:nth-child(3){ top:28px; }
.hamburger.is-active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity: 0; }
.hamburger.is-active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Overlay (mobile) */
.nav-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease;
  z-index: 900;
}
.nav-overlay.active{ opacity: 1; visibility: visible; }

.no-scroll{ overflow: hidden; }

/* Mobile/Tablet menu */
@media (max-width: 900px){
  .hamburger{ display:block; }
  .nav-download--desktop{ display:none; }

  .navbar{
    grid-template-columns: auto 1fr auto; /* logo | spacer | hamburger */
  }

  .nav-menu{
    position: fixed; left: 0; right: 0; top: 68px;
    display: none; flex-direction: column; align-items: flex-start;
    gap: 14px; padding: 14px 20px;
    background: #fff; border-top: 1px solid #eee; box-shadow: 0 6px 20px rgba(0,0,0,.06);
    z-index: 1001;
  }
  .nav-menu.active{ display: flex; }

  .nav-download--mobile{ width:100%; }
  .nav-download--mobile .download-btn{ width:100%; text-align:center; }
}

/* ---------- HERO ---------- */
.hero-section{
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(24px, 6vw, 60px);
  padding: clamp(36px, 6vw, 80px) 8vw;
  min-height: 70vh;
  background:#fff;
}
.hero-content{ max-width: 640px; }
.hero-section h2{
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight:700; color:#01338E; margin:0 0 16px;
}
.hero-section p{
  font-size: clamp(16px, 1.6vw, 20px);
  line-height:1.6; color:#333; margin:0 0 24px;
}
.hero-buttons{ display:flex; gap: 16px; margin-bottom: 12px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; font-size:16px; font-weight:500; border-radius:8px; text-decoration:none; transition:.2s; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.btn-primary{ background:#DFF3EB; color:#064E3B; }
.btn-primary:hover{ background:#c9e9dd; }
.btn-secondary{ background:#E6F2FF; color:#1D4ED8; }
.btn-secondary:hover{ background:#d4e9ff; }
.available{ display:flex; align-items:center; gap:10px; margin-top: 14px; }
.available img{ height:30px; }
.hero-image img{ max-width: min(460px, 40vw); width:100%; height:auto; border-radius:16px; }

/* Stack hero on small screens */
@media (max-width: 900px){
  .hero-section{ flex-direction:column; text-align:center; }
  .hero-buttons{ justify-content:center; }
  .available{ justify-content:center; }
  .hero-image img{ max-width: 320px; }
}

/* ---------- ABOUT ---------- */
.about-section{
  display:flex; align-items:center; justify-content:space-between;
  gap: 30px; padding: 20px 5vw; background:#fff;
}
.about-images{ flex:1; display:flex; justify-content:center; align-items:center; }
.slider{ overflow:hidden; border-radius:20px; max-width:360px; height:650px; }
.slides{ display:flex; width:100%; animation: slide 12s infinite; }
.slides img{ width:100%; height:100%; object-fit: fill; border-radius:16px; }

@keyframes slide{
  0%{ transform: translateX(0%); }
  33%{ transform: translateX(-100%); }
  66%{ transform: translateX(-200%); }
  100%{ transform: translateX(0%); }
}

.about-content{ flex:1.2; }
.about-content h2{ font-size:32px; font-weight:700; color:#01338E; margin:0 0 12px; }
.about-content p{ font-size:18px; margin:0 0 18px; color:#444; }
.about-content ul{ list-style:none; padding:0; margin:0 0 26px; }
.about-content li{ font-size:16px; color:#333; margin:8px 0; display:flex; align-items:center; gap:8px; }

@media (max-width: 900px){
  .about-section{ flex-direction:column; text-align:center; padding: 42px 6vw; }
  .slider{ margin:0 auto 26px; max-width:240px; height:520px; }
  .about-content h2{ font-size:26px; }
  .about-content p{ font-size:16px; }
  .about-content li{ justify-content:center; }
}

/* ---------- FEATURES ---------- */
.features-section{ padding: 60px 20px; text-align:center; }
.section-title{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom: 20px; }
.section-title .section-icon{ width:35px; height:auto; }
.section-title h2{ font-size:28px; color:#0d47a1; margin:0; }
.section-subtitle{ max-width:680px; margin: 10px auto 36px; color:#555; }

.features-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 25px; max-width:1100px; margin:0 auto;
}
.feature-card{
  background:#fff; border:1px solid #eaeaea; border-radius:12px; padding:20px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover{ transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.feature-card img{ width:50px; margin-bottom:15px; }
.feature-card h3{ font-size:18px; color:#222; margin:0 0 10px; }
.feature-card p{ font-size:14px; color:#666; line-height:1.5; }

@media (max-width: 992px){
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .features-grid{ grid-template-columns: 1fr; }
}

/* ---------- TESTIMONIALS ---------- */
.testimonials{ text-align:center; padding: 60px 20px; }
.testimonial-slider{
  display:flex; overflow:hidden; position:relative; padding: 0 6vw; justify-content:center;
}
.testimonial-card{
  min-width: 80%; max-width: 800px;
  display:none; flex-direction:row; align-items:center; gap:20px; margin:0 auto;
}
.testimonial-card.active{ display:flex; }
.testimonial-img{ width:180px; height:auto; border:2px solid #ccc; border-radius:8px; }
.testimonial-text{ background:#00A86B; color:#fff; padding:20px; border-radius:8px; text-align:left; }
.testimonial-text p{ margin:0 0 10px; font-size:16px; }
.testimonial-text span{ font-size:14px; font-style:italic; }
.testimonial-controls{ margin-top:20px; }
.testimonial-controls button{ border:none; background:#0d47a1; color:#fff; padding:10px 15px; margin:0 5px; border-radius:50%; cursor:pointer; }
.testimonial-dots{ margin-top:15px; }
.testimonial-dots span{ height:10px; width:10px; margin:0 4px; background:#bbb; border-radius:50%; display:inline-block; cursor:pointer; }
.testimonial-dots .active{ background:#0d47a1; }

@media (max-width: 768px){
  .testimonial-card{ flex-direction:column; text-align:center; }
  .testimonial-img{ width:120px; }
  .testimonial-text{ text-align:center; }
}

/* ---------- CONTACT ---------- */
.contact-section{ padding: 60px 20px; background:#fff; display:flex; justify-content:center; }
.contact-container{ display:flex; align-items:center; gap:50px; max-width:1000px; width:100%; }
.contact-image img{ width:280px; height:280px; object-fit:cover; border-radius:50%; border:4px solid #eee; }
.contact-form{ flex:1; }
.contact-form h2{ font-size:28px; color:#033178; display:flex; align-items:center; gap:10px; margin:0 0 18px; }
.contact-form .contact-icon{ width:30px; height:30px; }
.contact-form form{ display:flex; flex-direction:column; gap:15px; }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-size:14px; outline:none; transition:border .2s;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:#0d47a1; }
.contact-form button{
  padding:12px; background:#00A86B; color:#fff; font-size:16px; font-weight:600;
  border:none; border-radius:8px; cursor:pointer; transition: background .3s;
}
.contact-form button:hover{ background:#008f5b; }

@media (max-width: 900px){
  .contact-container{ flex-direction:column; text-align:center; }
  .contact-image img{ width:200px; height:200px; }
  .contact-form h2{ justify-content:center; }
}

/* ---------- FOOTER ---------- */
.footer{ background:#0d2c61; color:#fff; font-family:'Montserrat', sans-serif; }
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 50px 10%; border-bottom:1px solid rgba(255,255,255,.2);
}
.footer-left{ text-align:center; }
.footer-left .footer-logo{ width:80px; margin-bottom:10px; }
.footer-left h4{ font-size:16px; margin:0; font-weight:600; }
.footer-middle h3, .footer-right h3{ font-size:18px; margin-bottom:12px; font-weight:600; color:#fff; }
.footer-middle p{ font-size:14px; color:#ccc; line-height:1.6; margin:0; }
.footer-right ul{ list-style:none; padding:0; margin:0; }
.footer-right li{ margin-bottom:8px; }
.footer-right a{ color:#fff; font-size:14px; text-decoration:none; }
.footer-right a:hover{ text-decoration:underline; }
.footer-bottom{ text-align:center; padding:20px 10%; }
.footer-copy p{ font-size:13px; margin:4px 0; }
.footer-copy a{ color:#fff; text-decoration:none; }
.footer-copy a:hover{ text-decoration:underline; }

@media (max-width: 900px){
  .footer-top{ flex-direction:column; text-align:center; gap:30px; }
}