@tailwind base;
@tailwind components;
@tailwind utilities;

/* small custom reset/overrides for hero text readability */
html, body {
    height: 100%;
}

/* ensure the hero overlay blends well on some images */
.bg-gradient-to-b {
    /* nothing here - Tailwind utility used, but keep this file for future overrides */
}

:root {
    --primary: #083a46;
    --accent: #00a7d6;
}
/* ------------------------------
   ABOUT SECTION CUSTOM STYLES
   ------------------------------ */

/* spacing below hero */
#about {
    padding-top: 3rem;
}

/* smaller devices */
@media (max-width: 768px) {
    #about {
        padding-top: 2rem;
    }
}

/* about image hover and animation overrides (optional) */
.img-card img {
    transition: transform 450ms cubic-bezier(.2,.9,.3,1), box-shadow 300ms;
}

.img-card:hover img {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 22px 44px rgba(8, 58, 102, 0.12);
}
.section {
    scroll-margin-top: 0;
}
/* change 64px if your header height differs */
a.nav-link {
    transition: color .15s ease;
}

/* Per-section gap under the fixed navbar (adjust values as needed) */
#about {
    scroll-margin-top: 28px;
}
/* a little gap for About */
#services {
    scroll-margin-top: 16px;
}
/* smaller gap for Services */
#products {
    scroll-margin-top: 16px;
}
/* smaller gap for Products */

/* Responsive: reduce gap on smaller screens */
@media (max-width: 768px) {
    #about {
        scroll-margin-top: 18px;
    }

    #services {
        scroll-margin-top: 12px;
    }

    #products {
        scroll-margin-top: 10px;
    }
}