/*
Theme Name: Veyondtech
Theme URI: https://example.com/veyondtech
Author: Veyondtech
Author URI: https://example.com
Description: A custom WordPress theme
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: veyondtech
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =CSS Variables (Reusable across theme)
-------------------------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #4e2bcd;
  --color-primary-light: #905bf4;
  --color-primary-hover: #836bdf;
  --color-dark: #0b0b0b;
  --color-dark-alt: #0f022d;
  --color-white: #ffffff;
  --color-light: #efefef;
  --color-gray: #69696a;
  --color-gray-light: #f9f9f9;
  --color-bg-light: #f1eeff;
  --color-bg-card: #f6f6f8;

  /* Font Families */
  --font-primary: "BC-Alphapipe-Bold";
  --font-semibold: "BC-Alphapipe-Semibold";
  --font-regular: "BC-Alphapipe-Regular";
  --font-body: "NunitoSans";
  --font-sf: "SF Pro Display";

  /* Font Sizes */
  --fs-h1: 72px;
  --fs-h2: 52px;
  --fs-h3: 30px;
  --fs-body: 24px;
  --fs-small: 18px;
  --fs-btn: 22px;

  /* Spacing */
  --spacing-section: 80px;
  --spacing-lg: 60px;
  --spacing-md: 40px;
  --spacing-sm: 20px;
  --spacing-xs: 10px;

  /* Border Radius */
  --radius-full: 50px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-smooth: 0.35s ease;
  --transition-cubic: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-btn: 0px 0px 180px rgba(153, 23, 255, 0.8),
    inset 0px -2px 2px rgba(0, 0, 0, 0.25),
    inset 0px 2px 1px rgba(255, 255, 255, 0.25);
  --shadow-btn-hover: 0px 0px 220px rgba(153, 23, 255, 1),
    inset 0px -4px 2px rgba(0, 0, 0, 0.25),
    inset 0px 2px 1px rgba(255, 255, 255, 0.25);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Container */
  /* --container-max: 1320px; */
  --container-max: 1600px;
  --container-padding: 20px;
}

/* =WordPress Core
-------------------------------------------------------------- */
html {
  font-family: var(--font-primary);
}

h2 {
  font-size: var(--fs-h2);
  line-height: 62px;
}

p {
  font-size: var(--fs-body);
}

.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* =Theme Styles
-------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  color: var(--color-dark);
  background-color: var(--color-gray-light);
}

.site-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.common-hero-section.services.hero-section .site-container {
  padding-top: 0px;
  padding-bottom: 0px;
}

.site-common-padding {
  padding: var(--spacing-section) 0px;
}

/* Header */
header#masthead .site-container {
  padding-top: 15px;
  padding-bottom: 15px;
}

.site-header .site-container {
  background: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px var(--container-padding);
  border-radius: var(--radius-md);
}

.site-branding {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.site-title a {
  color: #333;
  text-decoration: none;
}

.site-branding a .custom-logo {
  object-fit: cover;
}

.site-description {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.send-inquiry-btn {
  background: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-full);
  /* padding: var(--spacing-xs) 44px; */
  padding: var(--spacing-xs) 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  font-family: var(--font-body);
  color: var(--color-primary);
  transition: background var(--transition-base);
}

.send-inquiry-btn:hover {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(153, 153, 153, 0) 102.96%);
  color: white;
}

.site-header .mobile-menu-toggle {
  display: none;
}

.site-header .mobile-inquiry-btn {
  display: none;
}

/* Navigation */

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.main-navigation ul li.menu-item-has-children {
  display: grid;
}

.main-navigation ul ul.sub-menu {
  display: none;
}

.main-navigation .current-menu-item a {
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  color: var(--color-primary) !important;
}

.main-navigation .current-menu-item:hover a {
  color: var(--color-primary);
}

.main-navigation a:not(.send-inquiry-btn):not(.user-avatar-link) {
  color: var(--color-light);
  text-decoration: none;
  transition: color var(--transition-base);
  font-family: var(--font-semibold);
  letter-spacing: 1px;

  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 28px;
  line-height: 28px;
  padding: 0px 10px 0px 10px;
}

/* Hover layer text */
.main-navigation a::after {
  content: attr(data-text);
  position: absolute;
  left: 10;
  bottom: -100%;
  width: 100%;
  height: 28px;
  /* SAME HEIGHT */
  line-height: 28px;
  transition: 0.35s ease;
  opacity: 0;
}

/* Hover animation */
.main-navigation a:hover span {
  transform: translateY(-100%);
  opacity: 0;
}

.main-navigation a:hover::after {
  bottom: 0;
  opacity: 1;
}

.main-navigation a span {
  display: block;
  transition: 0.35s ease;
  transform: translateY(0);
}

.main-navigation a:hover {
  color: #efefef;
}

/* Content */
.site-content {
  padding: 40px 0;
}

.content-area {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

article {
  margin-bottom: 40px;
}

.entry-title {
  font-size: 32px;
  margin-bottom: 15px;
}

.entry-title a {
  color: #333;
  text-decoration: none;
}

.entry-title a:hover {
  color: #0073aa;
}

.entry-meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.entry-content {
  margin-top: 20px;
}

.entry-content p {
  margin-bottom: 20px;
}

/* Hero Section */
.home-page-site-container {
  position: relative;
}

/* body:not(.blog) .site-header.home-page-site-header { */
.site-header.home-page-site-header {
  position: absolute;
  width: 100%;
  z-index: 2;
  top: 0;
  transition: top 0.3s ease;
  padding: 20px 0;
  overflow: hidden;
}

/* .woocommerce-account .site-header.home-page-site-header,
.woocommerce-checkout header.entry-header,
.woocommerce-checkout .site-header.home-page-site-header,
.woocommerce-cart header.entry-header,
.woocommerce-cart .site-header.home-page-site-header {
  position: unset;
} */

.common-hero-section.hero-section.woocommerce-common-hero-section .hero-content {
  justify-content: start;
}

.common-hero-section.hero-section.woocommerce-common-hero-section {
  height: 350px;
  overflow: hidden;
}

.common-hero-section.hero-section.woocommerce-common-hero-section .hero-content h1 {
  width: 100%;
}

body.woocommerce-cart .common-hero-section.hero-section.woocommerce-common-hero-section .hero-content h1{
  text-align: center;
}

.hero-section {
  background: linear-gradient(0deg, var(--color-primary), var(--color-primary)),
    linear-gradient(103.38deg, var(--color-primary) 0.07%, #c5a7ff 99.76%),
    var(--color-light);
  height: 900px;
}

.common-hero-section.hero-section {
  height: 400px;
}

.common-hero-section.hero-section .breadcrumb,
.common-hero-section.hero-section .breadcrumb a {
  color: #ffffff;
}

.hero-bg-elements {
  position: relative;
}

.hero-bg-elements .bg-rect-left,
.hero-bg-elements .bg-rect-right {
  position: absolute;
}

.hero-bg-elements .bg-rect-left {
  position: absolute;
  left: clamp(20px, 6vw, 200px);
  top: clamp(50px, 20vh, 300px);
}

.hero-bg-elements .bg-rect-right {
  position: absolute;
  right: clamp(20px, 6vw, 200px);
  top: clamp(50px, 20vh, 300px);
}

.hero-section .hero-content {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  height: 100%;
}

.common-hero-section.hero-section .hero-content {
  gap: 0px;
}

.common-hero-section.hero-section .hero-content h1 {
  margin-top: 100px;
}

.hero-section .hero-content h1 {
  font-style: normal;
  font-size: 72px;
  line-height: 83px;
  text-align: center;
  letter-spacing: 0.01em;
  color: #ffffff;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.hero-section .hero-content p {
  width: 60%;
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 400;
  line-height: 39px;
  text-align: center;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: #efefef;
  flex: none;
  flex-grow: 0;
}

.hero-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.hero-actions .btn.btn-primary {
  width: 270px;
  height: 66px;
  background: var(--color-light);
  color: var(--color-primary);
  box-shadow: var(--shadow-btn);
  border-radius: var(--radius-full);
  flex: none;
  order: 0;
  flex-grow: 0;
  font-size: var(--fs-btn);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background var(--transition-base),
    box-shadow var(--transition-base), transform var(--transition-base),
    color var(--transition-base);
}

.hero-actions .btn.btn-primary:hover {
  /* background: var(--color-primary-light);
  color: var(--color-white);
  transform: scale(1.05);
  box-shadow: var(--shadow-btn-hover); */

  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(153, 153, 153, 0) 102.96%);
  color: white;
}

.hero-actions .btn.btn-secondary {
  width: 270px;
  height: 66px;
  background: rgba(239, 239, 239, 0.1);
  border-radius: 70px;
  flex: none;
  order: 2;
  flex-grow: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-family: "NunitoSans";
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  gap: 10px;
  transition: background 0.3s ease;
}

.hero-actions .btn.btn-secondary:hover {
  background: #efefef;
}

.hero-actions .btn.btn-secondary:hover span {
  color: #4e2bcd;
}

.hero-actions .btn.btn-secondary:hover .hero-btn-icon {
  background: #4e2bcd;
}

.hero-actions .btn.btn-secondary:hover .hero-btn-icon .common-btn-arrow-animation {
  filter: brightness(0) invert(1);
}

.hero-content .hero-btn-icon {
  background-color: #ffffff;
  width: 42px;
  height: 42px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-content .trust-badge {
  display: flex;
  gap: 10px;
}

.hero-content .trust-badge span {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 34px;
  color: #efefef;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.hero-content-container {
  display: grid;
  gap: 20px;
  justify-items: center;
}

.hero-content-action-container {
  display: grid;
  justify-items: center;
  gap: 10px;
}

/* Trusted By Section */
.trusted-by-section {
  position: relative;
  height: auto;
  background: #ffffff;
  width: 100%;
  overflow: hidden;
  padding-top: 60px;
  padding-bottom: 70px;
}

.trusted-by-section .trusted-map-bg {
  position: absolute;
  top: 10px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.trusted-by-section .trusted-map-left {
  left: 0;
  max-width: 440px;
  width: 32vw;
}

.trusted-by-section .trusted-map-right {
  right: 0;
  max-width: 520px;
  width: 38vw;
}

.trusted-by-section .trusted-map-bg svg {
  width: 100%;
  height: auto;
  display: block;
}

.trusted-by-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Tagline */
.trusted-by-content .trusted-tagline {
      padding: 6px 14px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--fs-small);
    font-family: var(--font-sf);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-full);
    gap: 5px;
    width: auto;
    text-transform: capitalize;
    letter-spacing: 1px;
    line-height: 21px;
}

.trusted-by-content .trusted-tagline .tagline-line {
  width: 28px;
  height: 2px;
  background: var(--color-primary, #4e2bcd);
  border-radius: 2px;
  opacity: 0.7;
}

.trusted-by-content .trusted-tagline .tagline-text {
  font-size: var(--fs-small);
  font-family: var(--font-sf);
  letter-spacing: 1px;
  color: #ffffff;
}

.trusted-by-content h2 {
  font-style: normal;
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -0.01em;
  color: #0b0b0b;
  text-align: center;
  margin: 0 auto;
}

.trusted-by-content p {
  text-align: center;
  line-height: 36px;
  font-family: "NunitoSans";
  color: #0b0b0b;
  font-style: normal;
  max-width: 640px;
  width: 100%;
  margin: 12px auto 0;
}

/* Stats Row */
.trusted-by-content .trusted-stats-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  margin: 32px auto 44px;
  gap: 36px;
}

.trusted-by-content .stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trusted-by-content .stat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0edff;
  color: var(--color-primary, #4e2bcd);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.trusted-by-content .stat-item:hover .stat-icon-wrap {
  transform: scale(1.08);
}

.trusted-by-content .stat-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.trusted-by-content .stat-number {
  font-family: var(--font-primary, "BC-Alphapipe-Bold"), sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-primary, #4e2bcd);
}

.trusted-by-content .stat-label {
  font-family: var(--font-body, "NunitoSans"), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #44475b;
  line-height: 1.2;
  white-space: nowrap;
}

.trusted-by-content .stat-divider {
  width: 1px;
  height: 36px;
  background: #e2e1ee;
}

/* Tracks Wrapper */
.trusted-by-content .trusted-tracks-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.trusted-by-content .track-group {
  width: 100%;
}

.trusted-by-content .track-title {
  font-family: var(--font-primary, "BC-Alphapipe-Bold"), sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0b0b0b;
  text-align: center;
  margin: 0 0 10px;
  position: relative;
}

.trusted-by-content .track-title::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color-primary, #4e2bcd);
  border-radius: 2px;
  margin: 8px auto 0;
}

