/* =========================================================
   NANDIAI PREMIUM AGRITECH THEME
   Vibrant Glossy Version
========================================================= */

:root{
  --brand:#0f3d2e;
  --secondary:#1f6f50;
  --accent:#8bc34a;
  --gold:#f7c35f;
  --dark:#121212;
  --glass:rgba(15, 61, 46, 0.75);
  --light:#f8fdf9;
}

body{
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-style: normal;

  background:
    linear-gradient(
      135deg,
      #f8fdf9 0%,
      #eef8f1 40%,
      #f6f4eb 100%
    );

  color:#1c1c1c;
  overflow-x:hidden;
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom:1px solid rgba(255,255,255,0.25);

  box-shadow:
    0 6px 24px rgba(0,0,0,0.06);
}

.navbar-brand img{
  filter:grayscale(0);
}

.nav-link{
  color:#111 !important;
  font-weight:500;
  transition:all .25s ease;
}

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

/* =========================================================
   HERO / PRIMARY BACKGROUND
========================================================= */

.bg-gradient-primary {
  background:
    linear-gradient(
      135deg,
      #0f3d2e 0%,
      #1f6f50 40%,
      #8bc34a 100%
    );

  color:white;
}

/* =========================================================
   STORY SECTION
========================================================= */

.bg-mint {
  background:
    linear-gradient(
      135deg,
      #f8fff8 0%,
      #edf8f0 35%,
      #f7f3e8 100%
    );

  position:relative;
  overflow:hidden;
}

.bg-mint::before{
  content:'';
  position:absolute;
  top:-120px;
  right:-120px;

  width:350px;
  height:350px;

  background:
    radial-gradient(
      rgba(139,195,74,0.25),
      transparent 70%
    );

  border-radius:50%;
  pointer-events:none;
}

.story-section{
  position:relative;
  z-index:2;
}

.story-image-wrapper {
  position: relative;
}

.story-image-wrapper img {
  border-radius: 28px;

  box-shadow:
    0 18px 45px rgba(0,0,0,0.12);

  transition: transform 0.45s ease;
}

.story-image-wrapper img:hover {
  transform: scale(1.02);
}

.story-badge{
  display:inline-block;
  padding:0.55rem 1.2rem;

  background:
    linear-gradient(
      135deg,
      #0f3d2e,
      #1f6f50
    );

  color:white;

  border-radius:50px;

  font-size:.82rem;
  font-weight:700;

  box-shadow:
    0 8px 24px rgba(15,61,46,0.25);

  letter-spacing:1px;
}

.story-section h2 {
  font-family: "Merriweather", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing:-0.5px;

  color:#0f3d2e;
}

.story-section p{
  color:#36423d;
  line-height:1.9;
  font-size:1.05rem;
}

.story-divider {
  width: 70px;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      #1f6f50,
      #8bc34a
    );

  border-radius: 20px;
  margin: 1rem 0 2rem;
}

/* =========================================================
   GLOSSY FEATURE BOXES
========================================================= */

.story-highlight-box {

  background: rgba(15, 61, 46, 0.78);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border:1px solid rgba(255,255,255,0.15);

  border-radius:22px;

  padding:1.4rem 1rem;

  text-align:center;

  color:white;

  box-shadow:
    0 10px 35px rgba(15,61,46,0.18),
    inset 0 1px 0 rgba(255,255,255,0.15);

  transition:all .35s ease;

  height:100%;
}

.story-highlight-box:hover{

  transform:translateY(-8px);

  box-shadow:
    0 18px 45px rgba(31,111,80,0.32);
}

.story-highlight-box h4 {

  font-size:1.2rem;
  font-weight:700;

  margin-bottom:.35rem;

  color:#ffffff;
}

.story-highlight-box small {

  color:rgba(255,255,255,0.78);

  font-size:.88rem;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.unica-one-regular {

  font-family: "Unica One", sans-serif;
  font-weight: 400;
  font-style: normal;

  font-size: 40px;

  color:#0f3d2e;
}

.merriweather-heading {

  font-family: "Merriweather", serif;
  font-optical-sizing: auto;

  font-weight: 700;

  font-style: normal;

  color:#0f3d2e;
}

.lead{
  color:#1c1c1c;
}

/* =========================================================
   HERO SECTION
========================================================= */

.hero-section {

    position: relative;

   height: 72vh;
   min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.82) 0%,
            rgba(0,0,0,0.62) 35%,
            rgba(0,0,0,0.20) 60%,
            rgba(0,0,0,0.05) 100%
        ),
        url('../img/bg2.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* =========================================================
   OPTIONAL OVERLAY GLOW
========================================================= */

.hero-overlay {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(139,195,74,0.20),
            transparent 35%
        );

    z-index: 1;
}

/* =========================================================
   CONTENT
========================================================= */

.hero-content {

    position: relative;
    z-index: 2;
}

/* =========================================================
   HERO BADGE
========================================================= */

.hero-badge {

    display: inline-flex;
    align-items: center;

    padding: 0.7rem 1.2rem;

    border-radius: 50px;

    background:
        rgba(255,255,255,0.12);

    backdrop-filter: blur(10px);

    border:
        1px solid rgba(255,255,255,0.15);

    color: #ffffff;

    font-size: 0.85rem;
    font-weight: 600;

    margin-bottom: 1.5rem;

    letter-spacing: 0.5px;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.12);
}

