body{
  font-family:'Poppins',sans-serif;
  overflow-x:hidden;
}

.navbar{
  padding:15px 0;
}

.hero-section{
  min-height:100vh;
  padding-top:120px;
  background:linear-gradient(to right,#effff3,#ffffff);
}

.text-success{
  color:#18a558 !important;
}

.btn-success{
  background:#18a558;
  border:none;
}

.btn-success:hover{
  background:#148847;
}

.feature-card,
.module-card,
.price-card{
  border-radius:15px;
  transition:0.3s;
  background:#fff;
}

.feature-card:hover,
.module-card:hover,
.price-card:hover{
  transform:translateY(-10px);
}

.footer-area{
  background:#0d1117;
  color:#fff;
}

.footer-title{
  font-size:22px;
  margin-bottom:20px;
  font-weight:700;
}

.footer-links,
.footer-contact{
  list-style:none;
  padding:0;
}

.footer-links li,
.footer-contact li{
  margin-bottom:15px;
}

.footer-links a{
  text-decoration:none;
  color:#ddd;
  transition:0.3s;
}

.footer-links a:hover{
  color:#18a558;
  padding-left:5px;
}

.footer-divider{
  border-color:rgba(255,255,255,0.1);
}

.footer-text{
  color:#ccc;
  line-height:1.8;
}

.contact-box{
  border-radius:15px;
}
.hero-section{
  position:relative;
  min-height:100vh;
  background:
  linear-gradient(135deg,#185a8d 0%,#1b0f3d 45%,#14b86d 100%);
  overflow:hidden;
  padding-top:120px;
}

/* BACKGROUND CIRCLES */

.hero-bg-circle{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.35;
}

.circle-1{
  width:400px;
  height:400px;
  background:#22c55e;
  top:-120px;
  left:-120px;
}

.circle-2{
  width:300px;
  height:300px;
  background:#38bdf8;
  right:-100px;
  bottom:-100px;
}

.circle-3{
  width:250px;
  height:250px;
  background:#facc15;
  top:35%;
  left:45%;
}

/* HERO CONTENT */

.hero-left-content{
  position:relative;
  z-index:5;
}

.hero-tag{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  color:#fff;
  padding:12px 22px;
  border-radius:50px;
  font-size:14px;
  font-weight:500;
}

.hero-main-title{
  font-size:72px;
  line-height:1.15;
  font-weight:800;
  color:#fff;
}

.title-highlight{
  background:linear-gradient(to right,#4ade80,#facc15);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-description{
  color:#d1d5db;
  font-size:18px;
  line-height:1.9;
  max-width:620px;
}

/* BUTTONS */

.hero-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.hero-primary-btn{
  background:#22c55e;
  color:#fff;
  padding:16px 38px;
  border-radius:14px;
  font-weight:600;
  border:none;
  transition:0.3s;
  box-shadow:0 10px 30px rgba(34,197,94,0.4);
}

.hero-primary-btn:hover{
  background:#16a34a;
  transform:translateY(-5px);
  color:#fff;
}

.hero-secondary-btn{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  color:#fff;
  padding:16px 38px;
  border-radius:14px;
  font-weight:600;
  transition:0.3s;
}

.hero-secondary-btn:hover{
  background:#fff;
  color:#111;
}

/* STATS */

.hero-stat-card{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  border-radius:18px;
  text-align:center;
  padding:20px;
}

.hero-stat-card h2{
  color:#fff;
  font-size:34px;
  font-weight:700;
}

.hero-stat-card p{
  color:#d1d5db;
  margin:0;
  font-size:14px;
}

/* DASHBOARD */

.hero-dashboard-card{
  position:relative;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(18px);
  border-radius:28px;
  padding:25px;
  box-shadow:0 30px 60px rgba(0,0,0,0.25);
  z-index:2;
}

/* TOP BAR */

.dashboard-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px;
}

.topbar-left{
  display:flex;
  gap:8px;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

.red{
  background:#ff5f57;
}

.yellow{
  background:#ffbd2e;
}

.green{
  background:#28c840;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:15px;
  color:#fff;
}

.dashboard-user-img{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
}

/* DASHBOARD CARDS */

.dashboard-body{
  position:relative;
}

.dashboard-card{
  display:flex;
  align-items:center;
  gap:15px;
  background:#fff;
  border-radius:18px;
  padding:18px;
  margin-bottom:18px;
  box-shadow:0 15px 25px rgba(0,0,0,0.08);
}

.dashboard-card h6{
  margin-bottom:5px;
  color:#666;
}

.dashboard-card h3{
  margin:0;
  font-weight:700;
}

.dashboard-icon{
  width:55px;
  height:55px;
  background:#22c55e;
  color:#fff;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

/* GRAPH */

.graph-card{
  background:#fff;
  border-radius:20px;
  padding:30px;
  margin-top:20px;
}

.graph-bars{
  display:flex;
  align-items:flex-end;
  gap:15px;
  height:140px;
}

.graph-bars span{
  width:40px;
  background:linear-gradient(to top,#14b86d,#86efac);
  border-radius:12px 12px 0 0;
  animation:bars 2s infinite ease-in-out;
}

.graph-bars span:nth-child(1){height:40%;}
.graph-bars span:nth-child(2){height:70%;}
.graph-bars span:nth-child(3){height:55%;}
.graph-bars span:nth-child(4){height:90%;}
.graph-bars span:nth-child(5){height:65%;}
.graph-bars span:nth-child(6){height:100%;}

@keyframes bars{
  0%{
    opacity:0.7;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0.7;
  }
}

/* FLOATING CARDS */

.floating-mini-card{
  position:absolute;
  background:#fff;
  padding:14px 22px;
  border-radius:15px;
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
  font-weight:600;
  z-index:10;
  animation:floatCard 4s infinite ease-in-out;
}

.floating-mini-card i{
  color:#14b86d;
  margin-right:8px;
}

.mini-card-1{
  top:10%;
  left:-20px;
}

.mini-card-2{
  top:45%;
  right:-30px;
}

.mini-card-3{
  bottom:8%;
  left:5%;
}

@keyframes floatCard{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0px);
  }

}

/* IMAGE */

.dashboard-main-image{
  margin-top:25px;
  animation:floatImage 5s infinite ease-in-out;
}

@keyframes floatImage{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0px);
  }

}

/* RESPONSIVE */

@media(max-width:991px){

  .hero-section{
    text-align:center;
    padding-bottom:80px;
  }

  .hero-main-title{
    font-size:48px;
  }

  .floating-mini-card{
    display:none;
  }

  .hero-buttons{
    justify-content:center;
  }

}

@media(max-width:576px){

  .hero-main-title{
    font-size:36px;
  }

  .hero-description{
    font-size:16px;
  }

  .hero-stat-card{
    padding:15px 10px;
  }

  .hero-stat-card h2{
    font-size:24px;
  }

}

/* ===========================
   WHY CHOOSE SECTION
=========================== */

.why-choose-section{
    position: relative;
    background: linear-gradient(
        135deg,
        #f6fff8,
        #ffffff,
        #eefef2
    );
    overflow: hidden;
}

.why-choose-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(34,197,94,.08);
    border-radius:50%;
    top:-250px;
    left:-150px;
}

