@import url('./variables.css');

/* ========== GLOBAL STYLES ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Nulshock (font-display: swap — PageSpeed; same file as CDNFonts) */
@font-face {
  font-family: 'Nulshock';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nulshock'), url('https://fonts.cdnfonts.com/s/17838/nulshock%20bd.woff') format('woff');
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ========== UTILITY CLASSES ========== */
.span-orange {
  color: var(--color-half-heading);
}

.section-padding {
  padding: var(--section-padding) 0;
}

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

.color-text-primary{
  color: var(--color-cream);
}
.card-text-color{
    color:var(--color-card-two);
}
.color-paragraph{
    color:var(--color-secondary-para);
}
.text-black-80{
  color: var(--color-text);
}
.text-white-80{
    color:#FFFFFFCC !important;
}
.text-white-60{
    color:rgba(255, 255, 255, 0.6) !important;
}
.color-white-75{
    color:#ffffffbf !important;
}
.color-white-85{
    color:rgba(255, 255, 255, 0.85) !important;
}
.placeholder-color{
    color:#97A6CF !important;
}
.copywrite-color{
    color:#5B5D65;
}
.b-shadow{
 box-shadow: 0px 8px 20px #FFCEA3;
}
.border-color-orange{
    color:var(--color-border);
}

/* ========== CONSOLIDATED FONT UTILITIES ========== */
/* Font Family */
.font-inter {
  font-family: var(--font-body);
}

.font-nulshock {
  font-family: var(--font-heading);
}

/* Font Weight (using Bootstrap-compatible naming) */
.fw-400 {
  font-weight: var(--fg-400);
}

.fw-500 {
  font-weight: var(--fg-500) !important;
}

.fw-600 {
  font-weight: var(--fg-600);
}

.fw-700 {
  font-weight: var(--fg-700);
}

/* Font Size Utilities */
.fs-32{
    font-size:var(--fs-h3);
}
.fs-24 {
  font-size: var(--fs-h4);
}
.fs-20 {
  font-size: var(--fs-20);
}

.fs-18 {
  font-size: var(--fs-18) !important;
}

.fs-16 {
  font-size: var(--fs-16);
}

.fs-14 {
  font-size: var(--fs-14) !important;
}

.fs-13 {
  font-size: var(--fs-13);
}

.fs-12 {
  font-size: var(--fs-12);
}

.lh-14 {
  line-height: 1.4;
}

/* ========== TYPOGRAPHY ========== */
.section-heading {
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--color-heading);
  padding-bottom: var(--spacing-xl);
}

.backup-subtitle {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text);
  padding-bottom: var(--spacing-6xl);
}

.backup-label {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-black-80);
}

/* ========== BACKUP SECTION ========== */
.backup-grid{
    max-width: 1096px;
    margin: 0 auto;
    align-items: center;
    row-gap:40px !important;
}
.backup-card {
  /*width: 136px;*/
  /*height: 88px;*/
  padding:20px 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  background:#FFEEE0;
  box-shadow: 0px 8px 20px #FFCEA3; 
  border-radius:24px;
}
.backup-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.backup-card span {
  font-size: var(--fs-14);
  color: var(--color-text);
  line-height: 1.2;
  white-space: nowrap;
}

.btn-primary-custom {
  width: 170px;
  height: var(--spacing-4xl);
  border: none;
  border-radius: var(--btn-radius);
  background-color: var(--color-button-bg);
  color: var(--color-white);
  font-size: var(--fs-btn);
  transition: background 0.3s ease, transform 0.2s ease;
  margin-top: var(--spacing-6xl);
}

.btn-dark-cream{
    color: #FDE0C7 !important;
    border-color: #FDE0C7 !important;
    background: #141823 !important;
    width:160px;
    padding:16px 0 !important;
    transition:0.5s ease;
}
.btn-dark-cream:hover{
    color: #141823 !important;
    border-color: #141823 !important;
    background: #FDE0C7 !important;
    transition:0.5s ease;
}
.btn-primary-custom:hover {
  background-color: var(--color-orange-hover);
  transform: translateY(-2px);
}

/* ========== MANAGEMENT CONSOLE SECTION ========== */
.management-console-section {
  background-image: url('../images/Pattern.png');
  background-repeat: repeat;
  background-size: contain;
}

.management-console-section .container {
    max-width:994px;
}

.management-console-section .nav-tabs button {
  color: var(--color-black-70) !important;
  border: none;
  border-bottom: 2px solid var(--color-black-20);
  font-size: var(--fs-17);
  line-height: 1.31;
  opacity: 50%;
}

.management-console-section .nav-tabs button.active {
  border-bottom: 2px solid var(--color-black);
  color: var(--color-black) !important;
  border: none;
  border-bottom: 2px solid var(--color-black-80);
}

.management-console-section .tab-details .tab-pane {
  background: var(--color-card-bg);
  padding: var(--spacing-3xl);
  border-radius: var(--radius-4xl);
}

.management-console-section .section-header {
  padding-bottom: var(--spacing-5xl);
}

.management-console-section h2.split-heading {
  padding: 0 17% var(--spacing-xl);
}

/* ========== KEY FEATURES SECTION ========== */
.key-features-section {
  background-color: var(--color-bg);
  padding:40px 0;
  contain: layout;
}

.key-features-card {
  background-color: var(--color-light-orange);
  padding: var(--spacing-3xl);
  opacity: 1;
  border-radius: var(--radius-4xl);
  contain: layout;
  border:none !important;
}

.dashboard-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.dashboard-image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /*transform: scale(1);*/
  opacity: 1;
  will-change: opacity, transform;
}

.dashboard-image-wrapper img.is-transitioning {
  opacity: 0;
  /*transform: scale(1.05);*/
}

/* Accordion Styles */
.key-features-accordion {
  --bs-accordion-border-color: rgba(0, 0, 0, 0.1);
  --bs-accordion-border-radius: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.key-features-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid #FDD6B6;
  background: transparent;
}

.key-features-accordion .accordion-item:last-child {
  border-bottom: none;
}

.key-features-accordion .accordion-button {
  background: transparent;
  border: none;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 0;
  box-shadow: none;
  font-size: var(--fs-16);
  color: var(--color-text);
  display: flex;
  align-items: center;
  width: 100%;
}

.key-features-accordion .accordion-button:not(.collapsed) {
  color: var(--color-half-heading);
}

.key-features-accordion .accordion-button:not(.collapsed) .accordion-title{
  color: #E16F13;
}

.key-features-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-bottom-color: #E16F13;
}

.key-features-accordion .accordion-button::after {
  display: none;
}
/* Open state: icon orange (inline svg only) */
.key-features-accordion .accordion-button:not(.collapsed) .accordion-icon path {
  fill: #E16F13 !important;
  /*stroke: #E16F13 !important;*/
}
.key-features-accordion .accordion-button:not(.collapsed) .accordion-icon-stroke path {
  stroke: #E16F13 !important;
}


/* Default: plus */
.key-features-accordion .accordion-button {
  position: relative; /* IMPORTANT */
}

/* plus icon */
.key-features-accordion .accordion-button::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* PLUS SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 6.6665V25.3332' stroke='%23141823' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66675 16H25.3334' stroke='%23141823' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* minus icon on open */
.key-features-accordion .accordion-button:not(.collapsed)::before {
  width: 22px;
  height: 22px;
  /* MINUS SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='3' viewBox='0 0 22 3' fill='none'%3E%3Cpath d='M1.33337 1.3335H20' stroke='%23E16F13' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.accordion-icon-wrapper {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.accordion-icon {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  object-fit: contain;
}

.accordion-button:not(.collapsed) .accordion-icon svg path {
  fill:#E16F13;
}

.accordion-title {
  font-size: var(--fs-h4);
  font-weight: var(--fg-500);
  color: var(--color-text);
  line-height: 1.5;
}

.key-features-accordion .accordion-collapse {
  border: none;
}

.key-features-accordion .accordion-body {
  padding: 0 48px var(--spacing-lg) 48px;
  color:#594E46;
}


.key-features-description {
  padding-top: var(--spacing-xl);
}

.key-features-text {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.key-features-link {
  font-size: var(--fs-16);
  color: var(--color-half-heading);
  text-decoration: none;
  gap:12px;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

.key-features-link:hover {
  color: var(--color-half-heading);
  text-decoration: underline;
}

.key-features-link svg {
  display: inline-block;
  vertical-align: middle;
}

.key-features-illustration-section {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.key-features-illustration-wrapper {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

.key-features-illustration-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ========== BACKUP DATA SECTION ========== */
.backup-section {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.backup-section .container {
  z-index: 1;
}


.backup-section h2 span {
  color: var(--color-orange);
}

.data-bottom-content {
  background: var(--gradient-data-content);
  border: 1px solid #2D3752;
  padding: var(--spacing-3xl);
  border-radius: var(--radius-6xl);
}

.data-bottom-swiper .swiper-slide {
  height: auto;
}

.data-bottom-swiper .hover-card {
  min-height: 100%;
}

.hover-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-6px);
  border-color: #f06449;
}

