/* Reset and Base Styles */\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: 'Actor', sans-serif;\n    font-size: 17px;\n    line-height: 1.65;\n    color: #333;\n    background-color: #fff;\n}\n\n.container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n/* Header */\n.site-header {\n    background: #fff;\n    box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 1000;\n}\n\n.site-header .container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 20px;\n}\n\n.site-branding {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n}\n\n.site-logo {\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    object-fit: cover;\n}\n\n.site-title h1 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n}\n\n.tagline {\n    font-size: 0.9rem;\n    color: #7f8c8d;\n    font-weight: 400;\n}\n\n.main-navigation .nav-menu {\n    display: flex;\n    list-style: none;\n    gap: 2rem;\n    align-items: center;\n}\n\n.main-navigation .nav-menu a {\n    text-decoration: none;\n    color: #2c3e50;\n    font-weight: 500;\n    transition: color 0.3s ease;\n    position: relative;\n}\n\n.main-navigation .nav-menu a:hover,\n.main-navigation .nav-menu a.active {\n    color: #3498db;\n}\n\n.main-navigation .nav-menu a.active::after {\n    content: '';\n    position: absolute;\n    bottom: -5px;\n    left: 0;\n    right: 0;\n    height: 2px;\n    background: #3498db;\n}\n\n.mobile-menu-toggle {\n    display: none;\n    flex-direction: column;\n    cursor: pointer;\n    gap: 4px;\n}\n\n.mobile-menu-toggle span {\n    width: 25px;\n    height: 3px;\n    background: #2c3e50;\n    transition: 0.3s;\n}\n\n/* Hero Section */\n.hero-section {\n    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n    padding: 120px 0 80px;\n    text-align: center;\n}\n\n.hero-content {\n    max-width: 800px;\n    margin: 0 auto;\n}\n\n.hero-title {\n    font-size: 3rem;\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 1rem;\n    line-height: 1.2;\n}\n\n.hero-subtitle {\n    font-size: 1.3rem;\n    color: #3498db;\n    margin-bottom: 1.5rem;\n    font-weight: 500;\n}\n\n.hero-description {\n    font-size: 1.1rem;\n    color: #6c757d;\n    margin-bottom: 2.5rem;\n    line-height: 1.6;\n}\n\n.hero-buttons {\n    display: flex;\n    gap: 1rem;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.btn {\n    display: inline-block;\n    padding: 12px 30px;\n    border-radius: 5px;\n    text-decoration: none;\n    font-weight: 500;\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n    cursor: pointer;\n    font-size: 1rem;\n}\n\n.btn-primary {\n    background: #3498db;\n    color: white;\n    border-color: #3498db;\n}\n\n.btn-primary:hover {\n    background: #2980b9;\n    border-color: #2980b9;\n    transform: translateY(-2px);\n}\n\n.btn-secondary {\n    background: transparent;\n    color: #3498db;\n    border-color: #3498db;\n}\n\n.btn-secondary:hover {\n    background: #3498db;\n    color: white;\n    transform: translateY(-2px);\n}\n\n/* Section Headers */\n.section-header {\n    text-align: center;\n    margin-bottom: 3rem;\n}\n\n.section-header h2 {\n    font-size: 2.5rem;\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 1rem;\n}\n\n.section-header p {\n    font-size: 1.1rem;\n    color: #6c757d;\n    max-width: 600px;\n    margin: 0 auto;\n}\n\n/* Services Section */\n.services-section {\n    padding: 80px 0;\n    background: #fff;\n}\n\n.services-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 2rem;\n}\n\n.service-card {\n    background: #fff;\n    padding: 2.5rem 2rem;\n    border-radius: 10px;\n    text-align: center;\n    box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n    transition: all 0.3s ease;\n    border: 1px solid #f8f9fa;\n}\n\n.service-card:hover {\n    transform: translateY(-10px);\n    box-shadow: 0 15px 40px rgba(0,0,0,0.15);\n}\n\n.service-icon {\n    width: 80px;\n    height: 80px;\n    margin: 0 auto 1.5rem;\n    background: linear-gradient(135deg, #3498db, #2980b9);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 2rem;\n}\n\n.service-card h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 1rem;\n}\n\n.service-card p {\n    color: #6c757d;\n    line-height: 1.6;\n}\n\n/* About Section */\n.about-section {\n    padding: 80px 0;\n    background: #f8f9fa;\n}\n\n.about-content {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 4rem;\n    align-items: center;\n}\n\n.about-text h2 {\n    font-size: 2.5rem;\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 1.5rem;\n}\n\n.about-text p {\n    color: #6c757d;\n    margin-bottom: 1.5rem;\n    line-height: 1.6;\n}\n\n.stats {\n    display: flex;\n    gap: 2rem;\n    margin-top: 2rem;\n}\n\n.stat {\n    text-align: center;\n}\n\n.stat h3 {\n    font-size: 2.5rem;\n    font-weight: 600;\n    color: #3498db;\n    margin-bottom: 0.5rem;\n}\n\n.stat p {\n    color: #6c757d;\n    font-size: 0.9rem;\n}\n\n.about-image img {\n    width: 100%;\n    border-radius: 10px;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n/* Products Section */\n.products-section {\n    padding: 80px 0;\n    background: #fff;\n}\n\n.products-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 1.5rem;\n}\n\n.product-card {\n    background: #f8f9fa;\n    padding: 2rem;\n    border-radius: 10px;\n    text-align: center;\n    transition: all 0.3s ease;\n    border: 1px solid #e9ecef;\n}\n\n.product-card:hover {\n    background: #fff;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n    transform: translateY(-5px);\n}\n\n.product-card h3 {\n    font-size: 1.3rem;\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 1rem;\n}\n\n.product-card p {\n    color: #6c757d;\n    line-height: 1.5;\n}\n\n/* Contact Section */\n.contact-section {\n    padding: 80px 0;\n    background: #f8f9fa;\n}\n\n.contact-content {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 4rem;\n}\n\n.contact-info h2 {\n    font-size: 2.5rem;\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 1rem;\n}\n\n.contact-info p {\n    color: #6c757d;\n    margin-bottom: 2rem;\n    line-height: 1.6;\n}\n\n.contact-details {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.contact-item {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n}\n\n.contact-item i {\n    width: 20px;\n    color: #3498db;\n}\n\n.contact-form {\n    background: #fff;\n    padding: 2.5rem;\n    border-radius: 10px;\n    box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n}\n\n.form-group {\n    margin-bottom: 1.5rem;\n}\n\n.form-group input,\n.form-group textarea {\n    width: 100%;\n    padding: 12px 15px;\n    border: 1px solid #e9ecef;\n    border-radius: 5px;\n    font-size: 1rem;\n    transition: border-color 0.3s ease;\n}\n\n.form-group input:focus,\n.form-group textarea:focus {\n    outline: none;\n    border-color: #3498db;\n}\n\n/* Footer */\n.site-footer {\n    background: #2c3e50;\n    color: #ecf0f1;\n    padding: 50px 0 20px;\n}\n\n.footer-content {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    margin-bottom: 2rem;\n}\n\n.footer-section h3,\n.footer-section h4 {\n    color: #fff;\n    margin-bottom: 1rem;\n}\n\n.footer-section p {\n    line-height: 1.6;\n    margin-bottom: 1rem;\n}\n\n.footer-section ul {\n    list-style: none;\n}\n\n.footer-section ul li {\n    margin-bottom: 0.5rem;\n}\n\n.footer-section ul li a {\n    color: #bdc3c7;\n    text-decoration: none;\n    transition: color 0.3s ease;\n}\n\n.footer-section ul li a:hover {\n    color: #3498db;\n}\n\n.footer-bottom {\n    border-top: 1px solid #34495e;\n    padding-top: 20px;\n    text-align: center;\n    color: #bdc3c7;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    .mobile-menu-toggle {\n        display: flex;\n    }\n    \n    .main-navigation .nav-menu {\n        display: none;\n    }\n    \n    .hero-title {\n        font-size: 2rem;\n    }\n    \n    .hero-buttons {\n        flex-direction: column;\n        align-items: center;\n    }\n    \n    .about-content,\n    .contact-content {\n        grid-template-columns: 1fr;\n        gap: 2rem;\n    }\n    \n    .stats {\n        justify-content: center;\n    }\n    \n    .section-header h2 {\n        font-size: 2rem;\n    }\n    \n    .services-grid,\n    .products-grid {\n        grid-template-columns: 1fr;\n    }\n}


