/* --- 1. Variables and Global Styles (Default: Light Mode) --- */
:root {
    /* Primary Colors */
    --cn-accent: #2E907F;
    --cn-green: #2E907F;
    --cn-dark: #000000;
    /* Backgrounds and Text */
    --cn-bg-primary: #FFFFFF;
    --cn-bg-secondary: #f8f9fa;
    --cn-text-primary: #000000;
    --cn-text-secondary: #555555;

    --cn-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);

    /* Navbar motion tokens (slower + smoother) */
    --nav-dur-fast: .40s;                      /* was .24s */
    --nav-dur-med:  .50s;                      /* was .36s */
    --nav-ease: cubic-bezier(.16,.84,.44,1);   /* buttery ease-out */
}

/* --- Theme Toggle Button (tweaked) --- */
.theme-toggle-btn {
  background: none;
  border: none !important;
  font-size: 1.2rem;
  border-radius: 50%;
  padding: .35rem .6rem;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    color .35s cubic-bezier(.22,.61,.36,1);
}

/* Light mode: show MOON as white with black outline */
.theme-toggle-btn i.fa-moon {
  color: #ffffff;                  /* white moon */
  -webkit-text-stroke: 1px #000;   /* black outline */
  text-stroke: 1px #000;
  text-shadow: none;
  transition: all .35s ease;
}

/* Dark mode: show SUN as yellow with a soft glow */
body.dark-mode .theme-toggle-btn i.fa-sun {
  color: #FFD43B;                                  /* yellow sun */
  -webkit-text-stroke: 0;                          /* no outline */
  text-shadow: 0 0 10px rgba(255,212,59,0.6);      /* glow */
  transition: all .35s ease;
}

/* Hover effects (no background fill) */
.theme-toggle-btn:hover {
  transform: scale(1.2) rotate(-10deg);
  box-shadow: 0 0 10px rgba(46,144,127,0.35);
}
body.dark-mode .theme-toggle-btn:hover {
  transform: scale(1.2) rotate(10deg);
  box-shadow: 0 0 12px rgba(255,212,59,0.5);
}

.theme-toggle-btn:focus,
.theme-toggle-btn:active {
  outline: none !important;
}

/* --- Dark Mode Variables --- */
body.dark-mode {
    --cn-dark: #2E907F;
    --cn-bg-primary: #000000;
    --cn-bg-secondary: #1f1f1f;
    --cn-text-primary: #f8f9fa;
    --cn-text-secondary: #aaaaaa;
    --cn-shadow: 0 0 1rem rgba(46, 144, 127, 0.25);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--cn-text-primary);
    background-color: var(--cn-bg-primary);
    scroll-behavior: smooth;
    transition: background-color 0.4s, color 0.4s;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--cn-text-primary);
}

.section-heading {
    color: var(--cn-green);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.1rem;
}

/* --- FIX: Text Color Utility Classes --- */
.text-cn-text-primary { color: var(--cn-text-primary) !important; }
.text-cn-text-secondary { color: var(--cn-text-secondary) !important; }
.text-cn-green { color: var(--cn-green) !important; }

/* --- Buttons --- */
.btn-cn-green {
    background-color: var(--cn-green);
    color: #FFFFFF !important;
    border: 2px solid var(--cn-green);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
}
.btn-cn-green:hover {
    background-color: #26796b; /* slight darken of brand */
    border-color: #26796b;
    transform: translateY(-2px);
}

/* =========================
   NAVBAR — SMOOTH & STABLE
   ========================= */
.cn-navbar-bg {
    background-color: var(--cn-bg-primary) !important;
    box-shadow: var(--cn-shadow) !important;
    transition: background-color .4s var(--nav-ease);
}
.navbar-nav .nav-item { margin: 0 .2rem; }

