@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

.gradient-bg {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.gradient-bg-mc {
    background: linear-gradient(135deg, #0fad64 0%, #00ff95 100%);
}

.gradient-bg-wp {
    background: linear-gradient(135deg, #6f01ff 0%, #ff03b3 100%);
}

.gradient-bg-wt {
    background: linear-gradient(135deg, #d501ff 0%, #ff039e 100%);
}

.gradient-bg-sm {
    background: linear-gradient(135deg, #01ffff 0%, #3103ff 100%);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
}

.service-card-vm:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px #38bdf880;
}

.service-card-wt:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px #d946ef80;
}

.service-card-wp:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px #9340ee80;
}

.service-card-mc:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px #22c55e80;
}

.service-icon {
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
}

.nav-link, .nav-link-mc, .nav-link-wp, .nav-link-wt, .nav-link-sm {
    position: relative;
}

.nav-link::after, .nav-link-mc::after, .nav-link-wp::after, .nav-link-wt::after, .nav-link-sm::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    background-color: #3b82f6;
}

.nav-link-mc::after {
    background-color: #0fad64;
}

.nav-link-wp::after {
    background-color: #9810fa;
}

.nav-link-wt::after {
    background-color: #e12afb;
}

.nav-link-sm::after {
    background-color: #00bcff;
}

.nav-link:hover::after, .nav-link-mc:hover::after, .nav-link-wp:hover::after, .nav-link-wt:hover::after, .nav-link-sm:hover::after {
    width: 100%;
}

.active::after {
    width: 100%;
}

.scroll-top {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.scroll-top.show {
    visibility: visible;
    opacity: 1;
}