@import url("https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300,400|Pacifico");

/* Typography & Theme */
body {
    font-family: Montserrat;
}

/* Make all headers green */
h1, h2, h3, h4, h5, h6,
.text-gray-900[class*="font-bold"],
.text-gray-900[class*="font-semibold"],
.text-gray-900[class*="font-medium"],
h1.text-gray-900,
h2.text-gray-900,
h3.text-gray-900,
h4.text-gray-900,
h5.text-gray-900,
h6.text-gray-900 {
    color: #16a34a !important; /* green-600 - brighter, happier green */
}

/* Portal-specific: Make all headers green */
.bg-gray-50 h1,
.bg-gray-50 h2,
.bg-gray-50 h3,
.bg-gray-50 h4,
.bg-gray-50 h5,
.bg-gray-50 h6,
.bg-gray-50 .text-gray-900,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main .text-gray-900,
.portal_base h1,
.portal_base h2,
.portal_base h3,
.portal_base h4,
.portal_base h5,
.portal_base h6,
[class*="portal"] h1,
[class*="portal"] h2,
[class*="portal"] h3,
[class*="portal"] h4,
[class*="portal"] h5,
[class*="portal"] h6 {
    color: #16a34a !important; /* green-600 - brighter, happier green */
}

/* Convert grey text colors to simplified aqua/teal shades */
.text-gray-900:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.text-gray-800,
.text-gray-700,
.text-gray-600 {
    color: #0d9488 !important; /* teal-700 - dark aqua for body text (one shade darker) */
}
.text-gray-500,
.text-gray-400 {
    color: #14b8a6 !important; /* teal-600 - medium aqua */
}
.text-gray-300,
.text-gray-200 {
    color: #2dd4bf !important; /* teal-500 - lighter aqua */
}
.text-gray-100 {
    color: #5eead4 !important; /* teal-400 - light aqua */
}

/* Make all tab links the same darker color - underline shows selection */
nav a.text-gray-500,
nav a[class*="text-gray-500"],
nav a.text-gray-500:hover,
nav a[class*="text-gray-500"]:hover,
nav a[class*="hover:text-gray-700"],
nav a.text-teal-600,
nav a[class*="text-teal-600"] {
    color: #0d9488 !important; /* dark aqua for all tabs - underline shows selection (one shade darker) */
}

/* Portal-specific: Override grey text colors with simplified aqua/teal shades */
.bg-gray-50 .text-gray-900:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
main .text-gray-900:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.bg-gray-50 .text-gray-800,
main .text-gray-800,
.bg-gray-50 .text-gray-700,
main .text-gray-700,
.bg-gray-50 .text-gray-600,
main .text-gray-600 {
    color: #0d9488 !important; /* teal-700 - dark aqua for body text (one shade darker) */
}
.bg-gray-50 .text-gray-500,
main .text-gray-500,
.bg-gray-50 .text-gray-400,
main .text-gray-400 {
    color: #14b8a6 !important; /* teal-600 - medium aqua */
}
.bg-gray-50 .text-gray-300,
main .text-gray-300,
.bg-gray-50 .text-gray-200,
main .text-gray-200 {
    color: #2dd4bf !important; /* teal-500 - lighter aqua */
}
.bg-gray-50 .text-gray-100,
main .text-gray-100 {
    color: #5eead4 !important; /* teal-400 - light aqua */
}

/* Make all portal tab links the same darker color - underline shows selection */
.bg-gray-50 nav a.text-gray-500,
main nav a.text-gray-500,
.bg-gray-50 nav a[class*="text-gray-500"],
main nav a[class*="text-gray-500"],
.bg-gray-50 nav a.text-gray-500:hover,
main nav a.text-gray-500:hover,
.bg-gray-50 nav a[class*="text-gray-500"]:hover,
main nav a[class*="text-gray-500"]:hover,
.bg-gray-50 nav a.text-teal-600,
main nav a.text-teal-600,
.bg-gray-50 nav a[class*="text-teal-600"],
main nav a[class*="text-teal-600"] {
    color: #0d9488 !important; /* dark aqua for all tabs - underline shows selection (one shade darker) */
}

