/* =========================================================
   PAGE — HOME
   ========================================================= */


/* =========================================================
   HOME — HERO
   ========================================================= */


.hero-area {
   position: relative;
   padding: 130px 0 100px;
   overflow: hidden;
}


.hero-area::before {

   content: '';

   position: absolute;

   inset: 0;

   background:
      radial-gradient(circle at top left,
         rgba(20, 184, 166, .18),
         transparent 35%),

      radial-gradient(circle at bottom right,
         rgba(56, 189, 248, .10),
         transparent 35%);

   z-index: -1;

}



/* HERO IMAGE */

.hero-image-box {

   border-radius: 40px;

   overflow: hidden;

   border: 1px solid var(--border);

   background: var(--card);

   box-shadow:
      0 20px 50px rgba(0, 0, 0, .35);

}



/* HERO STATS */

.stats-row {

   display: flex;

   gap: 40px;

   flex-wrap: wrap;

   margin-top: 40px;

}


.stat-box h3 {

   font-size: 1.5rem;

   margin-bottom: 6px;

   color: var(--primary);

}

.stat-box p {

   color: var(--text);

}



/* =========================================================
   SECTION BADGE
   ========================================================= */


.section-badge {

   background:
      rgba(20, 184, 166, .12);

   border:

      1px solid rgba(20, 184, 166, .25);

   color: var(--primary);

}



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


.product-card {

   margin: 0 5px;

   position: relative;

   transition: .3s ease;

}



.product-card:hover {

   transform: translateY(-5px);

   border-color:
      rgba(20, 184, 166, .45);

}



/* IMAGE */

.product-image-box {

   padding: 5px;

   border-radius: 20px;

   overflow: hidden;

}



.product-image-box img {

   border-radius: 20px;

}



/* CONTENT */

.product-content-box {

   padding: 20px;

}



.product-category {

   color: var(--primary);

   font-size: .9rem;

}



/* PRODUCT BADGE */


.product-badge {

   background:

      rgba(20, 184, 166, .12);

   border:

      1px solid rgba(20, 184, 166, .25);

   color: var(--primary);

}



/* PRICE */

.price-wraper .title-md {

   color: var(--white);

}



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


.category-card:hover {

   border-color:

      rgba(20, 184, 166, .35);

}



.category-card .badge {

   background: var(--primary) !important;

   color: #00110e !important;

}



/* =========================================================
   ICON BOXES
   ========================================================= */


.icon-circle {

   background:

      rgba(20, 184, 166, .12);

   color: var(--primary);

}



/* =========================================================
   PARALLAX SECTION
   ========================================================= */


.parallax-area {

   background:

      url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?q=80&w=1400&auto=format&fit=crop') center/cover fixed;

}



.parallax-overlay {

   background:

      rgba(7, 11, 18, .82);

}



/* =========================================================
   FAQ
   ========================================================= */


.faq-item {

   background:

      var(--card);

   border:

      1px solid var(--border);

}



.accordion-button {

   background:

      var(--card) !important;

   color: var(--white) !important;

}



.accordion-button:not(.collapsed) {

   color: var(--primary) !important;

}



.accordion-body {

   background:

      var(--card);

   color: var(--text);

}



/* =========================================================
   HOME BLOG CARDS
   ========================================================= */


.article-card:hover,
.card-box:hover {

   border-color:

      rgba(20, 184, 166, .35);

}

.home-blog-grid > [class*="col-"] { display:flex; }
.home-blog-grid .blog-card { width:100%; }
.home-blog-grid .blog-card-image { height:clamp(210px,22vw,260px); }
.home-blog-grid .blog-card-body { padding:20px; }
.home-blog-grid .blog-title { min-height:2.4em; }
.home-blog-grid .blog-excerpt { margin-top:10px; font-size:.95rem; }
.home-blog-grid .blog-card-body .blog-footer { gap:10px; padding-top:18px; }
.home-blog-grid .blog-date { font-size:.85rem; }
.home-blog-more { margin-top:32px; text-align:center; }
@media(max-width:767px) {
   .home-blog-grid .blog-card-image { height:clamp(210px,58vw,300px); }
}