/* Import the Google Font */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* Basic Reset and Body Styling */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Lato', sans-serif;
    color: #333;
    overflow: hidden; 
}

/* === NEW: Animated Gradient Background === */
body {
    background: linear-gradient(-45deg, #023047, #005f73, #2a9d8f, #023e8a);
    background-size: 400% 400%;
    animation: animatedGradient 15s ease infinite;

    /* Flexbox for centering the container */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === NEW: The Keyframe Animation for the Gradient === */
@keyframes animatedGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* The main content box with a new "frosted glass" effect */
.container {
    text-align: center;
    /* NEW: Semi-transparent white for a modern feel */
    background-color: rgba(255, 255, 255, 0.452);
    /* NEW: This blurs the background behind the container (supported in modern browsers) */
    backdrop-filter: blur(10px);
    
    padding: 40px 60px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 700px;
    position: relative;
    z-index: 1;
}

/* --- The rest of the CSS is the same as before --- */

h1 { font-size: 2.5rem; color: #0a3a4a; margin-bottom: 20px; height: 140px; }
@media screen and (min-width: 768px) { h1 { height: 60px; } .container {background-color: rgba(255, 255, 255, 0.582);}}
.typed-cursor { color: #005f73; font-size: 2.5rem; animation: blink 0.7s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.subtitle { font-size: 1.2rem; color: #555; font-weight: 300; margin: 30px 0 30px 0; }
.services-teaser { margin-bottom: 30px; }
.icon-row { display: flex; justify-content: center; gap: 40px; font-size: 2.5rem; color: #005f73; margin-bottom: 20px; }
.services-teaser h3 { font-size: 1.1rem; color: #333; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }
.services-teaser ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 30px; }
.services-teaser li { font-size: 1rem; color: #555; }
hr { border: 0; height: 1px; background: #e0e0e0; margin: 30px 0; }
.contact { font-size: 1rem; color: #444; }
.contact a { color: #005f73; text-decoration: none; font-weight: bold; }
.contact a:hover { text-decoration: underline; }