/* Blue-Green Palette and Glassmorphism */
:root {
  --bg-light: linear-gradient(135deg, #ccfbf1 0%, #dbeafe 100%); /* Pastel teal to pastel blue */
  --bg-dark: linear-gradient(135deg, #020617 0%, #0f172a 100%);
  --primary: #0ca68a; /* Blue-green */
  --secondary: #0ea5e9; /* Light blue */
  --glass-bg: rgba(255, 255, 255, 0.4);
  --glass-border: rgba(255, 255, 255, 0.6);
  --text-primary: #1e293b;
  --text-secondary: #475569;
}

[data-theme="dark"] {
  --glass-bg: rgba(15, 23, 42, 0.4);
  --glass-border: rgba(255, 255, 255, 0.15);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
}

/* Base styles reducing Bootstrap */

body {
  color: var(--text-primary);
  min-height: 100vh;
}





.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin-bottom: 2rem;
}

.flex-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .flex-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.btn-glass {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.btn-glass:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(12, 166, 138, 0.3);
}

/* Alert overlay refactor */
.alertoverlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  z-index: 99999999;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4rem;
}

.alert-box {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1.5rem;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  color: var(--text-primary);
}

/* Override existing site elements to Glassmorphism */
.navbar, .cookie-notice, .alert-container, .card, .feature-card, .footer {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px 0 rgba(12, 166, 138, 0.1) !important;
}

.text-primary, .navbar-brand, .brand-text, .nav-link, h1, h2, h3, h4, h5, h6 {
  color: var(--primary) !important;
}

[data-theme="dark"] .navbar-brand, [data-theme="dark"] .brand-text, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link {
  color: #94a3b8 !important; /* Soft gray for links */
}

[data-theme="dark"] .nav-link:hover {
  color: #14b8a6 !important; /* Teal 500 when hover */
}
[data-theme="dark"] .nav-link.active {
  color: #ffffff !important; /* Pure White when active */
}

[data-theme="dark"] .text-primary {
  color: #2dd4bf !important; /* Teal 400 for primary text */
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(12, 166, 138, 0.3) !important;
  border-radius: 999px !important;
}

.btn-outline-secondary {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  border-radius: 999px !important;
}

.hero-section {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}


body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  z-index: -1;
  filter: blur(100px) !important;
}
body::before {
  background: rgba(255, 255, 255, 0.4);
  width: 400px;
  height: 400px;
  top: -50px;
  left: -100px;
}
body::after {
  background: rgba(14, 165, 233, 0.2);
  width: 400px;
  height: 400px;
  bottom: -50px;
  right: -50px;
}

[data-theme="dark"] body::before {
  background: rgba(45, 212, 191, 0.15); /* Soft teal blob */
}
[data-theme="dark"] body::after {
  background: rgba(56, 189, 248, 0.1);  /* Soft blue blob */
}

