:root {
    --dark-blue: #001a2c;
    --cyan: #00c2cb;
    --emerald: #10b981;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bg-dark-blue {
    background-color: var(--dark-blue);
}

.text-cyan {
    color: var(--cyan);
}

.hero-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #001E3C 0%, #052c1a 100%);
    /* Adding your requested gradient texture */
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 194, 203, 0.4) 0%, transparent 50%), 
        radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #001a2c 0%, #052c1a 100%);
}

.btn-cyan {
    background-color: var(--cyan);
    color: var(--dark-blue);
    border: none;
}

.btn-cyan:hover {
    background-color: #00e5f0;
    color: var(--dark-blue);
}

.divider {
    height: 3px;
    width: 60px;
    background-color: var(--emerald);
}

.service-card {
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

.icon-box {
    font-size: 3rem;
}