/* ANA IoT theme override
   Load this file AFTER vendors.min.css, icon.min.css, style.css, responsive.css and green-energy.css.
   Purpose: align the Crafto green-energy template with ANA IoT black / green / white branding.
*/

:root {
  --base-color: #00A650;
  --base-color-rgb: 0,166,80;
  --ana-green: #00A650;
  --ana-green-dark: #007A3D;
  --ana-green-light: #EAF8F0;
  --ana-mint: #F3FBF6;
  --ana-navy: #0E2433;
  --ana-charcoal: #111820;
  --ana-black: #0B0F12;
  --ana-border: #E4EFE8;
  --dark-gray: #111820;
  --medium-gray: #667085;
  --very-light-gray: #F7FAF8;
  --extra-medium-gray: #DDE7E1;
  --green: #00A650;
  --jade: #00A650;
  --crusoe-green: #00A650;
}

body {
  color: var(--medium-gray);
  background-color: #ffffff;
}



/* Navigation */
header .navbar {
  box-shadow: 0 8px 30px rgba(14, 36, 51, 0.06);
}

header .navbar .navbar-nav .nav-item .nav-link {
  color: var(--ana-charcoal);
  font-weight: 700;
}

header .navbar .navbar-nav .nav-item .nav-link:hover,
header .navbar .navbar-nav .nav-item.active .nav-link {
  color: var(--ana-green) !important;
}

.navbar-toggler-line {
  background-color: var(--ana-charcoal);
}

/* Brand colors */
.text-base-color,
.btn-link.text-base-color,
.text-base-color-hover:hover {
  color: var(--ana-green) !important;
}

.bg-base-color,
.btn-base-color,
.btn.btn-base-color,
.btn.submit.bg-base-color {
  background-color: var(--ana-green) !important;
}

.border-color-base-color,
.border-base-color {
  border-color: var(--ana-green) !important;
}

.bg-very-light-green,
.bg-very-light-gray {
  background-color: var(--ana-green-light) !important;
}

.bg-dark-gray {
  background-color: var(--ana-charcoal) !important;
}

.text-dark-gray {
  color: var(--ana-charcoal) !important;
}

/* Buttons */
.btn.btn-base-color,
.btn.bg-base-color,
.btn-base-color {
  color: #ffffff !important;
  border-color: var(--ana-green) !important;
  box-shadow: 0 10px 24px rgba(var(--base-color-rgb), 0.22) !important;
}

.btn.btn-base-color:hover,
.btn.bg-base-color:hover,
.btn-base-color:hover {
  background-color: var(--ana-green-dark) !important;
  border-color: var(--ana-green-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.btn.btn-white:hover {
  background-color: var(--ana-green) !important;
  border-color: var(--ana-green) !important;
  color: #ffffff !important;
}

.btn.btn-dark-gray {
  background-color: var(--ana-charcoal) !important;
  border-color: var(--ana-charcoal) !important;
  color: #ffffff !important;
}

.btn.btn-dark-gray:hover {
  background-color: var(--ana-green) !important;
  border-color: var(--ana-green) !important;
}

/* Hero and page titles */
.page-title-large,
.demo-green-energy-slider-left-01,
.cover-background.bg-very-light-green {
  background-color: #0F5A2A;
}

.page-title-large::before,
.swiper-slide .bg-very-light-green::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0, transparent 30%),
    linear-gradient(135deg, rgba(0,166,80,0.22), rgba(14,36,51,0.12));
  z-index: 0;
}

.page-title-large > *,
.swiper-slide .bg-very-light-green > * {
  position: relative;
  z-index: 1;
}

/* Cards and feature boxes */
.feature-box,
.services-box-style-03,
.services-box-style-02 .row,
.box-shadow-quadruple-large,
.box-shadow-extra-large,
.box-shadow-double-large {
  border-radius: 14px;
}

.box-shadow-quadruple-large,
.services-box-style-03,
.services-box-style-02 .row {
  box-shadow: 0 18px 50px rgba(14, 36, 51, 0.08) !important;
}

.custom-icon-with-text-style-02 .feature-box-icon i,
.feature-box-icon i,
.icon-with-text-style-08 i {
  color: var(--ana-green);
}

.feature-box-icon-rounded.bg-white,
.feature-box-icon-rounded.bg-very-light-green {
  background-color: var(--ana-green-light) !important;
}

/* Forms and newsletter */
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--ana-green) !important;
}

.form-control {
  border-color: var(--ana-border) !important;
}

/* Section refinement */
section {
  background-size: cover;
}

section.cover-background {
  background-color: var(--ana-mint);
}

.separator-line-1px,
.border-color-extra-medium-gray,
.border-color-transparent-dark-very-light {
  border-color: var(--ana-border) !important;
}

/* Dark platform section */
.ana-dark-section,
section.bg-dark-gray {
  background: linear-gradient(135deg, #101820 0%, #0E2433 58%, #071018 100%) !important;
}

.ana-dark-section .bg-white,
section.bg-dark-gray .bg-white {
  border: 1px solid rgba(255,255,255,0.08);
}

/* Large faded brand text */
.text-gradient-light-green-white {
  background-image: linear-gradient(to bottom, rgba(0,166,80,0.10), rgba(0,166,80,0.02), rgba(255,255,255,0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer */
footer.bg-dark-gray {
  background: #111820 !important;
}

footer a:hover,
footer .footer-bottom a:hover {
  color: var(--ana-green) !important;
}

footer .border-color-transparent-white-light {
  border-color: rgba(255,255,255,0.12) !important;
}

/* Mobile */
@media (max-width: 991px) {
  header .navbar-brand img {
    width: 145px !important;
    max-width: 145px !important;
  }

  .navbar-collapse {
    background-color: #ffffff;
    border-top: 1px solid var(--ana-border);
  }
}

@media (max-width: 575px) {
  header .navbar-brand img {
    width: 126px !important;
    max-width: 126px !important;
  }

  h1, .h1 {
    font-size: 2.6rem;
    line-height: 2.8rem;
  }

  h2, .h2 {
    font-size: 2.2rem;
    line-height: 2.45rem;
  }

  .btn.btn-extra-large,
  .btn.btn-large {
    padding-left: 22px;
    padding-right: 22px;
  }
}