/* Marketing Section */
.marketing-section {
    padding: 80px 0;
    background: #fff;
}

.marketing-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.marketing-track {
    display: flex;
    transition: transform 0.5s ease;
}

.marketing-item {
    min-width: 100%;
    position: relative;
}

.marketing-item img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.marketing-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.marketing-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #bdc3c7;
    cursor: pointer;
    transition: all 0.3s ease;
}

.marketing-dot.active {
    background: #3498db;
    transform: scale(1.2);
}


/* Promotions Section */
.promotions-section {
    padding: 80px 0;
    background: #fff;
}

.promo-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.promo-track {
    display: flex;
    transition: transform 0.5s ease;
}

.promo-item {
    min-width: 100%;
    position: relative;
}

.promo-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.promo-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 2rem;
}

.promo-content h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.promo-content p {
    font-size: 1rem;
}

.promo-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.promo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #bdc3c7;
    cursor: pointer;
    transition: all 0.3s ease;
}

.promo-dot.active {
    background: #3498db;
    transform: scale(1.2);
}


/* Partners Section */
.partners-section {
    padding: 80px 0;
    background: #f8f9fa;
    overflow: hidden;
}

.partners-slider {
    margin-top: 3rem;
    overflow: hidden;
    position: relative;
}

.partners-track {
    display: flex;
    animation: scroll 30s linear infinite;
    gap: 3rem;
}

.partner-logo {
    flex-shrink: 0;
    width: 150px;
    height: 80px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    color: #2c3e50;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    padding: 10px;
}

.partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.partner-logo:hover {
    transform: translateY(-5px);
    border-color: #3498db;
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.2);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}