/* ========== FOOTER ========== */
footer .form-control::placeholder {
  color: var(--color-white-50);
}

footer .form-control:focus {
  box-shadow: none;
  border-color: #f06449;
}

.footer-links li {
  margin-bottom: var(--spacing-md);
}
.footer-links li a{
  display: inline-block;
  transition: transform 0.25s ease, color 0.25s ease;
}
.footer-links li a:hover {
  transform: translateX(4px); 
  color:var(--font-color-light-blue) !important; 
}

.form-control {
  width: 55% !important;
  padding:13px 14px;
}
.footer-form .btn{
  width: unset !important;
  padding: 12px 21px;
  background:transparent;
  border:1px solid #FDE0C7;
  color :#FDE0C7;
}

/* ========== WHO IT'S FOR SECTION ========== */
.who-card {
  background-color: var(--color-light-orange);
  border-radius: var(--radius-4xl);
  border: 1px solid var(--color-lighter-orange);
  padding:40px 16px;
}

.who-card:hover svg,.data-card:hover svg,
.support-card:hover svg{
    rotate: 45deg;
    transition: 0.3s all ease-in-out;
}

.who-icon {
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  border-radius: var(--radius-3xl);
  background-color: var(--color-lightest-orange);
  color: var(--color-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mw-980{
  max-width: 980px;   
}
.mw-880{
    max-width: 880px;
}
.mw-370 {
  max-width: 370px;
}

.mh-330 {
  max-height: 330px;
}

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

.pt-80 {
  padding-top: var(--spacing-7xl);
}

.primary-font-color {
  color: var(--color-bg);
}

.plain-black-image-section {
  background-image: url('../images/Section-white-star.png');
  /*background-size: cover;*/
  background-position: center;
}

.font-color-blue {
  color: var(--font-color-blue);
}

/* ========== PRICING SECTION ========== */
.row.g-5 {
  --bs-gutter-x: var(--spacing-4xl);
  --bs-gutter-y: var(--spacing-4xl);
}

.hosting-toggle-wrapper {
  z-index: 10;
}

.hosting-toggle {
  background: #fff0;
  border: 1px solid var(--color-cream) !important;
  border-radius: var(--radius-2xl) !important;
  overflow: hidden;
  padding: 4px;
}

.light-blue-color {
  color: var(--font-color-light-blue) !important;
}

.hosting-toggle-btn {
  background: #fff0;
  border: none;
  color: var(--color-white);
  font-size: var(--fs-14);
  text-transform: uppercase;
  padding: var(--spacing-md) 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.hosting-toggle-btn svg {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  flex-shrink: 0;
}

.hosting-toggle-btn.active {
  background: var(--color-orange);
  color: var(--color-cream);
  border: none;
  border-radius: var(--radius-lg);
}

.hosting-toggle-btn:not(.active) {
  background: #fff0;
  color: var(--color-cream);
}

.hosting-toggle-btn:not(.active):hover {
  color: var(--color-cream);
}

.pricing-card {
  background: var(--gradient-card-dark);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-4xl);
  padding: var(--spacing-2xl) var(--spacing-xl);
  color: var(--color-white);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Hover effect */
.pricing-card:hover {
  border: 1px solid var(--color-orange);
  box-shadow: 0 0 20px rgba(222, 60, 13, 0.3);
}


/* .pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-dark);
} */

.pricing-card-icon {
  width: 112px;
  height:112px;
}

.pricing-card-divider {
  border: none;
  border-top: 1px solid var(--color-white-20);
  margin: var(--spacing-xl) 0;
  opacity: 1;
}

.pricing-card-head {
  display: flex;
  flex-direction: column;
  min-height: 150px;
}

.pricing-card-title {
  font-size: var(--fs-h4);
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-cream);
  text-align: left;
  margin-bottom: var(--spacing-lg);
}

.pricing-card-price {
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0%;
  color: var(--color-cream);
  text-align: left;
}

.pricing-card-desc,
.pricing-card-details p,
.pricing-features-title,
.pricing-features-list li {
  font-size: var(--fs-16);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0%;
  text-align: left;
}

.pricing-card-details {
  padding: var(--spacing-lg) 0;
}

.pricing-card-details p {
  margin: 0;
}

.pricing-card-details p:last-child {
  font-style: italic;
}

.pricing-features {
  margin-top: var(--spacing-lg);
  text-align: left;
}

.pricing-features-title {
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
}

.pricing-features-list {
  margin: 0;
  padding: 0;
}

.pricing-features-list li {
  display: flex;
  align-items: flex-start;
}

.feature-icon {
  color: var(--color-orange);
  font-size: var(--fs-12);
  margin-right: var(--spacing-lg);
  flex-shrink: 0;
  margin-top: var(--spacing-xs);
}

.feature-text {
  flex: 1;
  font-style: italic;
}

.pricing-card-cta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pricing-card-btn {
  background: #141823;
  border: 1px solid var(--color-cream);
  border-radius: var(--btn-radius);
  color: var(--color-cream);
  font-size: var(--fs-14);
  font-style: normal;
  line-height: var(--spacing-lg);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  padding: var(--spacing-lg) var(--spacing-xl);
  transition: all 0.3s ease;
  cursor: pointer;
  width: 100%;
}

.pricing-card-btn:hover {
  background: var(--color-orange);
  border: none;
  color: var(--color-white);
  transition: all 0.3s ease;
}

.pricing-card-note {
  font-size: var(--fs-14);
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0%;
  text-align: center;
  color: var(--color-white-80);
}

.pricing-calculator-btn {
  background: var(--color-orange);
  border: none;
  border-radius: var(--btn-radius);
  color: var(--color-white);
  font-size: var(--fs-14);
  text-transform: uppercase;
  padding: var(--spacing-lg) var(--spacing-2xl);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: var(--spacing-lg);
}

.pricing-calculator-btn svg {
  width: var(--fs-body);
  height: var(--fs-body);
  flex-shrink: 0;
}

/* Pricing Slider Navigation (Mobile Only) */
.pricing-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4xl);
  margin-top: var(--spacing-3xl);
      padding: 0 45px;
}

.pricing-slider-nav-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.pricing-slider-nav-btn:hover {
  opacity: 0.8;
}

.pricing-slider-nav-btn:active {
  opacity: 0.6;
}

.pricing-slider-nav-btn img {
  width: 26px;
  height: 26px;
  display: block;
}

.pricing-slider-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.pricing-slider-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--color-white);
  opacity: 0.4;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0;
}

.pricing-slider-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 6px;
  height: 6px;
  background: var(--color-white);
}

/* Pricing Cards Swiper Styles */
.pricing-cards-swiper {
  padding-bottom: var(--spacing-md);
}

.pricing-cards-swiper .swiper-slide {
  height: auto;
}

/* ========== BRANDS SECTION ========== */
.brands-section {
  padding: 120px 0;
}

.brands-row .brand-logo,
.brands-swiper .brand-logo {
  height: 28px;
  opacity: 0.9;
  filter: brightness(0) invert(1) opacity(0.9);
}

.brands-row .brand-logo.logo-faded {
  opacity: 0.45;
  filter: brightness(0) invert(1) opacity(0.45);
}

.brands-row .brand-logo:hover {
  opacity: 1;
  filter: brightness(0) invert(1) opacity(1);
}

.brands-swiper-mask {
  position: relative;
}

