/* =========================================
   CALM MINT GREEN GRADIENT THEME WITH CURVE
========================================= */

/* 1️⃣ Color System (Calm Mint Greens) */
:root {
  --mint-darkest: #2f5f54;   /* Deep calm mint */
  --mint-dark: #4f7f73;      /* Soft dark mint */
  --mint-main: #6fa89a;      /* Primary calm mint */
  --mint-light: #a9d3c8;     /* Light mint */
  --mint-lightest: #e6f4f1;  /* Very soft mint */
}

/* =========================================
   2️⃣ Preloader
========================================= */
.preloader-main .loader .loader-dot:first-child {
  background-color: var(--mint-darkest);
  animation-delay: 0.7s;
}

.preloader-main .loader .loader-dot:nth-child(2) {
  background-color: var(--mint-main);
  animation-delay: 0.5s;
}

.preloader-main .loader .loader-dot:nth-child(3) {
  background-color: var(--mint-light);
  animation-delay: 0.3s;
}

/* =========================================
   3️⃣ Top Navigation Bar
========================================= */
.navbar-area .top-nav {
  background: linear-gradient(
    90deg,
    var(--mint-darkest),
    var(--mint-dark)
  );
}

.navbar-area .top-nav .info-list li a {
  color: #ffffff;
  font-size: 17px;
}

/* Highlighted icon/text */
.navbar-area .top-nav .info-list li .envy {
  color: var(--mint-lightest);
}

/* =========================================
   4️⃣ Main Navigation Bar
========================================= */
.navbar-area .main-nav {
  background: linear-gradient(
    90deg,
    var(--mint-main),
    var(--mint-light)
  );
}

/* =========================================
   5️⃣ Hero / Page Title Area
========================================= */
.page-title-area,
.hero-area {
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* Remove direct background to avoid conflict with ::before */
  background: none !important;
}

/* Curved background layer */
.page-title-area::before,
.hero-area::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 0;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--mint-dark),
    var(--mint-main),
    var(--mint-light)
  );
  border-radius: 0 0 70% 70%;
  z-index: -1;
}

/* =========================================
   6️⃣ Buttons
========================================= */
.btn-primary,
.default-btn {
  background: linear-gradient(
    135deg,
    var(--mint-main),
    var(--mint-light)
  );
  color: #ffffff;
  border: none;
}

.btn-primary:hover,
.default-btn:hover {
  background: linear-gradient(
    135deg,
    var(--mint-dark),
    var(--mint-main)
  );
  color: #ffffff;
}

/* =========================================
   7️⃣ Links
========================================= */
a {
  color: var(--mint-main);
}

a:hover {
  color: var(--mint-dark);
}

/* =========================================
   8️⃣ Section Background Helper
========================================= */
.bg-calm-mint-gradient {
  background: radial-gradient(
    circle at top right,
    var(--mint-lightest),
    var(--mint-light),
    var(--mint-main)
  );
}

/* =========================================
   9️⃣ Footer
========================================= */
.footer-area {
  background: linear-gradient(
    135deg,
    var(--mint-dark),
    var(--mint-darkest)
  );
  color: #ffffff;
}

.footer-area a {
  color: var(--mint-lightest);
}

.footer-area a:hover {
  color: #ffffff;
}

/* =========================================
   🔟 Smooth UI Transitions
========================================= */
* {
  transition: background 0.25s ease, color 0.25s ease;
}