@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

:root {
  --primary: #20c528;
  --primary-hover: #2bcf75;
  --primary-active: #2b4b7d;

  --navMenuIconSize: 40px;
  --navLogo: 50px;

  --tab-menu-colour: rgb(255, 255, 255);
  --widget-colour: rgb(255, 255, 255);
  --text: rgb(58, 58, 71);
  --tab-shadow: inset 0px 0px 10px #b4b4b481;
}



body[data-theme="dark"] {
  --tab-menu-colour: rgb(58, 58, 71);
  --widget-colour: rgb(31, 31, 43);
  --text: #ffffff;
  --tab-shadow: inset 0px 0px 10px #00000081;
}


@media (prefers-color-scheme: dark) {
  body[data-theme="system"] {
    --tab-menu-colour: rgb(58, 58, 71);
    --widget-colour: rgb(31, 31, 43);
    --text: #ffffff;
    --tab-shadow: inset 0px 0px 10px #00000081;
  }
}


h1:not(.greeting), h2, h3, h4, h5, h6, p, span, a, .form-label, [class^="display-"]:not(.greeting, body.home [class^="display-"]), label, small, .text-muted, .table > :not(caption) > * > *, .list-group-item {
  color: var(--text) !important;
}

.card:not(.dark, .testimonialSection .card), table, .list-group:not(.sql), .list-group-item, .toast, .card-header {
  background-color: var(--widget-colour) !important;
  --bs-table-bg: var(--widget-colour) !important;
}


.badge {
  color: white !important;
}

.navMenu-icon {
  height: var(--navMenuIconSize);
  width: var(--navMenuIconSize);
}

.nav-logo {
  height: var(--navLogo);
  width: auto;
}

.nav-link {
  font-weight: 400;
}

.nav-link:hover {
  color: var(--primary) !important;
}

.navbar-toggler {
  box-shadow: none !important;
  border: none !important;
}

nav {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: 0.2s ease-in-out; 
}

nav.dash {
  position: sticky !important;
}

nav.blur {
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.103);
}

.my-bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
}

.my-bg.login {
  background-image: url(/images/background.jpg);
  background-color: rgba(0, 0, 0, 0.877);
}

.my-bg.pageNotFound {
  background-image: url(/images/dog.jpg);
  background-color: rgba(0, 0, 0, 0.842);
}

.my-bg.features {
  background-image: url(/images/teampic.jpg);
  background-color: rgba(0, 0, 0, 0.767);
}

.my-bg.dash {
  background-image: url(/images/bg-dash.jpg);
  background-color: rgba(0, 0, 0, 0.788);
}

.my-bg.testimonials {
  background-image: url(/images/thumbs.jpg);
  background-color: rgba(255, 255, 255, 0.764);
}

@media (min-width: 992px) {
  .my-bg.features, .my-bg.testimonials {
    background-attachment: fixed;
  }
}

.btn-primary {
  background-color: var(--primary);
  border-color: transparent;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: transparent;
}

.btn-primary:active {
  background-color: var(--primary-active) !important;
  border-color: transparent !important;
}

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

.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: transparent;
  color: white !important;
}

.btn-outline-primary:active {
  background-color: var(--primary-active) !important;
  border-color: transparent !important;
}

#eyeBtn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
}

@keyframes slideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.slideUp {
  animation-name: slideUp;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  opacity: 0;
}

@keyframes slideDownAndOut {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
  }
}

.slideDownAndOut {
  animation-name: slideDownAndOut;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  opacity: 0;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.slideInLeft {
  animation-name: slideInLeft;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  opacity: 0;
}

@keyframes slideInRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.slideInRight {
  animation-name: slideInRight;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  opacity: 0;
}

@keyframes slideInLeftBig {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.slideInLeftBig {
  animation-name: slideInLeftBig;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  opacity: 0;
}

.linkHover {
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s !important;
}

.linkHover:hover {
  text-decoration-color: unset;
}

.linkHover:active {
  color: var(--primary-active);
}

.carousel-indicators button {
  --size: 15px;

  height: var(--size) !important;
  width: var(--size) !important;
  border-radius: 50%;
  background-color: rgb(24, 112, 86) !important;
}

@keyframes fadeIn {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.76);
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.hero-bg {
  height: 100vh;
  display: flex;
  align-items: center;
  background-image: url(/images/american-public-power-association-XGAZzyLzn18-unsplash.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
}

/* ===== Interactive WebGL hero ===== */

.hero-canvas-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
}

#energyCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  background: transparent;
}

#energyCanvas:active {
  cursor: grabbing;
}