.brands-swiper-mask::before,
.brands-swiper-mask::after {
  content: '';
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.brands-swiper-mask::before {
  left: 0;
  background: var(--gradient-fade-left);
}

.brands-swiper-mask::after {
  right: 0;
  background: var(--gradient-fade-right);
}

.brands-swiper .swiper-wrapper {
  align-items: center;
}

.brands-swiper .swiper-slide {
  width: auto;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

/* ========== TESTIMONIALS SECTION ========== */


.testimonial-card {
  background: var(--gradient-card-full);
  border: 1px solid var(--color-white-18);
  border-radius: var(--radius-4xl);
  overflow: visible;
  padding: var(--spacing-7xl) !important;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.testimonial-card {
  position: relative;
}

/* Fixed overlay layers – same height on every slide so design stays stable */
.testimonial-card::after,
.testimonial-card::before {
  content: "";
  position: absolute;
  left: var(--spacing-xl);
  right: var(--spacing-xl);
  bottom: -6px;
  filter: blur(1px);
  pointer-events: none;
}

.testimonial-card::before {
  bottom: -12px;
  left: 36px;
  right: 36px;
  opacity: 0;
}

.testimonial-stars span {
  color: var(--color-gold);
  font-size: var(--fs-18);
  margin-right: var(--spacing-sm);
}

.testimonial-quote {
  color: var(--color-white);
  font-size: var(--fs-18) !important;
  line-height: 1.7;
}

.testimonial-underline {
  width: var(--spacing-2xl);
  height: 2px;
  background: var(--color-accent-blue);
  border-radius: 3px;
}

.tnav-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--color-dark-blue-alt);
  color: var(--color-gold);
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tnav-btn:hover {
  background: var(--color-dark-blue-hover);
  color: var(--color-white);
  border-color: var(--color-white);
}

.testimonials-heading {
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: 0;
}

.testimonials-cream {
  color: var(--color-cream) !important;
}

.testimonial-brand-light {
  color: var(--color-cream-alt) !important;
}

/* Testimonials slider – production (matches testimonial-section-review.html). Vanilla JS, no Swiper. */
.testimonials-section .row {
  overflow: visible;
}
.testimonials-section .col-12.col-lg-10:last-child {
  overflow: visible;
}

.testimonials-section .testimonials-slider {
  position: relative;
  overflow: visible;
  width: 100%;
}
.testimonials-section .testimonials-track {
  position: relative;
  overflow: visible;
  width: 100%;
}
.testimonials-section .testimonials-slide .testimonial-card {
  width: 100%;
  box-sizing: border-box;
}
.testimonials-section .testimonials-nav {
  margin-top: 2rem;
}

/* Desktop: stacked cards, equal height set by JS – same bottom stack on every slide */
@media (min-width: 768px) {
  .testimonials-section .row {
    overflow: visible;
  }
  .testimonials-section .col-12.col-lg-10:last-child {
    overflow: visible;
  }
  .testimonials-section .testimonials-slider {
    overflow: visible;
    min-height: 400px; /* fixed so layout never changes; JS sets from tallest slide */
  }
  .testimonials-section .testimonials-track {
    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
    min-height: 400px;
  }
  .testimonials-section .testimonials-slide {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    max-width: 1074px;
    box-sizing: border-box;
    transform: translateX(-50%);
    transform-origin: center bottom; /* teen card ka bottom same – overlay consistent */
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms ease;
    opacity: 0;
    pointer-events: none;
  }
  .testimonials-section .testimonials-slide .testimonial-card {
    min-height: 280px;
    height: 100%;
  }
  .testimonials-section .testimonials-slide.is-active {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
  }
  .testimonials-section .testimonials-slide.is-next {
    transform: translateX(-50%) translateY(18px) scale(0.96);
    opacity: 0.85;
    z-index: 2;
  }
  .testimonials-section .testimonials-slide.is-behind {
    transform: translateX(-50%) translateY(36px) scale(0.92);
    opacity: 0.6;
    z-index: 1;
  }
  .testimonials-section .testimonials-slide.is-hidden {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
  }
}

/* Desktop: Swiper-based testimonial (business / internal-it-teams) – same stack, same bottom */
@media (min-width: 768px) {
  .testimonial-swiper .swiper-wrapper {
    position: relative;
    display: block;
    overflow: visible;
    min-height: 400px;
    transform: none !important;
    width: 100% !important;
  }
  .testimonial-swiper .swiper-slide {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    max-width: 920px;
    box-sizing: border-box;
    transform: translateX(-50%);
    transform-origin: center bottom;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms ease;
    opacity: 0;
    pointer-events: none;
  }
  .testimonial-swiper .swiper-slide .testimonial-card {
    min-height: 280px;
    height: 100%;
  }
  .testimonial-swiper .swiper-slide.swiper-slide-active {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
  }
  .testimonial-swiper .swiper-slide.swiper-slide-next {
    transform: translateX(-50%) translateY(18px) scale(0.96);
    opacity: 0.85;
    z-index: 2;
  }
  .testimonial-swiper .swiper-slide.swiper-slide-prev {
    transform: translateX(-50%) translateY(36px) scale(0.92);
    opacity: 0.6;
    z-index: 1;
  }
  .testimonial-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
  }
}

/* Mobile: Swiper testimonial – normal horizontal carousel */
@media (max-width: 767.98px) {
  .testimonial-swiper .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    min-height: 0;
  }
  .testimonial-swiper .swiper-slide {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
    z-index: auto;
    visibility: visible;
  }
}

/* Mobile: horizontal carousel */
@media (max-width: 767.98px) {
  .testimonials-section .row {
    overflow: hidden;
  }
  .testimonials-section .col-12.col-lg-10:last-child {
    overflow: hidden;
  }
  .testimonials-section .testimonials-slider {
    overflow: hidden;
    width: 100%;
    padding-bottom: 24px;
  }
  .testimonials-section .testimonials-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 0;
    will-change: transform;
  }
  .testimonials-section .testimonials-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    flex-shrink: 0;
  }
  .testimonials-section .testimonials-slide .testimonial-card {
    min-height: 280px;
  }
  .testimonials-section .testimonials-slide.is-active,
  .testimonials-section .testimonials-slide.is-next,
  .testimonials-section .testimonials-slide.is-behind,
  .testimonials-section .testimonials-slide.is-hidden {
    transform: none;
    opacity: 1;
    z-index: auto;
    visibility: visible;
  }
}

/* ========== AWARDS SECTION ========== */
.awards-heading {
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0;
}

.awards-cream {
  color: var(--color-cream) !important;
}

.awards-section .row {
  gap:32px !important;
}

.awards-section .row .col-lg {
  max-width: 200px;
  flex: 0 0 auto;
  padding:0 !important;
}

.award-box {
  background: var(--gradient-card-full);
  border: none !important;
  border-radius: var(--radius-6xl);
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/
  position: relative;
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-card-inset);
  overflow: visible;
}

.award-img {
  /*max-height: 100px;*/
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.glow-ellipse {
   position: absolute;
  bottom:0;
  left:40%; /* move ellipse position */
  width: 40px;
  height: 15px;
  border-radius: 100px;
  background: radial-gradient(
    ellipse at center,
    #6181F65E 37%,
    transparent 100%
  );

  filter: blur(12px);
  pointer-events: none;
}
.gradient-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #1E2336,
    #3A4D93,
    #BDC8FF,
    #3A4D93,
    #1E2336,
    transparent
  );
  opacity: 0.9;
}


/* ========== SUPPORT SECTION ========== */
.support-eyebrow {
  letter-spacing: .4em;
  color: var(--color-light-blue);
  font-size: var(--fs-12);
  font-weight: var(--fg-600);
  text-transform: uppercase;
}

.support-heading {
  font-family: var(--font-heading);
  font-weight: var(--fg-700);
  font-size: var(--fs-h2);
  line-height: 1.3;
}

.support-card {
  background: var(--color-dark-gray-blue);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-4xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mail-text{
    transition:0.3s all;
    color: var(--color-cream);
}
.mail-text:hover{
    color: var(--color-orange-hover);
    transition:0.3s all;
}

.support-divider {
  border: none;
  border-top: 1px solid var(--color-white-10);
  margin: 0;
  width: 100%;
}

.support-card-media {
  background: var(--color-very-dark);
  border-radius: var(--radius-2xl);
  height: 160px;
  width: 100%;
}

.support-card-title {
  /* font-family: var(--font-body); */
  font-weight: var(--fg-500);
  line-height: 1.3;
  letter-spacing: -.18px;
  color: var(--color-white);
}

.support-card-title.fs-32 {
  font-size: var(--fs-h3);
}

.support-card-title.fs-24 {
  font-size: var(--fs-h4);
}

.support-card-sub {
  color: var(--color-white-80);
  font-size: var(--fs-16);
  font-weight:var(--fg-500);
  line-height: 140%;
}

.support-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--color-cream);
  font-size: var(--fs-14);
  text-transform: uppercase;
  text-decoration: none;
}

