/* =========================================================
   VYLIX RESEARCH PEPTIDES CSS SYSTEM
   ========================================================= */

:root {
   /* Brand */
   --primary: #00a86b;
   --primary-dark: #008f5a;
   --primary-soft: rgba(0, 168, 107, .12);
   --primary-border: rgba(0, 168, 107, .22);
   --accent: #f7f5f0;

   /* Backgrounds */
   --bg-main: #ffffff;
   --bg-light: #f8fafc;
   --bg-gray: #eeeeee;
   --bg-soft: #f1f5f9;
   --card: #ffffff;
   --overlay: rgba(255, 255, 255, .85);

   /* Text */
   --text: #4b5563;
   --text-dark: #111827;
   --text-muted: #6b7280;
   --heading: #0f172a;
   --white: #ffffff;

   /* Borders */
   --border: rgba(15, 23, 42, .08);
   --border-dark: rgba(15, 23, 42, .15);

   /* Effects */
   --shadow-sm: 0 4px 12px rgba(15, 23, 42, .06);
   --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
   --shadow-lg: 0 20px 50px rgba(15, 23, 42, .12);
   --shadow-hover: 0 20px 45px rgba(15, 23, 42, .12);

   /* Radius */
   --radius-lg: 28px;
   --radius-md: 18px;

   /* Animation */
   --transition: .3s ease;

   /* Footer */
   --footer-bg: #0f172a;
   --footer-card: #162033;
   --footer-text: #cbd5e1;
   --footer-muted: #94a3b8;
   --footer-border: rgba(255, 255, 255, .08);

   /* Sections */
   --section-bg: #f8fafc;
   --section-alt: #f1f5f9;

   /* Status */
   --success: #16a34a;
   --warning: #f59e0b;

   /* Glass */
   --glass: rgba(255, 255, 255, .7);

   /* Compatibility */
   --dark: var(--heading);
   --bg: var(--bg-main);
   --card-light: var(--bg-light);
}

/* =========================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================= */
.reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: all 0.7s ease;
   will-change: opacity, transform;
}

.reveal.active {
   opacity: 1;
   transform: translateY(0);
}

.reveal.delay-1 {
   transition-delay: 0.1s;
}

.reveal.delay-2 {
   transition-delay: 0.2s;
}

.reveal.delay-3 {
   transition-delay: 0.3s;
}

.reveal.delay-4 {
   transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
   .reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }
}


/* =============================
   SCROLL TO TOP
   ============================= */
.scroll-top-btn {
   position: fixed;
   left: 30px;
   bottom: 30px;
   width: 50px;
   height: 50px;
   border: none;
   outline: none;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: all 0.3s ease;
   box-shadow: var(--shadow-md);
}

.scroll-top-btn:hover {
   transform: translateY(-5px);
   background: var(--primary-dark);
}

.scroll-top-btn.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}


/* ========================================
  CART MODAL
  ======================================== */

.cart-modal {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 9999;
   display: none;
}

.cart-modal-content {
   background: var(--card);
   color: var(--text-dark);
   padding: 15px 18px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 260px;
   box-shadow: var(--shadow-lg);
   border: 1px solid var(--border);
   animation: slideIn 0.3s ease;
}

.cart-modal-icon i {
   font-size: 22px;
   color: var(--primary);
}

.cart-modal-text h4 {
   margin: 0;
   font-size: 15px;
}

.cart-modal-text p {
   margin: 0;
   font-size: 12px;
   opacity: 0.8;
}

.cart-modal-close {
   background: none;
   border: none;
   color: var(--text-dark);
   font-size: 18px;
   cursor: pointer;
   margin-left: auto;
}