.hero-drag-hint {
  position: absolute;
  bottom: 26px;
  right: 32px;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  color: var(--primary-active) !important;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(32, 197, 40, 0.35);
  padding: 5px 12px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0.85;
}

/* The carousel sits above the canvas but lets pointer events fall through to
   the 3D object — only the interactive controls re-capture them. */
.hero-content {
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.hero-content .btn,
.hero-content a,
.hero-content .carousel-indicators {
  pointer-events: auto;
}

/* Keep the headline legible where it overlaps the planet — a soft light halo
   that is invisible over the bright sky but lifts text off the darker sphere. */
.hero-content h1 {
  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(255, 255, 255, 0.5);
}

.hero-content .lead {
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.65);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary) !important;
}

.hero-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(32, 197, 40, 0.6);
  animation: heroDotPulse 1.8s ease-out infinite;
}

@keyframes heroDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(32, 197, 40, 0.6); }
  70% { box-shadow: 0 0 0 11px rgba(32, 197, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(32, 197, 40, 0); }
}

@media (max-width: 991.98px) {
  .hero-content { pointer-events: auto; }
}

@keyframes appearDown {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.appearDown {
  animation-name: appearDown;
  animation-duration: 1.5s;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.appearDown.dash {
  animation-delay: 0s;
  animation-duration: 1s;
}

.picTwist {
  transition: 0.2s ease-in-out;
}

.picTwist:hover {
  transform: rotate(1deg) scale(1.05);
  cursor: pointer;
}

.colorIn {
  transition: 0.2s ease-in-out;
}

.colorIn:hover {
  background-color: var(--primary-active);
  border-color: transparent !important;
  transform: translateY(-5px);
}

.accordion {
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--primary);
  --bs-accordion-active-color: white;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.accordion-body {
  box-shadow: inset 0px 0px 5px rgba(4, 216, 32, 0.37);
  background-color: rgba(10, 243, 10, 0.048);
}

.custom-shape-divider-bottom-1763866098 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1763866098 svg {
    position: relative;
    display: block;
    width: calc(138% + 1.3px);
    height: 71px;
}

.custom-shape-divider-bottom-1763866098 .shape-fill {
    fill: #FFFFFF;
}

.custom-shape-divider-bottom-1763866098 .shape-fill.footer {
    fill: #212529;
}

.custom-shape-divider-top-1763866278 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1763866278 svg {
    position: relative;
    display: block;
    width: calc(178% + 1.3px);
    height: 77px;
}

.custom-shape-divider-top-1763866278 .shape-fill {
    fill: #FFFFFF;
}

.carousel-item .card {
  background-color: rgba(1, 42, 54, 0.651);
  box-shadow: inset 0px 0px 20px rgba(1, 42, 54, 0.699) !important;
}

.card-text.testimonials, .card-title.testimonials {
  color: white !important;
}

.google-icon {
  --size: 50px;

  height: var(--size);
  width: var(--size);
  background-origin: content-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-color: #FFFFFF;
  border-radius: 50%;
  padding: 1px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-3 0 262 262' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027' fill='%234285F4'/%3E%3Cpath d='M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1' fill='%2334A853'/%3E%3Cpath d='M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782' fill='%23FBBC05'/%3E%3Cpath d='M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251' fill='%23EB4335'/%3E%3C/g%3E%3C/svg%3E");
}

.star {
  height: 25px;
  width: auto;
}

.testimonialSection {
  display: flex;
  flex-direction: column;
  min-height: 700px;
  justify-content: center;
}

.scroll-left {
  transform: translateX(-100px);
  opacity: 0;
  transition: 1s;
}

.scroll-left.active {
  transform: translateX(0px);
  opacity: 1;
}

.scroll-right {
  transform: translateX(100px);
  opacity: 0;
  transition: 1s;
}

.scroll-right.active {
  transform: translateX(0px);
  opacity: 1;
}

.scroll-up {
  transform: translateY(100px);
  opacity: 0;
  transition: 1s;
}

.scroll-up.active {
  transform: translateY(0px);
  opacity: 1;
}

.tabs > .btn {
  --padding: 40px;

  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: var(--padding);
  padding-right: var(--padding);
}

.tabs > .btn.active {
  border-color: transparent;
  box-shadow: var(--tab-shadow);
  background-color: var(--tab-menu-colour);
  color: var(--text);
}

.tabs .btn-outline-light:hover:not(.active) {
  background-color: #d9ffdb;
  border-color: transparent;
  box-shadow: inset 0px 0px 10px #00750681
}

.tabSelector {
  --padding: 40px;

  border-radius: 5px 5px 0px 0px;
  padding: 8px var(--padding);

  border-color: transparent;
  box-shadow: var(--tab-shadow);
  background-color: var(--tab-menu-colour);
  color: var(--text);
}

.btn-outline-dark:hover {
  color: white !important;
}

#tabContentBox {
  border-radius: 0px 5px 5px 5px;
  background-color: var(--tab-menu-colour);
}

.bg-primary {
  background-color: var(--primary) !important;
}

.tabMenu-bg {
  background-color: var(--tab-menu-colour);
}

@keyframes fadeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeAppear {
  animation-name: fadeAppear;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  opacity: 0;
}

th {
  font-weight: bold;
}

#backToTopBtn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  border: 0;
  background-color: transparent;
  z-index: 10;
}

