/* Reset e Base */
* { margin: 0; padding: 0; box-box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: #121212; color: #ffffff; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
header { background-color: #1a1a1a; padding: 20px 0; border-bottom: 1px solid #333; }
header .container { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 50px; }
nav ul { list-style: none; display: flex; gap: 20px; }
nav ul li a { color: #ffffff; text-decoration: none; font-weight: 700; transition: color 0.3s; }
nav ul li a:hover { color: #007bff; }

/* Hero Section */
.hero { padding: 100px 0; text-align: center; background: linear-gradient(rgba(18, 18, 18, 0.8), rgba(18, 18, 18, 0.8)), url('../img/hero-bg.jpg') no-repeat center center/cover; }
.hero h1 { font-size: 3rem; margin-bottom: 20px; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; color: #ccc; }
.text-blue { color: #007bff; }
.btn { background-color: #007bff; color: #ffffff; padding: 15px 30px; text-decoration: none; font-weight: 700; border-radius: 5px; transition: background 0.3s; }
.btn:hover { background-color: #0056b3; }

/* About Section */
.about { padding: 80px 0; background-color: #121212; }
.about-text p { font-size: 1.1rem; color: #ccc; margin-bottom: 20px; max-width: 800px; }
.about-text strong { color: #007bff; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-top: 60px; text-align: center; }
.stat-item { padding: 20px; transition: transform 0.3s; }
.stat-item:hover { transform: translateY(-5px); }
.stat-icon { font-size: 2.5rem; color: #333; margin-bottom: 15px; }
.stat-number { font-size: 3rem; font-weight: 700; color: #007bff; line-height: 1; margin-bottom: 10px; }
.stat-label { font-size: 1.1rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }

/* Services Section */
.services { padding: 80px 0; background-color: #1a1a1a; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 50px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card { background-color: #222; padding: 40px; border-radius: 15px; text-align: center; border: 1px solid #333; transition: all 0.3s ease; }
.card:hover { transform: translateY(-10px); border-color: #007bff; box-shadow: 0 10px 30px rgba(0, 123, 255, 0.1); }
.card-icon { font-size: 3rem; margin-bottom: 20px; display: block; }
.card h3 { margin-bottom: 15px; font-size: 1.5rem; color: #ffffff; }
.card p { color: #aaa; font-size: 0.95rem; }
.text-blue { color: #007bff; }

/* Contact Section */
.contact { padding: 80px 0; background-color: #121212; }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-info h3 { font-size: 2rem; margin-bottom: 20px; }
.contact-list { list-style: none; margin-top: 30px; }
.contact-list li { margin-bottom: 15px; font-size: 1.1rem; color: #ccc; }
.contact-form { background-color: #222; padding: 40px; border-radius: 15px; border: 1px solid #333; }
.form-group { margin-bottom: 20px; }
.form-group input, .form-group textarea { width: 100%; padding: 15px; background-color: #1a1a1a; border: 1px solid #333; border-radius: 5px; color: #fff; font-family: inherit; }
.form-group input:focus, .form-group textarea:focus { border-color: #007bff; outline: none; }
.g-recaptcha { margin-bottom: 20px; }

/* Footer */
footer { padding: 40px 0; text-align: center; background-color: #121212; border-top: 1px solid #333; color: #888; }

/* Media Queries per Mobile */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    header .container {
        flex-direction: column;
        gap: 20px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
}