.support-link:hover {
  color: var(--color-cream);
  text-decoration: none;
}

/*.support-icon {*/
/*  width: var(--spacing-4xl);*/
/*  height: var(--spacing-4xl);*/
/*  border-radius: var(--radius-xl);*/
/*  background: var(--color-very-dark);*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/

/*.support-icon img {*/
/*  width: var(--spacing-xl);*/
/*  height: var(--spacing-xl);*/
/*}*/

.support-card-contact .support-icon {
  margin-top: var(--spacing-7xl);
}

/* ========== CTA LAUNCH SECTION ========== */

.footer-launch-section {
  position: relative;
  z-index:2;
  overflow: hidden;
	min-height:850px;
/*   min-height:100vh; */
  background-color: #141823; /* fallback so body cream never shows */
}

/* Background image (z-index: 0) */
.footer-launch-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Rive animation (z-index: 1) */
.footer-rive-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height:100%;
  aspect-ratio: 1800 / 590;
  pointer-events: none;
  z-index: 1;
}

.footer-rive-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* CTA content (z-index: 2) */
.footer-launch-container {
  position: relative;
  z-index: 2;
  left:15%;
  bottom:-75px;
}

.footer-launch-content {
  position: relative;
  z-index: 2;
}

/* Icons */
.footer-launch-section img.icon.icon-vector {
  width: 40px;
}



/* Healthcare page css  */
.free-trial-banner-card-healthcare{
    padding: 200px 48px 64px 48px;
    border-radius: 24px;
    border:1px solid #242B3D;
    background-repeat:no-repeat;
}
.h-support-card{
 background: radial-gradient(circle at top, #2B3660, #181C2D 100%);
 border-radius: 24px;
}

a.anchor{
    color:var(--color-orange-hover) !important;
}
a.anchor:hover{
    color:var(--color-orange-hover) !important;
}

/* ========== Interactive Demo ========== */
.interactive-demo-wrapper {
  width: 100%;
  overflow: hidden;
}
.interactive-demo-iframe {
  width: 100%;
  height: 800px;
  border: 0;
  display: block;
}

/* ========== JOURNEY FROM TRIAL SECTION ========== */

.timeline-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 80px;
  overflow: hidden;
  z-index:2;
}
.timeline-header {
  z-index: 10;
}

.timeline-header-line1 {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  color: #FDE0C7;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.timeline-header-line2 {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-orange);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}

.timeline-container {
  position: relative;
  width: 100%;
  height: 500px;
  margin: 0 auto 60px;
  z-index: 5;
  cursor: none;
  overflow: hidden;
}

.timeline-svg-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.timeline-arc-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.timeline-arc-path {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
}

.timeline-milestones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.timeline-milestone {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  cursor: none;
  z-index: 20;
  background: none;
  border: none;
  padding: 0;
}

.timeline-milestone.active {
  z-index: 25;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  display: block;
  position: relative;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-dot circle {
  transition: fill 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              r 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  fill: #D0D1D3;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
  r: 6;
}

.timeline-milestone.active .timeline-dot {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) 
          drop-shadow(0 0 16px rgba(255, 255, 255, 0.3));
  animation: pulse-glow 2s ease-in-out infinite;
}

.timeline-milestone.active .timeline-dot circle {
  fill: #D0D1D3;
  stroke: #D0D1D3;
  r: 10;
}

@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) 
            drop-shadow(0 0 16px rgba(255, 255, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 24px rgba(255, 255, 255, 0.5));
  }
}

/* Milestone Label */
.timeline-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #5B5D65;
  text-transform:uppercase;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); */
}

.timeline-milestone.active .timeline-label {
  font-weight: 700;
  font-size: 22px;
  color: #FFFFFF;
  /* text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
               0 0 10px rgba(255, 255, 255, 0.3); */
}

/* Milestone Description (shown when active) */
.timeline-description {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 24px;
  text-align: center;
  min-width: 300px;
  max-width: 450px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.timeline-milestone.active .timeline-description {
  opacity: 1;
  visibility: visible;
}

.timeline-description-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #D0D1D3;
  margin: 0;
  line-height: 21.6px;
}

/* ========== CUSTOM CURSOR ========== */
.timeline-section *,
.timeline-milestone {
  cursor: none;
}

.custom-cursor-timeline {
  position: fixed;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out;
  mix-blend-mode: difference;
}

.custom-cursor-timeline.visible {
  opacity: 1;
  visibility: visible;
}

.custom-cursor-timeline svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.custom-cursor-timeline.cursor-arrow {
  width: 24px;
  height: 24px;
}

.custom-cursor-timeline.cursor-arrow.visible svg path {
  stroke: white;
  transition: stroke 0.2s ease-out;
}

.custom-cursor-timeline.cursor-arrow.hover-accent svg path {
  stroke: var(--color-orange);
  filter: drop-shadow(0 0 4px rgba(222, 60, 13, 0.6));
}