/* Logo Slider & Marquee Row */
.trusted-by-content .logos-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.trusted-by-content .client-logo-row {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: scrollLogos 50s linear infinite;
  will-change: transform;
}

.trusted-by-content .plugins-logo-row {
  animation: scrollLogos 50s linear infinite;
}

.trusted-by-content .client-logo-row:hover {
  animation-play-state: paused;
}

.trusted-by-content .client-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #ebebf5;
  border-radius: 12px;
  padding: 12px 28px;
  height: 68px;
  min-width: 155px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.trusted-by-content .client-logo:hover {
  transform: translateY(-2px);
  border-color: rgba(78, 43, 205, 0.3);
  box-shadow: 0 6px 20px rgba(78, 43, 205, 0.1);
}

.trusted-by-content .client-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.trusted-by-content .client-logo img {
  width: auto;
  max-width: 125px;
  max-height: 42px;
  object-fit: contain;
  filter: grayscale(10%);
  transition: all 0.3s ease;
}

.trusted-by-content .client-logo:hover img {
  filter: grayscale(0%);
  transform: scale(1.04);
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Code Marquee Section */

.code-marquee-section {
  min-height: 275px;
  height: auto;
  background: #ffffff;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.code-marquee-section .marquee {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 15px 0;
  display: flex;
  align-items: center;
  font-size: 40px;
  font-family: "NunitoSans";
  color: #ffffff;
  font-weight: 400;
  width: 200vw;
}

.code-marquee-section .marquee .dot {
  width: 9px;
  height: 9px;
  background-color: #ffffff;
  border-radius: 50%;
}

.code-marquee-section .marquee-1 {
  background: linear-gradient(90deg, #4e2bcd 0%, #905bf4 100%);
  transform: translate(-50%, -50%) rotate(-4deg);
  display: flex;
  gap: 20px;
}

.code-marquee-section .marquee-2 {
  background-color: #4e2bcd;
  transform: translate(-50%, -50%) rotate(5deg);
  display: flex;
  gap: 20px;
}

.code-marquee-section .marquee-content {
  display: flex;
  align-items: center;
  gap: 20px;
  animation: scroll 30s linear infinite;
  white-space: nowrap;
  font-size: 26px;
  line-height: 36px;
}

.code-marquee-section .marquee.marquee-2 .marquee-content {
  animation: lrscroll 30s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes lrscroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(50%);
  }
}

/* Services Section */
.services-section {
  background-color: var(--color-bg-light);
}

.services-section .section-header {
  text-align: center;
}

.services-section .strategy-badge {
  padding: 6px 14px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-family: var(--font-sf);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-full);
  gap: 5px;
  width: auto;
  text-transform: capitalize;
  letter-spacing: 1px;
  line-height: 21px;
}

.services-section .section-header h2 {
  color: #0b0b0b;
}

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

.services-section .section-header p {
  line-height: 36px;
  font-family: "NunitoSans";
  color: #0b0b0b;
  width: 45%;
  margin: 12px auto 0px auto;
}

body.home .services-section .services-slider {
  display: flex;
  overflow: hidden;
}

body.page-template-services-page .service-card-row:not(:first-child) {
  margin-top: 40px;
}

.services-section .services-slider .service-card-row {
  min-width: 100%;
  width: 100%;
  flex: 0 0 50%;
}

/* body.page-template-services-page .service-card{
    transition: opacity 0.25s linear;
} */

body.page-template-services-page .services-section .services-slider .service-card-row {
  position: sticky;
  top: 0;
}

.services-section .services-slider .card-content-container {
  position: relative;
  width: 70%;
  max-width: 100%;
  height: 100%;
}

