/* Mining Chemicals Website - Professional Industrial Design */
/*
NOTE: All new pages must include Google Analytics code in the section:
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
/* Header Styles */
header {
background: linear-gradient(135deg, #1a3a5f 0%, #2c5a8d 100%);
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: white;
text-decoration: none;
}
.logo span {
color: #4ecdc4;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
nav a:hover {
color: #4ecdc4;
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(26, 58, 95, 0.9), rgba(44, 90, 141, 0.85)),
url('https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
color: white;
text-align: center;
padding: 6rem 2rem;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 2rem;
opacity: 0.9;
}
/* Main Content */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
color: #1a3a5f;
}
.section-title h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-title p {
color: #666;
max-width: 600px;
margin: 0 auto;
}
/* Product Cards */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.product-card {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.product-card h3 {
color: #1a3a5f;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.product-card ul {
list-style: none;
padding-left: 1rem;
}
.product-card li {
margin-bottom: 0.5rem;
position: relative;
padding-left: 1.5rem;
}
.product-card li:before {
content: "•";
color: #4ecdc4;
position: absolute;
left: 0;
font-size: 1.2rem;
}
/* WhatsApp Button */
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #25D366;
color: white;
border-radius: 50px;
text-align: center;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
text-decoration: none;
transition: transform 0.3s ease;
}
.whatsapp-float:hover {
transform: scale(1.1);
}
/* Footer */
footer {
background: #1a3a5f;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 4rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-content p {
margin: 0.5rem 0;
opacity: 0.8;
}
.contact-info {
margin-top: 1rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
gap: 1rem;
}
nav ul {
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.hero h1 {
font-size: 2.5rem;
}
.hero {
padding: 4rem 1rem;
}
.container {
padding: 1rem;
}
.products-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-card {
animation: fadeInUp 0.6s ease forwards;
}
.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }