.hero-banner { background-size: cover; background-position: center; min-height: 500px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; position: relative; }
.hero-banner::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 0; }
.hero-banner .hero-container { position: relative; z-index: 1; padding: 80px 20px; animation: fadeInHero 1.5s ease-in-out; }
.hero-container h1 { font-size: 64px; margin-bottom: 20px; }
.hero-container p { font-size: 24px; margin-bottom: 30px; }
.it-services { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 40px 0; }
.it-service { background: #1e1e1e; padding: 20px; border-radius: 10px; width: 260px; text-align: center; color: white; transition: transform 0.3s ease; }
.it-service:hover { transform: scale(1.05); }
.it-service i { font-size: 50px; margin-bottom: 15px; color: #5bc0de; transition: transform 0.3s ease; }
.it-service:hover i { transform: scale(1.2) rotate(5deg); }
.cta-section-it { background: linear-gradient(135deg, #007bff, #0056b3); padding: 60px 20px; text-align: center; color: white; }
.cta-section-it a { background: white; color: #007bff; padding: 15px 30px; border-radius: 30px; text-decoration: none; font-size: 18px; transition: background 0.3s, color 0.3s; }
.cta-section-it a:hover { background: #f0f0f0; color: #0056b3; }


.hero-banner a.btn-remote {
    background: white;
    color: #007bff;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 18px;
    transition: background 0.3s, color 0.3s;
}

.hero-banner a.btn-remote:hover {
    background: #f0f0f0;
    color: #0056b3;
}



@keyframes fadeInHero {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-banner .hero-container {
    animation: fadeInHero 1.5s ease-in-out;
}

.it-advantages { margin: 60px 0; text-align: center; }
.it-advantages h2 { font-size: 32px; margin-bottom: 30px; color: #fff; }
.it-advantages-list { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.advantage { background: #1e1e1e; padding: 20px; border-radius: 10px; width: 260px; color: white; transition: transform 0.3s ease; }
.advantage:hover { transform: scale(1.05); }
.advantage i { font-size: 50px; margin-bottom: 15px; color: #5bc0de; transition: transform 0.3s ease; }
.advantage:hover i { transform: scale(1.2) rotate(5deg); }


@media (max-width: 768px) {
    .it-services, .it-advantages-list {
        flex-direction: column;
        align-items: center;
    }
    .it-service, .advantage {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .hero-container h1 {
        font-size: 40px;
    }
    .hero-container p {
        font-size: 18px;
    }
}