.services-section .services-slider .card-content-container .card-content {
  background: linear-gradient(90deg, var(--color-primary) 0%, #6546d8 100%);
  border-radius: var(--radius-md);
  /* padding: var(--spacing-md); */
  padding: 52px 40px;
}

.services-section .services-slider .service-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.services-section .services-slider .service-card .services-bg-image {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.services-section .services-slider .card-content-container h3 {
  font-style: normal;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.services-section .services-slider .card-content-container .card-description {
  margin-top: 22px;
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.01em;
  color: #efefef;
  align-self: stretch;
}

.services-section .services-slider .card-content-container .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 20px;
  background: #efefef;
  border-radius: 50px;
  margin-top: 36px;
  font-family: "NunitoSans";
  color: #0b0b0b;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.services-section .services-slider .card-content-container .btn-view-more:hover {
  background: #836bdf;
  color: #ffffff;
}

.common-arrow-btn,
.common-btn-arrow-animation {
  transition: transform var(--transition-base);
}

.common-arrow-btn:hover img {
  transform: rotate(35deg);
}

.services-section .services-slider .card-content-container .btn-view-more img {
  background-color: #4e2bcd;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.services-section .services-slider .service-card.reverse {
  margin-top: 40px;
}

.services-section .services-slider .service-card.reverse .card-content-container {
  order: 2;
}

.services-section .services-slider .service-card.reverse .card-image-wrapper {
  order: 1;
}

.services-section .card-image-wrapper {
  width: 30%;
}

.services-section .card-image-wrapper img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-section .services-slider .card-header {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.services-section .services-slider .card-header .card-icon-wrapper {
  background-color: #ffffff;
  border-radius: 50%;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.services-section .services-silder-navigation {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.services-section .services-silder-navigation button {
  padding: 12px;
  border-radius: 50px;
  width: 42px;
  height: 42px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.services-section .services-silder-navigation .services-left-arrow,
.services-section .services-silder-navigation .services-right-arrow {
  transition: background-color 0.3s ease, filter 0.3s ease;
}

.services-section .services-silder-navigation .services-left-arrow {
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

.services-section .services-silder-navigation .services-right-arrow {
  background-color: #4e2bcd;
  position: relative;
  overflow: hidden;
}

.services-section .services-silder-navigation .services-right-arrow:hover {
  background-color: #ffffff;
}

.services-section .services-silder-navigation .services-left-arrow:hover {
  background-color: #4e2bcd;
}

.services-right-arrow img,
.services-left-arrow img {
  position: absolute;
  width: 20px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* RIGHT ARROW */
.arrow-right-white {
  transform: translateX(0);
}

.arrow-right-pink {
  transform: translateX(-50px);
}

.services-right-arrow:hover .arrow-right-white,
.project-arrow:hover .arrow-right-white,
.nav-arrow.next:hover .arrow-right-white {
  transform: translateX(50px);
}

.services-right-arrow:hover .arrow-right-pink,
.project-arrow:hover .arrow-right-pink {
  transform: translateX(0);
  filter: invert(50%) sepia(100%) saturate(7471%) hue-rotate(248deg) brightness(92%) contrast(98%);
}

.nav-arrow.next:hover .arrow-right-pink {
  transform: translateX(0);
}

.nav-arrow.next.nav-remove-helight:hover .arrow-right-pink {
  filter: brightness(0) invert(1) !important;
}

/* LEFT ARROW */
.arrow-left-white {
  transform: translateX(0);
}

.arrow-left-pink {
  transform: translateX(45px);
}

.services-left-arrow:hover .arrow-left-white,
.nav-arrow.prev:hover .arrow-left-white {
  transform: translateX(-45px);
}

.services-left-arrow:hover .arrow-left-pink,
.nav-arrow.prev:hover .arrow-left-pink {
  transform: translateX(0);
  filter: brightness(0) invert(1);
}

.services-experise ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.services-experise ul a {
  font-family: "NunitoSans";
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: #efefef;
  text-decoration: none;
  background-color: rgba(239, 239, 239, 0.1);
  border-radius: 50px;
  padding: 2px 10px;
  display: block;
}

.services-experise lable {
  margin: 50px 0 20px;
  display: block;
  color: #ffffff;
  font-size: 18px;
  line-height: 18px;
  font-family: 'BC-Alphapipe-Regular';
}

/* Why-choose-section */

.why-choose-section {
  background-color: var(--color-white);
}

.why-choose-section .section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.why-choose-section .section-title h2 {
  line-height: 62px;
  letter-spacing: 0.01em;
  font-style: normal;
}

.why-choose-section .section-title .btn-view-more-dark {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0b0b0b;
  color: #ffffff;
  padding: 10px 10px 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "NunitoSans";
  font-size: 22px;
  letter-spacing: 1px;
  font-style: normal;
  gap: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.blog-section .blog-header .btn-view-more-dark:hover,
.why-choose-section .section-title .btn-view-more-dark:hover {
  background-color: #4e2bcd;
}

.why-choose-section .accordion-panel {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  gap: 111px;
  margin-top: 60px;
}

.why-choose-section .accordion-panel .accordion {
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 20px;
}

.why-choose-section .accordion-panel .image-panel {
  width: 100%;
}

.why-choose-section .accordion-panel .accordion-item {
  color: #0b0b0b;
  padding: 26px 30px;
  border-bottom: 1px solid #0b0b0b10;
}

.why-choose-section .accordion-panel .accordion-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 26px 30px;
  border-radius: var(--radius-md);
}

.why-choose-section .accordion-panel .accordion-item .item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.why-choose-section .accordion-panel .accordion-item .item-header p {
  transition: color 0.3s ease;
}

.why-choose-section .accordion-panel .accordion-item:not(.active) .item-header:hover p {
  color: #4e2bcd;
}

.why-choose-section .accordion-panel .accordion-item:not(.active) .item-header:hover div.arrow {
  background-color: #4e2bcd;
}

.why-choose-section .accordion-panel .accordion-item:not(.active) .item-header:hover div.arrow img {
  filter: brightness(0) invert(1);
}

.why-choose-section .accordion-panel .accordion-item:not(.active) .item-header div.arrow {
  border: 1px solid #0b0b0b20;
  border-radius: 50px;
  padding: 12px;
  width: 50px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.why-choose-section .accordion-panel .accordion-item.active .item-header div.arrow {
  background-color: #ffffff;
  border-radius: 50px;
  padding: 12px;
  width: 50px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.why-choose-section .accordion-panel .accordion-item.active .item-header div.arrow img {
  filter: invert(26%) sepia(88%) saturate(6359%) hue-rotate(248deg) brightness(84%) contrast(102%);
  transform: rotate(180deg);
}

.why-choose-section .accordion-panel .accordion-item .item-content.hide {
  display: none;
}

.why-choose-section .accordion-panel .accordion-item .item-header p {
  font-size: 22px;
  font-weight: bold;
  color: #0b0b0b;
  letter-spacing: 0.01em;
  line-height: 26px;
}

.why-choose-section .accordion-panel .accordion-item.active .item-header p {
  color: #ffffff;
}

.why-choose-section .accordion-panel .accordion-item.active .item-content {
  margin-top: 50px;
}

.why-choose-section .accordion-panel .accordion-item.active .item-content .divider {
  background-color: #ffffff50;
  height: 1px;
  margin-bottom: 10px;
}

.why-choose-section .accordion-panel .accordion-item .item-content p {
  font-family: "BC-Alphapipe-Regular";
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.001em;
}

.why-choose-section .image-panel img#dynamic-image {
  width: 100%;
  border-radius: var(--radius-md);
}

/* Show-Case-Section */

body.home .showcase-section {
  background-image: url(/wp-content/uploads/2025/11/show-case-bg-image.png),
    linear-gradient(90deg, #4e2bcd 0%, #905bf4 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: soft-light;
}

.showcase-section .showcase-title {
  max-width: 60%;
}

.showcase-section .showcase-title h2 {
  line-height: 62px;
  letter-spacing: 0.01em;
  color: #efefef;
}

.showcase-section .showcase-title p {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: #efefef;
  margin-top: 10px;
}

.showcase-section .showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.showcase-section .showcase-header .btn.btn-light-purple {
  background-color: #ffffff;
  font-family: "NunitoSans";
  font-size: 22px;
  border-radius: 50px;
  font-weight: 600;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #4e2bcd;
  cursor: pointer;
  padding: 10px 10px 10px 20px;
  transition: background-color 0.3s ease;
}

.showcase-section .showcase-header .btn.btn-light-purple:hover {
  background-color: #836bdf;
  color: white;
}

.showcase-section .projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.showcase-section .projects-grid .project-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.showcase-section .projects-grid .project-image img.full-image {
  width: 100%;
  border-radius: 50px;
  border: 5px solid transparent;
  /* transition: border 0.3s ease, border-radius 0.3s ease, transform 0.3s ease; */
  transition: transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

body:not(.home) .showcase-section .projects-grid .project-image img.full-image {
  border: 5px solid transparent;
  transition: transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

body:not(.home) .showcase-section .projects-grid .project-image img.full-image:hover {
  border-color: #4e2bcd;
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* .showcase-section .projects-grid .project-image img.full-image:hover {
  border: 5px solid white;
  border-radius: 50px;
  cursor: pointer;
} */

.showcase-section .projects-grid .project-image img.full-image {
  transition: transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.showcase-section .projects-grid .project-image img.full-image:hover {
  border-color: white;
  transform: scale(1.02);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  cursor: pointer;
}

.project-image a.view-more-btn {
  opacity: 0;
  position: absolute;
  font-family: "NunitoSans";
  font-size: 22px;
  color: #ffffff;
  text-decoration: none;
  background-color: #4e2bcd;
  padding: 10px 10px 10px 23px;
  border-radius: 50px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.project-image a.view-more-btn img {
  background-color: #ffffff;
  border-radius: 50%;
  padding: 12px;
  /* width: 25%;
  height: auto; */
  width: 40px;
  height: 40px;
  transform: rotate(180deg);
}

.project-image a.view-more-btn {
  transition: opacity 0.9s ease;
}

.project-image:hover a.view-more-btn {
  opacity: 1;
}

.showcase-section .site-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.showcase-section .projects-grid .project-info h3,
.showcase-section .projects-grid .project-info h3 a {
  font-family: "BC-Alphapipe-Semibold";
  font-style: normal;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 0.01em;
  color: #efefef;
  text-decoration: none;
  transition: color 0.3s ease;
}

.showcase-section .projects-grid .project-info h3,
.showcase-section .projects-grid .project-info h3 a:hover {
  color: #efefef80;
}

body:not(.home) .showcase-section .projects-grid .project-info h3,
body:not(.home) .showcase-section .projects-grid .project-info h3 a {
  color: #0b0b0b;
  transition: color 0.3s ease;
}

body:not(.home) .showcase-section .projects-grid .project-info h3 a:hover {
  color: #4e2bcd;
}

body:not(.home) .showcase-section .projects-grid .project-desc p {
  color: #00000080;
}

.showcase-section .projects-grid .project-desc p {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: #efefef80;
  align-self: stretch;
  margin-top: 10px;
}

.showcase-section .project-info {
  margin-top: 20px;
  display: flex;
  /* justify-content: start; */
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

body:not(.home) .showcase-section .project-info .project-arrow {
  border: 1px solid #00000040;
  background-color: white;
}

body:not(.home) .showcase-section .project-info .project-arrow .arrow-right-white {
  filter: brightness(0);
}

.showcase-section .project-info .project-arrow {
  border: 1px solid #efefef40;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50px;
  flex: none;
  order: 1;
  flex-grow: 0;
  transition: background 0.3s ease;
  position: relative;
  overflow: hidden;
}

.showcase-section .project-info .project-arrow img {
  transition: filter 0.3s ease, transform 0.3s ease;
  position: absolute;
  width: 20px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-section .project-info .project-arrow:hover {
  background: #ffffff;
}

/* .showcase-section .project-info .project-arrow:hover img {
    filter: invert(26%) sepia(88%) saturate(6359%) hue-rotate(248deg) brightness(60%) contrast(102%);
    transform: rotate(-40deg);
} */

/* Testimonials-Section */
.testimonials-section {
  background-color: var(--color-white);
}

.testimonials-section .testimonials-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.testimonials-section .testimonial-card {
  border-radius: 24px;
  border-bottom-right-radius: 0px;
  position: relative;
  background-image: url("/wp-content/uploads/2026/06/tetsimonial-bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  /* width: 716px;
    max-width: 100%; */
  /* height: 460px; */
  /* min-height: 475px; */
  min-height: unset;
  background-color: #f5f6fd;
  padding: 20px;
  width: 50%;
  flex: none;
  order: 0;
  flex-grow: 0;
  overflow: hidden;
  border-radius: 20px;
  /* aspect-ratio: 179/115; */
}

.testimonials-section .testimonial-card .testimonial-text {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.01em;
  color: rgba(30, 30, 30, 0.7);
  align-self: stretch;
  margin-top: 24px;
}

.testimonials-section .testimonial-card .rating span {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.01em;
  color: #4e2bcd;
}

.testimonials-section .testimonial-title-content {
  width: 100%;
}

.testimonials-section .author-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.testimonials-section .author-details {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.testimonials-section .author-details img {
  border: 1px solid #f5f6fd;
  border-radius: 50px;
  width: 50px;
}

.testimonials-section .testimonial-title-content p,
.testimonials-section .testimonial-title-content .section-tag {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: #0b0b0b;
  width: 85%;
}

.testimonials-section .testimonial-title-content p {
  margin-top: 10px;
}

.testimonials-section .testimonial-title-content h2 {
  font-style: normal;
  line-height: 62px;
  letter-spacing: 0.01em;
  color: #0b0b0b;
  margin-top: 14px;
}

.testimonials-section .slider-nav {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 14px;
  /* position: absolute; */
  /* right: 0px;
  bottom: 0; */
  right: 20px;
  bottom: 20px;
  left: 0;
}

.testimonials-section .slider-nav .nav-arrow.next,
.testimonials-section .slider-nav .nav-arrow.prev {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.testimonials-section .slider-nav .nav-arrow.next img,
.testimonials-section .slider-nav .nav-arrow.prev img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 20px;
}

.testimonials-section .slider-nav .nav-arrow.prev:hover {
  background: #4e2bcd;
}

.testimonials-section .slider-nav .nav-arrow.prev.nav-heilight {
  background: #4e2bcd;
}

.testimonials-section .slider-nav .nav-arrow.prev.nav-heilight img {
  filter: brightness(0) invert(1);
}

.testimonials-section .slider-nav .nav-arrow.next.nav-remove-helight {
  background: #ffffff;
}

.testimonials-section .slider-nav .nav-arrow.next.nav-remove-helight img {
  filter: invert(50%) sepia(100%) saturate(7471%) hue-rotate(248deg) brightness(92%) contrast(98%);
}

.testimonials-section .slider-nav .nav-arrow.next {
  width: 42px;
  height: 42px;
  background: #4e2bcd;
  border-radius: 50px;
  border: none;
}

.testimonials-section .slider-nav .nav-arrow.next:hover {
  background: #4e2bcd;
}

.testimonials-section .slider-nav .nav-arrow.prev {
  border: none;
  width: 42px;
  height: 42px;
  background: #ffffff;
  border-radius: 50px;
}

.testimonials-section .testimonial-card .testimonial-card-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  min-height: unset;
  height: auto;
  /* min-height: 475px; */
  /* height: 460px;
  max-height: 100%; */
}

.testimonials-section .author-details .author-name,
.testimonials-section .author-details .author-title {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.01em;
  color: #1e1e1e;
}

.testimonials-section .testimonial-card .testimonial-divider {
  width: 100%;
  background: linear-gradient(90deg,
      #ffffff00 0%,
      #1e1e1e66 50%,
      #ffffff00 100%);
  height: 2px;
}

.testimonials-section .testimonial-slider-wrapper {
  display: flex;
  transition: transform 0.6s ease;
  align-items: flex-start;

  width: 100%;
}

.testimonials-section .testimonial-slider-wrapper .testimonial-card-container {
  width: 100%;
  min-width: 100%;

  flex-shrink: 0;

  padding-left: 24px;
  padding-right: 24px;
}

/* Website-Bg-Logo-Section */

.website-bg-logo {
  display: flex;
  justify-content: end;
  align-items: center;
  position: relative;
}

.website-bg-logo img {
  position: absolute;
  right: 0;
}

/* About-Section */
.about-section {
  background: var(--color-white);
}

.about-section .about-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 117px;
}

.about-section .about-image-container {
  position: relative;
  width: 500px;
  height: 502px;
  flex-shrink: 0;
}

.about-section .about-image-container .image-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.about-section .about-image-container .leader-image {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* height: auto;
  object-fit: contain; */
}

.about-section .about-content .section-tag {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: #0b0b0b;
}

.about-section .about-content .about-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 20px;
  align-self: stretch;
  /* margin-top: 24px; */
  margin-top: 15px;
}

.about-section .about-content .about-text p {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 36px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: #0b0b0b;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.about-section .about-content h2 {
  font-style: normal;
  width: 70%;
  max-width: 100%;
  line-height: 62px;
  letter-spacing: 0.01em;
  color: #0b0b0b;
  align-self: stretch;
  margin-top: 14px;
}

/* Featured in Business Mint Badge */
.featured-mint-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(78, 43, 205, 0.18);
  border-radius: var(--radius-full, 50px);
  padding: 8px 18px;
  margin-top: 15px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(78, 43, 205, 0.07);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: fit-content;
  max-width: 100%;
}

.featured-mint-badge img {
  width: 80px;
}

.about-us-page.featured-mint-badge {
  margin-top: 12px;
}

.featured-mint-badge:hover {
  background: #fbf9ff;
  border-color: rgba(78, 43, 205, 0.45);
  box-shadow: 0 8px 24px rgba(78, 43, 205, 0.15);
  transform: translateY(-2px);
}

.featured-mint-badge .badge-prefix {
  font-family: var(--font-body, "NunitoSans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #71768e;
  line-height: 1;
}

.featured-mint-badge .badge-brand {
  font-family: var(--font-body, "NunitoSans", sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary, #4e2bcd);
  line-height: 1;
  letter-spacing: -0.01em;
}

.featured-mint-badge .badge-arrow {
  color: var(--color-primary, #4e2bcd);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  display: inline-block;
}

.featured-mint-badge:hover .badge-arrow {
  transform: translate(2px, -2px);
}

/* Blog-Section */

body:not(.blog) .blog-section.site-common-padding {
  padding-top: 40px;
  background: #ffffff;
}

.blog-section.site-common-padding {
  padding-top: 80px;
  background: #ffffff;
}

.blog-section .site-container {
  display: grid;
  gap: 60px;
}

.blog-section .blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-section .blog-header .btn-view-more-dark {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 10px 20px;
  gap: 10px;
  background: #0b0b0b;
  border-radius: 50px;
  font-family: "NunitoSans";
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.01em;
  color: #efefef;
  flex: none;
  order: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.blog-section .blog-title .section-tag {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: #0b0b0b;
}

.blog-section .blog-title h2 {
  line-height: 62px;
  letter-spacing: 0.01em;
  color: #0b0b0b;
}

body:not(.blog) .blog-section .blog-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}

body:not(.blog) .blog-section .blog-card {
  width: 33%;
}

.blog-section .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.blog-section .blog-grid .blog-card img {
  width: 100%;
  height: auto;
  max-height: 456px;
  border-radius: 14px;
  align-self: stretch;
  /* object-fit: cover; */
  /* object-fit: contain; */
}

.blog-section .blog-grid .card-content-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  background: #f6f6f8;
  padding: 20px;
  border-radius: 10px;
}

.blog-section .blog-grid .card-content-container .card-tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: start;
  padding: 8px 14px;
  gap: var(--spacing-xs);
  background: var(--color-primary);
  border-radius: var(--radius-xs);
  font-family: var(--font-semibold);
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--color-white);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.blog-section .blog-grid .card-content-container .card-content {
  font-family: "BC-Alphapipe-Semibold";
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: #0f022d;
}

.blog-section .blog-grid .card-content-container p {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 23px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: #69696a;
  margin-top: 8px;
  align-self: stretch;
}

.blog-section .blog-grid .card-content a {
  text-decoration: none;
  color: #0f022d;
}

.blog-section .blog-grid .card-content h3.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 36px;
  transition: color 0.5s ease;
}

.blog-section .blog-grid .card-content h3.card-title:hover {
  color: #4e2bcd;
}

.blog-section .blog-grid .card-content p.card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA-Section */

.cta-section {
  background: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 440px;
  height: auto;
  padding: 65px 0;
  overflow: hidden;
  position: relative;
}

.site-container.cta-container {
  position: relative;
}

.cta-section .cta-bg-left {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  pointer-events: none;
}

.cta-section .cta-bg-right {
  position: absolute;
  right: 0;
  top: -30px;
  pointer-events: none;
}

.cta-section .cta-container h2 {
  font-size: 39px;
  line-height: 47px;
  text-align: center;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.cta-section .cta-container p {
  font-family: "NunitoSans";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.01em;
  color: #efefef;
  margin-top: 14px;
}

.cta-section .cta-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 30px;
  width: 100%;
}

.cta-section .cta-content-container {
  width: 52%;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Zoho Newsletter Form in CTA Section */
.cta-section #sf3zcc0712951e731bbf7610b711b636f7789781cf4534b168e7d8bbd4b24cf8de53,
.cta-section #customForm {
  margin: 28px auto 0 !important;
  display: block !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 540px !important;
}

.cta-section .quick_form_9_css[name="SIGNUP_BODY"] {
  width: 100% !important;
  max-width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.cta-section #SIGNUP_HEADING {
  display: none !important;
}

/* Zoho Form Pill Container */
.cta-section #zcampaignOptinForm {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border-radius: var(--radius-full, 50px) !important;
  padding: 6px 6px 6px 20px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  transition: box-shadow var(--transition-base, 0.3s ease), transform var(--transition-base, 0.3s ease) !important;
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.cta-section #zcampaignOptinForm:focus-within {
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Input Wrapper & Field */
.cta-section #zcampaignOptinForm>div:has(#EMBED_FORM_EMAIL_LABEL),
.cta-section #zcampaignOptinForm>div:nth-of-type(2) {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  position: relative !important;
}

.cta-section #zcampaignOptinForm input#EMBED_FORM_EMAIL_LABEL {
  width: 100% !important;
  height: 44px !important;
  border: none !important;
  outline: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'%3E%3C/rect%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  padding: 10px 10px 10px 28px !important;
  font-family: var(--font-body, "NunitoSans", sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #111111 !important;
  margin: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.cta-section #zcampaignOptinForm input#EMBED_FORM_EMAIL_LABEL::placeholder {
  color: #8c93a8 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Submit Button Wrapper & Button */
.cta-section #zcampaignOptinForm>div:has(#zcWebOptin),
.cta-section #zcampaignOptinForm>div:nth-of-type(3) {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.cta-section #zcampaignOptinForm input#zcWebOptin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #170060 0%, #7c51ff 100%);
  color: #ffffff !important;
  font-family: var(--font-body, "NunitoSans", sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 13px 30px !important;
  border: none !important;
  border-radius: var(--radius-full, 50px) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(78, 43, 205, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  line-height: 1.2 !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
}

.cta-section #zcampaignOptinForm input#zcWebOptin:hover {
  background: linear-gradient(135deg, #3d1cb5 0%, #5d2de0 100%) !important;
  box-shadow: 0 6px 22px rgba(78, 43, 205, 0.6) !important;
  transform: translateY(-1px) !important;
}

.cta-section #zcampaignOptinForm input#zcWebOptin:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(78, 43, 205, 0.4) !important;
}

/* Error Message Floating Badge */
.cta-section #errorMsgDiv {
  position: absolute !important;
  top: -46px !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff0f0 !important;
  color: #d93025 !important;
  font-family: var(--font-body, "NunitoSans", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-full, 50px) !important;
  text-align: center !important;
  border: 1px solid rgba(217, 48, 37, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  margin: 0 !important;
}

/* Zoho Popup Modal Responsive Fixes */
#zcOptinSuccessPopup {
  max-width: 90vw !important;
  width: 580px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  height: auto !important;
  min-height: 200px;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  padding: 40px 30px !important;
}

#zcOptinOverLay {
  height: 100vh !important;
  width: 100vw !important;
}

/* Footer */
.site-footer {
  background: var(--color-white);
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-regular);
}

.footer-widgets {
  color: #0f022d;
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 4fr;
  gap: 30px;
  text-align: start;
}

.footer-right-child-container {
  font-family: "NunitoSans";
  color: #69696a;
  font-size: 18px;
  font-weight: normal;
}

.footer-right-child-container p {
  margin-top: 19px;
  max-width: 395px;
  font-size: 18px;
  line-height: 25px;
}

.footer-right-container {
  display: grid;
  gap: inherit;
  padding: 0px 24px;
}

.footer-right-container .footer-info {
  height: 0px;
}

.social-links {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.social-links li {
  height: 50px;
  width: 50px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

.social-links li a {
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.social-links li:hover {
  background-color: white;
}

.social-links li:hover a img {
  filter: invert(50%) sepia(100%) saturate(7471%) hue-rotate(248deg) brightness(92%) contrast(98%);
}

.social-links li a::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.social-links li a:hover::before {
  border-color: #4e2bcd;
  transform: scale(1.15);
}

.footer-left-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.footer-left-container .footer-widgets {
  display: grid;
  gap: 40px;
  width: 100%;
}

.footer-left-container .footer-widgets.contact-info {
  gap: 14px;
}

.footer-left-container .footer-widgets ul#menu-about,
.footer-left-container .footer-widgets ul#menu-quick-links {
  display: grid;
  gap: 14px;
}

.footer-left-container .contact-info-sub-container {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.footer-left-container .contact-info-sub-container a {
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-left-container .contact-info-sub-container a:hover {
  color: #4e2bcd;
}

.footer-left-container .contact-info-sub-container a,
.footer-left-container .contact-info-sub-container p {
  color: #69696a;
  font-size: 18px;
  font-weight: normal;
}

.footer-container h2.wp-block-heading {
  font-family: "NunitoSans";
  font-weight: bold;
  font-size: 22px;
}

.footer-container li {
  list-style: none;
}

.footer-container li a {
  font-size: 18px;
  color: #69696a;
  text-decoration: none;
  cursor: pointer;
}

.site-footer .footer-brand-container {
  padding: 40px 0px;
}

.site-footer .footer-brand-container .footer-bottom {
  color: #1e1e1e;
}

.site-footer .footer-brand-container .footer-bottom p {
  font-size: 18px;
}

.site-footer .footer-brand-container .footer-bottom .footer-text {
  color: #4e2bcd;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-flex;
}

.footer-bottom .footer-text span,
.footer-bottom .footer-text::after {
  display: block;
  transition: transform 0.35s ease;
}

.footer-bottom .footer-text span {
  transform: translateY(0);
}

#menu-about li a {
  text-decoration: none;
  /* padding: 5px 0; */
}

#menu-about li a,
#menu-quick-links li a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#menu-about li a span,
#menu-quick-links li a span {
  display: block;
  transition: transform 0.35s ease;
}

#menu-about li a::after,
#menu-quick-links li a::after,
.footer-bottom .footer-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}

#menu-about li a:hover span,
#menu-quick-links li a:hover span,
.footer-bottom .footer-text:hover span {
  transform: translateY(-100%);
}

#menu-about li a:hover::after,
#menu-quick-links li a:hover::after,
.footer-bottom .footer-text:hover::after {
  transform: translateY(0%);
}

/* Contact Us Page Style */

.contact-us-page-form .site-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  font-family: "BC-Alphapipe-Regular";
  color: #0b0b0b;
}

.contact-us-page-form .site-container a {
  text-decoration: none;
  color: #69696a;
  transition: color 0.3s ease;
}

.contact-us-page-form .site-container a:hover {
  color: #4e2bcd;
}

.contact-us-page-form label em {
  color: red;
}

.contact-us-page-form .contact-info-section {
  color: #69696a;
}

.contact-us-page-form .contact-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.contact-us-page-form .site-container ul li {
  list-style: none;
}

.contact-us-page-form h2 {
  font-size: 32px;
}

.contact-us-page-form .contact-container .contact-info-section,
.contact-us-page-form .contact-details,
.contact-us-page-form .contact-email-container,
.contact-us-page-form .location-business-container {
  display: grid;
  gap: 25px;
}

.contact-us-page-form .contact-content {
  display: grid;
  gap: 5px;
  color: #69696a;
}

.contact-us-page-form .contact-container .contact-info-section p {
  font-size: 18px;
}

.contact-us-page-form .contact-container .contact-info-section h2 {
  color: #4e2bcd;
}

.contact-us-page-form .site-container .contact-container,
.contact-us-page-form .site-container .form-container {
  width: 100%;
}

.contact-us-page-form .form-container {
  background-color: #fff;
  border-radius: 20px;
  padding: 50px;
}

.contact-us-page-form .form-container .error-message {
  color: red;
  font-size: 14px;
}

.contact-us-page-form .form-container form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-us-page-form .form-container form input:not(input[type="submit"]),
.contact-us-page-form .form-container form textarea {
  padding: 15px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
}


.contact-us-page-form .form-container span.wpcf7-not-valid-tip {
  font-size: 14px;
}

.contact-us-page-form .form-container br {
  display: none;
}

.contact-us-page-form .form-container form textarea {
  resize: none;
}

.contact-us-page-form .form-container form input:focus-visible,
.contact-us-page-form .form-container form textarea:focus-visible {
  outline: none;
  border: 1px solid var(--color-primary) !important;
  box-shadow: 0px 0px 2px 0px var(--color-primary);
}

.contact-us-page-form .form-container .code-container.common-container {
  width: 10%;
}

.contact-us-page-form .form-container form .input-container {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

.contact-us-page-form .form-container form .common-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.contact-us-page-form .form-container form .submit-btn-container button,
.contact-us-page-form .form-container form .submit-btn-container input[type="submit"],
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button {
  background-color: var(--color-primary);
  border: none;
  color: var(--color-white);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 16px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.contact-us-page-form .form-container form .submit-btn-container button:hover {
  background-color: var(--color-primary-light);
}

.form-container label {
  font-size: 16px;
}

.map-section {
  padding: 20px;
}

.map-section .map-container iframe {
  width: 100%;
  border-radius: 10px;
}

.site-footer .footer-brand-name img {
  width: 100%;
}


.common-hero-section.hero-section {
  height: 650px;
}

/* About us page style start */

.common-hero-section.hero-section .hero-content {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  height: auto;
  max-height: 100%;
}


.common-hero-section.hero-section .hero-content h1,
.common-hero-section.hero-section .hero-content p {
  text-align: start;
}


.common-hero-section.hero-section .hero-content p {
  margin-top: 12px;
}

.common-hero-section.hero-section .hero-right-container img {
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
  height: 413px;
}


.common-hero-section.hero-section .hero-left-container,
.common-hero-section.hero-section .hero-right-container {
  /* width: fit-content; */
  margin-top: 160px;
}

.common-hero-section.hero-section .hero-left-container {
  width: 70%;
}

body.woocommerce-account .common-hero-section.hero-section .hero-left-container,
body.woocommerce-cart .common-hero-section.hero-section .hero-left-container{
  width: 100%;
}

/* .common-hero-section.hero-section .hero-right-container {
  width: 30%;
} */

.common-hero-section.hero-section .hero-left-container h1,
.common-hero-section.hero-section .hero-content h1 {
  font-size: 45px;
  line-height: 55px;
  width: 65%;
}

.common-hero-section.hero-section .hero-content p {
  width: 100%;
  font-size: 22px;
  line-height: 32px;
  width: 75%;
}

.common-hero-section.hero-section .hero-content h1 {
  margin-top: 0px;
}

body.page-template-about-us-page .founded-section {
  background-color: #ffffff;
}

body.page-template-about-us-page .founded-section .site-container,
body.page-template-about-us-page .support-section .site-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

body.page-template-about-us-page .founded-section h2,
body.page-template-about-us-page .support-section h2 {
  font-size: 40px;
}

body.page-template-about-us-page .founded-section p,
body.page-template-about-us-page .support-section p {
  font-family: var(--font-body);
  margin-top: 12px;
}

body.page-template-about-us-page .support-section {
  background-color: #ffffff;
}

body.page-template-about-us-page .support-section .video-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

body.page-template-about-us-page .support-section .video-container img {
  width: 25%;
  cursor: pointer;
  border-radius: 20px;
}

body.page-template-about-us-page .support-section .site-container {
  background-color: #f9f9f9;
  padding: 40px;
  border-radius: 30px;
}

body.page-template-about-us-page .support-section .content-container {
  flex-basis: 60%;
}

body.page-template-about-us-page .support-section .image-container {
  flex-basis: 40%;
}

body.page-template-about-us-page .image-container img {
  border-radius: 20px;
}

body.single-services .content-areas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background-color: #fff;
  border-radius: 20px;
}

/* Career Page Style Start */

.job-post-section .site-container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.job-post-section .left {
  width: 50%;
  height: 80vh;
  position: sticky;
  top: 0;
}

.job-post-section .left-content-container {
  position: relative;
  height: 80svh;
  max-height: 100%;
  line-height: 0;
}

.job-post-section .left-content-container .image-description {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  background-color: #4e2bcd;
  padding: 20px;
  border-radius: 20px;
  width: 90%;
  color: #EFEFEF;
}

.job-post-section .left-content-container .image-description h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

.job-post-section .left-content-container .image-description p {
  font-size: var(--p-size);
  line-height: var(--p-line);
  font-family: var(--font-body);
}

.job-post-section .left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

.job-post-section .right {
  width: 50%;
  display: grid;
}

.job-post-section .job {
  margin-bottom: 80px;
}

.job-post-section .tag {
  display: inline-block;
  background: #e8e8e8;
  padding: 4px 10px;
  font-family: var(--font-semibold);
  font-size: 14px;
  border-radius: 20px;
  margin-right: 6px;
  margin-bottom: 10px;
}

.job-post-section .job-card-container h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

.job-post-section .job-card-container p {
  font-family: var(--font-body);
  margin-top: 10px;
}

.job-post-section .job-card-container {
  transition: background-color ease 0.3s;
  padding: 25px;
  cursor: pointer;
}

.job-post-section .job-card-container:hover {
  background-color: white;
  border-radius: 10px;
}

/* Single Blog Page Style Start */

body.single-post .hero-left-container .author-name,
body.single-project-work .hero-left-container .author-name {
  display: inline-flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  padding: 15px;
  width: auto;
  border-radius: 15px;
}

body.single-post .hero-left-container .author-name i,
body.single-project-work .hero-left-container .author-name i {
  background: #5a39d038;
  padding: 10px;
  color: #4e2bcd;
  border-radius: 5px;
}

body.single-post .hero-left-container .writtern-by-container,
body.single-project-work .hero-left-container .writtern-by-container {
  margin-top: 50px;
}

body.single-post .hero-left-container .writtern-by-container .writtern-by-label,
body.single-project-work .hero-left-container .writtern-by-container .writtern-by-label {
  color: #fff;
}

body.single-post .hero-left-container .writtern-by-container img,
body.single-project-work .hero-left-container .writtern-by-container img {
  border-radius: 5px;
  width: 50px;
}

body.single-post .hero-left-container .writtern-by-container p,
body.single-project-work .hero-left-container .writtern-by-container p {
  color: #4e2bcd;
  margin-top: 0px;
}

body.single-post .content-area.left-container,
body.single-project-work .content-area.left-container,
body.single-services .content-area.left-container {
  width: 70%;
}

body.single-post .time-container p,
body.single-project-work .time-container p,
body.single-services .time-container p {
  font-size: 18px;
  text-align: center;
}

body.single-post .content-area p,
body.single-project-work .content-area p,
body.single-services .content-area p {
  font-family: var(--font-regular);
  font-size: var(--p-size);
  line-height: var(--p-line);
}

body.single-post .content-area h3,
body.single-project-work .content-area h3,
body.single-services .content-area h3 {
  font-family: var(--font-regular);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

body.single-post .content-area h4,
body.single-project-work .content-area h4,
body.single-services .content-area h4 {
  font-size: var(--fs-body);
}

body.single-post .content-area ul,
body.single-post .content-area ol,
body.single-project-work .content-area ul,
body.single-project-work .content-area ol,
body.single-services .content-area ul,
body.single-services .content-area ol {
  list-style: auto;
  font-size: 22px;
  line-height: 26px;
  font-family: 'BC-Alphapipe-Regular';
  padding: 10px;
  margin-left: 10px;
}

body.single-post .site-container.single-blog-container,
body.single-project-work .site-container.single-blog-container,
body.single-services .site-container.single-services-container {
  display: flex;
  gap: 30px;
}

body.single-post .site-container.single-blog-container .right-container,
body.single-project-work .site-container.single-blog-container .right-container,
body.single-services .site-container.single-services-container .right-container {
  position: sticky;
  top: 100px;
  height: fit-content;
  width: 30%;
}

body.single-post .social-share-icon,
body.single-project-work .social-share-icon,
body.single-services .social-share-icon {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

body.single-post .social-share-icon p,
body.single-project-work .social-share-icon p,
body.single-services .social-share-icon p {
  margin-bottom: 0px !important;
}

body.single-post .social-share-icon img,
body.single-project-work .social-share-icon img,
body.single-services .social-share-icon img {
  background: #4e2bcd;
  padding: 10px;
  border-radius: 7px;
  cursor: pointer;
  width: 40px;
}

body.single-post .right-container .ready-to-discuss img,
body.single-project-work .right-container .ready-to-discuss img,
body.single-services .right-container .ready-to-discuss img {
  width: 100%;
  border-radius: 24px;
}

body.single-post .right-container .time-divider,
body.single-project-work .right-container .time-divider,
body.single-services .right-container .time-divider {
  height: 5px;
  background-color: #4e2bcd34;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

body.single-post .right-container .time-divider::after,
body.single-project-work .right-container .time-divider::after,
body.single-services .right-container .time-divider::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: #4e2bcd;
  transition: width 0.2s ease-out;
}

body.single-post .copy-tooltip,
body.single-project-work .copy-tooltip,
body.single-services .copy-tooltip {
  position: fixed;
  transform: translateX(-50%);
  background: #4e2bcd;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 9999;
}

body.single-post .copy-tooltip.fade-out,
body.single-project-work .copy-tooltip.fade-out,
body.single-services .copy-tooltip.fade-out {
  opacity: 0;
}

body.single-post .ready-to-discuss,
body.single-project-work .ready-to-discuss,
body.single-services .ready-to-discuss {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

body.single-post .ready-to-discuss-container,
body.single-project-work .ready-to-discuss-container,
body.single-services .ready-to-discuss-container {
  position: absolute;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #4e2bcd;
  align-items: start;
  align-self: center;
  padding: 30px;
  color: #EFEFEF;
  border-radius: 10px;
  gap: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

body.single-post .ready-to-discuss-container a,
body.single-project-work .ready-to-discuss-container a,
body.single-services .ready-to-discuss-container a {
  color: #EFEFEF;
  text-decoration: none;
  position: relative;
}

body.single-post .ready-to-discuss-container a::after,
body.single-project-work .ready-to-discuss-container a::after,
body.single-services .ready-to-discuss-container a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #EFEFEF;
}

/* Responsive */
@media (max-width: 768px) {
  .main-navigation ul {
    flex-direction: column;
    gap: 15px;
  }

  .content-area {
    padding: 20px;
  }
}

.header-profile-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.header-profile-btn-container i {
  color: var(--color-light);
}

.user-avatar-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.user-avatar-link,
.header-profile-btn-container-mobile .user-avatar-link {
  display: inline-flex !important;
  align-items: center;
  text-decoration: none !important;
  cursor: pointer;
  gap: 8px;
}


.header-profile-btn-container-mobile .user-avatar-link {
  margin-top: 20px !important;
  padding: 20px 0px !important;
}

span.dashboard-label {
  color: var(--color-light);
}

.my-account-mobile {
  color: var(--color-dark, #0b0b0b) !important;
  margin-top: 20px;
}

.my-account-mobile:hover {
  color: var(--color-dark, #0b0b0b) !important;
}

.header-profile-btn-container-mobile {
  display: none;
}

.user-avatar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.user-avatar-letter,
.header-profile-btn-container-mobile .user-avatar-letter {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #4e2bcd;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.header-profile-btn-container-mobile .user-avatar-letter {
  background: var(--color-dark, #0b0b0b);
  color: var(--color-white, #ffffff);
}

.header-profile-btn-container-mobile span.dashboard-label {
  color: var(--color-dark, #0b0b0b);
}

/* Submenu */
.user-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 140px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow: hidden;
}

.user-avatar-wrapper:hover .user-submenu {
  display: block;
}

.user-submenu-header {
  padding: 14px 16px;
  background: #f9f6f0;
  border-bottom: 1px solid #eee;
}

.user-submenu-name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #222;
}

.user-submenu-email {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-submenu-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.user-submenu-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s ease;
}

.user-submenu-list li a:hover {
  background: #f5f0e8;
  color: #4e2bcd;
}

.user-submenu-list li a i {
  width: 16px;
  text-align: center;
  color: #4e2bcd;
}

.user-submenu-divider {
  height: 1px;
  background: #eee;
  margin: 4px 0;
}

.user-submenu-logout {
  color: #e74c3c !important;
}

.user-submenu-logout i {
  color: #e74c3c !important;
}

.user-submenu-logout:hover {
  background: #fdf0f0 !important;
}

.user-avatar-wrapper::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 12px;
}

.user-avatar-wrapper:hover .user-submenu {
  display: block;
}

.single.single-product .wp-block-latest-posts__list.wp-block-latest-posts {
  display: grid;
  gap: 20px;
}

.single.single-product .wp-block-latest-posts__list.wp-block-latest-posts a {
  color: var(--color-dark, #0b0b0b);
  text-decoration: none;
}

.single.single-product .product-sidebar h2.wp-block-heading {
  font-size: 36px;
}

.single.single-product aside.product-sidebar {
  display: grid;
  gap: 20px;
  position: sticky;
  top: 100px;
  height: fit-content;
  background-color: #ffffff;
  box-shadow: 0px 4px 15px 2px #c7bdbd45;
  padding: 30px;
  width: 25%;
  border-radius: 8px;
}

.single.single-product .product-with-sidebar.has-sidebar .content-area {
  background-color: #ffffff;
  box-shadow: 0px 4px 15px 2px #c7bdbd45;
}

.single.single-product .product-sidebar .wp-block-latest-posts__list.wp-block-latest-posts li {
  border-bottom: 1px solid #0b0b0b29;
  padding-bottom: 10px;
}


/* Blog Sidebar Design Start */
.blog-sidebar .sidebar {
  display: grid;
  gap: 20px
}

.blog-sidebar .widget {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 20px
}

.blog-sidebar .widget .wp-block-heading {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-dark);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08)
}

.blog-sidebar .wp-block-search {
  display: flex;
  gap: 8px
}

.blog-sidebar .wp-block-search__label {
  display: none
}

.blog-sidebar .wp-block-search__inside-wrapper {
  display: flex;
  gap: 8px;
  width: 100%
}

.blog-sidebar .wp-block-search__input {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  background: var(--color-gray-light);
  color: var(--color-dark);
  outline: none;
  font-family: var(--font-body)
}

.blog-sidebar .wp-block-search__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(78, 43, 205, 0.15)
}

.blog-sidebar .wp-block-search__button {
  padding: 8px 16px;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition-base)
}

.blog-sidebar .wp-block-search__button:hover {
  background: var(--color-primary-light)
}

.blog-sidebar .wp-block-latest-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0
}

.blog-sidebar .wp-block-latest-posts li {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  padding: 10px 0
}

.blog-sidebar .wp-block-latest-posts li:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.blog-sidebar .wp-block-latest-posts__post-title {
  font-size: 16px;
  color: var(--color-dark);
  text-decoration: none;
  line-height: 1.5;
  display: block;
  transition: color var(--transition-base)
}

.blog-sidebar .wp-block-latest-posts__post-title:hover {
  color: var(--color-primary)
}

.blog-sidebar .wp-block-categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px
}

.blog-sidebar .wp-block-categories-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: var(--color-dark);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-light);
  transition: background var(--transition-base), color var(--transition-base)
}

.blog-sidebar .wp-block-categories-list li a:hover {
  background: var(--color-bg-light);
  color: var(--color-primary)
}

body.single-post .content-area.left-container,
body.single-project-work .content-area.left-container,
body.single-services .content-area.left-container {
  font-family: "NunitoSans", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #3a3a3a;
}

body.single-post .content-area p,
body.single-project-work .content-area p,
body.single-services .content-area p {
  font-family: "NunitoSans", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #3a3a3a;
  margin: 0 0 1.2rem;
}

body.single-post .content-area h2,
body.single-project-work .content-area h2,
body.single-services .content-area h2 {
  font-size: 26px;
  line-height: 1.3;
  font-family: "BC-Alphapipe-Bold";
  color: #0b0b0b;
  margin: 2.5rem 0 1rem;
  padding-bottom: 10px;
  border-bottom: 2px solid #4e2bcd;
}

body.single-post .content-area h3,
body.single-project-work .content-area h3,
body.single-services .content-area h3 {
  font-size: 19px;
  font-family: "BC-Alphapipe-Semibold";
  color: #0b0b0b;
  margin: 2rem 0 0.6rem;
  line-height: 1.4;
}

body.single-post .content-area h4,
body.single-project-work .content-area h4,
body.single-services .content-area h4 {
  font-size: 13px;
  font-family: "NunitoSans", sans-serif;
  font-weight: 700;
  color: #4e2bcd;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.4rem 0 0.5rem;
}

body.single-post .content-area ol,
body.single-post .content-area ul,
body.single-project-work .content-area ol,
body.single-project-work .content-area ul,
body.single-services .content-area ol,
body.single-services .content-area ul {
  font-family: "NunitoSans", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0.8rem 0 1.2rem 1.4rem;
  padding: 0;
  display: grid;
  gap: 6px;
}

body.single-post .content-area ol,
body.single-project-work .content-area ol,
body.single-services .content-area ol {
  list-style: decimal;
}

body.single-post .content-area ul,
body.single-project-work .content-area ul,
body.single-services .content-area ul {
  list-style: disc;
}

body.single-post .content-area li,
body.single-project-work .content-area li,
body.single-services .content-area li {
  padding-left: 4px;
}

body.single-post .content-area strong,
body.single-post .content-area b,
body.single-project-work .content-area strong,
body.single-project-work .content-area b,
body.single-services .content-area strong,
body.single-services .content-area b {
  color: #0b0b0b;
  font-weight: 700;
}

body.single-post .content-area hr,
body.single-project-work .content-area hr,
body.single-services .content-area hr {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 2.5rem 0;
}

body.single-post .content-area blockquote,
body.single-project-work .content-area blockquote,
body.single-services .content-area blockquote {
  background: #f1eeff;
  border-left: 4px solid #4e2bcd;
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 1.8rem 0;
  font-style: normal;
}

body.single-post .content-area blockquote p,
body.single-project-work .content-area blockquote p,
body.single-services .content-area blockquote p {
  margin: 0;
  color: #3a3a3a;
}

body.single-post .content-area .wp-block-group,
body.single-post .content-area figure,
body.single-project-work .content-area .wp-block-group,
body.single-project-work .content-area figure,
body.single-services .content-area .wp-block-group,
body.single-services .content-area figure {
  margin: 1.5rem 0;
}

body.single-post .content-area img,
body.single-project-work .content-area img,
body.single-services .content-area img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}

/* Blog Sidebar Design End */


/* ============================================================
   services-archive.css
   Uses theme CSS variables from style.css
   ============================================================ */

/* ============================================================
   SECTION 1 — Split: Image Left / Content Right
   ============================================================ */
.vt-split-section {
  padding: var(--spacing-section) 0;
  background: var(--color-white);
}

.vt-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.vt-split-image img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}

.vt-split-content .vt-eyebrow {
  font-size: 13px;
  font-family: var(--font-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
  display: block;
}

.vt-split-content h2 {
  font-size: var(--fs-h3);
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-dark);
  margin: 0 0 20px;
}

.vt-split-content .section-desc {
  font-size: var(--fs-small);
  font-family: var(--font-body);
  line-height: 1.8;
  color: var(--color-gray);
  margin: 0 0 16px;
}

/* Strip default WP paragraph margins inside term description */
.vt-split-content .section-desc p {
  margin: 0 0 12px;
  font-size: var(--fs-small);
  font-family: var(--font-body);
  line-height: 1.8;
  color: var(--color-gray);
}

.vt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 16px;
  font-family: var(--font-semibold);
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  text-decoration: none;
  margin-top: var(--spacing-sm);
  transition: background var(--transition-base);
}

.vt-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ============================================================
   SECTION 2 — Horizontal Scroll Slider
   ============================================================ */
.vt-services-section {
  /* background: var(--color-bg-light); */
  padding: var(--spacing-lg) 0;
  overflow: hidden;
  transition: scroll 0.20s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pin-spacer {
  transition: padding 0.55s ease-in;
}

.vt-services-viewport {
  overflow: hidden;
}

.vt-services-track {
  display: flex;
  gap: 24px;
  /* transition: transform .30s cubic-bezier(.4, 0, .2, 1);
    will-change: transform; */
  padding-right: var(--spacing-lg);
}

/* ---- Base card ---- */
.vt-card {
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---- Intro card (image + dark overlay) ---- */
.vt-card--intro {
  width: 340px;
  min-height: 420px;
  position: relative;
  background: var(--color-dark-alt);
}

.vt-card-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}

.vt-card-intro-overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 32px 32px;
}

.vt-card-intro-body h2 {
  font-size: 26px;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.25;
  margin: 0 0 16px;
}

.vt-card-intro-body p {
  font-size: 14px;
  font-family: var(--font-body);
  line-height: 1.7;
  color: rgba(239, 239, 239, .75);
  margin: 0 0 24px;
}

.vt-card-intro-link {
  display: inline-block;
  font-size: 15px;
  font-family: var(--font-semibold);
  font-weight: 600;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-base);
}

.vt-card-intro-link:hover {
  color: var(--color-primary-light);
}

.vt-intro-arrow {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-base);
}

.vt-intro-arrow:hover {
  background: var(--color-primary);
}

/* ---- Service cards ---- */
.vt-card--service {
  width: 320px;
  min-height: 420px;
  background: var(--color-white);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, .08);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}

.vt-card--service:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.vt-card-icon {
  width: 64px;
  height: 64px;
  background: var(--color-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  margin-bottom: 28px;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.vt-card--service:hover .vt-card-icon {
  background: var(--color-primary);
}

.vt-card--service h3 {
  font-size: 20px;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 14px;
  line-height: 1.3;
}

.vt-card--service p {
  font-size: 14px;
  font-family: var(--font-body);
  line-height: 1.75;
  color: var(--color-gray);
  margin: 0;
  flex: 1;
}

.vt-card-arrow {
  align-self: flex-end;
  margin-top: 32px;
  width: 44px;
  height: 44px;
  background: var(--color-dark);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-decoration: none;
  transition: background var(--transition-base);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.vt-card-arrow:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Arrow animation — same style as theme's existing arrows */
.vt-card-arrow svg {
  position: absolute;
  width: 18px;
  transition: transform var(--transition-cubic);
}

.vt-card-arrow svg.arrow-in {
  transform: translateX(0);
}

.vt-card-arrow svg.arrow-out {
  transform: translateX(-50px);
}

.vt-card-arrow:hover svg.arrow-in {
  transform: translateX(50px);
}

.vt-card-arrow:hover svg.arrow-out {
  transform: translateX(0);
}

/* Footer Styling */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-copy {
  font-size: 16px;
  color: #7a7a9a;
}

.footer-love {
  font-size: 16px;
  color: #7a7a9a;
}

.footer-love span {
  color: #ef4444;
}

.footer-tagline {
  font-size: 16px;
  color: #7a7a9a;
}

/* Widget_services_categories_widget Style Start */
.blog-sidebar .widget_services_categories_widget {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.blog-sidebar .widget_services_categories_widget .widget-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-dark);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.blog-sidebar .services-categories-list,
.blog-sidebar .services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.blog-sidebar .services-categories-list li a,
.blog-sidebar .services-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--color-dark);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-light);
  transition: background var(--transition-base), color var(--transition-base), padding var(--transition-base);
}

.blog-sidebar .services-categories-list li a::after,
.blog-sidebar .services-list li a::after {
  content: "→";
  font-size: 14px;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.blog-sidebar .services-categories-list li a:hover,
.blog-sidebar .services-list li a:hover {
  background: var(--color-bg-light);
  color: var(--color-primary);
  padding-left: 18px;
}

.blog-sidebar .services-categories-list li a:hover::after,
.blog-sidebar .services-list li a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.blog-sidebar .services-categories-list li a.active,
.blog-sidebar .services-list li a.active {
  background: var(--color-primary);
  color: var(--color-white);
  padding-left: 18px;
}

.blog-sidebar .services-categories-list li a.active::after,
.blog-sidebar .services-list li a.active::after {
  content: "→";
  opacity: 1;
  transform: translateX(0);
  color: var(--color-white);
}

.product-template-default.single.single-product ul {
  list-style: none;
  padding: 5px 0;
}

/* Widget_services_categories_widget Style End */
#vtServicesSection {
  overflow: visible;
}

.disabled-link {
  pointer-events: none;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0px;
}

body.woocommerce-account .common-hero-section.hero-section.woocommerce-common-hero-section .hero-content h1 {
  text-align: center;
}

body.woocommerce-account .common-hero-section.hero-section.woocommerce-common-hero-section {
  height: 350px;
  overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-content .button:hover {
  background-color: #4e2bcd !important;
  transform: none;
}


.legal-page-content-section {
  padding: 80px 0;
  background: #f9f9f9;
}

.legal-page-content-section .site-container {
  /* max-width: 860px; */
  margin: 0 auto;
  /* padding: 0 20px; */
  display: grid;
  gap: 0;
}

.legal-page-content-section .single-content-block {
  padding: 40px 0;
  border-bottom: 1px solid rgba(78, 43, 205, 0.1);
}

.legal-page-content-section .single-content-block:first-child {
  padding-top: 0;
}

.legal-page-content-section .single-content-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-page-content-section .single-content-block h2 {
  font-family: "BC-Alphapipe-Bold";
  font-size: 22px;
  line-height: 1.3;
  color: #0b0b0b;
  margin: 0 0 14px;
  padding-left: 16px;
  border-left: 4px solid #4e2bcd;
  font-weight: normal;
}

.legal-page-content-section .single-content-block h2 b {
  font-weight: normal;
}

.legal-page-content-section .single-content-block p {
  font-family: "NunitoSans";
  font-size: 16px;
  line-height: 1.85;
  color: #69696a;
  margin: 0;
}

.legal-page-content-section .single-content-block ul,
.legal-page-content-section .single-content-block ol {
  font-family: "NunitoSans";
  font-size: 16px;
  line-height: 1.85;
  color: #69696a;
  padding-left: 20px;
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.legal-last-updated {
  font-family: "NunitoSans";
  font-size: 14px;
  color: #4e2bcd;
  font-weight: 600;
  padding: 8px 16px;
  background: rgba(78, 43, 205, 0.06);
  border-radius: 6px;
  display: inline-block;
}

.common-hero-section.hero-section.legal-page-hero,
body.woocommerce-checkout .common-hero-section.hero-section {
  height: 350px;
}

.common-hero-section.hero-section.legal-page-hero .hero-left-container,
body.woocommerce-checkout .common-hero-section.hero-section .hero-left-container {
  width: 100%;
}

.common-hero-section.hero-section.legal-page-hero .hero-content h1,
body.woocommerce-checkout .common-hero-section.hero-section .hero-content h1 {
  text-align: center !important;
  width: 100%;
}

footer.site-footer .site-container.footer-bottom {
  padding-bottom: 0px;
}

body.post-type-archive-product .site-container.shop-page,
body.single-product .site-container.shop-page {
  padding-top: 80px;
}

/* Fix product title size on initial load */
.vt-product-title,
h1.vt-product-title {
  font-family: var(--font-primary, "BC-Alphapipe-Bold");
  font-size: 32px !important;
  line-height: 40px !important;
  color: var(--color-dark, #0b0b0b);
  margin: 0;
}


/* 404 Not Found Section */
.error-404.not-found {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
  padding: var(--spacing-section) 0;
}

.error-404.not-found .error-code {
  font-family: var(--font-primary);
  font-size: 130px;
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}

.error-404.not-found .page-header {
  margin-bottom: var(--spacing-sm);
}

.error-404.not-found .page-title {
  font-family: var(--font-primary);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  margin: 0;
}

.error-404.not-found .page-content p {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--color-gray);
  margin-bottom: var(--spacing-md);
}

/* Search Form */
.error-404.not-found .search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto var(--spacing-md);
  background: var(--color-gray-light);
  padding: 6px;
  border-radius: var(--radius-full);
  border: 1.5px solid #d1d5db;
  transition: border var(--transition-base), box-shadow var(--transition-base);
}

.error-404.not-found .search-form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0px 0px 0px 3px rgba(78, 43, 205, 0.1);
}

.error-404.not-found .search-form label {
  flex: 1;
  margin: 0;
  width: 100%;
}

.error-404.not-found .search-form .search-field {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-dark);
  outline: none;
}

.error-404.not-found .search-form .search-submit {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  font-family: var(--font-semibold);
  font-size: 16px;
  padding: 12px 26px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-base);
  flex-shrink: 0;
}

.error-404.not-found .search-form .search-submit:hover {
  background: var(--color-primary-light);
}

/* Back to Home Button (reuses your existing .vt-btn style, this is extra polish) */
.error-404.not-found .back-home-btn {
  margin-top: 10px;
}

.content-area.not-found-content-area {
  background: transparent;
  box-shadow: none;
}


/* ============================================================
   Search Results Page (uses generic template-parts/content.php)
   Scoped with body.search so it ONLY affects search results
   ============================================================ */

body.search .content-area .page-header {
  margin-bottom: var(--spacing-md);
}

body.search .content-area .page-title {
  font-family: var(--font-primary);
  font-size: 26px;
  color: var(--color-dark);
  line-height: 1.4;
}

body.search .content-area .page-title span {
  color: var(--color-primary);
}

/* Each result as a grid: image left, content right */
body.search .content-area article {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 30px;
  margin-bottom: 30px !important;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.search .content-area article:last-child {
  border-bottom: none;
  margin-bottom: 0 !important;
  padding-bottom: 0;
}

body.search .content-area article .entry-header {
  grid-column: 2;
  grid-row: 1;
}

body.search .content-area article .post-thumbnail {
  grid-column: 1;
  grid-row: 1 / span 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 190px;
}

body.search .content-area article .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

body.search .content-area article .post-thumbnail:hover img {
  transform: scale(1.05);
}

body.search .content-area article .entry-content {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

body.search .content-area article .entry-footer {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
}

/* Title */
body.search .content-area .entry-title {
  font-family: var(--font-primary);
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 10px;
}

body.search .content-area .entry-title a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color var(--transition-base);
}

body.search .content-area .entry-title a:hover {
  color: var(--color-primary);
}

/* Meta (date / author / category) */
body.search .content-area .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-gray);
  margin-bottom: 0;
}

body.search .content-area .entry-meta a {
  color: var(--color-gray);
  text-decoration: none;
  transition: color var(--transition-base);
}

body.search .content-area .entry-meta a:hover {
  color: var(--color-primary);
}

body.search .content-area .entry-meta .byline,
body.search .content-area .entry-meta .cat-links {
  position: relative;
  padding-left: 14px;
}

body.search .content-area .entry-meta .byline::before,
body.search .content-area .entry-meta .cat-links::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-gray);
}

/* Excerpt */
body.search .content-area .entry-content p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-gray);
  margin: 0;
}