.why-choose-section::after{
    content:'';
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(59,130,246,.06);
    border-radius:50%;
    right:-200px;
    bottom:-150px;
}

.section-badge{
    display:inline-block;
    background:#dcfce7;
    color:#16a34a;
    padding:8px 20px;
    border-radius:50px;
    font-weight:600;
    font-size:14px;
}

.section-title{
    font-size:42px;
    font-weight:800;
}

.section-title span{
    color:#16a34a;
}

.section-subtitle{
    color:#6b7280;
    max-width:700px;
    margin:auto;
    font-size:17px;
}

.why-card{
    position:relative;
    background:#fff;
    padding:35px 25px;
    border-radius:25px;
    overflow:hidden;
    text-align:center;
    height:100%;
    transition:.4s;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.why-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.why-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(
        90deg,
        #22c55e,
        #3b82f6
    );
}

.why-icon{
    width:85px;
    height:85px;
    margin:auto;
    margin-bottom:25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        #22c55e,
        #0ea5e9
    );
    color:#fff;
    font-size:34px;
    box-shadow:0 15px 35px rgba(34,197,94,.25);
}

.why-card h4{
    font-weight:700;
    margin-bottom:15px;
    color:#111827;
}

.why-card p{
    color:#6b7280;
    line-height:1.8;
    margin-bottom:0;
}

.why-card:hover .why-icon{
    transform:rotateY(360deg);
    transition:.8s;
}

/* Mobile */
@media(max-width:768px){

    .section-title{
        font-size:30px;
    }

    .why-card{
        padding:25px;
    }

}

/* DASHBOARD SECTION */

.dashboard-showcase{
    background:#f8fffb;
}

.dashboard-img{
    border-radius:25px;
}

.dashboard-showcase h2{
    font-size:42px;
    line-height:1.3;
}