/*------BASIC RESET------*/
* { box-sizing: border-box; margin: 0; padding: 0;}
html,body { height:100%; font-family: system-ui, -apple-system, 'Segoe UI', Roboto,'Helvetica Neue', Arial; color: #222;background: #fff;}
/*-------NAV--------*/
.nav {position: sticky; top: 0;background: #ffffffcc; backdrop-filter: blur(6px); z-index: 1000;box-shadow: 0 1px 6px rgba(0,0,0,0.06);}
.hamburger {display: none;font-size: 1.8rem;background: none;border: none;cursor: pointer;color: #0b5bd7;}
.nav-inner { max-width: 1100px;margin:0 auto;padding: 14px 20px; display: flex;align-items: center;justify-content: space-between;gap: 20px;}
.logo {font-weight: 1000;color: #0b5bd7;font-size: 1.2rem;letter-spacing: 0.6px;font-family: Georgia, 'Times New Roman', Times, serif;}
.logo .muted {color: #333;font-weight: 600;margin-left: 6px;}

/*---nav links---*/
.nav-links { list-style: none;display: flex;gap: 20px;align-items: center;}
.nav-links a {text-decoration: none;color: #333;display: inline-block;padding: 6px 4px;transition: color .25s ease;position: relative;}
.nav-links a::after {content: "";position:absolute;left: 0;bottom: -6px;width: 0;height: 2px;background: #0b5bd7;transition: width .25s ease;}
.nav-links a:hover { color: #0b5bd7;transform: translateY(-3px);}
.nav-links a:hover::after {width: 100%;}

/*-----HERO----*/
.hero {padding: 36px 0; color: #fff;}
.hero-home {background: url("Genfix.pics/hero1.jpg") center/contain repeat;}
.hero-services {background: url("Genfix.pics/hero2.jpg") center/contain repeat;color: #ff6606;}
.hero-process { background: url("Genfix.pics/hero3.jpg") center/contain repeat;}
.hero-grid {max-width: 1100px;margin: 0 auto;display:grid;grid-template-columns: 1fr 420px;gap: 30px;align-items: center;padding: 40px 20px;}
.hero-left h1 { font-size: 2rem;margin-bottom: 8px;}
.hero-left .lead {font-size: 1.05rem;margin-bottom: 10px;opacity: 1.0;}
.hero-left .small {opacity: 1.0;margin-bottom: 18px;}
.hero-right img {width: 100%;height: 320px;object-fit: cover;border-radius: 10px;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);}

/* CTA */
.cta {display: inline-block;background: #fff;color: #2575fc;padding: 12px 20px; border-radius: 8px; text-decoration: none;font-weight: 600;transition: transform .2s ease, box-shadow .2s ease;}
.cta:hover {transform: translateY(-4px);box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);color: rgb(146, 179, 210);}

/*----SECTION-----*/
.section {padding: 48px 0;}
.alt {background: #fafafa;}

/* container */
.container {max-width: 1000px; margin: 0 auto;padding: 0 20px;}
.container p {margin-bottom: 5px;}
/* About */
.about-grid { display: grid;grid-template-columns:1fr 320px ;gap: 30px;align-items: start;}
.about-grid p {margin-bottom: 10px;}
.guide {font-weight: 800;}
.about {font-size: 1.9rem;}
.values {list-style-position: inside;list-style-type: circle;}
.values span {font-size: 1.25rem;font-weight: 300;font-style: italic;}
.contact-card {background: #fff;border-radius: 10px; padding: 18px;box-shadow: 0 6px 18px rgba(0,0,0,0.06);}
.contact-card h4 {margin-bottom: 8px;}

/* Services */
.services-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(400px,1fr));gap: 6px;margin-top: 18px;}
.services-card {background: #fff;border-radius: 10px;padding: 2px;text-align: center;box-shadow: 0 6px 20px rgba(0,0,0,0.06);transition: tranform .25s ease,box-shadow .25s ease;}
.services-card img {width: 100%;height: 250px;object-fit: cover;margin-bottom: 12px;}
.services-card:hover {transform: translateY(-8px);box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);}

/* Products */
.products-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(400px,1fr));gap: 18px;margin-top: 18px;}
.product-item {background: #fff;border-radius: 10px;padding: 2px;text-align: center;box-shadow: 0 6px 18px rgba(0,0,0,0.06);}
.product-item img {width: 100%;height: 250px;object-fit: contain;border-radius: 8px;margin-bottom: 8px;}

/* Process */
.process-grid {display: grid;gap: 16px;grid-template-columns: repeat(auto-fit,minmax(900px,1fr));margin-top: 18px;}
.process-step {background: #fff;padding: 16px;border-radius: 10px;box-shadow: 0 6px 18px rgba(0,0,0,0.06);}
.quote {margin-top: 20px;font-style: italic;color: #444;background: #fff;padding: 16px;border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.04);}

/* Contact */
.narrow {max-width: 800px;}
.contact-grid {display: grid;grid-template-columns: 1fr 300px;gap: 20px;align-items: start;}
.contact-form {background: #fff;padding: 18px;border-radius: 10px;box-shadow: 0 6px 18px rgba(0,0,0,0.06);display: flex;flex-direction: column;gap: 12px;}
.contact-form label {font-size: 0.9rem;display: flex;flex-direction: column;gap: 6px;color: #333;}
.contact-form input, .contact-form textarea{padding: 10px 12px;border: 1px solid #e6e6e6;border-radius: 6px;font-size: 0.95rem;}
.btn-primary {background: #0b5bd7;color: #fff;padding: 12px 14px;border-radius: 8px;border: none;cursor: pointer;font-weight: 600;}
.contact-info {background: #fff;padding: 18px;border-radius: 10px;box-shadow: 0 6px 18px rgba(0,0,0,0.06);}

/* Fullscreen Status Overlay*/
#status-overlay {position: fixed;display: none; inset: 0;/* top,right,bottom,left = 0 */ background: rgba(0, 0, 0, 0.65);align-items: center;justify-content: center;z-index: 9999;}

/* Message Box*/
.status-box {background: #fff; padding: 30px 40px;border-radius: 12px;text-align: center;max-width: 420px;width: 90%;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);animation: scaleIn 0.3s ease;}
#form-status {font-size: 1.5rem;font-weight: 700;}

/* Success / Error style */
#form-status.success {color: #1b7f3a;}
#form-status.error {color: #b00020;}

/* Animation */
@keyframes scaleIn {
    from {transform: scale(0.85);
opacity: 0;}
    to { transform: scale(1); opacity: 1;}

}
/* Footer */
.footer {background: #111;color: #ddd;padding: 18px 0;margin-top: 28px;}
.footer-grid {max-width: 1100px;margin: 0 auto;padding: 0 20px;display: flex;justify-content: space-between;align-items: center;}

/*----------RESPONSIVE-------*/
@media (max-width:1000px) {
    .hero-grid {grid-template-columns: 1fr;text-align: center;}
    .hero-right img {height: 260px;margin-top: 18px;}
    .about-grid {grid-template-columns: 1fr;}
    .contact-grid {grid-template-columns: 1fr;}
    .process-grid {grid-template-columns: 1fr;}

    /* Show Hamburger*/
    .hamburger {display: block;z-index: 1001;}
    .nav-links {position: fixed;  top: 0; right: 0;bottom: 0;opacity: 0.85; width: 35%;flex-direction: column;background: #fff; gap: 16px;
        height: 100vh;/*Leave space for Footer */
        padding: 70px 24px 24px;display: none;box-shadow: -8px 0 20px rgba(0, 0, 0, 0.4);font-size: 1.3rem;font-weight: 600;

        transform: translateX(100%);
        transition: transform 0.3s ease;
        
    
    }
    .nav-links.show {display: flex;transform: translateX(0);}
    .nav-inner {justify-content: space-between;}
    
}

@media (max-width:600px) {
    .hero-left h1 {font-size:1.3rem}
    .nav {padding: 6px 0;}
    .hero-right img {height: 200px;}
    .services-grid {grid-template-columns: 1fr;}
    .products-grid {grid-template-columns: repeat(2,1fr);}
    
    
}