/* Read More button */
body.search .content-area .read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-semibold);
  font-size: 14px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 10px 22px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-base);
}

body.search .content-area .read-more:hover {
  background: var(--color-primary-light);
}

/* Pagination (the_posts_navigation default markup) */
body.search .posts-navigation {
  margin-top: var(--spacing-lg);
}

body.search .posts-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

body.search .posts-navigation .nav-previous a,
body.search .posts-navigation .nav-next a {
  display: inline-flex;
  align-items: center;
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-semibold);
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-base);
}

body.search .posts-navigation .nav-previous a:hover,
body.search .posts-navigation .nav-next a:hover {
  background: var(--color-primary);
}

body.search .content-area.search-content-area,
.content-area.shop-content-area,
.content-area.account-page-content-area {
  background: transparent;
  box-shadow: none;
}

.content-area.shop-content-area,
.content-area.account-page-content-area {
  padding: 0px;
}

body.woocommerce-account .site-container {
  padding-top: 80px;
}

body.woocommerce-account .site-container.footer-brand-name,
body.woocommerce-account .site-container.footer-bottom {
  padding-top: 0px;
}

body.woocommerce-account .site-container.footer-brand-name {
  padding-bottom: 0px;
}

body.woocommerce-account .site-container article {
  margin-bottom: 0px;
}