/* Blog Page css */
/* Blog Header Section */
    .blog-header-section {
      padding: 40px 0 56px;
    }

    /* Featured Blog Card */
    .blog-featured-card {
      padding: 40px;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }

    .blog-featured-content {
      position: relative;
      z-index: 2;
    }

    .blog-featured-title {
      font-size: var(--fs-h3);
      line-height: 1.3;
    }

    .blog-featured-meta {
      font-size: var(--fs-12);
      letter-spacing: 4.8px;
    }

    .blog-featured-author {
      text-decoration: underline;
      color: var(--color-white);
    }

    .blog-featured-description {
      font-size: var(--fs-16);
      line-height: 1.4;
    }

    .blog-featured-image {
      width: 100%;
      height: auto;
      max-height:468px;
      object-fit: cover;
      border-radius: var(--radius-6xl);
    }

    /* Category Badge */
    .blog-category-badge {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: var(--fs-14);
      text-transform: uppercase;
      letter-spacing: 0;
      font-family: var(--font-body);
    }

    .blog-category-badge-orange {
      background-color: #A72D0A;
    }

    .blog-category-badge-gray {
      background-color: var(--color-gray-blue);
      color: var(--color-white);
    }

    /* Browse by Topic Section */
    .blog-topics-list,
    .integration-filters{
      overflow-x: auto;
      padding-bottom: 56px;
      margin-left:-10px;
      margin-right:-10px;
      -webkit-overflow-scrolling: touch;
    }

    .blog-topics-list::-webkit-scrollbar {
      height: 4px;
    }

    .blog-topics-list::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }

    .blog-topics-list::-webkit-scrollbar-thumb {
      background: var(--color-orange);
      border-radius: 2px;
    }

    .blog-topic-pill {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: var(--fs-14);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
      font-family: var(--font-body);
      border: none;
      background: transparent;
      opacity:0.6 !important;
    }
    
    .tutorials-topic-pill-active,
    .blog-topic-pill-active {
       background-color: var(--color-gray-blue);
      color: var(--color-white);
    }

    .blog-topic-pill-inactive {
      background-color: var(--color-gray-blue);
      color: var(--color-white);
      opacity:0.6 !important;
    }
    
    .blog-topic-pill-active,
    .blog-topic-pill:hover,
    .tutorials-topic-pill-active,
    .tutorials-topic-pill:hover{
        opacity:1 !important;
      border:1px solid #fff;
    }
    
    /* 3 Tag Colors */
    .tag-color-1 { background: #B2300A !important; }
    .tag-color-2 { background: #C86211 !important; }
    .tag-color-3 { background: #5B5D65 !important; }


    /* Blog Cards Grid */
    .blog-card-link-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      text-decoration: none;
    }
    
    .blog-card-image-wrapper .blog-video-trigger,
    .blog-card-image-wrapper .video-overlay {
      pointer-events: auto;
    }
    .blog-card {
         position: relative;
        padding: 24px;
      border-radius: var(--radius-6xl);
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
      cursor: pointer;
    }

    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    
    /* Events & Webinars — clear filters (red, matches brand warmth) */
    .events-filter-clear-btn {
      display: inline-block;
      font-size: var(--fs-12);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0;
      cursor: pointer;
      transition: opacity 0.3s ease;
      white-space: nowrap;
      font-family: var(--font-body);
      background-color: transparent;
      border:none;
      color: #DE3C0D;
      padding:0;
      margin-top:20px;
    }
    
    .events-filter-clear-btn.events-filter-clear-with-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
    }
    .events-filter-clear__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 1.05em;
      height: 1.05em;
      display:none !important;
    }
    .events-filter-clear__icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .events-filter-clear__label {
      line-height: 1.2;
    }

    .blog-card-image-wrapper {
      width: 100%;
      border-radius: var(--radius-4xl);
      height: 200px;
      overflow: hidden;
      position: relative;
      pointer-events: none;
    }

    .blog-card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .blog-card:hover .blog-card-image {
      transform: scale(1.05);
    }

    .blog-card-title {
      font-size: var(--fs-18);
      line-height: 1.4;
      margin-bottom: 12px;
    }

    .blog-card-date {
      font-size: var(--fs-14);
    }

    .blog-card-description {
      font-size: var(--fs-16);
      line-height: 1.4;
    }

    .blog-card-read-time {
      font-size: var(--fs-14);
    }

    /* Pagination */
    .blog-pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-top: 60px;
    }

    .blog-pagination-link {
      font-size: var(--fs-14);
      color: var(--color-gray-blue);
      text-decoration: none;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      transition: all 0.3s ease;
      font-family: var(--font-body);
      font-weight: 500;
    }

    .blog-pagination-link:hover {
      color: var(--color-white);
      background-color: rgba(255, 255, 255, 0.1);
    }

    .blog-pagination-number {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      font-size: var(--fs-14);
      font-weight: 600;
      color: #FFFFFF80;
      background-color: transparent;
      text-decoration: none;
      transition: all 0.3s ease;
      font-family: var(--font-body);
    }

    .blog-pagination-number:hover {
      background-color: var(--color-orange);
      color: var(--color-white);
    }

    .blog-pagination-number.active {
      background-color: #29345B;
      color: #FDE0C7;
    }
    .blog-pagination-ellipsis {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-14);
      color: #FFFFFF80;
      font-family: var(--font-body);
    }

    /* Newsletter Subscription Section */
    .blog-newsletter-card {
      padding: 40px;
      max-width: 960px;
      margin: 0 auto;
    }

    .blog-newsletter-form {
      display: flex;
      align-items: center;
      gap: 25px;
    }
    .blog-newsletter-description{
        font-size: var(--fs-18);
        padding-bottom: 40px;
    }

    .blog-newsletter-label {
      font-size: var(--fs-18);
    }

    .blog-newsletter-input-wrapper {
      flex: 1;
      min-width: 250px;
    }

    .blog-newsletter-input {
      width: 100%;
      padding: 9px 24px;
      background-color: transparent;
      border: 1px solid #40508D;
      border-radius: var(--radius-md);
      color: #97A6CF;
      font-size: var(--fs-14);
      font-family: var(--font-body);
      transition: all 0.3s ease;
    }

    .blog-newsletter-input::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }

    .blog-newsletter-input:focus {
      outline: none;
      border-color: var(--color-orange);
      background-color: var(--color-dark-blue-alt);
    }

    .blog-newsletter-button {
      padding: 16px 32px;
      background-color: var(--color-orange);
      color: var(--color-white);
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--fs-14);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: var(--font-body);
      white-space: nowrap;
    }

    .blog-newsletter-button:hover {
      background-color: var(--color-orange-hover);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(222, 60, 13, 0.4);
    }

    .blog-newsletter-disclaimer {
      font-size: var(--fs-14);
      color: #6D7A9E;
      text-align: center;
      font-family: var(--font-body);
    }
    
/* ========== BLOG SINGLE PAGE CSS ========== */
    
    /* Blog Single Page - Light Background */
    .page-blog-details .site-header {
        background-color: #FEF5EE;
    }
    .page-blog-details .nav-link{
        color :#43464F !important;
    }
    .page-blog-details .site-header .btn-outline-light{
        color:#141823;
        border:1px solid #DE3C0D;
    }
    /* Default state */
    .logo-black {
      display: none;
    }
    
    /* Blog details page */
    .page-blog-details .logo-default {
      display: none;
    }
    
    .page-blog-details .logo-black {
      display: block;
    }

    .blog-single-section {
      background-color: #FEF5EE;
      padding: 40px 0 80px;
    }

    .blog-single-header {
      margin-bottom: 40px;
    }

    .blog-single-container{
      max-width: 960px;
    }

    .blog-single-author {
      text-decoration: underline;
      color: var(--color-text);
    }

    .blog-single-featured-image {
      width: 100%;
      height: auto;
      border-radius: var(--radius-6xl);
    }
    .blog-single-content{
		overflow-x:hidden;
     } 
	.blog-single-content img{
		max-height:500px;
	}
    .blog-single-content p {
      font-size: var(--fs-16);
      line-height: 1.4;
      color: #000000CC;
      margin-bottom: 24px;
      font-family: var(--font-body);
    }

    /* Categories and Tags */
    .blog-single-meta-label{
      font-size: var(--fs-16);
    }

    .blog-single-meta-link {
      font-size: var(--fs-16);
      font-style: italic;
      color: var(--color-orange);
      text-decoration: underline;
      font-family: var(--font-body);
      transition: color 0.3s ease;
    }

    /* Author Bio Card */
    .blog-author-card {
      margin-top: 62px;
      background-color: var(--color-light-orange);
      border-radius: var(--radius-4xl);
      padding: 24px 40px;
    }

    .blog-author-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .blog-author-content {
      flex: 1;
    }

    .blog-author-bio {
      font-size: var(--fs-16);
      line-height: 1.6;
    }
    
    .blog-card {
      padding: 24px;
      border-radius: var(--radius-6xl);
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
      cursor: pointer;
    }

    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .blog-card-image-wrapper {
      width: 100%;
      border-radius: var(--radius-4xl);
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .blog-card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .blog-card:hover .blog-card-image {
      transform: scale(1.05);
    }

    .blog-card-title {
      font-size: var(--fs-18);
      line-height: 1.4;
      margin-bottom: 12px;
    }

    .blog-card-date {
      font-size: var(--fs-14);
    }

    .blog-card-description {
      font-size: var(--fs-16);
      line-height: 1.4;
    }

    .blog-card-read-time {
      font-size: var(--fs-14);
    }
    
     /* ========== TUTORIALS PAGE CSS ========== */
    
    /* Tutorials Header Section */
    .tutorials-header-section {
      padding: 120px 0 56px;
    }

    /* Featured Video Section */
    .tutorials-featured-card {
      padding: 40px;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }

    .tutorials-featured-content {
      position: relative;
      z-index: 2;
    }

    .tutorials-featured-title {
      font-size: var(--fs-h3);
      line-height: 1.3;
      margin-bottom: 16px;
    }

    .tutorials-featured-duration {
      font-size: var(--fs-14);
      color: var(--color-white);
      margin-bottom: 24px;
      background-color: #383F5B;
      border-radius: 999px;
      padding: 8px 16px;
    }

    .tutorials-featured-video-wrapper {
      width: 100%;
      border-radius: var(--radius-6xl);
      overflow: hidden;
      position: relative;   
    }

    .tutorials-featured-video {
      width: 100%;
      height: auto;
      display: block;
    }

    .tutorials-video-thumbnail {
      width: 100%;
      height: 468px;
      object-fit: cover;
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    .tutorials-video-thumbnail:hover {
      opacity: 0.9;
    }

    .tutorials-play-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    width: 106px;
    height: 76px;
    background: #00000080;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
      z-index: 10;
    }

    .tutorials-play-overlay:hover {
      background: #00000080;
      transform: translate(-50%, -50%) scale(1.1);
    }
    
    /* Category Badge */
    .tutorials-category-badge {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: var(--fs-14);
      text-transform: uppercase;
      letter-spacing: 0;
      font-family: var(--font-body);
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tutorials-category-badge-orange {
      background-color: #A72D0A;
      color: var(--color-white);
    }

    .tutorials-category-badge-gray {
      background-color:#43464F;
      color: var(--color-white);
    }

    /* Browse by Topic Section */
    .tutorials-topics-list {
      overflow-x: auto;
      /*margin-left:-10px;*/
      margin-right:-10px;
      padding-bottom: 56px;
      -webkit-overflow-scrolling: touch;
    }

    .tutorials-topics-list::-webkit-scrollbar {
      height: 4px;
    }

    .tutorials-topics-list::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }

    .tutorials-topics-list::-webkit-scrollbar-thumb {
      background: var(--color-orange);
      border-radius: 2px;
    }

    .tutorials-topic-pill {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: var(--fs-14);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
      font-family: var(--font-body);
    }

    .tutorials-topic-pill-inactive {
      background-color: var(--color-gray-blue);
      color: var(--color-white);
      opacity:0.6 !important;
    }

    /* Video Cards Grid */
    #videos-grid .tutorials-video-item{
        padding:0 16px !important;
    }
    .tutorials-video-card {
      padding: 24px;
      border-radius: var(--radius-6xl);
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
      cursor: pointer;
    }

    .tutorials-video-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .tutorials-video-card-image-wrapper {
      width: 100%;
      border-radius: var(--radius-4xl);
      height: 200px;
      overflow: hidden;
      position: relative;
      margin-bottom: 16px;
    }

    .tutorials-video-card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .tutorials-video-card:hover .tutorials-video-card-image {
      transform: scale(1.05);
    }

    .tutorials-video-card-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: #00000080;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
      z-index: 10;
    }

    .tutorials-video-card-title {
      font-size: var(--fs-18);
      line-height: 1.4;
      margin-bottom: 12px;
    }

    .tutorials-video-card-duration {
      font-size: var(--fs-14);
      color: #FFFFFF80;
    }

    /* Pagination */
    .tutorials-pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      row-gap: 12px;
      margin-top: 56px;
    }
    
    .tutorials-pagination-numbers {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
      row-gap: 8px;
      min-width: 0;
      max-width: 100%;
    }

    .tutorials-pagination-ellipsis {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.25em;
      font-size: var(--fs-14);
      font-weight: 600;
      color: #FFFFFF80;
      font-family: var(--font-body);
      user-select: none;
      pointer-events: none;
    }

    .tutorials-pagination-link {
      font-size: var(--fs-14);
      color: var(--color-gray-blue);
      text-decoration: none;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      transition: all 0.3s ease;
      font-family: var(--font-body);
      font-weight: 500;
    }

    .tutorials-pagination-link:hover {
      color: var(--color-white);
      background-color: rgba(255, 255, 255, 0.1);
    }

    .tutorials-pagination-number {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      font-size: var(--fs-14);
      font-weight: 600;
      color: #FFFFFF80;
      background-color: transparent;
      text-decoration: none;
      transition: all 0.3s ease;
      font-family: var(--font-body);
    }

    .tutorials-pagination-number:hover {
      background-color: var(--color-orange);
      color: var(--color-white);
    }

    .tutorials-pagination-number.active {
      background-color: #29345B;
      color: #FDE0C7;
    }
    .page-template-business .faqs-content{
        height:650px;
    }
    .page-template-business .solutions-key-features-accordion{
        height:550px;
    }