@keyframes slideIn {
   from {
      transform: translateX(100px);
      opacity: 0;
   }

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


/* ========================================
  WHATSAPP BUTTON
  ======================================== */
.whatsapp-chat {
   position: fixed;
   right: 25px;
   bottom: 120px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #25D366;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;
   text-decoration: none;
   box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
   z-index: 9999;
   transition: .3s;
}

.whatsapp-chat:hover {
   transform: scale(1.08);
   color: #fff;
}

@media (max-width:999px) {
   .whatsapp-chat {

      bottom: 90px;
   }
}


/* =============================
   PAGE LOADER
============================= */

.page-loader {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   background: var(--bg-main);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 99999;
   transition: opacity 0.5s ease,
      visibility 0.5s ease;
}

.page-loader img {
   width: 300px;
   animation: loaderPulse 1.5s ease-in-out infinite;
}

.page-loader.fade-out {
   opacity: 0;
   visibility: hidden;
}

@keyframes loaderPulse {

   0% {
      transform: scale(0.9);
      opacity: 0.6;
   }

   50% {
      transform: scale(1);
      opacity: 1;
   }

   100% {
      transform: scale(0.9);
      opacity: 0.6;
   }

}

/* =========================================================
   SWIPER CUSTOMIZATION
   ========================================================= */

/* Category Swiper */
.category-swiper {
   padding: 10px 20px 60px;
}

.category-swiper .category-card {
   height: 100%;
}

/* On Sale Product Swiper*/
.product-swiper .swiper-wrapper {
   padding-bottom: 40px;
}

/* Featured Product Swiper*/
.feature-product-swiper .swiper-wrapper {
   padding-bottom: 40px;
}



.swiper-slide {
   height: auto;
}

.swiper-button-next,
.swiper-button-prev {
   color: var(--text-dark);
   width: 60px;
   height: 60px;
   padding: 15px;
   border-radius: 50%;
   background: var(--card);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
}

/* position */
.swiper-button-prev {
   left: 5px;
}

.swiper-button-next {
   right: 5px;
}

/* Optional hover effect */
.swiper-button-next:hover,
.swiper-button-prev:hover {
   background: var(--bg-soft);
}

.swiper-pagination-bullet {
   background: var(--text-muted);
   opacity: 1;
   width: 8px;
   height: 8px;
   transition: all 0.3s ease;
}

/* Active bullet */
.swiper-pagination-bullet-active {
   background: var(--primary);
}


/* =========================================================
   RESET & BASE
   ========================================================= */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Nunito', sans-serif;
   background: var(--bg-main);
   color: var(--text-dark);
   overflow-x: hidden;
}

body.no-scroll {
   overflow-y: hidden;
   height: 100vh;
}

img {
   width: 100%;
   display: block;
}

a {
   text-decoration: none;
   color: inherit;
}

ul {
   list-style: none;
}

button,
input,
textarea {
   border: none;
   outline: none;
   background: none;
   font-family: inherit;
}

.row {
   margin: 0 !important;
}

.text-clamp {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   /* change this to M lines */
   overflow: hidden;
}

.title-clamp {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   /* change this to M lines */
   overflow: hidden;
}

/* =========================================================
   GLOBAL SPACING
   ========================================================= */
.section-space {
   padding: 80px 0;
}

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

.title-xl,
.title-lg,
.title-md,
.title-l {
   color: var(--heading);
}

.title-xl {
   font-size: clamp(2.5rem, 6vw, 4.6rem);
   line-height: 1.05;
   font-weight: 800;
   letter-spacing: -2px;
   color: var(--primary-dark);
}

.title-lg {
   font-size: clamp(1.5rem, 4vw, 3.0rem);
   line-height: 1.1;
   font-weight: 700;
   letter-spacing: -1px;
   color: var(--primary-dark);
}

.title-md {
   font-size: 1.35rem;
   font-weight: 700;
}

.title-l {
   font-size: 2rem;
   font-weight: 600;
   color: var(--primary-dark);
}

.text-body {
   color: var(--text-muted);
   line-height: 1.8;
   font-size: 1rem;
}

.section-light {
   background: var(--section-bg);
}

.section-alt {
   background: var(--section-alt);
}

.text-gradient {
   color: var(--primary-dark);
}

.glass-card {
   background: var(--glass);
   backdrop-filter: blur(15px);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-md);
}

/* =========================================================
   GLOBAL COMPONENTS
   ========================================================= */
/* ---------- SECTION BADGE ---------- */
.section-badge {
   display: inline-flex;
   align-items: center;
   padding: 10px 18px;
   border-radius: 999px;
   background: var(--primary-soft);
   border: 1px solid var(--primary-border);
   color: var(--primary);
   margin-bottom: 22px;
   font-size: 0.9rem;
}

/* ---------- CARD SYSTEM ---------- */
.card-box {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   height: 100%;
   position: relative;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
}
/* ---------- IMAGE FRAME ---------- */
.media-frame-lg {
   border-radius: 40px;
   overflow: hidden;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-md);
}