body.woocommerce-account .site-container article .entry-content {
  margin-top: 0px;
}

.my-account-page-site-container {
  background-color: #ffffff;
}

.site-container.my-account-site-container {
  padding-bottom: 0px !important;
}

body.woocommerce-checkout .site-container.checkout-site-container {
  padding-top: 80px;
}

/* ============================================================
   WooCommerce Order-Pay (Razorpay) Page
   ============================================================ */

.woocommerce-order-pay .content-area {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 50px;
}

.woocommerce-order-pay .woocommerce-notices-wrapper:empty {
  display: none;
}

/* Order summary row */
.woocommerce-order-pay ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(11, 11, 11, 0.08);
}

.woocommerce-order-pay ul.order_details li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray);
  display: grid;
  gap: 6px;
}

.woocommerce-order-pay ul.order_details li strong {
  font-family: var(--font-semibold);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-dark);
}

/* "Thank you for your order..." copy */
.woocommerce-order-pay .woocommerce>p {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--color-dark);
  margin-bottom: var(--spacing-sm);
}

/* "Please wait while we are processing..." message */
#msg-razorpay-success {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  border-radius: var(--radius-sm) !important;
}

/* Buttons */
#btn-razorpay,
#btn-razorpay-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-semibold);
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  padding: 15px 34px;
  margin: 0 12px 0 0;
  transition: background var(--transition-base), color var(--transition-base),
    transform var(--transition-base), box-shadow var(--transition-base);
}

