/* ===============================
   THEME VARIABLES
================================ */
:root {
    --dark: #073852;
    --blue: #0077B6;
    --green: #2ECC71;
    --light-bg: #F4F8FA;
    --dark-bg-footer: #042738;

    --transition: 0.3s ease;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.75rem;
}

/* ===============================
   GLOBAL RESET
================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===============================
   BASE STYLES
================================ */
body {
    font-family: 'Inter', sans-serif;
    background: var(--light-bg);
    color: var(--dark);
    line-height: 1.7;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    display: block;
    content-visibility: auto;
}

a {
    text-decoration: none;
    transition: color var(--transition),
                background var(--transition),
                transform var(--transition);
}

/* ===============================
   UTILITY CLASSES
================================ */
.text-dark { color: var(--dark); }
.text-blue { color: var(--blue); }
.text-green { color: var(--green); }

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

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
   STICKY HEADER
================================ */
.header-sticky {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* ===============================
   NAVIGATION PILLS
================================ */
.nav-pill {
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    color: var(--dark);
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(12px);
    transition: all var(--transition);
}

.nav-pill:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,119,182,0.35);
}

/* ===============================
   DROPDOWN MENU
================================ */
.dropdown-box {
    position: absolute;
    top: 110%;
    left: 0;
    width: 240px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 10px 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
    animation: fadeDown 0.25s ease-out;
    z-index: 50;
}

.dropdown-link {
    display: block;
    padding: 12px 22px;
    color: var(--dark);
}

.dropdown-link:hover {
    background: var(--blue);
    color: #fff;
}

/* ===============================
   MOBILE NAVIGATION
================================ */
.mobile-pill {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(240,248,255,0.8);
    color: var(--dark);
}

.mobile-pill:hover {
    background: var(--blue);
    color: #fff;
}

.mobile-sub {
    padding: 8px 0;
}

.mobile-sub:hover {
    color: var(--blue);
}

/* ===============================
   HERO SECTION
================================ */
#services-hero {
    background: linear-gradient(135deg, var(--dark), #001f3f);
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
    padding: 8rem 0 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#services-hero::before {
    content: '';
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(circle at 100% 100%, rgba(46,204,113,0.12), transparent 55%),
        radial-gradient(circle at 0 0, rgba(0,119,182,0.12), transparent 55%);
    animation: pulse-bg 22s infinite alternate;
}
/* Parallax Effect on Background */
    .parallax-bg {
        transform: translateZ(0);
        will-change: transform;
    }
    @media (min-width: 768px) {
        .parallax-bg {
            transform: scale(1.1);
            transition: transform 0.1s ease-out;
        }
    }

    /* Floating Animation for Orbs */
    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-30px) rotate(5deg); }
    }
    .animate-float {
        animation: float 18s ease-in-out infinite;
    }
    .delay-0 { animation-delay: 0s; }
    .delay-1000 { animation-delay: 1s; }
    .delay-2000 { animation-delay: 2s; }

    /* Fade & Slide Animations */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in { opacity: 0; animation: fadeInUp 1s ease-out forwards; }
    .animate-fade-up { opacity: 0; animation: fadeInUp 1.2s ease-out forwards; }

    .delay-200 { animation-delay: 0.2s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-600 { animation-delay: 0.6s; }
    .delay-800 { animation-delay: 0.8s; }
    .delay-1000 { animation-delay: 1s; }

    /* Trigger animations on load */
    #services-hero * {
        animation-play-state: running !important;
    }
/* ===============================
   FEATURE CARDS
================================ */
.feature-card {
    background: #fff;
    padding: 1.6rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.14);
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(0, 119, 182, 0.08),
        transparent
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.feature-card:hover::before {
    transform: translateX(100%);
}

/* ===============================
   SERVICE IMAGE
================================ */
.service-img-placeholder {
    width: 100%;
    height: 260px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 18px 38px rgba(0,0,0,0.18);
    perspective: 1200px;
}

.service-img-placeholder i {
    position: absolute;
    font-size: 7rem;
    opacity: 0.25;
    z-index: 1;
}

.service-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform 0.8s ease;
    z-index: 2;
    backface-visibility: hidden;
}

.service-img-placeholder:hover img {
    transform: scale(1.1) rotateZ(0.5deg);
}

/* ===============================
   RESPONSIVE IMAGE HEIGHTS
================================ */
@media (min-width: 640px) {
    .service-img-placeholder { height: 340px; }
}

@media (min-width: 1024px) {
    .service-img-placeholder { height: 440px; }
}

@media (min-width: 1280px) {
    .service-img-placeholder { height: 520px; }
}


/* Footer links underline slide */
.footer-bg a {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.footer-bg a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    transition: width 0.35s ease;
}

.footer-bg a:hover::after {
    width: 100%;
}

/* Footer list item lift */
.footer-bg li {
    transition: transform 0.3s ease;
}

.footer-bg li:hover {
    transform: translateX(6px);
}

/* Footer headings glow */
.footer-bg h3,
.footer-bg h4 {
    position: relative;
    display: inline-block;
}

.footer-bg h3::after,
.footer-bg h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    transition: width 0.4s ease;
}

.footer-bg h3:hover::after,
.footer-bg h4:hover::after {
    width: 100%;
}

/* Footer divider animation */
.footer-bg hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffffff55, transparent);
    transition: opacity 0.4s ease;
}

.footer-bg:hover hr {
    opacity: 0.8;
}

/* Footer bottom text subtle hover */
.footer-bg small {
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-bg small:hover {
    color: var(--green);
    transform: translateY(-2px);
}