.navbar-nav .nav-link {
    color: var(--cn-text-secondary);
    font-weight: 600;                 /* avoid font-weight jumps */
    letter-spacing: .2px;
    position: relative;               /* for pseudos */
    padding: .4rem .6rem .55rem;      /* room for underline */
    border-radius: .6rem;
    isolation: isolate;               /* clean layering */
    will-change: color, transform;
    transition:
      color var(--nav-dur-fast) var(--nav-ease),
      transform var(--nav-dur-fast) var(--nav-ease);
}

/* icon micro-nudge */
.navbar-nav .nav-link i{
    margin-right:.35rem;
    transform: translateY(1px);
    transition: transform var(--nav-dur-fast) var(--nav-ease);
}
.navbar-nav .nav-link:hover i{ transform: translateY(0); }

/* Hover color */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
    color: var(--cn-green);
}

/* Underline (transform-only = no layout shift) — THICC + slower */
.navbar-nav .nav-link::after{
    content:"";
    position:absolute;
    left:.4rem; right:.4rem; bottom:.10rem; /* sit a touch closer to text */
    height:4px;                              /* thicker underline */
    background: var(--cn-green);
    transform: scaleX(0);
    transform-origin: left center;
    opacity:1;
    transition: transform var(--nav-dur-med) var(--nav-ease) .02s; /* tiny delay for butter */
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after{
    transform: scaleX(1);
}

/* Active = soft green pill via ::before (opacity/scale only) */
.navbar-nav .nav-link::before{
    content:"";
    position:absolute;
    inset:.08rem;                     /* slight inset for aesthetics */
    border-radius:.6rem;
    background: var(--cn-green);
    opacity:0;                        /* hidden by default */
    transform: scale(.96);            /* start smaller for smooth grow */
    z-index:-1;                       /* behind text */
    transition:
      opacity var(--nav-dur-med) var(--nav-ease),
      transform var(--nav-dur-med) var(--nav-ease);
}

/* Active highlight (no underline) */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"]{
    color: var(--cn-green) !important;
}
.navbar-nav .nav-link.active::before,
.navbar-nav .nav-link[aria-current="page"]::before{
    opacity:.12;                      /* soft pill using brand green */
    transform: scale(1);
}
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link[aria-current="page"]::after{
    transform: scaleX(0);             /* kill underline on active */
}

/* Focus ring (keyboard) */
.navbar-nav .nav-link:focus-visible{
    outline: 2px solid rgba(46,144,127,.55);
    outline-offset: 2px;
    border-radius:.6rem;
}

/* Dark mode tweaks */
body.dark-mode .navbar-nav .nav-link{ color:#cfcfcf; }
body.dark-mode .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .nav-link:focus{ color: var(--cn-green); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .navbar-nav .nav-link,
  .navbar-nav .nav-link::before,
  .navbar-nav .nav-link::after{
    transition: none !important;
  }
}

/* --- Cards and Dark Mode --- */
body.dark-mode .card, body.dark-mode .cn-footer-bg {
    background-color: var(--cn-bg-secondary) !important;
    box-shadow: none !important;
}
body.dark-mode .card .card-title {
    color: var(--cn-text-primary) !important;
}
body.dark-mode .card-service:hover {
    box-shadow: var(--cn-shadow) !important;
}

/* --- Secondary Background --- */
.cn-bg-secondary {
    background-color: var(--cn-bg-secondary) !important;
    transition: background-color 0.4s;
}

/* --- ✅ FIXED CONTACT SECTION --- */

/* Light Mode */
#contact {
    background-color: var(--cn-bg-secondary);
    color: var(--cn-text-primary);
    transition: background-color 0.4s, color 0.4s;
}
#contact h2,
#contact .section-heading,
#contact label {
  color: var(--cn-green) !important;
}

/* Dark Mode */
body.dark-mode #contact {
    background-color: #1f1f1f;
    color: var(--cn-green);
}
body.dark-mode #contact h2,
body.dark-mode #contact label {
    color: #ffffff !important;
}
body.dark-mode #contact p,
body.dark-mode #contact .lead {
    color: #dddddd;
}

