/* =========================================================
   MCPFACTORY CSS SYSTEM
   ========================================================= */
:root {
   --primary: #00d084;
   --primary-dark: #00b06f;
   --dark: #0b0b0c;
   --card: #121315;
   --border: rgba(255, 255, 255, 0.08);
   --text: #e7eaee;
   --white: #ffffff;
   --radius-lg: 28px;
   --radius-md: 18px;
   --transition: 0.3s ease;
   --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   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;
   right: 25px;
   bottom: 25px;
   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: 0 10px 25px rgba(0, 0, 0, 0.25);
}
.scroll-top-btn:hover {
   transform: translateY(-5px);
   background: var(--primary-dark);
}
.scroll-top-btn.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}


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

.page-loader {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   background: #0b0b0c;
   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;
   }

}


/* =========================================================
   RESET & BASE
   ========================================================= */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
}
body {
   font-family: 'Nunito', sans-serif;
   background: var(--dark);
   color: var(--white);
   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;
}

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

/* ====================================================
   TYPOGRAPHY SYSTEM
   ========================================================= */
.title-xl {
   font-size: clamp(3rem, 6vw, 5.5rem);
   line-height: 1.05;
   font-weight: 800;
   letter-spacing: -2px;
}
.title-lg {
   font-size: clamp(2rem, 4vw, 3.5rem);
   line-height: 1.1;
   font-weight: 700;
   letter-spacing: -1px;
}
.title-md {
   font-size: 1.35rem;
   font-weight: 600;
}
.title-l{
   font-size: 2rem;
   font-weight: 600;
}
.text-body {
   color: var(--text) !important;
   line-height: 1.8;
   font-size: 1rem;
}

/* =========================================================
   GLOBAL COMPONENTS
   ========================================================= */
/* ---------- SECTION BADGE ---------- */
.section-badge {
   display: inline-flex;
   align-items: center;
   padding: 10px 18px;
   border-radius: 999px;
   background: rgba(0, 208, 132, 0.12);
   border: 1px solid rgba(0, 208, 132, 0.2);
   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;
}
/* ---------- IMAGE FRAME ---------- */
.media-frame-lg {
   border-radius: 40px;
   overflow: hidden;
   border: 1px solid var(--border);
}
/* ---------- ICON SYSTEM ---------- */
.icon-circle {
   width: 72px;
   height: 72px;
   border-radius: 22px;
   background: rgba(0, 208, 132, 0.12);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: auto auto 24px;
   font-size: 1.6rem;
}

/* =========================================================
   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: #000;
   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(--white);
   transition: var(--transition);
}
.btn-outline-main:hover {
   background: #18191c;
}



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

.header {
   width: 100%;
   box-shadow: var(--shadow-md);
   position: fixed;
   z-index: 900;
   margin: 0 auto;
}

.header .header-wrapper{
   margin: 0 auto;
   box-sizing: border-box;
   background: rgba(11, 11, 12, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
}

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

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

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

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

/* Sidebar Navigation */
#sidebar {
   position: fixed;
   top: 0px;
   left: -101%;
   width: 100%;
   height: 100%;
   z-index: 999;
   background: rgba(11, 11, 12, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   transition: left 0.3s ease;
}

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

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


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

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

.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 #003d27;
   }
}



/* =========================================================
   FOOTER
   ========================================================= */
.footer-area {
   border-top: 1px solid var(--border);
   padding: 90px 0 40px;
}
/* ---------- FOOTER LINKS ---------- */
.footer-links {
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-top: 20px;
}
.footer-links a {
   color: var(--text);
   position: relative;
}
.footer-links a:hover{
   color: var(--primary);
}
/* ---------- FOOTER BOTTOM ---------- */
.footer-bottom {
   border-top: 1px solid var(--border);
   margin-top: 20px;
   padding-top: 20px;
}

.payment-cards .card{
   background-color: transparent;
   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: 130px 0 100px;
   overflow: hidden;
}
.hero-area::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at top left,
         rgba(0, 208, 132, 0.16),
         transparent 30%),
      radial-gradient(circle at bottom right,
         rgba(0, 208, 132, 0.08),
         transparent 30%);
   z-index: -1;
}
/* ---------- HERO IMAGE ---------- */
.hero-image-box {
   border-radius: 40px;
   overflow: hidden;
   border: 1px solid var(--border);
}
/* ---------- HERO STATS ---------- */
.stats-row {
   display: flex;
   gap: 40px;
   flex-wrap: wrap;
   margin-top: 40px;
}
.stat-box h3 {
   font-size: 2rem;
   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: rgba(0, 208, 132, 0.24);
}
.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: .3s ease;
   border: 1px solid rgba(255, 255, 255, .06);
}

