* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  font-size: 1rem;
  font-size-adjust: 0.5;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #333;
}
a{outline: none;}
.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
.navbar .navbar-nav .nav-link{font-size: 0.813rem}
.navbar .btn{font-size: 0.875rem}
#topNav > .nav-item.active > .nav-link {
  border-bottom: 3px solid #0052CC;
  color: #0052CC;
}
.navbar {
  padding: 1rem;
  background: #fff;
  border-bottom: 0.5px solid #ccc !important;
}
.desktop {
  display: block
}
.mobile {
  display: none
}
.spog-space-top {
  padding: 170px 0 80px
}
.sm-bullet{
  width: 6px;
  height: 6px;
  text-align: center;
  color: #fff;
  opacity: 1;
  background: #333;
  border-radius: 100px;
	display: inline-block;
	margin: 0 10px
}
.blue-dot, .comsoom{
  width: 10px;
  height: 10px;
  text-align: center;
  color: #fff;
  opacity: 1;
  background: #0052CC;
  border-radius: 100px;
	display: inline-block;
	margin: 0 10px
}
.comsoom {background: #D9D9D9}
.sm-ai {
  background: url("../images/media/spog_ai.png") no-repeat;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 10px;
  background-size: contain;
}
.spog-sm-title {
  font-size: 14px;
  line-height: 14px;
  background: #fff;
  border: 1px solid #ccc;
  display: inline-flex;
  padding: 6px 16px 6px 12px;
  border-radius: 50px;
  margin-bottom: 20px;
  color: #475569;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
	font-weight: 500!important;
	line-height: 14px
}


.vertical-tabs-container .real-spog-paragraph p{margin-bottom: 0;}
.spog-sm-title span{display: inline-block}
.spog-hero, .navbar-home {
background-image: linear-gradient(to right, #f4f6ff, #f6f8ff, #f9f9ff, #fbfbff, #fdfdff, #fdfdff, #fdfdff, #fdfdff, #fbfbff, #f9f9ff, #f6f8ff, #f4f6ff);
}
.navbar-home{transition: all 0.3s ease;border-bottom: 0!important;}
.scrolled {
      background-color: #fff !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	background-image: unset
    }
a {
  text-decoration: none;
  color: #0052CC;
}
h1 {
  font-size: 2rem;
}
p {
  font-size: 1rem;
}
small {
  font-size: 0.875rem;
}
.font-11 {
  font-size: 0.688rem;
}
.font-13 {
  font-size: 0.813rem;
}
.font-14 {
  font-size: 0.875rem;
}
.font-40 {
  font-size: 2.5rem;
  line-height: 3.125rem;
}
.font-20 {
  font-size: 1.25rem;
  font-weight: 700;
}
.active-color {
  color: #0052CC;
}
.green-color {
  color: #00AC47;
}
.grey-color {
  color: #747E86;
}
.light-grey-color {
  color: #808080;
}
.grey-bg {
  background: #F4F6FF;
}
.font-500 {
  font-weight: 500;
}
.font-600 {
  font-weight: 600;
}
.font-700 {
  font-weight: 700;
}
.integ-small{font-size: 11px;color: #808080;font-weight: 500;text-transform: uppercase;padding-bottom: 8px;}
.integr-title{font-size: 0.875rem;line-height: 18px; color: #000;font-weight: 500;}
.product-slider{overflow: hidden}
.product-thumb{height: 50px}
.vertical-tabs-circle-container .font-14{color: #000}
.comments-in-section {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.bxshadow {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.itsm-thumb {
  width: 450px
}
.demo_form .form-control, .demo_form .form-select, .demo_form label {
  font-size: 13px
}
.comments-in-section .flex-shrink-0 img {
  width: 100px;
  height: 100px;
  border-radius: 100px !important;
}
.comments-in-section h5 {
  font-weight: 500;
}
.comments-in-section {
  position: relative;
  padding: 30px;
}
.comments-user {
  position: absolute;
  right: 20px;
  top: 20px;
}
.dropdown-menu.mega-menu .nav-tabs {
  border-bottom: 0;
}
.dropdown-menu.mega-menu .nav-tabs .nav-item {
  margin-left: 0;
  margin-right: 5%;
}
.dropdown-menu.mega-menu .nav-tabs .nav-link {
  font-size: 1.125rem;
  text-transform: unset;
  padding-left: 0;
  padding-right: 0;
}
.dropdown-menu.mega-menu .nav .nav-item button {
  background-color: #fff;
  color: #B4B4B4 !important;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.dropdown-menu.mega-menu .nav .nav-item button.active {
  background-color: #fff;
  color: #000 !important;
}
.dropdown-menu.mega-menu .nav-tabs .nav-link.active {
  border-bottom: 3px solid #000 !important;
}
.dropdown-mega {
  position: static;
}
.menu-arrow {
  background: url("../images/menu-arrow.png") no-repeat;
  width: 15px;
  height: 8px;
  display: inline-block;
  margin-left: 20px;
}
.sub-menu {
  font-size: 0.75rem;
  color: #000 !important;
  line-height: unset;
  margin-bottom: 16px;
  display: block;
  padding-right: 36px;
  font-family: "Montserrat", sans-serif;
}
.sub-menu .menu-other {
  font-size: 0.875rem !important;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  font-family: "Montserrat", sans-serif;
}
.dropdown-menu.mega-menu .tab-content > .tab-pane .col-md-3 {
  line-height: 16px;
}
.dropdown-menu.mega-menu .nav-tabs {
  margin-bottom: 24px;
}
.sub-menu:hover {
  color: #0052CC !important;
}
.dropdown-menu.mega-menu {
  width: 100%;
  left: 0;
  right: 0;
  top: 100%;
  border: none;
  border-radius: 0;
  padding: 2rem;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.mega-menu h6 {
  font-weight: 600;
  margin-bottom: .75rem;
  color: #0056D2;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
}
.mega-menu a {
  text-decoration: none;
  color: inherit;
}
/* Tabs style */
.nav-tabs .nav-link {
  font-weight: 600;
  color: #555;
  border: none;
}
.nav-tabs .nav-link.active {
  border-bottom: 2px solid #000;
  color: #000;
}
.trust-us-title {
  font-size: 14px;
  font-weight: 400;
  color: #989FB0;
  margin-bottom: 16px;
}
.footer h5 {
  margin-bottom: 1rem;
  color: #000;
  font-size: 0.875rem;
  font-weight: 600;
}
.list-unstyled {
  font-size: 0.813rem;
}
.footer .footer-link {
  text-decoration: none;
  color: #000;
  display: block;
  margin-bottom: 6px;
  transition: color 0.3s;
  font-size: 14px
}
.footer .footer-link:hover {
  color: #0052cc; /* nice hover color */
}
.expert-top {
  margin-bottom: 32px;
  padding-left: 16px
}
.fix-header {
  margin-bottom: -24px
}
.expert-bg {
  background-image: linear-gradient(to right, #051f30, #002e56, #003d7e, #0049a6, #0052cc);
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 30px 0 20px;
}
.expert-body{display: flex;align-items: center;justify-content: space-between;}
.expert-bg img{width: 100px;}
.bookdemo {
  background: #fff;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.navbar-brand {
  display: inline-block;
  background: url("../images/spog_logo.png") no-repeat center;
  background-size: contain;
  width: 120px;
  height: auto;
  aspect-ratio: 5 / 1;
}
.navbar-brand span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}
.nav-item {
  margin: 0 20px;
}
.spog-white-bg {
  background-color: #fff;
}
.spog-blue-bg {
  background-color: #F4F6FF;
}
.how-work-blocks .work-title {
  margin: 30px 0 10px;
  text-align: left;
}
.how-work-blocks .work-descrition {
  text-align: left;
  margin-bottom: 20px
}
.how-work-blocks a.knowmore{font-size: 1.125rem; color: #0052CC;font-weight: 700;display: block;padding-bottom: 10px}
.how-work-blocks .card-body{padding: 24px}
.rounded-btn{white-space: nowrap}
.vertical-tabs-container .nav-pills .nav-link img{height: 36px;margin: 0 auto}
.how-work-blocks .work-title span {color: #7C7C7C;}
.vertical-tabs-container .card .col-md-4 img{border-radius: 0;border-top-right-radius: 8px; border-bottom-right-radius: 8px}
.swiper {
  width: 100%;
  height: 100%;
  position: relative;
  margin-bottom: 30px;
}
.swiper-fraction {
  color: #000;
  position: absolute;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 10;
  padding: 10px 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
}
.swiper-slide {
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper .swiper-pagination * {
  background: #0052CC;
}
.swiper-pagination-progressbar {
  border-radius: 10px
}
.real-customer-sm .swiper-slide img {
  display: block;
  object-fit: cover;
  height: 76px;
}
.real-customer-sm .swiper-slide .card-body{padding: 16px 20px 20px 20px;}
.real-customer-sm .swiper-slide .card-body .rounded-btn {border-radius: 4px!important;}
.swiper-button-prev, .swiper-button-next {
  color: #000;
}
.swiper-button-next:after, .swiper-button-prev:after {
  text-indent: -9999px;
  font-size: 0.875rem;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-next {
  position: absolute;
  top: auto;
  bottom: 6px;
  background: url("../images/next-arrow.png") no-repeat;
  width: 22px;
  height: 22px;
}
.swiper-button-prev {
  top: auto;
  bottom: 6px;
  background: url("../images/prev-arrow.png") no-repeat;
  width: 22px;
  height: 22px;
}
.swiper-button-prev {
  left: auto;
  right: 40px;
}
.swiper-button-next {
  left: auto;
  right: 0;
}
.swiper .swiper-pagination * {
  background: #0052CC !important;
}
.how-work-section .swiper-backface-hidden .swiper-slide {
  margin-bottom: 60px;
  text-align: left;
}
.product-slider .swiper-backface-hidden .swiper-slide{margin-bottom: 0!important}
.product-slider .swiper-pagination{bottom: 30px}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  text-align: center;
  color: #fff;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100px
}
.swiper-pagination-bullet-active {
  color: #fff;
  background: #0052CC !important;
}
.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0 !important;
  bottom: 0 !important;
  top: inherit
}
/* First slider - Bullet pagination */
.products-slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #3498db;
  opacity: 0.5;
  transition: all 0.3s ease;
}
.products-slider .swiper-pagination-bullet-active {
  opacity: 1;
  background: #2c3e50;
}
/* Second slider - Progress bar */
.progress-slider .swiper-pagination-progressbar {
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  margin-top: 20px;
}
.progress-slider .swiper-pagination-progressbar-fill {
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 2px;
}
.spog-title {
  margin-bottom: 10px;
}
.how-work-section {
  margin-top: 60px;
}
.page-space {
  padding: 120px 0;
}
.nav-link {
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}
.btn-primary {
  color: #fff;
  background-color: #0052CC;
  border-color: #0052CC;
  font-weight: 600;
  padding: 6px 18px;
}
.rounded-btn {
  border-radius: 100px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.spog-space {
  padding: 100px 0;
}
.spog-sm-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: #333;
}
.spog-title {
  color: #000;
  line-height: normal;
}

.navbar-toggler-icon {
  width: 1.25em;
  height: 1.25em;
}
.navbar-toggler {
  border: none;
  padding: 0;
  outline: none;
}
.vertical-tabs-container {
  overflow: hidden;
}
.vertical-tabs-container .flex-shrink-0 {
  width: 8%;
}
.vertical-tabs-container .tabs-blocks {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.vertical-tabs-container .nav-pills .nav-link{padding: 10px 24px;}
.vertical-tabs-container .nav-pills .nav-link {
  border-radius: 0;
  padding: 21px 0 21px 20px;
  color: #495057;
  border-bottom: 0px solid transparent;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  border-right: 1px solid #ccc;
}
.vertical-tabs-container .nav-pills .nav-link:last-child{border-right: 0}
.vertical-tabs-container .nav-pills .nav-link i {
  margin-right: 10px;
  font-size: 1.2rem;
}
.vertical-tabs-container .nav-pills .nav-link.active {
  background-color: #EEEBFD;
}
.vertical-tabs-container .tab-content {
  padding: 0;
}
.vertical-tabs-container .tab-pane {
  display: none;
  height: 100%;
  border-radius: 8px
}
.vertical-tabs-container .nav-link {
  margin-right: 0;
}
.vertical-tabs-container .tab-content .spog-paragraph {
  font-size: 1rem;
  color: #000;
}
.vertical-tabs-container .tab-pane.active {
  display: block;
  animation: fadeIn 0.5s ease-in;
  height: 100%;
  overflow: hidden;
}
.trust-secondary {
  color: #989FB0;
  font-size: 16px;
  font-weight: 600;
}
.vertical-tabs-container .tab-pane.active {
  display: block;
  animation: fadeIn 0.5s ease-in;
  height: 100%;
  overflow: hidden;
}
.testimonial-card {
  background: #f5f8fc;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 1.5rem 3rem 1rem 3rem;
}

.attribution {
  font-size: 0.875rem;
  font-weight: 500;
  color: #555;
  margin: 6px 0;
}
.color-333 {
  color: #333;
}
.real-customer {
  overflow: hidden;
}
.nav .nav-item button.active {
  background-color: #fff;
  color: #0052CC !important;
}
.nav .nav-item button.active::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  border-radius: 0;
}
.nav .nav-item button.active::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  border-radius: 0;
}
.nav-tabs .nav-link.active {
  border-bottom: 3px solid #0052CC !important; /* Use your preferred color */
  background-color: #fff;
  border-radius: 0;
  color: #0052CC;
}
.whoisfor .nav-item {
  margin: 0 40px 0 0
}
.whoisfor .nav-pills .nav-link {
  padding-left: 0;
  padding-right: 0;
}
.whosthumb {
  width: 110px;
	border-radius: 4px
}
.whosTitle {
  margin-bottom: 12px;
}

.whosblock {
     margin-bottom: 32px;
 }
.whoisfor .nav-tabs, .prebuilt-integration-section .nav-tabs {
  border: 0;
  margin-bottom: 24px
}

.whoisfor .nav-link:last-child
.faqs-section .nav-link:last-child {
  margin-right: 0
}
.whoisfor .nav-link,
.faqs-section .nav-link {
  color: #000;
  padding: 10px 0;
  margin-right: 4%;
  border: 0;
  outline: 0;
  border-bottom: 3px solid transparent;
  text-transform: unset;
}
.whoisfor .nav-item {
  margin: 0 40px 0 0
}
.faqs-section .nav-item {
  margin: 0 40px 0 0
}
.faqs-section .nav-link {font-size: 1.5rem;line-height: 24px;font-weight: 500;}
.nav-tabs{border-bottom: 0;}

.whoisfor .nav-pills .nav-link,
.faqs-section .nav-pills .nav-link {
  padding-left: 0;
  padding-right: 0;
}
.nav-tabs-scroll-container .nav-tabs .nav-link.active,
.faqs-section .nav-tabs .nav-link.active {
  background-color: transparent;
}
.whosblock {
  text-align: left;
}
.vertical-tabs-circle-container .nav-link {
  margin-right: 0;
}
.vertical-tabs-circle-container {
  overflow: hidden;
	border-radius: 8px
	
}
.integ-linear-bg{background-image: linear-gradient(to right, #ffffff, #fcfcff, #f9f9fe, #f6f7fe, #f2f4fe);}
.vertical-tabs-circle-container .tabs-blocks {
  border-radius: 0px;
}
.vertical-tabs-circle-container .nav-pills .nav-link {
  border-radius: 0;
  padding: 8px 0px 8px 16px;
  color: #808080;
  border: 0;
  transition: all 0.3s;
  display: flex;
  align-items: flex-start;
  text-align: left;
	font-size: 1.125rem;
	line-height: unset;
	text-transform: unset;
	font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
	width: 100%
}
.checkbold{background: url("../images/media/check-bold.png") no-repeat;height: 13px;width: 16px;display: inline-block;padding-right: 10px}

.vertical-tabs-circle-container .integr-desc{font-size: 12px!important}
.question-block span{display: inline-block}
.question-block ul{list-style: none;padding: 0;margin: 0;}
.question-block ul li{margin-bottom: 16px;}
.question-block ul li img{height: 24px;object-fit: contain;}
.question-answer{display: flex;align-items: center;}
.question-block ol{list-style: decimal;padding: 0 0 0 16px;margin: 0;}
.question-block ol li{margin-bottom: 16px;}
.question-block ol li img{height: 24px;object-fit: contain;}
.question-answer{display: flex;align-items: center;gap: 10px;}
.question-answer .form-check{margin-bottom: 0;margin-right: 6%;}
.question-block .question-title{font-family: "Montserrat", sans-serif;font-size: 14px;font-weight: 400;margin-bottom: 12px;}
.question-block label {display: inline-block;font-size: 13px;color: #1a1a1a;}
.question-block-footer{background: #f5f8fc;}


.vertical-tabs-circle-container .nav-pills .nav-link i {
  margin-right: 10px;
  font-size: 1.2rem;
}
.vertical-tabs-circle-container .nav-pills .nav-link.active {
  background-color: transparent;
	color: #0052CC
}
.vertical-tabs-circle-container .nav-pills .nav-link img {
  border: 1px solid #ccc;
  border-radius: 100%;
  width: 90px;
  height: 90px;
}
.comma-left{width: 44px;height: 44px; background-size: contain;}
.vertical-tabs-circle-container .tab-content {
  padding: 0;
  /*height: 430px;*/
  overflow-y: hidden;
}
.vertical-tabs-circle-container .tab-pane {
  display: none;
  overflow: hidden;
}
.card-body{text-align: left}
.vertical-tabs-circle-container .tab-pane.active {
  display: block;
  animation: fadeIn 0.5s ease-in;
  overflow: hidden;
}
.vertical-tabs-circle-container .nav-pills {
 /* overflow-y: auto;
  height: 430px;*/
}

.integ-block {
  position: relative;
  overflow: hidden;
}
.integ-block p, .integ-block a {
  font-size: 0.875rem;
}
.integ-block p{color: #000}
.sm-ico-int {
  position: absolute;
  right: 0px;
  top: 0px;
}
.vertical-tabs-circle-container .sm-integ {
  width: 50px;
}
.circle-pre {
  margin-bottom: 16px
}
.integ-description{font-size: 1.25rem;font-weight: 400;color: #000;margin-bottom: 30px}
.integ-sml-title{font-size: 1.375rem;font-weight: 600;color: #000;margin-bottom: 10px}
.circle-pre img {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: 1px solid #ccc;
}
.spog-space-top .carousel-indicators {
  top: 80px
}
.accordion-body{font-size: 0.875rem}
.spog-space-top .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 0;
  border-radius: 50px
}
section {
  padding: 0 1rem;
  position: relative
}
.navbar-toggler:focus, .btn-close:focus {
  box-shadow: unset;
  outline: 0
}
section.expert {
  padding: 3rem 0 0
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Add some spacing for better appearance */
.tab-content {
  padding: 20px 0 0;
}

.btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 111
}
.accordion-button:focus {
  border-color: unset;
  box-shadow: unset
}

.offcanvas.offcanvas-end{width: 100%}
.integ-prebuilt .nav-link{text-transform: unset;padding-left: 0;padding-right: 0;margin-right: 4%}
.offcanvas-body .text-end{text-align: left!important}
.arrowup{background: url("../images/media/arrow-right-up.png") no-repeat;width: 16px; height: 16px;display: inline-block;margin-bottom: -5px;background-size: contain}
.arrowup-clcik{background: url("../images/media/arrow-right-up-blue.png") no-repeat;width: 16px; height: 16px;display: inline-block;margin-bottom: -5px;background-size: contain}

.arrow-link {display: inline-flex;align-items: center;font-size: 12px;font-weight: 400;color: #000;text-decoration: none;position: relative;}
.arrow-link::before {content: "";display: inline-block;width: 20px;height: 20px;background: url("../images/media/arrow-right.png") no-repeat center;background-size: contain; }


.check-list {display: flex;align-items: center;font-size: 20px;font-weight: 400;color: #000;text-decoration: none;position: relative;}
.check-list::before {content: "";display: inline-block;width: 24px;height: 24px;background: url("../images/media/checklist.png") no-repeat center;background-size: contain; margin-right: 10px;}

.work-thumb{height: 128px; margin: 30px auto;margin-bottom: 40px}
.how-work-section .card{background-color: #fff; border: 2px solid #ccc!important;position: relative;border-radius: 10px;transition: all 0.3s ease-in-out;}
.work-number {position: absolute; top: -12px;  left: 50%;transform: translateX(-50%);display: flex;align-items: center;justify-content: center; width: 36px; height: 20px;text-align: center}
.work-number span{font-family: "Poppins", sans-serif;font-weight: 500;font-style: normal;font-size: 1.25rem;line-height: 24px;color: #7C7C7C;background-image: linear-gradient(to bottom, #f4f6ff, #f7f8ff, #fafaff, #fdfdff, #ffffff);padding: 0 16px;border-radius: 3px}
.how-work-section .card:hover{background-color: #fff;border: 2px solid #0052CC!important;box-shadow: 0px 6px 15px rgba(0,0,0,0.1);}
.available-integr{background: #F5F9FC; border: 1px solid #0052CC;border-radius: 100px}
.click-intgr {font-size: 1.125rem;font-weight: 500;color: #0052CC}
.how-work-section .card:hover .work-title{color: #0052CC}
.how-work-section .card:hover .work-descrition{color: #000}
.how-work-section .card:hover .work-thumb img {filter: invert(17%) sepia(100%) saturate(7475%) hue-rotate(213deg) brightness(92%) contrast(101%);
}
.work-thumb img {transition: opacity 0.3s ease;}
.integration-main-title{position: relative; border-bottom: 1px solid #ccc;margin-bottom: 32px}
.integration-main-title span{position: absolute;background: #fff; left: 50%;transform: translateX(-50%);display: flex;align-items: center;justify-content: center;font-size: 1.5rem;top: -22px; padding: 0 12px}
.iintegration-slider{display: inline-block; margin-right: 12px}
.iintegration-slider img {max-height: 44px}
.integ-subtitle{font-size: 10px; font-weight: 400; color: #808080}
.integration-block{width: 130px; height: 155px; padding: 16px 12px;border: 1px solid #ccc;border-radius: 8px;margin-bottom: 0px;}
.integration-block img{width: 36px; height: 36px; object-fit: contain;}
.integrations-thumbs-new{margin-bottom: 1.5rem;}
.integrations-block-title{font-size: 1.125rem; line-height: 24px; font-weight: 600; color: #000; margin-bottom: 4px;}
.integrations-block-desc{font-size: 0.75rem; font-weight: 400; color: #000;line-height: 16px;}

.spog-testimnials .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0052CC;
}
.spog-testimnials .carousel-indicators .active {
  opacity: 1;
}
.spog-testimnials .carousel-indicators {
  top: 80px;
  display: none;
}
.integration-card{max-height: 550px;}
.marquee-wrapper {
  display: flex;
  flex-direction: column;
}

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee::before,
.marquee::after {
  position: absolute;
  top: 0;
  width: 0;
	left: 0;
  height: 100%;
  content: "";
  z-index: 11;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  animation: scrolling linear infinite;
}

.marquee.reverse .marquee-content {
  animation: scrolling-reverse linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--slide-width) * var(--slide-count)));
  }
}

@keyframes scrolling-reverse {
  0% {
    transform: translateX(calc(-1 * var(--slide-width) * var(--slide-count)));
  }
  100% {
    transform: translateX(0);
  }
}

.marquee-content .integration-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 125px; /* fixed width per slide */
  height: 100%;
  padding: 0 6px 0 0;
}

.marquee-content .integration-slider img {
  max-height: 44px;
  max-width: 100%;
  object-fit: contain;
	border: 1px solid #ccc;
	border-radius: 6px
}
.marquee.product-slider .marquee-content .integration-slider img {
  max-height: 44px;
  max-width: 100%;
  object-fit: contain;
	border: 0px solid #ccc;
	border-radius: unset
}
.marquee.product-slider .marquee-content .integration-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 220px; /* fixed width per slide */
  height: 100%;
  padding: 0 3rem;
}
.marquee-content .integration-slider.active img{border: 2px solid #0052CC}
.marquee.vertical .marquee-content {
  flex-direction: column; /* Stack items vertically */
}
@keyframes scrolling-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-1 * var(--slide-height) * var(--slide-count)));
  }
}

@keyframes scrolling-vertical-reverse {
  0% {
    transform: translateY(calc(-1 * var(--slide-height) * var(--slide-count)));
  }
  100% {
    transform: translateY(0);
  }
}

/* Vertical scrolling up */
@keyframes scrolling-vertical {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(-1 * var(--slide-height) * var(--slide-count))); }
}

/* Vertical scrolling down (reverse) */
@keyframes scrolling-vertical-reverse {
  0%   { transform: translateY(calc(-1 * var(--slide-height) * var(--slide-count))); }
  100% { transform: translateY(0); }
}

.marquee {
  overflow: hidden;
  position: relative;
}
.marquee-content {
  display: flex;
  gap: 0.5rem;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.marquee.vertical .marquee-content {
  flex-direction: column; /* stack items vertically */
}
.small-integration .card{max-height: 500px; overflow: hidden;}
@media (max-width: 768px) {
  .marquee-content .integration-slider {
    width: 125px; /* smaller per-slide width on mobile */
  }
}
.marquee.vertical .marquee-content .integration-slider img{height: 30px!important;}
.accordion.faqs-spog .accordion-item:first-of-type {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}
.accordion.faqs-spog .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}

.accordion.faqs-spog .accordion-item:last-of-type {
    border-bottom-right-radius: unset;
    border-bottom-left-radius: unset;
}
.accordion.faqs-spog .accordion-body {padding: 0; font-size: 1rem;color: #322d2b}
.accordion.faqs-spog .accordion-button:not(.collapsed) {
    color: #4F4F4F;
    background-color: #fff;
    box-shadow: unset;
    margin-bottom: 16px;
}

.accordion.faqs-spog .accordion-button{padding: 0 0 16px}
.accordion.faqs-spog .accordion-item {
    color: #000;
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid #ccc;
	padding: 2rem 0
}
.accordion.faqs-spog .accordion-button {
    padding: 0;
}
.accordion.faqs-spog .accordion-collapse.collapse.show {
	padding-bottom: 0
}
.accordion-button:not(.collapsed){
  color: #0c63e4;
  background-color: #e7f1ff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
} 
.accordion.faqsspog-new .accordion-button::after{
  content: "+";
  display: inline-flex;         /* make the pseudo-element a flexbox so + can be centered */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  margin-left: 12px;
}

/* Change to minus when expanded */
.accordion.faqsspog-new .accordion-button:not(.collapsed)::after {
  content: "−"; /* Minus symbol */
}
.faqs-section .accordion-button::after {
  order: -1; 
  margin-right: 16px;
  margin-left: 0;
}
.accordion.faqsspog-new .accordion-button:not(.collapsed), .accordion.faqsspog-new .accordion-button.collapsed {
  font-size: 1.125rem;
  font-weight: 500;
  color: #4F4F4F;
}
.accordion.faqsspog-new .accordion-collapse.collapse.show{background-color: #EDF3F9;}
.accordion.faqsspog-new .accordion-button:not(.collapsed) {
  color: #333;
  background-color: #EDF3F9;
  box-shadow: unset;
  padding-bottom: 10px;
}
.accordion.faqsspog-new .accordion-body {
  font-size: 1rem;
  line-height: 22px;
  padding: 0 30px 20px 60px;
  background-color: #EDF3F9;
}
.accordion.faqsspog-new .accordion-body .click-intgr{font-size: 0.875rem;display:block;margin-top: 12px;}
.faqsspog-new .accordion-button{padding: 20px 10px;}
.accordion-slider {
	display: flex;
	width: 100%;
	height: 480px;
	overflow: hidden;
}
.accordion-slider .accordion-items {
	flex: 1;
	background: #fff;
	margin-right: 16px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	color: #212529;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.5s ease;
	overflow: hidden;
	padding: 30px;
	text-align: left;
	position: relative
}
.accordion-slider .accordion-items:last-child{margin-right: 0}
.accordion-slider .accordion-items .step-number {
	font-size: 3.75rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	color: #000;
}
.accordion-slider .accordion-items .step-title {
	font-size: 1.375rem;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	color: #000;
	margin-bottom: 6px;
  line-height: 28px;
}
.accordion-slider .accordion-items .step-description {
	font-size: 1.125rem;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	line-height: normal;
	color: #000;
	margin-bottom: 24px
}
.accordion-slider .accordion-items .step-active-description {
	font-size: 1rem;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	line-height: normal;
	color: #000;
	display: none;
	width: 80%
}
.accordion-slider .step-btn {
	position: absolute;
	left: 30px;
	bottom: 30px;
	font-size: 1.125rem;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
}
.accordion-slider .accordion-items.active {
	flex: 3;
	background: #BCDFFF;
	color: #000;
}
.accordion-slider .accordion-items.active br {
	display: none
}
.accordion-slider .accordion-items.active .step-active-description {
	display: block
}
/* Always show content */
.accordion-items .slider-content {
	opacity: 01;
	transition: opacity 0.3s ease;
}
.accordion-items.active .slider-content {
	opacity: 1;
}
.accordion-items h2 {
	font-size: 2rem;
	margin-bottom: 10px;
}
.accordion-items p {
	margin-bottom: 0;
	font-size: 1.1rem;
}
.accordion-items.active p {
	font-size: 1.2rem;
}
.accordion-slider .step-check {
	width: 22px;
	height: 22px
}
@media (max-width: 768px) {
  .accordion-slider {
    flex-direction: column;
    height: auto; /* let items expand naturally */
  }

  .accordion-slider .accordion-items {
    flex: none;
    width: 100%;
	  height: 100%;
    transition: all 0.4s ease;
	  margin-right: 0;
	  margin-bottom: 10px
  }

  .accordion-slider .accordion-items.active {
    height: 100%;
  }
	.accordion-slider .step-btn {position: unset}
	.accordion-slider .accordion-items .step-active-description {width: 100%}
}
/* Override Bootstrap accordion icon */

.spog-testimnials{text-align: left;}
.spog-testimnials .review-info { display: none; }
.spog-testimnials .review-info.active { display: block; margin-left: 16px; }

/* your existing styles */
.spog-testimnials .review-avatar { position: relative; text-align:left; cursor:pointer; transition: transform .3s ease; }
.spog-testimnials .review-avatar img { width:90px; height:90px; object-fit:cover; transition: transform .3s ease;border: 2px solid #fff;margin-left: 10px;}
.spog-testimnials .nav-link{border: 0; outline: 0;background-color: #fff;}
.spog-testimnials .brand-img{width: 80px!important;height: 26px!important; margin-bottom: 4px;border: 0!important}
.spog-testimnials .review-info {
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(10px);
font-size: 14px;
position: relative;
	margin-left: 20px
}
.spog-testimnials .nav-item{margin:32px 0;padding:0;}
.spog-testimnials small {
  font-size: 13px;
  text-transform: capitalize;
  color: #333;
  font-weight: 400;
}
.spog-testimnials .nav .nav-item button{padding: 0;}
.spog-testimnials h6, h6 {
  font-size: 14px;
  text-transform: capitalize;
  color: #000;
  font-weight: 600;
}
.sm-grey.fst-italic{font-size: 13px;}
.spog-testimnials .review-info.active {
opacity: 1;
transform: translateY(0);
}

/* Triangle only when .review-info is active */
.spog-testimnials .review-info.active::before {
content: "";
position: absolute;
top: -32px;
left: -60px;
transform: translateX(-50%);
width: 0;
height: 0;

border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid #0d6efd; /* Bootstrap primary blue */
}
.testimonial-description {
border-bottom: 1px solid #ccc;
padding-bottom: 1.5rem;
margin-bottom: 16px;
font-size: 1.5rem;
font-family: "Montserrat", sans-serif;
font-weight: 300;
font-style: normal;
}
.spog-testimnials .nav .nav-item button.active {
  background-color: transparent;
  color: #0052CC !important;
}
.spog-testimnials .nav-link{background-color: transparent;}
.spog-testimnials .nav-link.active .review-info {
    display: block
}
.sm-grey{font-size: 14px;color: #000;text-transform: unset;font-weight: 400;}
.spog-testimnials .nav-link{text-transform: unset;font-weight: 400;}
#triangleIndicator {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #0d6efd;
    transition: left 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    pointer-events: none;
    z-index: 5;
}
/* Avatar buttons */
#carouselTabs .nav-link {
    transition: all 0.35s ease;
    opacity: 0.7;
}
/* Active avatar highlight */
#carouselTabs .nav-link.active {
    opacity: 1;
    transform: scale(1.08);
}
#carouselTabs .nav-link.active .rounded-circle {
    box-shadow: 0 0 0 4px ;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}
/* On hover (for inactive avatars) */
#carouselTabs .nav-link:hover {
    opacity: 0.9;
}










@media (max-width: 768px) {
  .nav-tabs-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .nav-tabs-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }
  .nav-tabs-scroll .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Optional: Add visual indicator for scrollability */
  .nav-tabs-scroll-container {
    position: relative;
  }
  .nav-tabs-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
  }
}

@media (max-width: 991px) {  /* Small screens */
  .offcanvas .nav-link {
    display: flex;
    justify-content: space-between; /* pushes arrow to right */
    align-items: center;
  }

  .offcanvas .nav-link::after {
    content: "›";  /* Right arrow */
    font-size: 22px;
    color: #333;
    transition: transform 0.3s ease;
	margin-right: 16px
  }

  /* If dropdown is open, rotate arrow */
  .offcanvas .nav-item.show .nav-link::after {
    transform: rotate(90deg);
  }
}