:root {
    --primary-color: #2c7a7b;
    --secondary-color: #f6ad55;
    --accent-color: #38b2ac;
    --light-bg: #f7fafc;
    --dark-text: #2d3748;
    --font-family: 'Roboto', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-family); color: var(--dark-text); line-height: 1.6; scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.navbar { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: rgba(255,255,255,0.95); box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 100; }
.navbar img {height: 75px;}
.navbar ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }
.navbar a { color: var(--dark-text); font-weight: 500; }
.navbar .cta-btn { background: var(--accent-color); color: #fff; padding: 0.5rem 1rem; border-radius: 4px; }
.hero {position: relative;height: 100vh;overflow: hidden;}
.hero-bg {background: url('herom.png') center/cover no-repeat;position: absolute;top: 0;left: 0;width: 100%;height: 100%;/* transform: translateZ(-1px) scale(2); */}
.hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(40,109,88,0.6);}
.hero-content {position: relative;z-index: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;text-align: center;color: #fff;padding: 1rem;}
.hero h1 { font-size: 3rem; margin-bottom: 1rem; animation: fadeInDown 1s ease; }
.hero p { font-size: 1.2rem; margin-bottom: 1rem; animation: fadeInUp 1s ease; }
.hero p.sub { font-size: 1rem; margin-bottom: 2rem; color: #e2e8f0; }
.hero .btn-primary { background: var(--secondary-color); padding: 0.75rem 2rem; border: none; border-radius: 4px; cursor: pointer; animation: pulse 2s infinite; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px);} to { opacity:1; transform: translateY(0);} }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.05);} }
h2 { text-align: center; margin-bottom: 2rem; color: var(--primary-color); }
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 4rem 0; }
.alert-banner { background: rgba(246,173,85,0.1); color: var(--dark-text); text-align: center; padding: 1rem 2rem; font-size: 0.95rem; border-bottom: 1px solid var(--secondary-color); }
.features-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media(min-width:768px){ .features-grid{grid-template-columns:repeat(3,1fr);} }
.feature-item { background:#fff; padding:2rem; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.05); text-align:center; transition:transform .3s; }
.feature-item:hover{transform:translateY(-5px);}
.feature-item img{width:80px;margin-bottom:1rem;}
.feature-item h4{color:var(--accent-color);margin-bottom:.5rem;}
.products{display:grid;grid-template-columns:1fr;gap:2rem;}
@media(min-width:768px){ .products{grid-template-columns:repeat(3,1fr);} }
.product-card{position:relative;overflow:hidden;border-radius:8px;transition:transform .3s;}
.product-card img{width:100%;transition:scale .3s;}
.product-card:hover img{transform:scale(1.1);}
.product-card .info{position:absolute;bottom:0;width:100%;background:rgba(0,0,0,0.6);color:#fff;padding:1rem;text-align:center;}
.stats-grid{display:grid;grid-template-columns:1fr;gap:2rem;text-align:center;color:#fff;}
@media(min-width:768px){ .stats-grid{grid-template-columns:repeat(4,1fr);} }
.stat-item{padding:2rem;}
.stat-item svg{width:50px;height:50px;margin-bottom:.5rem;fill:var(--secondary-color);}
.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
#blog .blog-grid{display:grid;grid-template-columns:1fr;gap:2rem;}
@media(min-width:768px){ #blog .blog-grid{grid-template-columns:repeat(3,1fr);} }
.blog-post{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.blog-post img{width:100%;height:200px;object-fit:cover;}
.blog-post .content{padding:1rem;}
.blog-post h3{margin:0 0 .5rem;color:var(--primary-color);}
.blog-post p{font-size:.9rem;margin-bottom:1rem;}
.blog-post a{color:var(--accent-color);font-weight:500;}
#contact{padding:4rem 0;background:var(--light-bg);}
#contact form{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;}
#contact input,#contact textarea{padding:.75rem;border:1px solid #cbd5e0;border-radius:4px;outline:none;}
#contact button{padding:.75rem;border:none;background:var(--accent-color);color:#fff;border-radius:4px;cursor:pointer;}
footer{padding:2rem 0;background:var(--dark-text);color:#fff;text-align:center;}
.social-icons{display:flex;justify-content:center;gap:1rem;margin:1rem 0;}
.social-icons a{color:#fff;font-size:1.5rem;transition:color .3s;}
.social-icons a:hover{color:var(--secondary-color);}
.sticky-cta{position:fixed;bottom:20px;right:20px;background:var(--accent-color);color:#fff;padding:1rem 1.5rem;border-radius:50px;box-shadow:0 4px 12px rgba(0,0,0,0.2);z-index:200;animation:bounce 2s infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}