.product-card:hover {
   transform: translateY(-5px);
   border-color: rgba(0, 208, 132, .4);
}

.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: rgba(0, 208, 132, 0.12);
   border: 1px solid rgba(0, 208, 132, 0.25);

   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-overlay {
   background: rgba(0, 0, 0, 0.72);
   padding: 150px 0;
}

/* =========================================================
   HOME — FAQ SECTION
   ========================================================= */
.faq-item {
   background: #111214;
   border: 1px solid var(--border);
   border-radius: 18px;
   overflow: hidden;
   margin-bottom: 18px;
}
/* ---------- FAQ BUTTON ---------- */
.accordion-button {
   background: #111214 !important;
   color: #fff !important;
   box-shadow: none !important;
}
.accordion-button::after {
   filter: brightness(10);
}
/* ---------- FAQ BODY ---------- */
.accordion-body {
   color: var(--text);
   background: #111214;
}

/* =========================================================
   PAGE — ABOUT
   ========================================================= */
/* =========================================================
   ABOUT — HERO
   ========================================================= */
.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);
}
/* ---------- BACKGROUNDS ---------- */
.bg-card-custom {
   background: var(--card);
}
.bg-dark-custom {
   background: var(--dark);
}
/* ---------- 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,
         rgba(0, 208, 132, 0.12),
         transparent 30%),
      radial-gradient(circle at bottom left,
         rgba(0, 208, 132, 0.08),
         transparent 30%);
   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: rgba(0, 208, 132, 0.25);
}
/* ---------- 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: rgba(0, 208, 132, 0.12);
   border: 1px solid rgba(0, 208, 132, 0.18);
   color: var(--primary);
   font-size: 0.82rem;
   font-weight: 600;
}
/* ---------- HIGHLIGHT SECTION ---------- */
.study-highlight-box {
   background: linear-gradient(145deg,
         #111214,
         #0d0e10);
   border: 1px solid var(--border);
   border-radius: 40px;
   padding: 70px;
}
/* ---------- RESEARCH STATS ---------- */
.research-stats-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
}
.research-stat-card {
   background: #141518;
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 28px;
   text-align: center;
}
.research-stat-card h3 {
   font-size: 2rem;
   margin-bottom: 10px;
}
.research-stat-card p {
   color: var(--text);
   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 right,
         rgba(0, 208, 132, 0.14),
         transparent 35%),
      radial-gradient(circle at bottom left,
         rgba(0, 208, 132, 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,
         rgba(0, 208, 132, 0.14),
         transparent 35%),
      radial-gradient(circle at bottom right,
         rgba(0, 208, 132, 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 right,
         rgba(0, 208, 132, 0.14),
         transparent 35%),
      radial-gradient(circle at bottom left,
         rgba(0, 208, 132, 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,
         rgba(0, 208, 132, 0.14),
         transparent 35%),
      radial-gradient(circle at bottom right,
         rgba(0, 208, 132, 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,
         rgba(0, 208, 132, 0.14),
         transparent 35%),
      radial-gradient(circle at bottom right,
         rgba(0, 208, 132, 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;
}
.contact-icon {
   width: 60px;
   height: 60px;
   border-radius: 18px;
   background: rgba(0, 208, 132, 0.12);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 1.4rem;
}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.contact-form-wrapper {
   padding: 50px;
}
.form-label-custom {
   display: block;
   margin-bottom: 12px;
   color: var(--white);
   font-weight: 500;
}
.form-input-custom {
   width: 100%;
   background: #111214;
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 18px 20px;
   color: var(--white);
   transition: var(--transition);
}
.form-input-custom:focus {
   border-color: rgba(0, 208, 132, 0.5);
   box-shadow: 0 0 0 4px rgba(0, 208, 132, 0.08);
}
.form-textarea-custom {
   min-height: 180px;
   resize: vertical;
}

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