/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {

    font-family: "Merriweather", serif;

    font-size: clamp(2.8rem, 3vw, 5.5rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -2px;

    color: #ffffff;

    margin-bottom: 1.5rem;

    text-shadow:
        0 4px 25px rgba(0,0,0,0.35);
}

/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {

    font-size: 1.15rem;

    line-height: 1.9;

    color: rgba(255,255,255,0.88);

    max-width: 650px;

    margin-bottom: 2rem;
}

/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-hero-primary {

    background:
        linear-gradient(
            135deg,
            #1f6f50,
            #8bc34a
        );

    color: white;

    border: none;

    padding: 1rem 2rem;

    border-radius: 16px;

    font-weight: 600;

    box-shadow:
        0 12px 30px rgba(31,111,80,0.35);

    transition: all .3s ease;
}

.btn-hero-primary:hover {

    transform: translateY(-3px);

    color: white;

    box-shadow:
        0 18px 35px rgba(31,111,80,0.45);
}

.btn-hero-secondary {

    background:
        rgba(255,255,255,0.10);

    color: white;

    border:
        1px solid rgba(255,255,255,0.18);

    backdrop-filter: blur(12px);

    padding: 1rem 2rem;

    border-radius: 16px;

    font-weight: 600;

    transition: all .3s ease;
}

.btn-hero-secondary:hover {

    background:
        rgba(255,255,255,0.18);

    color: white;

    transform: translateY(-3px);
}

/* =========================================================
   HERO FEATURES
========================================================= */

.hero-features {

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.min-vh-1001 {
    height: 40vh !important;
    min-height: 680px  !important;
}
.hero-feature-item {

    display: flex;
    align-items: center;

    gap: 0.5rem;

    padding: 0.8rem 1rem;

    border-radius: 14px;

    background:
        rgba(255,255,255,0.08);

    backdrop-filter: blur(10px);

    border:
        1px solid rgba(255,255,255,0.10);

    color: rgba(255,255,255,0.92);

    font-size: 0.95rem;

    transition: all .3s ease;
}

.hero-feature-item:hover {

    transform: translateY(-3px);

    background:
        rgba(255,255,255,0.14);
}

.hero-feature-item span {

    color: #8bc34a;

    font-weight: bold;
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .hero-section {

        text-align: left;

        background-position: 72% center;
    }

    .hero-title {

        font-size: 2.8rem;

        line-height: 1.15;
    }

    .hero-description {

        font-size: 1rem;
    }

    .hero-buttons {

        justify-content: center;
    }

    .hero-features {

        justify-content: center;
    }

    .btn-hero-primary,
    .btn-hero-secondary {

        width: 100%;
    }
}
/* =========================================================
   BUTTONS
========================================================= */

.btn-primary{

  background:
    linear-gradient(
      135deg,
      #0f3d2e,
      #1f6f50
    );

  border:none;

  border-radius:14px;

  box-shadow:
    0 10px 24px rgba(15,61,46,0.25);

  transition:all .3s ease;
}

.btn-primary:hover{

  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #14543f,
      #2f8f66
    );
}

.btn-outline-primary {

  background-color: rgba(255,255,255,0.5);

  border:1px solid rgba(15,61,46,0.15);

  color:#0f3d2e;

  backdrop-filter:blur(10px);

  border-radius:14px;
}

.btn-outline-primary:hover{

  background:#0f3d2e;

  color:white;
}

/* =========================================================
   CARDS
========================================================= */

.card{

  border:none;

  border-radius:24px;

  overflow:hidden;

  background:white;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.06);
}

.feature-card{

  transition:all .35s ease;
}

.feature-card:hover{

  transform:translateY(-10px);

  box-shadow:
    0 18px 45px rgba(31,111,80,0.22);
}

.award-card {

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.95),
      rgba(241,248,242,0.95)
    );
}

.pricing-card {

  transition: transform 0.3s ease;
}

.pricing-card:hover {

  transform: translateY(-8px);
}

/* =========================================================
   GLASS CARD
========================================================= */

.glass-card{

  background:rgba(255,255,255,0.15);

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.18);

  box-shadow:
    0 8px 32px rgba(0,0,0,0.12);

  border-radius:24px;
}

/* =========================================================
   TEXT COLORS
========================================================= */

.text-primary {
  color:#1f6f50 !important;
}

.border-primary {
  border-color:#1f6f50 !important;
}

.text-mint {
  color:#8bc34a !important;
}

.bg-brown {
  background-color:#0f3d2e !important;
}

/* =========================================================
   STATS
========================================================= */

.stats-grid {

  display:grid;

  grid-template-columns: repeat(2, 1fr);

  gap:2rem;

  text-align:center;
}

.stat-item h3 {

  font-size:2.6rem;

  font-weight:700;

  color:#0f3d2e;

  margin-bottom:0.5rem;
}

.stat-item p {

  color:#5f6b66;

  margin:0;
}

/* =========================================================
   ANIMATIONS
========================================================= */

.animate-fade-in {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {

  from {
    opacity:0;
    transform:translateY(20px);
  }

  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   SPACING
========================================================= */

.mb-5{
  margin-top:3rem;
}

.padding-top{
  padding-top:3rem;
  padding-bottom:0;
}

/* =========================================================
   SOCIAL
========================================================= */

.social-links a:hover{
  opacity:0.8;
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {

  .story-section {
    text-align:center;
  }

  .story-divider {
    margin-left:auto;
    margin-right:auto;
  }

  .story-highlight-box {
    margin-bottom:1rem;
  }

  .stats-grid {
    grid-template-columns:repeat(2, 1fr);
    gap:1rem;
  }

  .stat-item h3 {
    font-size:2rem;
  }

  .unica-one-regular {
    font-size:28px;
  }

  .container {
    padding:1rem;
  }

  .btn-primary,
  .btn-outline-primary {

    width:100%;
    padding:.85rem;
  }

  .card{
    margin:1rem 0;
  }

  .ms-3{
    margin-left:0 !important;
  }

  .ms-2{
    margin-left:0 !important;
    margin-top:5px;
  }
}