/* Reset and Base Styles */* { margin: 0; padding: 0; box-sizing: border-box;}
:root { --primary-color: #0066cc; --secondary-color: #004d99; --accent-color: #ff9900; --text-color: #333333; --light-gray: #f5f5f5; --medium-gray: #e0e0e0; --dark-gray: #666666; --white: #ffffff; --black: #000000; --success-color: #28a745; --danger-color: #dc3545; --info-color: #17a2b8;}
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--white);}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px;}
a { text-decoration: none; color: inherit;}
ul { list-style: none;}
img { max-width: 100%; height: auto;}
.btn { display: inline-block; background-color: var(--primary-color); color: var(--white); padding: 10px 20px; border-radius: 4px; font-weight: 600; cursor: pointer; border: none; transition: background-color 0.3s, transform 0.2s;}
.btn:hover { background-color: var(--secondary-color); transform: translateY(-2px);}
.btn-outline { background-color: transparent; border: 2px solid var(--primary-color); color: var(--primary-color);}
.btn-outline:hover { background-color: var(--primary-color); color: var(--white);}
.btn-white { background-color: var(--white); color: var(--primary-color);}
.btn-white:hover { background-color: var(--light-gray); color: var(--secondary-color);}
.section-title { font-size: 2.2rem; margin-bottom: 40px; text-align: center; position: relative; color: var(--text-color);}
.section-title:after { content: ''; display: block; width: 60px; height: 4px; background-color: var(--accent-color); margin: 10px auto 0;}
/* Header Styles */header { background-color: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1000;}
header .container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px;}
.logo h1 { font-size: 1.8rem; color: var(--primary-color); margin-bottom: 5px;}
.tagline { font-size: 0.9rem; color: var(--dark-gray);}
nav ul { display: flex;}
nav ul li { margin-left: 25px;}
nav ul li a { font-weight: 500; position: relative; padding-bottom: 5px; transition: color 0.3s;}
nav ul li a:hover { color: var(--primary-color);}
nav ul li a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s;}
nav ul li a:hover:after { width: 100%;}
.header-right { display: flex; align-items: center;}
.search { display: flex; margin-right: 20px;}
.search input { padding: 8px 12px; border: 1px solid var(--medium-gray); border-radius: 4px 0 0 4px; width: 200px;}
.search button { background-color: var(--primary-color); color: var(--white); border: none; border-radius: 0 4px 4px 0; padding: 8px 12px; cursor: pointer;}
.cart { position: relative;}
.cart a { font-size: 1.2rem; color: var(--text-color);}
.cart-count { position: absolute; top: -8px; right: -8px; background-color: var(--accent-color); color: var(--white); border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center;}
/* Hero Section */.hero { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/api/placeholder/1920/600'); background-size: cover; background-position: center; color: var(--white); padding: 100px 0; text-align: center;}
.hero-content { max-width: 700px; margin: 0 auto;}
.hero h2 { font-size: 2.8rem; margin-bottom: 20px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);}
.hero p { font-size: 1.2rem; margin-bottom: 30px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
/* Features Section */.features { padding: 60px 0; background-color: var(--light-gray);}
.features .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;}
.feature { text-align: center; padding: 20px; background-color: var(--white); border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s;}
.feature:hover { transform: translateY(-10px);}
.feature i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px;}
.feature h3 { margin-bottom: 10px; font-size: 1.2rem;}
/* Products Section */.products { padding: 80px 0;}
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 40px;}
.product-card { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s; position: relative; padding: 20px;}
.product-card:hover { transform: translateY(-8px);}
.product-badge { position: absolute; top: 10px; right: 10px; background-color: var(--accent-color); color: var(--white); padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600;}
.product-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; margin-bottom: 15px;}
.product-card h3 { font-size: 1.2rem; margin-bottom: 8px;}
.product-card .price { font-size: 1.3rem; font-weight: 700; color: var(--primary-color); margin-bottom: 10px;}
.product-card .original-price { text-decoration: line-through; color: var(--dark-gray); font-size: 1rem; margin-right: 5px;}
.product-card .description { color: var(--dark-gray); font-size: 0.9rem; margin-bottom: 15px; height: 60px;}
.product-features { display: flex; justify-content: space-between; margin-bottom: 15px;}
.product-features span { font-size: 0.85rem; color: var(--dark-gray);}
.product-features i { color: var(--primary-color); margin-right: 5px;}
.product-card .btn { width: 100%;}
.view-all { text-align: center; margin-top: 30px;}
/* Industries Section */.industries { padding: 70px 0; background-color: var(--light-gray);}
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px;}
.industry-card { background-color: var(--white); padding: 30px 20px; border-radius: 8px; text-align: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transition: all 0.3s;}
.industry-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);}
.industry-card i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px;}
.industry-card h3 { margin-bottom: 15px;}
/* Testimonials Section */.testimonials { padding: 70px 0;}
.testimonial { max-width: 800px; margin: 0 auto; background-color: var(--white); padding: 30px; border-radius: 8px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);}
.testimonial-content { font-size: 1.1rem; font-style: italic; line-height: 1.7; margin-bottom: 20px; position: relative;}
.testimonial-content:before,.testimonial-content:after { content: '"'; font-size: 3rem; color: var(--medium-gray); position: absolute; line-height: 1;}
.testimonial-content:before { top: -20px; left: -15px;}
.testimonial-content:after { bottom: -40px; right: -15px;}
.testimonial-author { display: flex; align-items: center;}
.testimonial-author img { width: 60px; height: 60px; border-radius: 50%; margin-right: 15px; object-fit: cover;}
.testimonial-author h4 { font-size: 1.1rem; margin-bottom: 5px;}
.testimonial-author p { color: var(--dark-gray); font-size: 0.9rem;}
/* CTA Section */.cta { background-color: var(--primary-color); color: var(--white); padding: 60px 0; text-align: center;}
.cta-content { max-width: 700px; margin: 0 auto;}
.cta h2 { font-size: 2.2rem; margin-bottom: 15px;}
.cta p { font-size: 1.1rem; margin-bottom: 25px; opacity: 0.9;}
/* Services Section */.services { padding: 80px 0;}
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px;}
.service-card { background-color: var(--white); padding: 30px 20px; border-radius: 8px; text-align: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transition: all 0.3s; border-bottom: 4px solid transparent;}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); border-bottom-color: var(--primary-color);}
.service-card i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px;}
.service-card h3 { margin-bottom: 15px;}
/* About Section */.about { padding: 80px 0; background-color: var(--light-gray);}
.about-content { display: grid; grid-template-columns: 6fr 4fr; gap: 40px; align-items: center;}
.about-text p { margin-bottom: 20px;}
.about-image img { border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);}
/* Contact Section */.contact { padding: 80px 0;}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;}
.contact-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px;}
.contact-card { background-color: var(--white); padding: 25px; border-radius: 8px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); text-align: center;}
.contact-card i { font-size: 2rem; color: var(--primary-color); margin-bottom: 15px;}
.contact-card h3 { margin-bottom: 10px; font-size: 1.2rem;}
.contact-form { background-color: var(--white); padding: 30px; border-radius: 8px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);}
.form-group { margin-bottom: 20px;}
.form-group label { display: block; margin-bottom: 8px; font-weight: 500;}
.form-group input,.form-group select,.form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--medium-gray); border-radius: 4px; font-family: inherit; font-size: 1rem; transition: border-color 0.3s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline: none; border-color: var(--primary-color);}
.contact-form .btn { width: 100%; padding: 12px;}
/* Newsletter Section */.newsletter { padding: 50px 0; background-color: var(--light-gray);}
.newsletter-content { max-width: 600px; margin: 0 auto; text-align: center;}
.newsletter h3 { font-size: 1.5rem; margin-bottom: 15px;}
.newsletter p { margin-bottom: 25px;}
.newsletter-form { display: flex; gap: 10px;}
.newsletter-form input { flex: 1; padding: 12px 15px; border: 1px solid var(--medium-gray); border-radius: 4px; font-size: 1rem;}
.newsletter-form input:focus { outline: none; border-color: var(--primary-color);}
.newsletter-form .btn { padding: 12px 25px;}
/* Footer */footer { background-color: #1a1a1a; color: #e0e0e0; padding: 60px 0 0;}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 40px; margin-bottom: 40px;}
.footer-about p { margin-bottom: 20px;}
.social-icons { display: flex; gap: 15px;}
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: var(--white); transition: background-color 0.3s;}
.social-icons a:hover { background-color: var(--primary-color);}
.footer-links h3,.footer-contact h3 { font-size: 1.2rem; margin-bottom: 20px; color: var(--white);}
.footer-links ul li { margin-bottom: 12px;}
.footer-links ul li a { color: #cccccc; transition: color 0.3s;}
.footer-links ul li a:hover { color: var(--accent-color);}
.footer-contact p { margin-bottom: 15px; display: flex; align-items: center;}
.footer-contact p i { margin-right: 10px; color: var(--accent-color);}
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem;}
.footer-bottom p { color: #aaaaaa;}
.footer-bottom-links { display: flex; gap: 20px;}
.footer-bottom-links a { color: #aaaaaa; transition: color 0.3s;}
.footer-bottom-links a:hover { color: var(--white);}
/* WhatsApp Float Button */.whatsapp-float { position: fixed; bottom: 30px; right: 30px; z-index: 99;}
.whatsapp-float a { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #25d366; color: var(--white); border-radius: 50%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s, box-shadow 0.3s; font-size: 1.8rem;}
.whatsapp-float a:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);}
/* Responsive Styles */@media screen and (max-width: 1024px) { .features .container, .product-grid, .industry-grid, .services-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .about-content { grid-template-columns: 1fr; } .about-image { order: -1; }}
@media screen and (max-width: 768px) { header .container { flex-direction: column; padding: 15px; } .logo { margin-bottom: 15px; text-align: center; } nav ul { justify-content: center; flex-wrap: wrap; margin-bottom: 15px; } nav ul li { margin: 0 10px 10px; } .header-right { width: 100%; justify-content: center; } .search { width: 100%; max-width: 300px; margin-right: 15px; } .hero { padding: 60px 0; } .hero h2 { font-size: 2rem; } .contact-grid, .contact-info { grid-template-columns: 1fr; } .newsletter-form { flex-direction: column; } .footer-bottom { flex-direction: column; text-align: center; gap: 15px; } .footer-bottom-links { justify-content: center; }}
@media screen and (max-width: 480px) { .features .container, .product-grid, .industry-grid, .services-grid, .footer-grid { grid-template-columns: 1fr; } .section-title { font-size: 1.8rem; } .hero h2 { font-size: 1.6rem; } .testimonial { padding: 20px; } .testimonial-author { flex-direction: column; text-align: center; } .testimonial-author img { margin: 0 auto 10px; }}