/* Form Controls */
.form-control {
    background-color: var(--cn-bg-primary);
    color: var(--cn-text-primary);
    border: 1px solid var(--cn-text-secondary);
    transition: all 0.4s;
}
body.dark-mode .form-control {
    background-color: #222;
    color: #ffffff;
    border-color: #444;
}
body.dark-mode .form-control::placeholder {
    color: #aaaaaa;
}

/* --- Hero Section --- */
#hero {
    background: var(--cn-bg-secondary);
    min-height: 80vh;
}
.hero-content { padding-top: 5rem; padding-bottom: 5rem; }
.typed-text { color: var(--cn-green); font-weight: 800; }
.tagline { font-size: 1.1rem; color: var(--cn-text-secondary); }

/* --- Parallax Hero --- */
#parallax-hero {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
#parallax-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: background 0.4s;
}
body.dark-mode #parallax-hero::before {
    background: rgba(0, 0, 0, 0.75);
}
#parallax-hero .hero-content { position: relative; z-index: 3; color: #fff; }
#parallax-hero h1, #parallax-hero p { color: #fff !important; }

/* --- Feature Cards --- */
.card-feature {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    background-color: var(--cn-bg-primary);
}
.card-feature:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
body.dark-mode .card-feature:hover {
    box-shadow: 0 0.5rem 2rem rgba(46, 144, 127, 0.4) !important;
}

/* Icon box */
.icon-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    background-color: rgba(46, 144, 127, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
body.dark-mode .icon-box {
    background-color: rgba(46, 144, 127, 0.2);
}
.card-feature:hover .icon-box,
.card-service:hover .icon-box {
    background-color: var(--cn-green);
    transform: scale(1.1);
}
.card-feature:hover .icon-box i,
.card-service:hover .icon-box i {
    color: #fff !important;
    transition: color 0.3s ease;
}
.icon-box i {
    font-size: 2.5rem !important;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* --- Service Cards --- */
.card-service {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    overflow: hidden;
    background-color: var(--cn-bg-primary);
}
.card-service:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* --- Animations --- */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll { opacity: 0; transform: translateY(30px); }
.animate-on-scroll.show-animation { animation: slideUp 0.7s forwards ease-out; }

/* Vision/Mission icon animations */
@keyframes rocketFloat {
  0% { transform: translateY(0px) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(-2deg); }
}
@keyframes handshakePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
#vision-mission .fa-rocket { animation: rocketFloat 5s ease-in-out infinite; }
#vision-mission .fa-handshake { animation: handshakePulse 2.5s ease-in-out infinite; }

/* --- SVG Hero Illustration --- */
.svg-cloud {
    fill: var(--cn-bg-primary);
    stroke: var(--cn-green);
    stroke-width: 2.5;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.1));
    transition: fill 0.4s;
}
.svg-core, .svg-server-rack { fill: var(--cn-dark); transition: fill 0.4s; }
body.dark-mode .svg-cloud {
    fill: var(--cn-bg-secondary);
    filter: drop-shadow(0px 4px 6px rgba(46, 144, 127, 0.1));
}
body.dark-mode .svg-core, body.dark-mode .svg-server-rack { fill: var(--cn-green); }
.svg-line {
    stroke: var(--cn-green);
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
    animation: dash 2s linear infinite;
}
@keyframes cloudFloat { 0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);} }
.cloud-float { animation: cloudFloat 5s ease-in-out infinite; }
@keyframes dash { from{stroke-dashoffset:50;} to{stroke-dashoffset:0;} }
@keyframes pulse { 0%{opacity:.8;} 50%{opacity:.2;} 100%{opacity:.8;} }
.svg-core-pulse { animation: pulse 1.5s infinite alternate; }

.border-start { border-left: var(--bs-border-width) var(--bs-border-style) #2E907F !important; }

/* Default state (Light Mode) */
.logo-dark-only {
    display: none !important;
}
.text-light-only {
    display: inline-block;
}

/* Dark Mode state */
body.dark-mode .logo-dark-only {
    display: block !important;
}
body.dark-mode .text-light-only {
    display: none !important;
}