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

.hero-section{background-image: url(../images/hero-bg.jpg);background-size: cover;background-position: center;}
.hero-content {text-align: left;padding: 40px 0;}
.hero-clients {display: flex;align-items: center;gap: 16px;}
.client-avatars {display: flex;}
.client-avatars img {width: 42px;height: 42px;border-radius: 50%;border: 2px solid var(--white);margin-left: -10px;}
.client-avatars img:first-child {margin-left: 0;}
.stars {color: #fbbf24;letter-spacing: 2px;}
.hero-clients {display: flex;align-items: center;gap: 16px;}
.client-divider {width: 1px;height: 36px;background: var(--white);}
.hero-image img{width: 100%;}

/* =============================== MARQUEE =============================== */

.marquee-section {background:var(--yellow); padding: 18px 0;overflow: hidden;}
.marquee {white-space: nowrap;}
.marquee-track {display: inline-flex;align-items: center;gap: 40px;animation: marquee-scroll 20s linear infinite;}
.marquee-track span {font-size: 28px;font-weight: 700;color:var(--black);text-transform: uppercase;letter-spacing: 1px;}
.marquee-section:hover .marquee-track {animation-play-state: paused;}

/* =============================== ABOUT =============================== */

.about-section{background-image: url(../images/about-bg.jpg);background-size: cover;}
.company-visual {position: relative;}
.main-circle {width: 400px;height: 400px;border-radius: 50%;overflow: hidden;border: 14px solid var(--white);
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);}
.main-circle img {width: 100%;height: 100%;object-fit: cover;}
.small-circle {width: 200px;height: 200px;border-radius: 50%;overflow: hidden;border: 6px solid var(--white);position: absolute;
  top: -10px;right: 60px;box-shadow: 0 15px 40px rgba(0,0,0,0.2);}
.small-circle img {width: 100%;height: 100%;object-fit: cover;}
.why-feature {display: flex;gap: 16px;}
.why-metrics {display: flex;gap: 24px;}
.metric-card {background:var(--white);padding: 24px;border-radius: 16px;flex: 1;}

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

