/* -------------------------------------------------------------------------
   BASE STYLES & UTILITIES
   ------------------------------------------------------------------------- */

:root {
  /* Define CSS variables based on Tailwind config for use in pure CSS */
  --primary-blue: #00204a;
  --secondary-teal: #00c38c;
  --dark-navy: #001a35;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    /* Prevent horizontal scroll on mobile due to potential offsets */
    overflow-x: hidden; 
}

/* Custom Gradient Background for Hero Section */
.gradient-bg {
    /* Deeper, more sophisticated blue-to-teal gradient using the defined variables */
    background: linear-gradient(145deg, var(--primary-blue) 10%, var(--dark-navy) 60%, var(--secondary-teal) 100%);
}

/* -------------------------------------------------------------------------
   NAVIGATION & MOBILE MENU
   ------------------------------------------------------------------------- */

/* Style for the Mobile Menu Overlay */
#mobile-menu {
    /* Use CSS transition for smooth slide-in/slide-out effect */
    transition: transform 0.4s ease-in-out;
}

/* -------------------------------------------------------------------------
   SERVICE CARD ENHANCEMENTS (Custom Hover Effects)
   ------------------------------------------------------------------------- */

.service-card {
    /* Initial state for smooth animation */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    
    /* Center icons and text within the card */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service-card:hover {
    /* Lift effect: move up slightly */
    transform: translateY(-10px);
    /* Stronger, professional shadow */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    /* Highlight the bottom border with the secondary color */
    border-color: var(--secondary-teal);
}

/* Style the icon container within the service card */
.service-card > div:first-child {
    /* Give the icon background a subtle circle effect */
    background-color: rgba(0, 195, 140, 0.1); /* secondary-teal with opacity */
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 1rem;
    transition: background-color 0.3s ease;
}

.service-card:hover > div:first-child {
    /* Darken the icon background on hover */
    background-color: rgba(0, 195, 140, 0.2); 
}

/* -------------------------------------------------------------------------
   SCROLL-TO-TOP BUTTON
   ------------------------------------------------------------------------- */

#scroll-to-top {
    /* Ensure the button stays fixed on top of everything */
    z-index: 1000;
}