/* ---------- ICON SYSTEM ---------- */
.icon-circle {
   width: 72px;
   height: 72px;
   border-radius: 22px;
   background: var(--primary-soft);
   border: 1px solid var(--primary-border);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: auto auto 24px;
   font-size: 1.6rem;
   color: var(--primary);
}

/* =========================================================
   BUTTON SYSTEM
   ========================================================= */
/* ---------- PRIMARY BUTTON ---------- */
.btn-main {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 30px;
   border-radius: 20px;
   background: var(--primary);
   color: var(--white);
   font-weight: 600;
   transition: var(--transition);
}

.btn-main:hover {
   background: var(--primary-dark);
   transform: translateY(-2px);
}

.btn-main i {
   padding-left: 10px;
   font-size: 15px;
   font-weight: 700;
}

/* ---------- OUTLINE BUTTON ---------- */
.btn-outline-main {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 16px 28px;
   border-radius: 999px;
   border: 1px solid var(--border);
   color: var(--text-dark);
   transition: var(--transition);
}

.btn-outline-main:hover {
   background: var(--bg-soft);
}

/* ========================================
  HEADER
  ======================================== */

.header {
   width: 100%;
   position: fixed;
   z-index: 900;
   margin: 0 auto;
   background-color: transparent;
}

.header .header-wrapper {
   margin: 0 auto;
   box-sizing: border-box;
   background: var(--overlay);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border);
}

.header .nav-brand img {
   width: 180px;
}

/* Navigation Menu */
.header .nav-menu li {
   padding: 0 20px;
}

.header .list-item .nav-link{
   font-size: 1rem !important;
}

.nav-link.active::after {
   width: 100%;
}

.nav-link.active {
   color: var(--primary);
}

/* Sidebar Navigation */
#sidebar {
   position: fixed;
   top: 0;
   left: -101%;
   width: 100%;
   height: 100%;
   z-index: 999;
   padding-bottom: 40px;
   background: var(--overlay);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   transition: left 0.3s ease;
   overflow-y: scroll;
}

/* Sidebar Active State */
#sidebar.active {
   left: 0;
}

#sidebar .nav-item .nav-link {
   width: fit-content;
   padding-right: 30px !important;
   color: var(--text-dark);
}


/* ========================================
  NAVIGATION & LINKS
  ======================================== */

/* Nav and Footer Links */
.nav-link,
.footer-link {
   position: relative;
   text-decoration: none;
   padding: 0 10px;
}

.nav-link {
   color: var(--dark);
}

.footer-link {
   color: var(--white);
}

.nav-link:hover,
.footer-link:hover {
   color: var(--primary);
}

/* Animated underline effect */
.nav-link::after,
.footer-link::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: -8px;
   width: 0;
   height: 2px;
   background-color: var(--primary);
   transition: all 0.3s ease;
   transform: translateX(-50%);
}

.nav-link:hover::after,
.footer-link:hover::after {
   width: 100%;
}


/* ---------- Large Screen ---------- */
@media(min-width:1024px) {
   .header {
      top: 5px;
   }

  .header .header-wrapper {
     width: 80%;
     padding: 0 30px;
     border-radius: 50px;
     border: 1px solid var(--border);
  }
}


/* =========================================================
   FOOTER
   ========================================================= */
.footer-area {
   background: var(--footer-bg);
   border-top: 1px solid var(--footer-border);
   padding: 90px 0 40px;
}

.footer-area .title-lg,
.footer-area .title-md,
.footer-area .title-l,
.footer-area h1,
.footer-area h2,
.footer-area h3,
.footer-area h4,
.footer-area h5,
.footer-area h6,
.footer-area p {
   color: var(--white);
}

/* ---------- FOOTER LINKS ---------- */
.footer-links {
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-top: 20px;
}

.footer-links a {
   color: var(--footer-text);
   position: relative;
   transition: var(--transition);
}

.footer-links a:hover {
   color: var(--primary);
}

/* ---------- FOOTER TEXT ---------- */
.footer-area p,
.footer-area span,
.footer-area li,
.footer-area small {
   color: var(--footer-muted);
}

/* ---------- FOOTER BOTTOM ---------- */
.footer-bottom {
   border-top: 1px solid var(--footer-border);
   margin-top: 20px;
   padding-top: 20px;
}

/* ---------- PAYMENT CARDS ---------- */
.payment-cards .card {
   background: transparent;
   border: none;
   padding: 0 !important;
}