.stats-section {background: #8ccdc8;}
.stats-grid {display: flex;align-items: center;justify-content: center;gap: 40px;}
.stat-item {position: relative;min-width: 160px;text-align: center;}
.stat-number {font-size: 120px;font-weight: 800;color: rgba(255,255,255,0.9);line-height: 1;display: block;}
.stat-label {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 18px;font-weight: 600;color: #0f172a;}
.stat-divider {width: 1px;height: 80px;background: rgba(15,23,42,0.15);}

/* =============================== SERVICE =============================== */

.service-swiper {position: relative;padding-bottom: 0px;}
.service-swiper .swiper-slide {height: auto;}
.service-swiper .swiper-button-next,
.service-swiper .swiper-button-prev {
  top:auto;
  bottom: 0px;
  right: 0;
  width: 35px;
    height: 35px;
    border-radius: 5px;
  background: #111;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  transition: all 0.3s ease;
}
.service-swiper .swiper-button-prev {
  left: auto;
  right: 40px;
}
.service-swiper .swiper-button-next::after,
.service-swiper .swiper-button-prev::after {
  font-size: 16px;
  font-weight: 600;
}
.service-swiper .swiper-button-next:hover,
.service-swiper .swiper-button-prev:hover {
  background: #6c63ff; /* your brand color */
  transform: translateY(-3px);
}

.service-swiper .swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  .service-swiper .swiper-button-next,
  .service-swiper .swiper-button-prev {
    display: none;
  }
}
/* .service-section{background-image: url(../images/service-bg.jpg);background-size: cover;background-attachment: fixed;background-repeat: no-repeat;} */
.service-card {position: relative;border-radius: 20px;padding: 34px 30px;box-shadow: 0 30px 80px rgba(0,0,0,0.08);
  background: #ffffff;transition: transform 0.3s ease;}
.service-card:hover {transform: translateY(-8px);}
.service-card-icon {font-size: 50px;margin-bottom: 14px;}
.service-card-letter {font-size: 110px;font-weight: 700;color: rgba(15,23,42,0.08);position: absolute;top: 20px;right: 24px;}
.service-card-link {font-size: 14px;border: solid 1px var(--green);padding: 5px 10px;border-radius: 20px;background: #ecfdf5;color: var(--green);}

/* =============================== FEATURE STRIPE =============================== */

.feature-stripe {background: linear-gradient(135deg, #0b6fdc, #0a84ff);color: #fff;}
.feature-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;align-items: center;}
.feature-item {display: flex;align-items: center;gap: 14px;}
.feature-item .icon {font-size: 28px;opacity: 0.95;}

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

.product-card {position: relative;background: linear-gradient(180deg, #f8f1ec8c, #ffffff);border-radius: 20px;padding: 32px;
    height: 100%;overflow: hidden;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.product-visual {position: absolute;right: 5px;bottom: 5px;width: 150px;height: 80%;opacity: 0.35;background-size: contain;background-repeat: no-repeat;
    border-radius: 50px 50px 50px 50px;background-image: repeating-radial-gradient(circle, rgb(255 106 43 / 25%) 0 6px, #ffffff 6px 14px);}
.product-arrow {width: 36px;height: 36px;background: #ff6a2b;color: #ffffff;border-radius: 50%;display: flex;
  align-items: center;justify-content: center;text-decoration: none;font-size: 16px;}

/* =============================== WHY CHOOSE US =============================== */

.why-section {background: #eef3f8;border-radius: 60px;padding: 45px;}
.why-points {list-style: none;padding: 0;margin-bottom: 28px;}
.why-points li {padding-left: 26px;margin-bottom: 10px;position: relative;color: #0f172a;font-weight: 500;}
.why-points li::before {content: "✓";position: absolute;left: 0;color: #2563eb;font-weight: 700;}

.client-count {display: flex;align-items: center;gap: 14px;}
.client-avatars {display: flex;}
.client-avatars img,.client-avatars .more {width: 34px;height: 34px;border-radius: 50%;border: 2px solid #ffffff;margin-left: -10px;}
.client-avatars img:first-child {margin-left: 0;}
.client-avatars .more {background: #2563eb;color: #ffffff;font-weight: 600;display: flex;align-items: center;justify-content: center;}
.client-count span {font-size: 13px;color: #64748b;}

.stats-bg {position: absolute;width: 400px;height: 400px;
  background: radial-gradient(circle at center,rgba(124,58,237,0.25),rgba(124,58,237,0.05));
  border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -1;}
.stats-grid {display: grid;grid-template-columns: repeat(2, 2fr);gap: 30px;position: relative;}
.stats-card {background: #ffffff;border-radius: 20px;padding: 40px 30px;box-shadow: 0 20px 50px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.stats-card:hover {transform: translateY(-6px);box-shadow: 0 30px 70px rgba(0,0,0,0.08);}
.stats-card.highlight {background: linear-gradient(135deg, #6c63ff, #5a54e6);color: #ffffff;}
.stats-card.highlight p {color: rgba(255,255,255,0.85);}
.stats-number {font-size: 48px;font-weight: 700;margin-bottom: 10px;line-height: 1;}

/* =============================== PORTFOLIO =============================== */

.portfolio-section {background: #f8fafc;}
.portfolio-filters {
  display: flex;justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}

.filter-btn {
  padding: 10px 22px;
  border-radius: 30px;
  border: 1px solid #ddd;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
  background: #6c63ff;
  color: #fff;
  border-color: #6c63ff;
}


/* Hidden state */
.portfolio-card.hide {
  display: none;
}
.portfolio-card {position: relative;overflow: hidden;height: 340px;background-color: transparent;
  transition: opacity 0.3s ease, transform 0.3s ease;animation: fadeIn 0.3s ease;}
.portfolio-card:hover {transform: translateY(-10px);}
.portfolio-card img {width: 100%;height: 100%;object-fit: cover;filter: saturate(0.95);}
.portfolio-badge {position: absolute;top: 16px;left: 16px;background: rgba(255,255,255,0.95);color: #111827;padding: 6px 14px;
  border-radius: 999px;font-size: 12px;font-weight: 600;box-shadow: 0 6px 20px rgba(0,0,0,0.1);}
.portfolio-overlay {position: absolute;inset: auto 16px 16px 16px;background: rgba(255,255,255,0.92);backdrop-filter: blur(10px);border-radius: 16px;
  padding: 18px 20px;display: flex;justify-content: space-between;align-items: center;transition: transform .35s ease, opacity .35s ease;}
.portfolio-card:hover .overlay {transform: translateY(-6px);}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================== CTA =============================== */

.cta-section {background: #8ccdc8;}
.cta-wrap {background: linear-gradient(90deg, #6f6af8 0%, #6f6af8 70%, #1f2038 70%);border-radius: 18px;padding: 36px 48px;display: flex;
  align-items: center;justify-content: space-between;gap: 30px;overflow: hidden;}
.cta-illustration img {max-width: 90px;}
.cta-content {flex: 1;}
.cta-btn {background: #ffffff;color: #1f2038;padding: 14px 28px;border-radius: 10px;font-weight: 600;
  text-decoration: none;transition: transform .2s ease;}
.cta-btn:hover {transform: translateY(-2px);}

/* =============================== TECH =============================== */

.tech-orbit-section {position: relative;padding: 140px 0 180px;
  /* background: radial-gradient(circle at top, #ffffff, #f3f5ff); */
  background-image: url(../images/tech-bg.jpg), radial-gradient(circle at top, #ffffff, #f3f5ff);
  background-size: cover;background-position: center;overflow: hidden;}
.orbit {position: absolute;border: 2px dashed #c7cbe8;border-radius: 50%;opacity: 0.6;}
.orbit-outer {width: 900px;height: 900px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.orbit-middle {width: 620px;height: 620px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.orbit-inner {width: 360px;height: 360px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.orbit-icon {position: absolute;width: 56px;height: 56px;background: #ffffff;border-radius: 50%;box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  display: flex;align-items: center;justify-content: center;font-size: 30px;}

.icon-html { top: 20%; left: 12%; }
.icon-wordpress{ top: 18%; right: 14%; }
.icon-react{ bottom: 26%; right: 22%; }
.icon-figma{ top: 6%; left: 50%;}
.icon-css{ bottom: 14%; left: 50%; }
.icon-node{ bottom: 10%; left: 30%; }
.icon-android{ bottom: 28%; left: 20%; }
.icon-github{ bottom: 3%; right:16%; }

/* =============================== SECTOR =============================== */

.sector-section {position: relative;background: radial-gradient(circle at top left,#0b1c2d,#050f1d);overflow: hidden;}
.sector-list {display: flex;justify-content: center;align-items: center;gap: 60px;flex-wrap: wrap;}
.sector-list span {font-size: 22px;font-weight: 600;color: #9ca3af;opacity: 0.9;transition: opacity .3s ease;}
.sector-list span:hover {opacity: 1;}
.wave-accent {position: absolute;left: 0;bottom: 40px;width: 45%;height: 8px;
  background: linear-gradient(90deg,#22c55e,#4ade80);border-radius: 50px;transform: rotate(-2deg);}
.mesh-graphic {position: absolute;right: 40px;bottom: 20px;width: 220px;height: 160px;
  background-image:radial-gradient(#22c55e 1px, transparent 1px);background-size: 22px 22px;opacity: 0.25;}

/* =============================== TESTIMONIAL =============================== */

.testimonial-swiper {
  padding: 30px 0 60px;
}

.testimonial-swiper .swiper-slide {
  height: auto;
}

/* Optional pagination style */
.testimonial-swiper .swiper-pagination-bullet {
  background: #6c63ff;
  opacity: 0.4;
}

.testimonial-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.testimonial-section {background: #fff;}
.testimonial-card {background: #fff;border-radius: 14px;padding: 40px;box-shadow: 0 20px 50px rgba(0,0,0,.08);position: relative;flex: 1;}
.testimonial-card::after {content: "";position: absolute;top: 25px;right: 25px;width: 60px;height: 60px;
  background-image: radial-gradient(#b2ece0 2px, transparent 2px);background-size: 10px 10px;opacity: .6;}
.testimonial-avatar {position: relative;width: 60px;height: 60px;margin-bottom: 20px;}
.testimonial-avatar img {width: 100%;height: 100%;border-radius: 50%;object-fit: cover;}

/* =============================== CLIENT =============================== */

.client-section {background: var(--yellow);}
.client-title {display: flex;align-items: center;gap: 16px;}
.client-title .line {width: 40px;height: 2px;background: #6366f1;}
.client-title h3 {font-size: 28px;font-weight: 600;color: #ffffff;line-height: 1.2;}
.client-logo-swiper {
  padding: 30px 0;
}

.client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-logo-item img {
  max-height: 50px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.client-logo-item img:hover {
  opacity: 1;
}


/* =============================== INFO =============================== */

.info-card {position: relative;background: #ffffff;border-radius: 16px;padding: 36px 32px;height: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.08);transition: transform 0.3s ease;}
.info-card:hover {transform: translateY(-8px);}
.info-card-icon {width: 54px;height: 54px;}
.info-card-icon img {width: 100%;height: 100%;object-fit: contain;}
.info-card-link {font-size: 15px;font-weight: 600;color: #0f172a;text-decoration: none;display: inline-flex;
  align-items: center;gap: 6px;}
.info-card-link span {transition: transform 0.25s ease;}
.info-card-link:hover span {transform: translateX(4px);}

/* =============================== KEY FEATURE =============================== */

.key-feature{background:var(--yellow);}
.feature-card {background: var(--yellow);border-radius: 16px;padding: 28px 30px;display: flex;align-items: center;gap: 20px;transition: all 0.35s ease;
  color: var(--white);}
.feature-icon {width: 56px;height: 56px;border-radius: 50%;background: #f1f5f9;display: flex;align-items: center;justify-content: center;
  font-size: 22px;color: var(--yellow);transition: all 0.35s ease;}
.feature-card:hover .feature-icon {background: rgba(255,255,255,0.15);color: #ffffff;}

/* =============================== CRM TAB =============================== */


.ai-support {
  padding: 120px 0;
  background: #f9fafb;
}

/* HEADER */
.support-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.pill {
  display: inline-block;
  background: #eef2ff;
  color: #4f46e5;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.support-header h2 {
  font-size: 42px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.support-header p {
  font-size: 16px;
  color: #64748b;
}

/* MAIN BOX */
.support-box {
  display: grid;
  grid-template-columns: 280px 1fr;
  background: #ffffff;
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.08);
}

/* TABS */
.support-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-tabs .tab {
  background: transparent;
  border: none;
  padding: 12px 16px;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #475569;
}

.support-tabs .tab.active {
  background: #f1f5f9;
  font-weight: 600;
  color: #0f172a;
}

/* CONTENT */
.support-content {
  padding: 30px 40px;
}

/* TAB CONTENT */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content h3 {
  font-size: 26px;
  margin-bottom: 10px;
}

.tab-content p {
  font-size: 15px;
  color: #64748b;
  max-width: 480px;
}

/* BUTTON */
.btn-dark {
  display: inline-block;
  margin-top: 16px;
  background: #0f172a;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

/* CHAT MOCK */
.chat-mock {
  margin-top: 30px;
}

.chat-question {
  display: inline-block;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.chat-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  max-width: 320px;
}

.progress {
  height: 6px;
  background: linear-gradient(to right, #3b82f6, #6366f1);
  border-radius: 999px;
  margin: 10px 0;
}

/* =============================== BLOG =============================== */

.blog-section {background: #fff;}
.blog-card {background: #fff;border-radius: 14px;overflow: hidden;box-shadow: 0 15px 40px rgba(0,0,0,.08);transition: transform .3s ease;}
.blog-card:hover {transform: translateY(-6px);}
.blog-card img {width: 100%;height: 230px;object-fit: cover;}
.blog-content {padding: 25px;}
.blog-avatar {width: 32px;height: 32px;background: #ddd;border-radius: 50%;}



/* =============================== CONTACT =============================== */

.contact-section {background: linear-gradient(180deg, #e9fbf8 0%, #ffffff 60%);}
.contact-card {background: #ffffff;border-radius: 20px;box-shadow: 0 30px 80px rgba(0,0,0,0.08);overflow: hidden;}
.contact-info {background: #05b3a4;color: #ffffff;padding: 40px;height: 100%;position: relative;}
.contact-info ul {list-style: none;padding: 0;}
.contact-info li {font-size: 14px;margin-bottom: 14px;}
.contact-form {padding: 40px;}
.contact-form label {font-size: 13px;font-weight: 600;color: #6b7280;display: block;margin-bottom: 6px;}
.contact-form input,.contact-form textarea {width: 100%;border: none;border-bottom: 1px solid #e5e7eb;padding: 10px 4px;
  font-size: 14px;outline: none;}
.contact-form input:focus,.contact-form textarea:focus {border-color: #05b3a4;}

.btn-submit {background: #05b3a4;color: #ffffff;padding: 12px 28px;border-radius: 6px;border: none;font-weight: 600;margin-top: 24px;}

/* =============================== SUB BANNER =============================== */

.subpage-banner {background: linear-gradient(135deg, #f5f9ff, #eef3ff);padding: 50px 0;position: relative;overflow: hidden;}
.subpage-banner::after {content: "";position: absolute;right: -120px;top: -120px;width: 320px;height: 320px;
  background: rgba(99, 102, 241, 0.08);border-radius: 50%;}
.banner-content {max-width: 700px;}
.breadcrumb {font-size: 14px;margin-bottom: 16px;color: #6b7280;}
.breadcrumb a {color: var(--green);text-decoration: none;}
.breadcrumb span {margin: 0 6px;}
.breadcrumb .active {color: #111827;font-weight: 500;}

/* =============================== PROFILE TAB =============================== */

.about-profile {background: #faf9ff;}
.profile-image-wrap {position: relative;display: inline-block;}
.profile-image {width: 100%;max-width: 420px;height:500px;border-radius: 16px;box-shadow: 0 30px 80px rgba(0,0,0,0.12);object-fit: cover;}
.experience-badge {position: absolute;bottom: -20px;left: -20px;background: #7c3aed;color: #ffffff;padding: 18px 16px;
  border-radius: 14px;width: 150px;}
.experience-badge strong {font-size: 32px;display: block;}
.experience-badge span {font-size: 14px;line-height: 1.3;}
.social-icons {display: flex;gap: 8px;margin-top: 10px;}
.social-icons span {width: 24px;height: 24px;background: rgba(255,255,255,0.2);border-radius: 50%;font-size: 12px;display: flex;
  align-items: center;justify-content: center;}

.profile-tab-list {display: flex;gap: 14px;margin-bottom: 22px;}
.profile-tab {background: transparent;border: none;font-size: 14px;color: #64748b;cursor: pointer;}
.profile-tab.active {background: #ede9fe;color: #7c3aed;padding: 8px 16px;border-radius: 999px;font-weight: 600;}
.profile-tab-content {display: none;}
.profile-tab-content.active {display: block;}

/* =============================== PROFILE TAB =============================== */

.faq-section {background: #f7f9fc;}
.faq-illustration img {max-width: 100%;}

/* RIGHT */
.faq-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #7c3aed;
  display: block;
  margin-bottom: 10px;
}

.faq-title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
}

.faq-title span {
  color: #7c3aed;
}

.faq-desc {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 30px;
  max-width: 520px;
}

/* ACCORDION */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question .icon {
  font-size: 20px;
  color: #7c3aed;
}

.faq-answer {
  padding: 0 24px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}

/* ACTIVE */
.faq-item.active .faq-answer {
  padding: 0 24px 20px;
  max-height: 300px;
}