/* ============================== GLOBAL ============================== */
:root {
    --primary-blue: #2D3091;
    --dark-blue: #1A1264;
    --lime: #00FE00;
    --white: #ffffff;
    --gray-50: #f9f9f9;
    --gray-100: #f0f0f0;
    --radius: 12px;
    --transition: all 0.3s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:'Inter',sans-serif; color:#333; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
.container { width:100%; max-width:1280px; margin:auto; padding:0 1.5rem; }
.full-screen { min-height:100vh; display:flex; align-items:center; }

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================== NAV ============================== */
.navbar { position:fixed; top:0; left:0; width:100%; background:var(--white); box-shadow:0 2px 8px rgba(0,0,0,.08); z-index:1000; }
.nav-inner { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; }
.logo { display:flex; align-items:center; }
.logo img { height:60px; width:auto; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { position:relative; font-weight:600; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--primary-blue); transition:var(--transition); }
.nav-links a:hover::after { width:100%; }
.mobile-toggle { display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; }

/* ============================== HERO ============================== */
.hero { background:linear-gradient(135deg, #e8f5e9, #c8e6c9); padding:6rem 0; position:relative; }
.hero-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:2rem; align-items:center; }
.hero-text h1 { font-size:2.8rem; font-weight:800; color:var(--dark-blue); line-height:1.2; }
.hero-text p { margin:1rem 0; font-size:1.1rem; }
.highlight { font-weight:600; color:var(--primary-blue); }
.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.hero-product { position:relative; text-align:center; }
.featured-badge { position:absolute; top:-12px; right:20%; background:var(--lime); color:#000; padding:.4rem .9rem; border-radius:20px; font-weight:600; font-size:.9rem; }
.hero-product img { width: 100%; max-width: 800px; object-fit:contain; }

/* ============================== SECTION TITLES ============================== */
.section-title { text-align:center; font-size:2.4rem; font-weight:700; color:var(--dark-blue); margin-bottom:1rem; }
.tagline { text-align:center; font-size:1.2rem; color:var(--lime); margin-bottom:2rem; }
.section-subtitle { text-align:center; max-width:800px; max-width: 550px; margin:0 auto 3rem; font-size:1.1rem; color:#555; }

/* ============================== ABOUT ============================== */
.about { background:#fff; padding:5rem 0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:1100px; margin:auto; }
.about-col h3 { font-size:1.35rem; color:var(--primary-blue); margin-bottom:.75rem; }
.about-col p { font-size:1rem; line-height:1.7; margin-bottom:1.5rem; color:#444; }

/* ============================== PRODUCTS ============================== */
.products { background:var(--gray-50); padding:5rem 0; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:2rem; }
.product-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.1); }
.product-image { height:200px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; }
.product-image img { width:100%; height:100%; object-fit:cover; }
.product-info { padding:1.5rem; text-align:center; }
.product-info h3 { font-size:1.25rem; color:var(--dark-blue); margin-bottom:.4rem; }
.packing { font-size:.9rem; color:#777; margin-bottom:.5rem; }
.price { font-size:1.5rem; font-weight:700; color:var(--primary-blue); margin:1rem 0; }
.product-card.featured {grid-column: span 2; grid-row: span 2;}
.featured-badge { position: absolute; top: 20px; right: 20px; background: var(--primary-green); color: var(--white); padding: 6px 16px; border-radius: 20px; font-weight: 600; font-size: 0.875rem;}
.product-features { list-style: none; padding: 0; margin-top: auto;}
.product-features li { padding: 8px 0; color: var(--text-dark); position: relative; padding-left: 25px;}
.product-features li::before { content: '✓'; position: absolute; left: 0; color: var(--primary-green); font-weight: bold;}
.product-card-content { padding: 30px; flex-grow: 1; display: flex; flex-direction: column;}

/* ============================== CONTACT ============================== */
.contact { background:#fff; padding:5rem 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info h3 { font-size:1.9rem; color:var(--dark-blue); margin-bottom:1.5rem; }
.c-item { margin-bottom:1.2rem; font-size:1.1rem; }
.c-item a { color:var(--primary-blue); font-weight:600; }
.contact-form { background:var(--gray-50); padding:2.5rem; border-radius:var(--radius); }
.form-group { margin-bottom:1.25rem; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:.85rem 1rem; border:1px solid #ddd; border-radius:var(--radius); font-family:inherit; font-size:1rem; }
.form-group textarea { min-height:140px; resize:vertical; }
.form-submit { text-align:center; margin-top:1.5rem; }
.form-submit .btn { width:100%; max-width:380px; padding:1rem; font-size:1.1rem; }

/* ============================== BUTTONS ============================== */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.5rem; border-radius:var(--radius); font-weight:600; transition:var(--transition); }
.btn-primary { background:var(--primary-blue); color:var(--white); }
.btn-primary:hover { background:#1a1f6e; transform:translateY(-2px); }
.btn-outline { border:2px solid var(--primary-blue); color:var(--primary-blue); background:transparent; }
.btn-outline:hover { background:var(--primary-blue); color:var(--white); }

/* ============================== FOOTER ============================== */
.footer-new {
    background: var(--dark-blue);
    color: #ddd;
    padding: 3rem 0 1rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer-logo img {
    height: 50px;
    margin-bottom: 1rem;
}
.footer-logo p {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 380px;
}
.footer-links h4,
.footer-contact h4,
.footer-industries h4 {
    color: var(--lime);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.footer-links ul,
.footer-industries ul {
    list-style: none;
}
.footer-links a,
.footer-contact a,
.footer-industries li {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #ccc;
}
.footer-links a:hover,
.footer-contact a:hover {
    color: var(--lime);
}
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #aaa;
}
.tagline-footer {
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--lime);
}
.copyright-link {
    color: #aaa;
    text-decoration: none;
}
.copyright-link:hover {
    color: var(--lime);
}
/* ============================== RESPONSIVE ============================== */
@media (max-width:992px) {
    .hero-grid, .contact-grid, .about-grid, .footer-grid { grid-template-columns:1fr; text-align:center; }
    .hero-text h1 { font-size:2.3rem; }
    .hero-product { margin-top:2rem; }
    .footer-logo p { max-width:100%; }
}
@media (max-width:768px) {
    .nav-links { position:fixed; top:70px; left:-100%; width:100%; height:calc(100vh - 70px); background:#fff; flex-direction:column; align-items:center; padding-top:3rem; transition:left .3s; box-shadow:0 4px 12px rgba(0,0,0,.1); }
    .nav-links.active { left:0; }
    .mobile-toggle { display:block; }
}
@media (max-width:480px) {
    .hero-text h1 { font-size:1.9rem; }
    .btn { padding:.6rem 1.2rem; font-size:.95rem; }
}