.payment-cards .card img {
   width: 60px !important;
   height: 30px !important;
   border-radius: 5px;
}

@media (min-width:1024px) {
   .payment-cards .card img {
      width: 100px !important;
      height: 50px !important;
   }
}



/* =========================================================
   PAGE — HOME
   ========================================================= */
/* =========================================================
   HOME — HERO
   ========================================================= */
.hero-area {
   position: relative;
   padding: 150px 0 110px;
   overflow: hidden;
   background: var(--bg-main);
}

.hero-area::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at top left,
         var(--primary-soft),
         transparent 35%),
      radial-gradient(circle at bottom right,
         rgba(0, 168, 107, 0.08),
         transparent 35%);
   z-index: -1;
}

/* ---------- HERO IMAGE ---------- */
.hero-image-box {
   border-radius: 40px;
   overflow: hidden;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-md);
}

/* ---------- HERO STATS ---------- */
.stats-row {
   display: flex;
   gap: 40px;
   flex-wrap: wrap;
   margin-top: 40px;
}

.stat-box h3 {
   font-size: 1.5rem;
   margin-bottom: 6px;
}

/* =========================================================
   HOME — CATEGORY SECTION
   ========================================================= */
.category-card {
   padding: 20px 1px;
   border-radius: 20px;
   overflow: visible !important;
   position: relative !important;
   text-align: center;
   transition: var(--transition);
}

.category-card:hover {
   transform: translateY(-6px);
   border-color: var(--primary-border);
   box-shadow: var(--shadow-md);
}

.category-card .category-image {
   border-radius: 20px;
}

.category-card img {
   border-radius: 10px !important;
   width: calc(100% - 40px);
   margin: 0 auto;
   max-height: 180px;
   object-fit: cover;
}

.category-card .badge {
   position: absolute;
   top: 25px;
   left: 25px;
   border-radius: 10px;
}

.category-card .content {
   padding: 0 20px;
}


/* =========================================================
   HOME — PRODUCT SYSTEM
   ========================================================= */
.product-card {
   margin: 0 5px;
   position: relative;
   transition: var(--transition);
   border: 1px solid var(--border);
   background: var(--card);
}

.product-card:hover {
   transform: translateY(-5px);
   border-color: var(--primary-border);
   box-shadow: var(--shadow-md);
}

.product-content-box {
   padding: 20px;
   border-radius: 20px;
   overflow: hidden;
}

.product-image-box {
   padding: 5px 5px 0;
   border-radius: 20px;
   overflow: hidden;
}

.product-image-box img {
   border-radius: 20px;
   max-height: 300px !important;
}

/* CATEGORY BADGE */
.product-badge {
   position: absolute;
   top: 16px;
   left: 16px;

   background: var(--primary-soft);
   border: 1px solid var(--primary-border);

   color: var(--primary);
   font-size: 0.8rem;
   font-weight: 600;

   padding: 6px 12px;
   border-radius: 999px;

   z-index: 2;
   backdrop-filter: blur(8px);
}

.product-category {
   color: var(--primary);
   font-size: 0.9rem;
}

/* =========================================================
   HOME — FEATURE CARDS
   ========================================================= */
.feature-card-box {
   padding: 40px 30px;
}

/* =========================================================
   HOME — BEST SELER CARDS
   ========================================================= */
.best-seller-image img {
   max-height: 500px !important;
}

/* =========================================================
   HOME — PARALLAX SECTION
   ========================================================= */
.parallax-area {
   background:
      url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?q=80&w=1400&auto=format&fit=crop') center/cover fixed;
   position: relative;
}

.parallax-area .container a, .parallax-area .container p, .parallax-area .container li{
   color: var(--white) !important;
}

.parallax-area .container a:hover{
   color: var(--dark) !important;
}

.parallax-overlay {
   background: rgba(0, 0, 0, 0.45);
   padding: 150px 0;
}

/* =========================================================
   HOME — FAQ SECTION
   ========================================================= */
.faq-item {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 18px;
   overflow: hidden;
   margin-bottom: 18px;
   box-shadow: var(--shadow-sm);
}
/* ---------- FAQ BUTTON ---------- */
.accordion-button {
   background: var(--card) !important;
   color: var(--text-dark) !important;
   box-shadow: none !important;
}

