/* style.css - final polished theme */
@charset "utf-8";
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, 'Segoe UI', Roboto, Arial, sans-serif;margin:0;color:#07322b;background:#f7fbfa;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
    margin: 20px;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  
  .flip-card-front {
    background-color: #ffffff;
    color: black;
  }
  
  .flip-card-back {
    background-color: #355E3B; /* Navy Green */
    color: white;
    transform: rotateY(180deg);
  }
.container{width:min(1140px,94%);margin:0 auto}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#0f4f43;color:#fff;position:sticky;top:0;z-index:60;box-shadow:0 6px 20px rgba(2,6,23,0.06)}
.brand{font-weight:800;letter-spacing:0.2px}
.navlinks{display:flex;gap:12px;align-items:center}
.navlinks a{color:#e6fff6;text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .15s ease}
.navlinks a:hover{background:#1E8A72}
.navlinks a.active{background:#A7D8C9;color:#08362f;box-shadow:0 6px 18px rgba(14,92,78,0.08)}
.hero{position:relative;overflow:hidden;height:64vh;min-height:420px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:flex;align-items:center}
.slide.active{opacity:1}
.slide img{width:100%;height:64vh;object-fit:cover;filter:brightness(0.55)}
.slide .overlay{position:absolute;left:6%;top:50%;transform:translateY(-50%);color:#fff;max-width:680px}
.slide h1{font-size:clamp(28px,4.4vw,46px);margin:0 0 12px;line-height:1.02}
.slide p{margin:0 0 18px;color:rgba(255,255,255,0.95);font-size:1.05rem}
.slider-controls{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:70}
.slider-btn{background:rgba(0,0,0,0.45);border:none;color:#fff;padding:10px;border-radius:8px;cursor:pointer}
.section{padding:64px 0}
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 12px 30px rgba(4,15,14,0.06)}
.options{background:#f0f7f6;padding:56px 0;border-top:1px solid #eef7f5;border-bottom:1px solid #eef7f5}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.calculator{border-radius:12px;overflow:hidden;border:1px solid #eef7f5}
.calc-head{background:linear-gradient(90deg,#1E8A72,#A7D8C9);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.calc-body{background:#fff;padding:16px}
.input{display:block;width:100%;padding:12px 14px;border-radius:8px;border:1px solid #e8f0ec;background:#fbfffe;margin-bottom:10px}
.btn-cta{display:inline-block;background:#1E8A72;color:#fff;padding:12px 18px;border-radius:10px;font-weight:700;border:none;cursor:pointer}
.btn-ghost{background:#fff;color:#1E8A72;padding:10px 14px;border-radius:10px;border:1px solid rgba(30,138,114,0.12)}
.result-box{padding:12px;border-radius:8px;background:#f0fff8;border-left:4px solid #0f4f43;font-weight:700;color:#0f4f43;margin-top:10px}
.faq{background:#fff;border-radius:12px;padding:12px;border:1px solid #eef7f5}
.faq-item{border-bottom:1px solid #eef7f5;padding:10px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:6px 8px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 8px;color:#526a62}
.faq-item.open .faq-a{max-height:400px;padding:12px 8px}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.testimonial{background:#fff;padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(4,15,14,0.06);font-style:italic;color:#0e3b33}
.cta-wide{background:linear-gradient(90deg,#0f4f43,#1E8A72);color:#fff;padding:36px;border-radius:10px;text-align:center}
.footer{background:#08362f;color:#d6f3ea;padding:32px 18px;margin-top:48px}
@media(max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.slide .overlay{left:4%}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}.testimonials{grid-template-columns:1fr}.slide .overlay{left:6%;right:6%;text-align:center} .navbar{padding:12px} .hero{height:48vh}}