/* Brand Colors & Gradients (main site defaults) */
.bg-forest-500 { background-color: #0D5C14; }
.bg-forest-600 { background-color: #083F0E; }
.text-forest-500 { color: #0D5C14; }
.text-forest-400 { color: #1A8C22; }
.border-forest-400 { border-color: #1A8C22; }
.bg-forest-gradient { background-image: linear-gradient(to right, #0c5d75, #1a8c22); }

/* General UI */
.secondary-nav { transition: transform 0.1s ease-in-out; }
.secondary-nav-hidden { transform: translateY(-100%); }

/* Marquee Styles */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    background-color: #dbeafe;
    padding: 1rem 0;
}
.marquee-content {
    display: inline-flex;
    animation: marquee 20s linear infinite;
    will-change: transform;
}
.marquee-content img {
    height: 4rem;
    width: auto;
    margin: 0 2rem;
    object-fit: contain;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}
.marquee-content img:hover { filter: grayscale(0%); }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee:hover .marquee-content { animation-play-state: paused; }

/* Mobile: Reduce marquee to 1/2 size */
@media (max-width: 768px) {
    .marquee {
        padding: 0.5rem 0 !important; /* Reduced from 1rem (1/2 of original) */
    }
    .marquee-content img {
        height: 2rem !important; /* Reduced from 4rem (1/2 of original) */
        margin: 0 1rem !important; /* Reduced from 2rem (1/2 of original) */
    }
}

/* Reviews */
.review-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(13, 92, 20, 0.2);
}
.review-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 6px 20px rgba(13, 92, 20, 0.3);
}
.review-quote { font-style: italic; color: #22A02A; }
.review-author { color: #34C84A; font-weight: 600; }
.review-company { color: #34C84A; }

/* Case Study Cards */
.case-study-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-study-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.case-study-title { color: #16a34a; font-weight: 600; }
.case-study-description { color: #34C84A; }
.case-study-client { color: #34C84A; font-weight: 600; }
.case-study-tech { color: #34C84A; font-size: 0.875rem; }

/* Services (shared default) */
.service-section {
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 300px;
}
.service-container { max-width: 800px; margin: 0 auto; }
.service-title { color: #16a34a; font-weight: 600; }
.service-description { color: #2563eb; margin-top: 1rem; }

/* Get In Touch Section */
.get-in-touch {
    background-color: #f8f9fa;
    padding: 4rem 0;
    text-align: center;
    min-height: 300px;
}
.get-in-touch h2 { color: #16a34a; }
.get-in-touch p { color: #34C84A; }
.get-in-touch a {
    display: inline-block;
    background-color: #0D5C14;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
}
.get-in-touch a:hover { background-color: #083F0E; }
.get-in-touch a:focus {
    outline: 2px solid #1A8C22;
    outline-offset: 2px;
}

.get-in-touch a.button-secondary {
    background-color: #e5e7eb !important;
    color: #1e40af !important;
    border: 1px solid #60a5fa !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
}
.get-in-touch a.button-secondary:hover,
.get-in-touch a.button-secondary:focus {
    background-color: #dbeafe !important;
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* BUTTON VARIANTS: Use These for Consistency */
.button-secondary {
    background-color: #e5e7eb;
    color: #1e40af;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid #60a5fa;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}
.button-secondary:hover,
.button-secondary:focus {
    background-color: #dbeafe;
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* --- SERVICES PAGE OVERRIDES (these win on this page) --- */
.bg-forest-500 { background-color: #0A3C0F; }     /* Overridden green */
.bg-forest-600 { background-color: #062B09; }
.text-forest-500 { color: #0A3C0F; }
.text-forest-400 { color: #166B1B; }
.border-forest-400 { border-color: #166B1B; }
.bg-forest-gradient { background-image: linear-gradient(to right, #1e3a8a, #0A3C0F); }

/* Service Section Styles (if you want to fine-tune just for this page) */
.service-section {
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 300px;
}
.service-container { max-width: 800px; margin: 0 auto; }
.service-title { color: #16a34a; font-weight: 600; }
.service-description { color: #34C84A; margin-top: 1rem; }

/* Service card text colors on white/light backgrounds */
.service-card-carbon h3,
.service-card-carbon .text-gray-100 {
    color: #16a34a !important;
}

.service-card-carbon p,
.service-card-carbon .text-gray-400 {
    color: #34C84A !important;
}

/* Hide secondary descriptions in "What we do" section */
#services .service-card-carbon p.text-gray-400,
#services .service-card-carbon p.mt-2,
#ai-integration p,
#bi-development p,
#cloud-solutions p,
#data-modeling p {
    display: none !important;
}

/* Form styles */
.contact-form {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-form:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-label {
    color: #16a34a;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.75rem;
    color: #16a34a;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    border-color: #1A8C22;
    outline: none;
}

.form-checkbox {
    margin-right: 0.5rem;
}

.form-checkbox-label {
    color: #34C84A;
}

.form-submit {
    background-color: #0D5C14;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.form-submit:hover {
    background-color: #083F0E;
}

.form-submit:focus {
    outline: 2px solid #1A8C22;
    outline-offset: 2px;
}

[x-cloak] { display: none !important; }



#stars-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.twinkle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 9999px;
  opacity: 0.8;
  animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.6);
  }
}

.get-access-button {
  display: inline-block;
  background-color: #166534; /* match your bg-forest-500 */
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem; /* matches rounded-md */
  box-shadow: 0 0 0 2px #facc15, 0 0 8px 2px rgba(250, 204, 21, 0.75); /* yellow ring + glow */
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.get-access-button:hover {
  background-color: #14532d; /* match hover:bg-forest-600 */
  box-shadow: 0 0 0 2px #facc15, 0 0 14px 4px rgba(250, 204, 21, 0.9); /* brighter glow */
}

/* Social Login Buttons */
.social-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  background-color: #ffffff;
  color: #1e40af;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-login-button svg {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.75rem;
}

.social-login-button {
  white-space: nowrap;
}

.social-login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  background-color: #f9fafb;
}

.social-login-button svg {
  flex-shrink: 0;
}

.google-login {
  background-color: #ffffff;
}

.apple-login {
  background-color: #ffffff;
  color: #1e40af;
}

.apple-login:hover {
  background-color: #f9fafb;
  color: #1e40af;
}

/* Buttons on gradient backgrounds - glass effect */
.bg-forest-gradient .social-login-button {
  background-color: rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  color: #ffffff !important;
}

.bg-forest-gradient .social-login-button:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}   

/* ============================================
   HIDE NAVIGATION LINKS BUT KEEP LOGO
   Updated: 2026-01-05 - Hide nav links but show logo
   ============================================ */
/* Hide navigation links div in top nav but keep logo visible */
nav.fixed.top-0.z-20.service-card-carbon2 > div > div > div:last-child,
nav.fixed.top-0.service-card-carbon2 > div > div > div:last-child,
nav[class*="bg-\[#0C0C1E\]"].service-card-carbon2 > div > div > div:last-child,
nav.service-card-carbon2[style*="--cf-url"] > div > div > div:last-child {
    display: none !important;
}

/* Keep top nav visible for logo with gradient background */
nav.fixed.top-0.z-20.service-card-carbon2,
nav.fixed.top-0.service-card-carbon2,
nav[class*="bg-\[#0C0C1E\]"].service-card-carbon2,
nav.service-card-carbon2[style*="--cf-url"] {
    background: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-image: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove overlay pattern from top nav */
nav.fixed.top-0.z-20.service-card-carbon2::before,
nav.fixed.top-0.service-card-carbon2::before,
nav[class*="bg-\[#0C0C1E\]"].service-card-carbon2::before,
nav.service-card-carbon2[style*="--cf-url"]::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background-image: none !important;
    content: none !important;
    pointer-events: none !important;
}

/* Hide Secondary Navigation Bar completely (Articles, Videos, etc.) */
nav.fixed.top-12.z-10.service-card-carbon2,
nav.fixed.top-12.service-card-carbon2,
nav.secondary-nav.service-card-carbon2,
nav.bg-gray-900.service-card-carbon2 {
    display: none !important;
    visibility: hidden !important;
}

/* Hero section - seamless gradient ONLY, preserve all original padding */
section.bg-forest-gradient,
.bg-forest-gradient,
section#home.bg-forest-gradient {
    background: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-image: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    /* Only change background - preserve all padding/margin from template */
}

/* Ensure white text on gradient backgrounds */
.bg-forest-gradient h1,
.bg-forest-gradient h2,
.bg-forest-gradient h3,
.bg-forest-gradient .text-white,
.get-in-touch h2 {
    color: #ffffff !important;
}

/* Remove overlay pattern from top nav */
nav.fixed.top-0.z-20.service-card-carbon2::before,
nav.fixed.top-0.service-card-carbon2::before,
nav[class*="bg-\[#0C0C1E\]"].service-card-carbon2::before,
nav.service-card-carbon2[style*="--cf-url"]::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background-image: none !important;
    content: none !important;
    pointer-events: none !important;
}

/* Secondary Navigation Bar - seamless gradient, no borders */
nav.fixed.top-12.z-10.service-card-carbon2,
nav.fixed.top-12.service-card-carbon2,
nav.secondary-nav.service-card-carbon2,
nav.bg-gray-900.service-card-carbon2 {
    background: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-image: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Remove overlay pattern from secondary nav */
nav.fixed.top-12.z-10.service-card-carbon2::before,
nav.fixed.top-12.service-card-carbon2::before,
nav.secondary-nav.service-card-carbon2::before,
nav.bg-gray-900.service-card-carbon2::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background-image: none !important;
    content: none !important;
    pointer-events: none !important;
}

/* Hero section - seamless gradient ONLY, preserve all original padding/margins */
section.bg-forest-gradient,
.bg-forest-gradient {
    background: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-image: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    /* Only change background - preserve all padding/margin from template */
}

/* Legacy header/toolbar classes (if still used) */
div.header,
.header {
    border-top: 5px solid #d4ac39 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100px !important;
    background: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-image: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-color: transparent !important;
}

div.toolbar,
.toolbar {
    border-bottom: 5px solid #d4ac39 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-image: linear-gradient(to right, #0c5d75, #1a8c22) !important;
    background-color: transparent !important;
    padding: 10px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.toolbar button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #e5e7eb;
    color: #1e40af;
    border: 1px solid #60a5fa;
    cursor: pointer;
    transition: background-color 0.3s;
}

.toolbar button:hover {
    background-color: #dbeafe;
}

@media (max-width: 800px) {
    .toolbar {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .toolbar button {
        font-size: 14px;
        padding: 8px;
    }
}

.service-card-carbon {
    position: relative;
    background-color: #ffffff; /* light base */
    border-radius: 0.5rem;
    padding: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card-carbon:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Green shadows for review cards */
.reviewcard,
#reviews .service-card-carbon {
    box-shadow: 0 4px 12px rgba(13, 92, 20, 0.2) !important;
}

.reviewcard:hover,
#reviews .service-card-carbon:hover {
    box-shadow: 0 6px 20px rgba(13, 92, 20, 0.3) !important;
}

.service-card-carbon::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--cf-url);
    background-size: 120px;
    background-repeat: repeat;
    opacity: var(--cf-opacity, 0.15);
    z-index: 0;
    pointer-events: none;
}

/* Remove pattern overlay from review cards */
.reviewcard::before,
.service-card-carbon.reviewcard::before,
#reviews .service-card-carbon::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* Remove brick/texture overlay from service cards in "What we do" section */
#services .service-card-carbon::before,
section#services .service-card-carbon::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

.service-card-carbon > * {
    position: relative;
    z-index: 1;
}


.service-card-carbon2 {
    position: relative;
    background-color: #f8f9fa; /* light soft grey base */
    overflow: hidden;
}

/* Don't apply overlay pattern to navigation bars - they use gradient instead */
nav.service-card-carbon2::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background-image: none !important;
}

/* Don't override heights - let Tailwind classes (h-12, h-auto) control heights */
/* Only override background and overlay pattern */

/* Hero section already handled above - no additional overrides needed */

.service-card-carbon2::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--cf-url);
    background-size: 120px;
    background-repeat: repeat;
    opacity: var(--cf-opacity, 0.15);
    z-index: 0;
    pointer-events: none;
}

/* Texture overlay removed for services section - water effect used instead */
/* The water effect rules below will override this */

.service-card-carbon2 > * {
    position: relative;
    z-index: 1;
}

/* Override Tailwind dark background classes to use light colors */
.bg-gray-950,
.bg-gray-900 {
    background-color: #f8f9fa !important;
}

/* Contrasting backgrounds for "What we do" and "Reviews" sections */
#services.bg-gray-950,
section#services.bg-gray-950 {
    background-color: #80deea !important;
    position: relative;
    overflow: hidden;
}

/* Water/Pool Overlay Effect for "What we do" section */
/* Override any previous ::before rules for water effect - HIGH SPECIFICITY */
#services.bg-gray-950.service-card-carbon2.wave-section::before,
section#services.bg-gray-950.service-card-carbon2.wave-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        180deg,
        rgba(64, 196, 255, 0.6) 0%,
        rgba(77, 182, 255, 0.7) 25%,
        rgba(128, 222, 234, 0.65) 50%,
        rgba(77, 182, 255, 0.7) 75%,
        rgba(64, 196, 255, 0.6) 100%
    ) !important;
    background-size: 200% 200% !important;
    animation: waterFlow 8s ease-in-out infinite !important;
    z-index: 0 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Animated water ripples - smaller, more numerous ripples */
#services.bg-gray-950.service-card-carbon2.wave-section::after,
section#services.bg-gray-950.service-card-carbon2.wave-section::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: 
        radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 35%),
        radial-gradient(circle at 35% 60%, rgba(255, 255, 255, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 55% 20%, rgba(255, 255, 255, 0.28) 0%, transparent 38%),
        radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.24) 0%, transparent 42%),
        radial-gradient(circle at 25% 80%, rgba(200, 240, 255, 0.2) 0%, transparent 36%),
        radial-gradient(circle at 65% 45%, rgba(255, 255, 255, 0.26) 0%, transparent 39%),
        radial-gradient(circle at 45% 75%, rgba(200, 240, 255, 0.23) 0%, transparent 37%),
        radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.27) 0%, transparent 41%),
        radial-gradient(circle at 10% 50%, rgba(255, 255, 255, 0.21) 0%, transparent 33%),
        radial-gradient(circle at 90% 55%, rgba(200, 240, 255, 0.25) 0%, transparent 40%) !important;
    background-size: 120% 120%, 110% 110%, 115% 115%, 125% 125%, 118% 118%, 122% 122%, 113% 113%, 120% 120%, 116% 116%, 119% 119% !important;
    animation: waterRipples 12s ease-in-out infinite !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

/* Water shimmer/light reflection effect */
@keyframes waterFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes waterRipples {
    0%, 100% {
        background-position: 0% 0%, 100% 100%, 50% 50%, 20% 80%, 80% 20%, 40% 60%, 60% 40%, 10% 90%, 90% 10%, 30% 70%;
        opacity: 1;
    }
    20% {
        background-position: 15% 15%, 85% 85%, 65% 35%, 35% 65%, 75% 25%, 25% 75%, 55% 45%, 45% 55%, 5% 95%, 95% 5%;
        opacity: 1;
    }
    40% {
        background-position: 30% 30%, 70% 70%, 50% 50%, 80% 20%, 20% 80%, 60% 40%, 40% 60%, 90% 10%, 10% 90%, 35% 65%;
        opacity: 1;
    }
    60% {
        background-position: 45% 45%, 55% 55%, 35% 65%, 65% 35%, 25% 75%, 75% 25%, 15% 85%, 85% 15%, 50% 50%, 30% 70%;
        opacity: 1;
    }
    80% {
        background-position: 60% 60%, 40% 40%, 20% 80%, 80% 20%, 10% 90%, 90% 10%, 5% 95%, 95% 5%, 45% 55%, 70% 30%;
        opacity: 1;
    }
}

/* Additional water surface shimmer */
#services.bg-gray-950 .water-shimmer,
section#services.bg-gray-950 .water-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 5s infinite;
    z-index: 1;
    pointer-events: none;
}

/* Ensure content appears above water overlay */
#services.bg-gray-950 > .relative,
section#services.bg-gray-950 > .relative {
    position: relative;
    z-index: 2;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* "Check this out" section - pure white */
#gallery.bg-gray-950,
section#gallery.bg-gray-950,
section#gallery {
    background-color: #ffffff !important;
}

/* Footer - white background only */
footer#contact.bg-gray-950,
footer.bg-gray-950,
#contact.bg-gray-950 {
    background-color: #ffffff !important;
}

/* Wave shape using clip-path - Keep for section edges */
/* Note: ::before and ::after are now used for water overlay above */

/* Wave clip-path for sections - more visible wave */
.wave-section {
    clip-path: polygon(
        0% 10%, 10% 5%, 20% 10%, 30% 3%, 40% 12%, 50% 4%, 60% 11%, 70% 3%, 
        80% 10%, 90% 5%, 100% 8%,
        100% 92%, 90% 97%, 80% 90%, 70% 97%, 60% 89%, 50% 96%, 40% 88%, 
        30% 97%, 20% 90%, 10% 95%, 0% 92%
    ) !important;
    -webkit-clip-path: polygon(
        0% 10%, 10% 5%, 20% 10%, 30% 3%, 40% 12%, 50% 4%, 60% 11%, 70% 3%, 
        80% 10%, 90% 5%, 100% 8%,
        100% 92%, 90% 97%, 80% 90%, 70% 97%, 60% 89%, 50% 96%, 40% 88%, 
        30% 97%, 20% 90%, 10% 95%, 0% 92%
    ) !important;
}

/* Remove wave pattern on mobile - use rectangular backgrounds */
@media (max-width: 768px) {
    .wave-section {
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
    
    /* Hide gallery images on mobile except positions 3, 6, 9, 11, 12 */
    .mobile-hide-gallery {
        display: none !important;
    }
    
    /* Hide reviews 4, 5, 7 on mobile - keep reviews 1, 2, 3, 6, 8 */
    .mobile-hide-review {
        display: none !important;
    }
    
    /* Disable hover scale effect on dashboard images for mobile */
    #gallery .hover\:scale-125,
    #gallery [class*="hover:scale-125"] {
        transform: scale(1) !important;
    }
    
    #gallery .hover\:scale-125:hover,
    #gallery [class*="hover:scale-125"]:hover {
        transform: scale(1) !important;
    }
    
    /* Mobile-friendly wave for "Sign up for free" section - 3 spikes (7 points), all equally prominent */
    .get-in-touch.wave-section {
        clip-path: polygon(
            0% 4%, 16.67% 0%, 33.33% 4%, 50% 0%, 66.67% 4%, 83.33% 0%, 100% 4%,
            100% 96%, 83.33% 100%, 66.67% 96%, 50% 100%, 33.33% 96%, 16.67% 100%, 0% 96%
        ) !important;
        -webkit-clip-path: polygon(
            0% 4%, 16.67% 0%, 33.33% 4%, 50% 0%, 66.67% 4%, 83.33% 0%, 100% 4%,
            100% 96%, 83.33% 100%, 66.67% 96%, 50% 100%, 33.33% 96%, 16.67% 100%, 0% 96%
        ) !important;
    }
}


/* Heading stays white */
#services.bg-gray-950 h2,
section#services.bg-gray-950 h2 {
    color: #ffffff !important;
}

/* Card text matches darker aqua background */
#services.bg-gray-950 .service-card-carbon h3,
#services.bg-gray-950 h3.text-gray-100,
section#services.bg-gray-950 .service-card-carbon h3,
section#services.bg-gray-950 h3.text-gray-100 {
    color: #80deea !important;
}

#reviews.bg-gray-950,
section#reviews.bg-gray-950 {
    background-color: #ffffff !important;
}

/* Update text colors to green for light backgrounds */
.bg-gray-950 .text-gray-100,
.bg-gray-950 .text-gray-200,
.bg-gray-950 .text-gray-300,
.bg-gray-900 .text-gray-100,
.bg-gray-900 .text-gray-200,
.bg-gray-900 .text-gray-300 {
    color: #16a34a !important;
}

.bg-gray-950 .text-gray-400,
.bg-gray-900 .text-gray-400 {
    color: #34C84A !important;
}

/* Update specific text colors to green for light backgrounds */
section.bg-gray-950 h2,
section.bg-gray-950 h3,
section.bg-gray-950 h1,
.bg-gray-950 h2,
.bg-gray-950 h3,
.bg-gray-950 h1 {
    color: #16a34a !important;
}

section.bg-gray-950 p,
.bg-gray-950 p {
    color: #34C84A !important;
}

section.bg-gray-950 .text-gray-400,
.bg-gray-950 .text-gray-400 {
    color: #34C84A !important;
}

/* Override inline dark background styles in templates */
.service-section[style*="background-color: #1a1a1a"],
.service-section[style*="background-color:#1a1a1a"],
div[style*="background-color: #1a1a1a"],
div[style*="background-color:#1a1a1a"] {
    background-color: #ffffff !important;
}

/* Ensure text is green on light backgrounds */
.service-section[style*="background-color: #1a1a1a"] .service-title,
.service-section[style*="background-color:#1a1a1a"] .service-title,
div[style*="background-color: #1a1a1a"] .service-title,
div[style*="background-color:#1a1a1a"] .service-title {
    color: #16a34a !important;
}

.service-section[style*="background-color: #1a1a1a"] .service-description,
.service-section[style*="background-color:#1a1a1a"] .service-description,
div[style*="background-color: #1a1a1a"] .service-description,
div[style*="background-color:#1a1a1a"] .service-description {
    color: #34C84A !important;
}