#backToTopBtn > img {
  height: 50px;
  width: auto;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.247));
}

.form-check-input {
  border-color: #e0e4e7 !important;
  cursor: pointer;
}

.form-check-input:checked {
  box-shadow: none !important;
  background-color: var(--primary);
  border-color: var(--primary) !important;
}

.form-check-input:focus {
  box-shadow: none !important;
}

label.todo  {
  cursor: pointer;
}

.ticked::before {
  content: "";
  margin-right: 5px;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2.5C0 1.67157 0.671573 1 1.5 1H5.70711L7.70711 3H13.5C14.3284 3 15 3.67157 15 4.5V12.5C15 13.3284 14.3284 14 13.5 14H1.5C0.671573 14 0 13.3284 0 12.5V2.5ZM7.02439 11.2315L10.8763 6.82928L10.1237 6.17078L6.97568 9.76857L5.35359 8.14648L4.64648 8.85358L7.02439 11.2315Z' fill='%234ec514'/%3E%3C/g%3E%3C/svg%3E");
}

html, body {
  overflow-x: clip;
}

.loader {
  width: 60px;
  height: 20px;
  display: grid;
  color: #21a1a1;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  --c:#0000 calc(100%/3),#21a1a1 0 calc(2*100%/3),#0000 0;
  --c1:linear-gradient(90deg,var(--c));
  --c2:linear-gradient( 0deg,var(--c));
  background: var(--c1),var(--c2),var(--c1),var(--c2);
  background-size: 300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: l15 1.5s infinite;
}
.loader:after {
  animation-delay: -.75s;
}
@keyframes l15 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}

.errorBtn:hover {
  transition: 0.2s ease-in-out;
}

.errorBtn:hover {
  color: rgb(23, 24, 116) !important;
}

.btn-close {
  box-shadow: none !important;
  border: none !important;
}


/* ===== Marketing pages (About / Services / Contact) ===== */

.page-hero {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.72);
  background-blend-mode: overlay;
  padding: 160px 0 90px;
}

@media (min-width: 992px) {
  .page-hero {
    background-attachment: fixed;
  }
}

.page-hero .breadcrumb-pill {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 50px;
  background-color: rgba(32, 197, 40, 0.12);
  color: var(--primary) !important;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(32, 197, 40, 0.12);
  color: var(--primary);
  font-size: 1.7rem;
  flex-shrink: 0;
}

.icon-circle.solid {
  background-color: var(--primary);
  color: #fff;
}

.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12) !important;
}

.stat-num {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary) !important;
}

.team-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(32, 197, 40, 0.2);
}

.team-card .social a {
  color: var(--text) !important;
  transition: color 0.2s ease;
}

.team-card .social a:hover {
  color: var(--primary) !important;
}

.timeline {
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-color: rgba(32, 197, 40, 0.25);
}

.timeline-item {
  position: relative;
  padding-left: 64px;
}

.timeline-dot {
  position: absolute;
  left: 11px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(32, 197, 40, 0.25);
}

.process-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
}

.contact-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(32, 197, 40, 0.12);
  color: var(--primary);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(32, 197, 40, 0.18);
}

.map-frame {
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 360px;
  filter: grayscale(0.15);
}

.list-tick {
  list-style: none;
  padding-left: 0;
}

.list-tick li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

.list-tick li::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-weight: bold;
}