.gradient-text {
  background-image: linear-gradient(135deg, #097969, #0284c7); /* Dark Teal to Dark Blue */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

[data-theme="dark"] .gradient-text {
  background-image: linear-gradient(135deg, #2dd4bf, #38bdf8); /* Bright Teal to Bright Blue */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  60% { transform: translateY(-7px); }
}


/* Removed duplicate blobs */




.gradient-text {
  background-image: linear-gradient(135deg, #0ca68a, #0284c7); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  text-shadow: none; /* remove shadow from gradient to keep it extremely crisp */
}

[data-theme="dark"] .gradient-text {
  background-image: linear-gradient(135deg, #2dd4bf, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* Hero section specific light/dark background */
.hero-glow {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%);
}

[data-theme="dark"] .hero-glow {
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.8) 0%, transparent 60%);
}



/* Responsive Typography for Mobile */
@media (max-width: 768px) {
  .hero-section h1.display-3 {
    font-size: 2.2rem !important;
    line-height: 1.3;
  }
  .hero-section .badge {
    font-size: 0.75rem !important; /* Make the pill badge smaller on mobile */
    padding: 0.4rem 0.8rem !important;
    white-space: normal; /* Allow wrapping if screen is very narrow */
    line-height: 1.4;
  }
  .hero-section p.lead {
    font-size: 0.9rem !important; /* Make paragraph text smaller */
    line-height: 1.5 !important;
    padding: 0 10px;
    margin-bottom: 2rem !important;
  }
  .hero-section .btn-lg {
    width: 100%;
    margin-bottom: 0px;
    padding: 0.8rem 1rem !important;
    font-size: 1rem !important;
  }
  .hero-section .gap-4 {
    gap: 12px !important;
  }
}

/* Content section Liquid glass effects */

.service-card, .value-card, .about-content, .contact-item, .feedback-section, .certificate-info {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05) !important;
}


.service-card:hover, .value-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 40px -10px rgba(12, 166, 138, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .service-card:hover, [data-theme="dark"] .value-card:hover {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Make sure the text inside these glass containers stays readable */
.about-description, .purpose-text p, .data-usage-text, .service-description, .value-card p {
  color: var(--text-secondary) !important;
}
.purpose-text h4, .service-title, .value-card h4 {
  color: var(--text-primary) !important;
}


/* Ensure sections are completely transparent so the body gradient shows through */
.about-section, .services-section, .contact-section, .certificates-section {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure these specific elements do not have solid white backgrounds from Bootstrap/sitev2 */
.feature-showcase, .service-card, .value-card, .purpose-item, .contact-item {
  background-color: var(--glass-bg) !important;
}



/* Base body background enforce to override everything */
body, html {
  background: linear-gradient(135deg, #bae6fd 0%, #99f6e4 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
[data-theme="dark"] body, [data-theme="dark"] html {
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 100%) !important;
  background-attachment: fixed !important;
}


/* Liquid Glass & Structure Adjustments */
.about-section, .services-section, .contact-section, .certificates-section {
  background: transparent !important;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.service-card, .value-card, .about-content, .contact-item, .feedback-section, .certificate-info {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255,255,255,0.4) !important;
  padding: 2rem !important; /* Ensure internal spacing without breaking flex */
  margin: 0 !important; /* Reset odd margins */
  height: 100% !important; /* For flex columns like service cards */
}

/* Dark mode glass adjustments */
[data-theme="dark"] .service-card, 
[data-theme="dark"] .value-card, 
[data-theme="dark"] .about-content, 
[data-theme="dark"] .contact-item, 
[data-theme="dark"] .feedback-section, 
[data-theme="dark"] .certificate-info {
  background: rgba(15, 23, 42, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

.feature-showcase {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.showcase-item {
  background: rgba(255,255,255,0.3) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: 16px !important;
  margin-bottom: 1rem !important;
  padding: 1.5rem !important;
}
[data-theme="dark"] .showcase-item { 
  background: rgba(15,23,42,0.4) !important; 
  border-color: rgba(255,255,255,0.1) !important;
}

.service-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; 
}

/* Fix transparent glass panels properly without overriding layout margins */
.about-section, .services-section, .contact-section, .certificates-section {
  background: transparent !important;
}

.service-card, .value-card, .about-content, .contact-item, .feedback-section, .certificate-info {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05) !important;
}

.feature-showcase {
  background: transparent !important;
  box-shadow: none !important;
}

.showcase-item {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
}
[data-theme="dark"] .showcase-item { background: rgba(15,23,42,0.4) !important; }

.service-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.purpose-item, .contact-item {
  border-radius: 16px !important;
}


/* Base body background enforce to override everything */
body, html {
  background: linear-gradient(135deg, #bae6fd 0%, #99f6e4 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
[data-theme="dark"] body, [data-theme="dark"] html {
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 100%) !important;
  background-attachment: fixed !important;
}

/* Fix transparent glass panels properly without overriding layout margins */
.about-section, .services-section, .contact-section, .certificates-section {
  background: transparent !important;
}

.service-card, .value-card, .about-content, .contact-item, .feedback-section, .certificate-info {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05) !important;
}

.feature-showcase {
  background: transparent !important;
  box-shadow: none !important;
}

.showcase-item {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
}
[data-theme="dark"] .showcase-item { background: rgba(15,23,42,0.4) !important; }

.service-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.purpose-item, .contact-item {
  border-radius: 16px !important;
}


/* Fix strange margins on container sections */
.about-section, .services-section, .contact-section, .certificates-section {
  padding: 4rem 0 !important;
  margin-top: 2rem;
}

.service-card, .value-card {
  padding: 2rem !important; /* Safe to pad these bigger cards */
  height: 100%; /* Make cards even height */
  display: flex;
  flex-direction: column;
}

.contact-item, .purpose-item {
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
  border-radius: 16px !important;
}

.feature-showcase {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.showcase-item {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem;
}


/* Ensure absolute transparency on section containers */
section, .container, .row, .col-lg-6, .col-md-4, .feature-showcase, .about-visual, .contact-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Base body background enforce to override everything */
body, html {
  background: linear-gradient(135deg, #dbeafe 0%, #ccfbf1 100%) !important;
  background-attachment: fixed !important;
  height: 100%;
}
[data-theme="dark"] body, [data-theme="dark"] html {
  background: linear-gradient(135deg, #020617 0%, #0f172a 100%) !important;
  background-attachment: fixed !important;
}

/* Final authoritative theme background override.
   Keep this block last so it wins over earlier duplicated gradient rules. */
html[data-theme="dark"],
body[data-theme="dark"],
body.dark-theme {
  background: #020617 !important;
  background-image: none !important;
  background-attachment: fixed !important;
}

body[data-theme="dark"] section,
body.dark-theme section {
  background: transparent !important;
}

/* Final mobile sizing override: About section and everything after it */
@media (max-width: 768px) {
  .about-section,
  .services-section,
  .certificates-section,
  .contact-section {
    padding: 2rem 0 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  .about-section .section-title,
  .services-section .section-title,
  .certificates-section .section-title,
  .contact-section .section-title,
  .value-title {
    font-size: 1.5rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.75rem !important;
  }

  .about-section .section-subtitle,
  .services-section .section-subtitle,
  .certificates-section .section-subtitle,
  .contact-section .section-subtitle,
  .value-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  .about-description,
  .data-usage-text,
  .service-description,
  .value-card p,
  .purpose-text p,
  .feedback-section p,
  .contact-details p,
  .contact-details a {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }

  .service-title,
  .value-card h4,
  .purpose-text h4,
  .contact-details h4,
  .feedback-section h3,
  .certificate-info h3 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }

  .about-content,
  .service-card,
  .value-card,
  .contact-item,
  .feedback-section,
  .certificate-info,
  .purpose-item,
  .data-usage-section,
  .showcase-item {
    padding: 1rem !important;
    border-radius: 14px !important;
  }

  .service-icon,
  .purpose-icon,
  .contact-icon,
  .showcase-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
    margin: 0 0 0.75rem 0 !important;
  }

  .service-icon {
    align-self: flex-start !important;
  }

  .value-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
    margin: 0 auto 0.75rem auto !important;
  }

  .footer {
    padding-top: 2rem !important;
  }

  .footer-brand h4,
  .footer-column h5 {
    font-size: 1rem !important;
  }

  .footer-brand p,
  .footer-column a,
  .data-notice small,
  .footer-copyright p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }
}

/* Mobile overflow fix for AOS horizontal entrance animations */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: translate3d(0, 20px, 0) !important;
  }

  [data-aos="fade-left"].aos-animate,
  [data-aos="fade-right"].aos-animate {
    transform: translate3d(0, 0, 0) !important;
  }
}