#btn-razorpay {
  background: var(--color-primary);
  color: var(--color-white);
}

#btn-razorpay:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(78, 43, 205, 0.25);
}

#btn-razorpay-cancel {
  background: var(--color-gray-light);
  color: var(--color-dark);
  border: 1.5px solid #d1d5db;
}

#btn-razorpay-cancel:hover {
  background: #e9e9ec;
  border-color: #b9bcc4;
}


/* ============================================================
   WooCommerce Thank You / Order Received Page
   ============================================================ */

body.woocommerce-order-received .content-area {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 50px;
}

/* ---- Success notice ---- */
.woocommerce-order .woocommerce-notice--success {
  display: block;
  list-style: none;
  background: var(--color-bg-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 22px 26px;
  margin: 0 0 36px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--color-dark);
}

/* ---- Order overview row (order / date / email / total / payment) ---- */
.woocommerce-order ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0 0 30px;
  border-bottom: 1px solid rgba(11, 11, 11, 0.08);
}

.woocommerce-order ul.woocommerce-order-overview li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray);
  display: grid;
  gap: 6px;
}

.woocommerce-order ul.woocommerce-order-overview li strong {
  font-family: var(--font-semibold);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-dark);
  word-break: break-word;
}

/* ---- Section titles ---- */
.site-container.checkout-site-container .woocommerce-order h2 {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-primary);
}