.page-template-events--webinars .blog-card {
    justify-content:space-between;
}
body.page-legal{
    background-color:var(--color-darker-blue) !important;
}

/* ============================= */
/* Shooting Stars Animation */
/* ============================= */

.backup-mydatasection {
  overflow: hidden;
}

.shooting-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.shooting-stars span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.05),
    0 0 10px rgba(255, 255, 255, 0.4);
  animation: shooting-star 5.5s linear infinite;
  opacity: 0;
}

.shooting-stars span::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, #fff, transparent);
}

/* Animation */
@keyframes shooting-star {
  0% {
    transform: rotate(200deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(200deg) translateX(-1000px);
    opacity: 0;
  }
}

/* Individual star positions */
.shooting-stars span:nth-child(1) {
  top: 10%;
  left: 15%;
  animation-delay: 0s;
  animation-duration: 3s;
}

.shooting-stars span:nth-child(2) {
  top: 20%;
  left: 25%;
  animation-delay: 0.4s;
}

.shooting-stars span:nth-child(3) {
  top: 35%;
  left: 33%;
  animation-delay: 0.8s;
  animation-duration: 2.5s;
}

.shooting-stars span:nth-child(4) {
  top: 5%;
  left: auto;
  animation-delay: 2.2s;
}

.shooting-stars span:nth-child(5) {
  top: 50%;
  right: 0%;
  left: auto;
  animation-delay: 2.6s;
  animation-duration: 2.2s;
}

.shooting-stars span:nth-child(6) {
  top: 15%;
  right: 55%;
  left: auto;
  animation-delay: 3s;
}

.shooting-stars span:nth-child(7) {
  top: 65%;
  right: 25%;
  left: auto;
  animation-delay: 3.4s;
  animation-duration: 2.8s;
}

.shooting-stars span:nth-child(8) {
  top: 40%;
  right: 60%;
  left: auto;
  animation-delay: 3.8s;
}
@media (prefers-reduced-motion: reduce) {
  .shooting-stars span {
    animation-duration: 12s !important;
  }
}


.backup-mydatasection .container {
  position: relative;
  z-index: 2;
}



/* -- Rive Animation Css -- */
.hero-rive-framer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1800 / 590;
  pointer-events: none;
  z-index: 0;
}