.accordion-body {
   color: var(--text);
   background: var(--card);
}

/* ---------- FAQ BODY ---------- */
.accordion-body {
   color: var(--text);
   background: var(--card);
}

/* =========================================================
   PAGE — ABOUT
   ========================================================= */
.about-hero-section {
   padding-top: 150px;
}

/* =========================================================
   ABOUT — TIMELINE
   ========================================================= */
.timeline-card-box {
   padding: 40px 20px;
   text-align: center;
}

.timeline-number {
   font-size: 3rem;
   font-weight: 800;
   color: rgba(255, 255, 255, 0.08);
   line-height: 1;
}

/* =========================================================
   ABOUT — CTA SECTION
   ========================================================= */
.cta-box-wrapper {
   padding: 70px;
}

/* =========================================================
   UTILITIES
   ========================================================= */
/* ---------- TEXT COLORS ---------- */
.text-primary-custom {
   color: var(--primary);
}

.text-white-custom {
   color: var(--white);
}

.text-dark-custom {
   color: var(--text-dark);
}

.bg-card-custom {
   background: var(--card);
}

.bg-main-custom {
   background: var(--bg-main);
}

.bg-light-custom {
   background: var(--bg-light);
}

/* ---------- BORDER UTILITIES ---------- */
.border-custom {
   border: 1px solid var(--border);
}

/* ---------- RADIUS UTILITIES ---------- */
.radius-lg {
   border-radius: var(--radius-lg);
}

.radius-md {
   border-radius: var(--radius-md);
}

/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */
/* ---------- TABLET ---------- */
@media(max-width:991px) {
   .section-space {
      padding: 90px 0;
   }

   .hero-area {
      padding-top: 110px;
   }
}

/* ---------- MOBILE ---------- */
@media(max-width:767px) {
   .title-xl {
      letter-spacing: -1px;
   }

   .stats-row {
      gap: 24px;
   }

   .product-image-box {
      height: 240px;
      max-height: 250px !important;
   }

   .product-image-box img {
      height: 240px;
      max-height: 250px !important;
   }

   .cta-box-wrapper {
      padding: 40px 25px;
   }
}

/* =========================================================
   PAGE — RESEARCH
   ========================================================= */
/* ---------- HERO ---------- */
.research-hero-section {
   position: relative;
   overflow: hidden;
}

.research-hero-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at top right,
         var(--primary-soft),
         transparent 35%),
      radial-gradient(circle at bottom left,
         rgba(0, 168, 107, 0.08),
         transparent 35%);
   z-index: -1;
}

/* ---------- RESEARCH CARDS ---------- */
.research-card-box {
   padding: 40px 30px;
   text-align: center;
   transition: var(--transition);
}

.research-card-box:hover {
   transform: translateY(-6px);
   border-color: var(--primary-border);
   box-shadow: var(--shadow-md);
}

/* ---------- ARTICLE SYSTEM ---------- */
.article-card {
   transition: var(--transition);
}

.article-card:hover {
   transform: translateY(-6px);
}

.research-image-box {
   height: 260px;
   overflow: hidden;
}

.research-image-box img {
   height: 100%;
   object-fit: cover;
   transition: var(--transition);
}

.article-card:hover .research-image-box img {
   transform: scale(1.05);
}

/* ---------- META ---------- */
.research-meta {
   display: inline-flex;
   padding: 8px 14px;
   border-radius: 999px;
   background: var(--primary-soft);
   border: 1px solid var(--primary-border);
   color: var(--primary);
   font-size: 0.82rem;
   font-weight: 600;
}

/* ---------- HIGHLIGHT SECTION ---------- */
.study-highlight-box {
   background: linear-gradient(145deg, var(--bg-main), var(--bg-light));
   border: 1px solid var(--border);
   border-radius: 40px;
   padding: 70px;
   box-shadow: var(--shadow-md);
}

/* ---------- RESEARCH STATS ---------- */
.research-stats-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
}

.research-stat-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 28px;
   text-align: center;
   box-shadow: var(--shadow-sm);
}

.research-stat-card h3 {
   font-size: 2rem;
   margin-bottom: 10px;
}

.research-stat-card p {
   color: var(--text-muted);
   margin: 0;
}

/* ---------- CTA ---------- */
.cta-box-wrapper {
   padding: 60px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
   .study-highlight-box {
      padding: 40px 30px;
   }

   .cta-box-wrapper {
      padding: 40px 30px;
   }
}