.woocommerce-order section {
  margin-bottom: var(--spacing-md);
}

.woocommerce-order section:last-child {
  margin-bottom: 0;
}

.woocommerce-order table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(11, 11, 11, 0.08);
}

.woocommerce-order table.shop_table thead th {
  background: var(--color-bg-light);
  color: var(--color-dark);
  font-family: var(--font-semibold);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 16px 20px;
}

/* Keep the amount column right-aligned everywhere: header, line items, footer */
.woocommerce-order table.shop_table thead th:last-child,
.woocommerce-order table.shop_table .product-total {
  text-align: right;
}

.woocommerce-order table.shop_table td,
.woocommerce-order table.shop_table tbody th {
  padding: 16px 20px;
  border-top: 1px solid rgba(11, 11, 11, 0.06);
}

.woocommerce-order table.shop_table .product-quantity {
  color: var(--color-gray);
  font-weight: 400;
  margin-left: 4px;
}

.woocommerce-order table.shop_table a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-base);
}

.woocommerce-order table.shop_table a:hover {
  color: var(--color-primary-hover);
}

/* Totals footer */
.woocommerce-order table.shop_table tfoot th,
.woocommerce-order table.shop_table tfoot td {
  font-weight: 600;
  background: var(--color-gray-light);
  border-top: 1px solid rgba(11, 11, 11, 0.06);
  padding: 14px 20px;
  text-align: right;
}