/* Canvas fully fluid */
.hero-rive-framer > div,
.hero-rive-framer canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Partner Directory CSS */
.partners-filter-area{ padding:40px 32px; background:radial-gradient(100% 65% at 50% 10%, #2B3660 0%, #181C2D 100%);}
.partner-directory-card{color:#A1A3A7 !important;}
/* Filter title + border-bottom */
.partner-directory-listing .partner-directory-filter-inner .partner-directory-filter-title { color: #fff; font-size: 32px; font-weight: 500; font-family: var(--font-body); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid #43464F; }
/* Select wrap + icon inside field */
.partner-directory-listing .partner-directory-select-wrap { position: relative; display: block; }
.partner-directory-listing .partner-directory-select-wrap .partner-directory-filter-input { background: transparent !important; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.25); padding-right: 2.25rem; appearance: none; -webkit-appearance: none; background-image: none !important; }
.partner-directory-listing .partner-directory-select-wrap .partner-directory-filter-input option { background: #1E2336; color: rgba(255,255,255,0.8); }
.partner-directory-listing .partner-directory-select-wrap .partner-directory-select-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgba(255,255,255,0.8); display: flex; flex-direction: column; align-items: center; line-height: 0; }
.partner-directory-listing .partner-directory-select-wrap .partner-directory-select-icon svg { display: block; }
.partner-directory-listing .partner-directory-select-wrap .partner-directory-select-icon svg:last-child { margin-top: -1px; }
.partner-directory-listing .partner-directory-filter-inner .form-select.partner-directory-filter-input option { background: #1E2336; color: rgba(255,255,255,0.8); }
/* Partner cards */
.partner-directory-listing .partner-directory-card { background-color: #141823; border: 1px solid #303753; border-radius: 8px; }
/* Mobile: bottom sheet – opens from bottom to top, small panel, rounded top corners */
#partners-filter-offcanvas.offcanvas-bottom { height: auto; min-height: 320px; max-height: 70vh; border-radius: 8px 8px 0 0; background: #1E2336 !important; }
#partners-filter-offcanvas .offcanvas-header { border-color: rgba(255,255,255,0.15); }
#partners-filter-offcanvas .partner-directory-filter-title { color: #fff; font-size: 32px; font-weight: 600; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.2); }
#partners-filter-offcanvas .partner-directory-select-wrap .partner-directory-filter-input { padding-right: 2.25rem; appearance: none; -webkit-appearance: none; background-image: none !important; }
#partners-filter-offcanvas .partner-directory-select-wrap .partner-directory-select-icon { color: rgba(255,255,255,0.8); }
#partners-filter-offcanvas .form-select.partner-directory-filter-input { background: transparent !important; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.25); }
#partners-filter-offcanvas .form-select.partner-directory-filter-input option { background: #1E2336; color: rgba(255,255,255,0.8); }

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1320px) {
     .nav-button{
     display:none !important;  
   }
}
@media (max-width: 1200px) {
  .timeline-container {
    height: 450px;
  }
  
  .timeline-header-line2 {
    font-size: 42px;
  }
  .mega-menu-panel{
      max-width:100% !important;
  }
 
}


/* ========== RESPONSIVE BREAKPOINTS ========== */
/* Following Bootstrap breakpoint system: sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px) */
/* Organized mobile-first: smallest to largest */

/* ========== TABLET AND BELOW (max-width: 991.98px) ========== */
@media (max-width: 991.98px) {
  .h1{
    font-size: 40px !important;
  }
  .h2{
    font-size: 28px !important;
  }
  /* Hero Section */
  .hero-rive-framer {
    display: none !important;
  }
  .hero-section-img {
    object-position: left center;
  }
  .key-features-card {
    padding: var(--spacing-lg);
  }

  .hosting-toggle-wrapper {
    position: static !important;
  }

  .hosting-toggle {
    justify-content: space-between;
    border-radius: 12px;
    padding: 4px;
  }
  .hosting-toggle-btn{
    border-radius: 8px !important;
  }

  .pricing-card {
    padding: var(--spacing-xl) var(--fs-body);
  }

  .pricing-card-title {
    font-size: 22px;
  }

  .pricing-card-desc,
  .pricing-card-details p,
  .pricing-features-title,
  .pricing-features-list li {
    font-size: 15px;
  }

  .pricing-card-btn {
    font-size: 13px;
    line-height: 15px;
  }

  .pricing-card-note {
    font-size: 13px;
  }

  .testimonial-card {
    padding: 32px !important;
    box-shadow: var(--shadow-card-inset);
  }

  .awards-section .row .col-md-4 {
    max-width: none;
  }

  .support-card {
    min-height: 300px;
    justify-content: space-between;
  }

  .support-card-media {
    height: 140px;
  }
 .interactive-demo-iframe {
    height: 600px;
  }
  .pricing-card-icon {
      width: 88px;
      height: 88px;
    }
    
  .hero-rive-framer {
    width: 120%;
   }
   .partner-directory-listing .partner-directory-topbar { 
     position: sticky; 
     top: 0; 
     margin: 0 -12px; 
     padding: 0.75rem 12px; 
   }
   .footer-launch-container{
       left:0%;
       bottom:0;
   }
   .footer-launch-section {
        background: #141823;
        padding: 40px 0 40px 0;
        min-height: unset;
    }
   .footer-button-group{
     width:100%;
     flex-direction: column;
   }
   
   .nav-button{
     display:flex !important; 
     align-items: flex-start !important;
   }
   .hero-section {
    min-height: unset !important;
    padding:80px 0;
  }
}

/* ========== MOBILE AND BELOW (max-width: 767.98px) ========== */
@media (max-width: 767.98px) {
    .container{
        padding:0 16px !important;
    }
    .h1{
    font-size: 24px !important;
  }
  .h2{
      font-size: 22px !important;
  }
  .fs-18{
    font-size: 13px !important;
  }
  /* Spacing */
  .section-padding,
  .backup-section {
    padding: 40px 0 !important;
  }
  .no-mobile-padding{
    padding: 0 !important;
  }
  .no-mobile-margin{
    margin:0 !important;
  }
  p,.solutions-text-desc{
    font-size: 13px !important;
  }
  .text-center-mob{
    text-align: center !important;
  }
  .text-left-mob{
    text-align: left !important;
  }
  .size-24{
    font-size: 24px !important;
  }
  .size-20{
    font-size: 20px !important;
  }
  .size-18{
    font-size: 18px !important;
  }
  .size-16{
    font-size: 16px !important;
  }
  .size-13{
      font-size: 13px !important;
  }
  .size-12{
      font-size: 12px !important;
  }
  .size-9{
      font-size: 9px !important;
  }
  .d-none-mob{
    display: none !important;
  }
  .form-control {
    width: 100% !important;
  }
  
   .shooting-stars span:nth-child(n+4) {
    display: none;
  }
  .shooting-stars span {
    animation-duration: 9s !important;
  }

  .backup-section .backup-subtitle {
    padding-bottom: 32px;
  }

  .support-card-contact .support-icon{
    margin-top: 0 !important;
  }

  /* Management Console Section */
  .management-console-section h2.split-heading {
    padding: 0px 0px 16px 0px;
  }

  .management-console-section .backup-subtitle {
    padding: 0;
    font-size: 13px !important;
  }

  .management-console-section .section-header {
    padding-bottom: 16px;
  }

  .management-console-section ul#consoleTabs {
    overflow-y: auto;
    white-space: nowrap;
    flex-flow: nowrap;
    width: 100%;
    justify-content: unset !important;
  }

  /* Buttons */
  .btn-primary-custom {
    margin-top: 32px;
    width: 100%;
  }

  /* Typography */
  .heading-cream {
    color: var(--color-cream) !important;
  }

  .section-heading,
  .brands-heading,
  .awards-heading,
  .testimonials-heading {
    font-size: 22px;
    line-height: 1.2;
  }
  .support-heading{
    font-size: 24px;
  }
  .support-card-title.fs-24, .support-card-title.fs-32{
    font-size: 17px;
  }
  .who-card{
      padding:24px;
  }

  .backup-subtitle,
  .key-features-text,
  .pricing-card-desc,
  .pricing-card-details p,
  .pricing-features-title,
  .pricing-features-list li,
  .support-card-sub,
  .btn-orange,
  .btn-outline-light {
    font-size: 13px;
    line-height: 1.6;
  }
  
  .data-bottom-content{
    border-radius: var(--radius-4xl);
    padding: var(--spacing-xl)
  }
  
  .accordion-icon-stroke{
     height:18px;
     width:18px;
  }
  
  /* Backup Cards */
  .backup-card {
    /*width: 100px;*/
    /*height: 80px;*/
    margin-bottom: 0;
    padding:10px 24px;
    border-radius:8px;
  }

  .backup-card img,
  .backup-card svg {
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  .backup-grid {
    gap: 26px !important;
  }
  .backup-label{
    font-size: 13px;
  }

  /* Hero Section */
  .hero-section {
    text-align: center;
    min-height: unset !important;
    padding:64px 0 72px 0;
  }

  .banner-buttons {
    flex-flow: column;
    gap: 24px !important;
  }
  
  .accordion-icon-wrapper{
      height:18px;
      width:18px;
  }

  /* Pricing Cards */
  .pricing-card {
    padding: var(--fs-body) var(--spacing-lg);
  }

  .pricing-card-title {
    font-size: var(--fs-body);
  }

  .pricing-card-head {
    min-height: 110px;
  }

  .pricing-card-desc,
  .pricing-card-details p,
  .pricing-features-title,
  .pricing-features-list li {
    font-size: var(--fs-14);
  }

  .pricing-card-btn,
  .pricing-card-cta .btn-orange{
    font-size: var(--fs-12) !important;
    line-height: var(--fs-14);
    padding: var(--fs-body) var(--fs-body) !important;
  }

  .pricing-card-note {
    font-size: var(--fs-12);
  }

  .pricing-calculator-btn {
    padding: var(--fs-14) var(--spacing-xl);
    font-size: var(--fs-14);
  }
  
  .hosting-toggle-btn{
      padding:9px 14px;
      font-size:var(--fs-11);
  }

  /* Awards Section */
  .awards-section .row .col-6 {
    max-width: none;
  }
  .brands-swiper-mask::before, .brands-swiper-mask::after{
      display:none;
  }
  .award-box{
      height:100px;
  }

  /* Other */
  .bg-transparent.h-100.p-4.hover-card img {
    width: 100%;
  }
  .key-features-accordion .accordion-button:before,
  .key-features-accordion .accordion-button:not(.collapsed)::before{
      width:20px;
      height:20px;
  }

  .brands-section {
    padding: 40px 0;
  }
  
  .footer-launch-section{
      background:#141823;
      padding:40px 0 40px 0;
      min-height:unset;
  }
  .footer-launch-container{
      left:0;
      bottom:0;
  }
  .footer-launch-content h2 {
   font-size: 21px !important;
  }
  .footer-button-group{
    flex-direction: row;
  }

  .footer-launch-subheading h3{
    padding-top: 0 !important;
    color:var(--color-orange) !important;
    font-size: 21px !important;
  }
  .footer-launch-content .icon{
    display: none;
  }
  .footer-bottom{
    justify-content: center !important;
    gap:24px;
  } 

  .footer-launch-section img:not(.footer-launch-bg) {
    height: 300px;
    object-fit: cover;
  }

  /* Healthcare css */
  .free-trial-banner-card-healthcare{
    padding: 200px 15px 24px 15px;
    background-position: top;
  }
  .icon-feature-item{
    padding: 0px !important;
  }
  .h-support-card{
    border-radius: 18px;
    padding: 20px !important;
  }
  .how-it-works-swiper .h-support-card{
      padding:24px !important;
  }

  .accordion-title{
    font-size: 18px;
  }
  .interactive-demo-iframe {
    height: 480px;
  }
  .management-console-section .tab-details .tab-pane{
      padding:var(--spacing-md);
  }
  
  /* JOURNEY FROM TRIAL SECTION */
  .timeline-section {
    padding: 40px 0px 60px;
    min-height: 90vh;
  }
  
  .timeline-header {
    margin-bottom: 50px;
  }
  
  .timeline-container {
    height: 400px;
    margin-bottom: 50px;
  }
  
  .timeline-header-line1 {
    font-size: 14px;
    letter-spacing: 1.5px;
  }
  
  .timeline-header-line2 {
    font-size: 32px;
  }
  
  .timeline-dot {
    width: 14px;
    height: 14px;
  }
  
  .timeline-milestone.active .timeline-dot {
    width: 18px;
    height: 18px;
  }
  
  .timeline-milestone.active .timeline-dot circle {
    r: 9;
  }
  
  .timeline-label {
    font-size: 12px;
  }
  
  .timeline-milestone.active .timeline-label {
    font-size: 14px;
  }
  
  .timeline-description {
    min-width: 280px;
    max-width: 320px;
    margin-top: 20px;
  }
  
  .timeline-description-title {
    font-size: 18px;
  }
  
  .timeline-description-text {
    font-size: 14px;
  }
  
  .custom-cursor-timeline {
    display: none;
  }
  
  .timeline-section * {
    cursor: pointer;
  }
  
  /* Blog page css */
  .blog-header-section {
        padding: 16px 0 40px;
      }

      .blog-header-title {
        font-size: 24px !important;
      }

      .blog-featured-card {
        padding: 16px !important;
        margin-bottom: 40px;
      }

      .blog-featured-title {
        font-size: 20px;
      }
      .blog-card,.blog-newsletter-card{
        padding: 16px !important;
      }
      .blog-newsletter-description{
        padding-bottom: 24px;
        margin-bottom: 0;
      }
      .blog-newsletter-label{
        font-size: 11px;
      }


      .blog-card-image-wrapper {
        height: 200px;
      }
      .blog-category-badge{
        padding: 5px 11px;
        font-size: 11px;
      }
      .blog-card-date{
        font-size: 12px;
      }
      .blog-card-read-time,.blog-card-icon-text{
        font-size: 10px;
      }
      .blog-pagination{
        margin-top: 24px !important;
      }

      .blog-topics-list {
       margin-bottom: 10px;
       padding-bottom: 20px;
       scrollbar-width: none;
      }

      .blog-topic-pill {
        padding: 6px 16px;
        font-size: var(--fs-12);
      }

      .blog-newsletter-section {
        padding: 60px 0;
      }

      .blog-newsletter-card {
        padding: 32px 24px;
      }

      .blog-newsletter-heading {
        font-size: 20px;
      }

      .blog-newsletter-form {
        flex-direction: column;
        gap: 16px;
      }
      .blog-newsletter-button{
        padding: 8px 16px;
        font-size: 11px;
      }
      .blog-newsletter-disclaimer{
        font-size: 11px !important;
      }

      .blog-newsletter-input-wrapper {
        min-width: 100%;
      }
      .blog-newsletter-input{
          text-align:center;
          font-size:11px;
      }

      .blog-newsletter-button {
        width: 100%;
      }
      
    /*  Blog single page css */
     .blog-single-section {
        padding: 40px 0;
      }

      .blog-single-title {
        font-size: 24px;
      }
      .date-inner{
        font-size: 12px;
      }
      .blog-single-meta-label,.blog-single-meta-links,.blog-single-meta-section a{
        font-size: 12px;
      }

      .blog-single-featured-image {
        margin-bottom: 32px;
      }

      .blog-author-card {
        text-align: left;
        align-items: flex-start !important;
        padding: 16px;
      }
      .blog-author-content h3{
        font-size: 16px;
      }

      .blog-author-avatar {
        margin: 0 auto;
      }

      .blog-related-section {
        padding: 60px 0;
      }

      .blog-related-title {
        font-size: 20px;
        padding: 16px;
      }
      /* Related Resources – Pagination below card */
        .related-resources-swiper .swiper-pagination {
          position: relative;
          bottom: 0;
          margin-top: 16px;
          text-align: center;
        }
        .related-resources-swiper .swiper-pagination-bullet {
          background: rgba(255, 255, 255, 0.4);
          opacity: 1;
        }
        
        .related-resources-swiper .swiper-pagination-bullet-active {
          background: #ffffff;
        }
        
        /* ========== TUTORIALS PAGE CSS ========== */
        .tutorials-header-section {
        padding: 16px 0 40px;
      }

      .tutorials-header-title {
        font-size: 22px !important;
      }

      .tutorials-featured-card {
        padding: 16px !important;
        margin-bottom: 40px;
      }

      .tutorials-featured-title {
        font-size: 20px;
      }

      .tutorials-video-card {
        padding: 16px !important;
      }

      .tutorials-video-card-image-wrapper {
        height: 200px;
      }

      .tutorials-category-badge {
        padding: 5px 11px;
        font-size: 11px;
      }

      .tutorials-video-card-duration {
        font-size: 12px;
      }

      .tutorials-pagination {
        margin-top: 24px !important;
      }

      .tutorials-topics-list {
        margin-bottom: 10px;
        padding-bottom: 20px;
        scrollbar-width: none;
      }
      #videos-grid .tutorials-video-item{
          margin-top:10px !important;
          padding:0 24px !important;
      }

      .tutorials-topic-pill {
        padding: 6px 16px;
        font-size: var(--fs-12);
      }

      .tutorials-play-overlay {
        width: 60px;
        height: 60px;
      }

      .tutorials-play-icon {
        border-left-width: 18px;
        border-top-width: 10px;
        border-bottom-width: 10px;
      }
      .pin-video-thumb{
        height:190px;
        object-fit:cover;
      }
      .tutorials-video-thumbnail{
          height:170px;
      }
      .btn-dark-cream{
        font-size:10px !important;
        width:100%;
      }
      .award-img {
        max-height: 160px;
      } 
      
   .hero-rive-framer {
    width: 160%;
    }
    .timeline-header-line2,
    .timeline-header-line1{
    font-size: 22px !important;
    }


}

@media (max-width: 480px) {
  .footer-rive-wrap {
    display: none !important;
  }
  .timeline-container {
    height: 350px;
  }
  
  .timeline-description {
    min-width: 150px;
    max-width: 280px;
  }
}


/* ========== TABLET AND ABOVE (min-width: 768px) ========== */
@media (min-width: 768px) {
  .brands-row .brand-logo,
  .brands-swiper .brand-logo {
    height: 36px;
  }
  .black-bg{
    background: #000;
    padding: 70px 70px 0 70px;
  }
  .page-template-business .how-it-works-row {
    gap: 80px;
  }
  .pin-video-thumb{
    height:600px;
    object-fit:cover;
  }
}

/* ========== DESKTOP AND ABOVE (min-width: 992px) ========== */
@media (min-width: 992px) {
  .brands-row .brand-logo,
  .brands-swiper .brand-logo {
    height: 60px;
  }

  .testimonial-card {
    padding: var(--spacing-5xl);
  }
  .support-section .container{
      max-width:1074px;
  }
  .btn-dark-cream{
        font-size:12px !important;
        width:135px;
  }
    .custom-width-large{
     width:960px !important;   
  }
  .custom-width{
     width:460px !important;   
  }
}
@media (min-width: 1320px) {
    .btn-dark-cream{
    width:160px;
        font-size:14px;
    }
}