@media (max-width: 767px) {
   .research-image-box {
      height: 220px;
   }

   .research-stats-grid {
      grid-template-columns: 1fr;
   }
}

/* =========================================================
   PAGE — FAQ
   ========================================================= */
/* ---------- HERO ---------- */
.faq-hero-section {
   position: relative;
   overflow: hidden;
}

.faq-hero-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at top left,
         rgba(0, 208, 132, 0.14),
         transparent 30%),
      radial-gradient(circle at bottom right,
         rgba(0, 208, 132, 0.08),
         transparent 30%);
   z-index: -1;
}

/* ---------- FAQ CATEGORY LINKS ---------- */
.faq-link-card {
   display: block;
   padding: 40px 30px;
   text-align: center;
   transition: var(--transition);
}

.faq-link-card:hover {
   transform: translateY(-6px);
   border-color: rgba(0, 208, 132, 0.24);
}

/* ---------- FAQ SECTION ---------- */
.faq-section-header {
   margin-bottom: 40px;
}

/* ---------- FAQ ITEM ---------- */
.faq-item {
   margin-bottom: 18px;
}

/* ---------- ACCORDION ---------- */
.accordion-button {
   padding: 24px 26px;
   font-weight: 600;
   font-size: 1rem;
}

.accordion-body {
   padding: 0 26px 26px;
}

/* ---------- CTA ---------- */
.cta-box-wrapper {
   padding: 60px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
   .cta-box-wrapper {
      padding: 40px 30px;
   }
}

/* =========================================================
   PAGE — CERTIFICATES
   ========================================================= */
.certificates-hero {
   position: relative;
}

.certificates-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
         radial-gradient(circle at top left,
            var(--primary-soft),
            transparent 35%),
         radial-gradient(circle at bottom right,
            rgba(0, 168, 107, 0.08),
            transparent 35%);
   z-index: -1;
}

/* =========================================================
   PAGE — PRIVACY POLICY
   ========================================================= */
.privacy-hero {
   position: relative;
}

.privacy-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
         radial-gradient(circle at top left,
            var(--primary-soft),
            transparent 35%),
         radial-gradient(circle at bottom right,
            rgba(0, 168, 107, 0.08),
            transparent 35%);
   z-index: -1;
}

/* =========================================================
   PAGE — SHIPPING POLICY
   ========================================================= */
.shipping-hero {
   position: relative;
}

.shipping-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
         radial-gradient(circle at top left,
            var(--primary-soft),
            transparent 35%),
         radial-gradient(circle at bottom right,
            rgba(0, 168, 107, 0.08),
            transparent 35%);
   z-index: -1;
}

/* =========================================================
   PAGE — TERMS OF SERVICE
   ========================================================= */
.tos-hero {
   position: relative;
}

.tos-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
         radial-gradient(circle at top left,
            var(--primary-soft),
            transparent 35%),
         radial-gradient(circle at bottom right,
            rgba(0, 168, 107, 0.08),
            transparent 35%);
   z-index: -1;
}

/* =========================================================
   PAGE — CONTACT
   ========================================================= */
.contact-hero {
   position: relative;
}

.contact-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
         radial-gradient(circle at top left,
            var(--primary-soft),
            transparent 35%),
         radial-gradient(circle at bottom right,
            rgba(0, 168, 107, 0.08),
            transparent 35%);
   z-index: -1;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-info-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.contact-info-list {
   margin-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.contact-info-card {
   padding: 28px;
   display: flex;
   align-items: flex-start;
   gap: 20px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
}

.contact-icon {
   width: 60px;
   height: 60px;
   border-radius: 18px;
   background: var(--primary-soft);
   border: 1px solid var(--primary-border);
   color: var(--primary);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 1.4rem;
}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.contact-form-wrapper {
   padding: 50px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
}

.form-label-custom {
   display: block;
   margin-bottom: 12px;
   color: var(--text-dark);
   font-weight: 600;
}

.form-input-custom {
   width: 100%;
   background: var(--bg-main);
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 18px 20px;
   color: var(--text-dark);
   transition: var(--transition);
}

.form-input-custom:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 4px var(--primary-soft);
}

.form-textarea-custom {
   min-height: 180px;
   resize: vertical;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px) {
   .contact-form-wrapper {
      padding: 32px 24px;
   }
}