.woocommerce-order table.shop_table tfoot th {
  text-align: left;
}

.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
  color: var(--color-primary);
  font-family: var(--font-semibold);
  font-size: 18px;
  background: var(--color-bg-light);
}

.woocommerce-order .woocommerce-MyAccount-downloads-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-white) !important;
  font-family: var(--font-semibold);
  font-size: 0;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  text-decoration: none !important;
  transition: background var(--transition-base);
}

.woocommerce-order .woocommerce-MyAccount-downloads-file:hover {
  background: var(--color-primary-hover);
}

/* ---- Billing / customer details ---- */
.woocommerce-order .woocommerce-customer-details address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-gray);
  background: var(--color-gray-light);
  border-radius: var(--radius-md);
  padding: 26px 30px;
}

.woocommerce-order .woocommerce-customer-details--email {
  margin-top: 10px;
  color: var(--color-primary);
  font-weight: 600;
}

.woocommerce-order-downloads .download-file {
  display: flex;
  justify-content: end;
}

.common-hero-section.services.hero-section.woocommerce-common-hero-section {
  overflow: hidden;
}


.no-results.not-found {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.no-results.not-found .page-header {
  margin-bottom: var(--spacing-sm);
}

.no-results.not-found .page-title {
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--color-dark);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.no-results.not-found .page-content>p {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--color-gray);
  margin-bottom: var(--spacing-md);
}

.no-results.not-found .search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto;
  background: var(--color-white);
  padding: 6px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(78, 43, 205, 0.15);
  box-shadow: 0 4px 24px rgba(78, 43, 205, 0.08);
  transition: border var(--transition-base), box-shadow var(--transition-base);
}

.no-results.not-found .search-form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 4px 32px rgba(78, 43, 205, 0.18);
}

.no-results.not-found .search-form label {
  flex: 1;
  margin: 0;
  width: 100%;
}

.no-results.not-found .search-form .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.no-results.not-found .search-form .search-field {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-dark);
  outline: none;
}

.no-results.not-found .search-form .search-field::placeholder {
  color: var(--color-gray);
}

.no-results.not-found .search-form .search-submit {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  font-family: var(--font-semibold);
  font-size: 16px;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-base);
  flex-shrink: 0;
  white-space: nowrap;
}

.no-results.not-found .search-form .search-submit:hover {
  background: var(--color-primary-light);
}

.woocommerce-checkout .site-container.footer-brand-name {
  padding-top: 0px;
  padding-bottom: 0px;
}

.woocommerce-checkout .site-container.footer-bottom {
  padding-top: 0px;
}

.woocommerce-checkout footer .site-container.site-common-padding {
  padding-top: 80px;
}

.trust-index-shortcode .ti-widget.ti-goog {
  text-align: start;
}