/* Custom styles that complement Tailwind — these are applied via inline styles in index.html where needed,
   but this file provides any additional utility classes and component styles. */

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background: rgba(45, 179, 130, 0.3);
    color: #0A1628;
}

/* Focus styles */
a:focus-visible, button:focus-visible {
    outline: 2px solid #2DB382;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0A1628;
}
::-webkit-scrollbar-thumb {
    background: #1E3D66;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2DB382;
}

/* Service card icon container */
.service-card > div:first-child {
    transition: transform 0.3s ease;
}
.service-card:hover > div:first-child {
    transform: scale(1.08);
}

/* Image hover zoom */
.service-card img,
#about img {
    transition: transform 0.4s ease;
}

/* Counter animation */
.counter-num {
    display: inline-block;
}

/* Navbar active state */
.nav-scrolled {
    background: rgba(10, 22, 40, 0.97) !important;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
}

/* Mobile menu animation */
.mobile-menu {
    will-change: transform;
}

/* Ensure all links are readable */
a {
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Print styles */
@media print {
    nav, .cta-stripe, #contact iframe {
        display: none;
    }
    body {
        color: #000;
        background: #fff;
    }
}